/* assets/css/pmswt-playlist.css - LAYOUT PLAYER + PLAYLIST YOUTUBE STYLE */

/* ======================================================
 * DESKTOP: Layout orizzontale 65% player + 35% playlist
 * ======================================================
 */
@media (min-width: 769px) {
	.pmsyt-root--playlist {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: calc(var(--pmsyt-unit) * 0.8);
	}

	/* Header contiene solo il player main (65%) */
	.pmsyt-root--playlist .pmsyt-header {
		flex: 0 0 65%;
		max-width: 65%;
		display: block;
	}

	/* Wrapper main al 100% del suo contenitore */
	.pmsyt-root--playlist .pmsyt-wrapper--main {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
	}

	/* NASCONDO prev/next su desktop - ora usiamo solo playlist */
	.pmsyt-root--playlist .pmsyt-wrapper--prev,
	.pmsyt-root--playlist .pmsyt-wrapper--next {
		display: none !important;
	}

	/* Carosello come sidebar destra (35%) */
	.pmsyt-root--playlist .pmsyt-playlist-carousel {
		flex: 1 1 35%;
		max-width: 35%;
		min-width: 35%;
		margin-top: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* Altezza ridotta per mostrare ~3.5 elementi */
		height: calc(58vw * 0.5625);
		max-height: calc(58vw * 0.5625);
	}

	/* Intestazione carosello desktop */
	.pmsyt-root--playlist .pmsyt-carousel-header {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: calc(var(--pmsyt-unit) * 0.5);
		margin: 0;
		padding: calc(var(--pmsyt-unit) * 0.55) calc(var(--pmsyt-unit) * 0.5);
		font-size: calc(var(--pmsyt-unit) * 0.72);
		font-weight: 500;
		letter-spacing: 0.02em;
		color: #0f3669;
		background: transparent;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pmsyt-root--playlist .pmsyt-carousel-header::before {
		content: "";
		flex: 0 0 auto;
		width: calc(var(--pmsyt-unit) * 0.15);
		height: calc(var(--pmsyt-unit) * 0.8);
		background: #0f3669;
		border-radius: 2px;
	}

	/* Track verticale per desktop - circa 3.5 elementi visibili */
	.pmsyt-root--playlist .pmsyt-playlist-track {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: calc(var(--pmsyt-unit) * 0.4);
		padding: calc(var(--pmsyt-unit) * 0.35);
		padding-right: calc(var(--pmsyt-unit) * 0.15);
		margin-left: 0;
		white-space: normal;
		overflow-x: hidden;
		overflow-y: auto !important;
		scroll-behavior: smooth;
		cursor: default;
		flex: 1 1 auto;
		height: 100%;
		/* Scrollbar a sinistra */
		direction: rtl;
		scrollbar-width: thin;
		scrollbar-color: rgba(148, 163, 184, 0.5) rgba(148, 163, 184, 0.15);
	}

	/* ITEM PLAYLIST DESKTOP: più grande per mostrare ~3.5 elementi */
	.pmsyt-root--playlist .pmsyt-playlist-item {
		direction: ltr; /* Ripristina direzione testo */
		flex: 0 0 auto;
		max-width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: calc(var(--pmsyt-unit) * 0.5);
		padding: calc(var(--pmsyt-unit) * 0.4);
		border-radius: calc(var(--pmsyt-radius-inner) * 0.4);
		border: none;
		background: transparent;
		box-shadow: none;
		opacity: 0.7;
		transition: opacity 0.15s, background 0.15s;
	}

	.pmsyt-root--playlist .pmsyt-playlist-item:hover {
		opacity: 1;
		background: rgba(148,163,184,0.08);
		transform: none;
		box-shadow: none;
	}

	.pmsyt-root--playlist .pmsyt-playlist-item--active {
		opacity: 1;
		background: rgba(15,54,105,0.2);
		border-left: 3px solid #0f3669;
	}

	/* Thumb wrapper desktop */
	.pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper {
		position: relative;
		flex: 0 0 35%;
		max-width: 35%;
		min-width: 80px;
		overflow: hidden;
		border-radius: calc(var(--pmsyt-radius-inner) * 0.4);
		aspect-ratio: 16 / 9;
	}

	.pmsyt-root--playlist .pmsyt-playlist-thumb-img {
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		transform: scale(1.01);
		transition: transform 0.15s;
	}

	.pmsyt-root--playlist .pmsyt-playlist-item:hover .pmsyt-playlist-thumb-img {
		transform: scale(1.03);
		filter: none;
	}

	/* Effetto riflesso luce sulle thumbnail del carosello */
	.pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper::after {
		content: "";
		position: absolute;
		top: -20%;
		left: -150%;
		width: 80%;
		height: 140%;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.15) 25%,
			rgba(255, 255, 255, 0.35) 50%,
			rgba(255, 255, 255, 0.15) 75%,
			transparent 100%
		);
		transform: skewX(-25deg);
		pointer-events: none;
		z-index: 10;
		transition: left 0.5s ease-out;
	}

	.pmsyt-root--playlist .pmsyt-playlist-item:hover .pmsyt-playlist-thumb-wrapper::after {
		left: 150%;
	}

	/* Titolo desktop */
	.pmsyt-root--playlist .pmsyt-playlist-title {
		flex: 1 1 auto;
		white-space: normal;
		font-size: 0.85em;
		line-height: 1.35;
		padding: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Scrollbar desktop - sempre visibile a sinistra */
	.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar {
		width: 6px;
		height: auto;
	}

	.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-track {
		background: rgba(148, 163, 184, 0.15);
		border-radius: 999px;
	}

	.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, 0.5);
		border-radius: 999px;
	}

	.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-thumb:hover {
		background: rgba(148, 163, 184, 0.7);
	}

	/* Firefox scrollbar */
	.pmsyt-root--playlist .pmsyt-playlist-track {
		scrollbar-width: thin;
		scrollbar-color: rgba(148, 163, 184, 0.5) rgba(148, 163, 184, 0.15);
	}
}

/* FALLBACK RIMOSSO - ora tutto è gestito nei media query desktop/mobile */

/* STRATI: VIDEO YT, COVER, TEASER LOOP, WELCOME */
.pmsyt-video-area .pmsyt-video-container {
	z-index: 3;
}

.pmsyt-video-area .pmsyt-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.pmsyt-video-area .pmsyt-cover.pmsyt-cover--noimg {
	background-color: var(--pmsyt-color-bg-cover-fallback, #0f172a);
}

/* Cover Image (LCP optimized) */
.pmsyt-video-area .pmsyt-cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* video MP4 in loop */
.pmsyt-video-area .pmsyt-teaser {
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	object-fit: cover;
	object-position: 50% 50%;
	z-index: 5;
	opacity: 1;
	transition: opacity .25s ease;
}

/* immagine di benvenuto sopra il teaser */
.pmsyt-video-area .pmsyt-teaser-welcome {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity .35s ease;
	pointer-events: none;
}

/* quando il JS nasconde il teaser */
.pmsyt-video-area .pmsyt-teaser.pmsyt-teaser--hidden,
.pmsyt-root .pmsyt-teaser.pmsyt-teaser--hidden {
	opacity: 0;
	pointer-events: none;
}

/* quando il JS nasconde la welcome */
.pmsyt-video-area .pmsyt-teaser-welcome.pmsyt-teaser-welcome--hidden,
.pmsyt-teaser-welcome.pmsyt-teaser-welcome--hidden {
	opacity: 0;
}

/* ITEM CAROSELLO - Base (ereditato da media queries desktop/mobile) */
.pmsyt-root--playlist .pmsyt-playlist-item {
	display: flex;
	cursor: pointer;
	transition:
		opacity 0.16s ease-out,
		background 0.16s ease-out;
}

/* PLACEHOLDER SE NON C'E' IMMAGINE */
.pmsyt-root--playlist .pmsyt-playlist-thumb-placeholder {
	display: block;
	width: 100%;
	padding-top: 56.25%;
	background: var(--pmsyt-color-bg-cover-fallback);
}

/* TITOLO */
.pmsyt-root--playlist .pmsyt-playlist-title {
	display: block;
	padding: calc(var(--pmsyt-unit) * 0.35) calc(var(--pmsyt-unit) * 0.5)
	calc(var(--pmsyt-unit) * 0.55);
	line-height: 1.25;
	white-space: normal;
}


/* ======================================================
 * TABLET VERSION (769px - 1024px)
 * ======================================================
 */
@media (min-width: 769px) and (max-width: 1024px) {
	.pmsyt-root {
		--pmsyt-unit: 2vw;
	}
	/* Playlist sidebar usa le stesse regole desktop */
}

/* ======================================================
 * MOBILE VERSION (≤768px) - Layout verticale
 * Player 100% + Playlist sotto
 * ======================================================
 */
@media (max-width: 768px) {

	.pmsyt-root {
		--pmsyt-unit: 4vw;
	}

	/* Ombra player ridotta su mobile */
	.pmsyt-root .pmsyt-video-area {
		box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	}

	/* ============================================
	   LAYOUT PLAYLIST MOBILE: colonna verticale
	   ============================================ */
	.pmsyt-root--playlist {
		display: flex !important;
		flex-direction: column !important;
	}

	/* Header contiene solo il player main (100%) */
	.pmsyt-root--playlist .pmsyt-header {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		display: block !important;
	}

	/* Main sempre al 100% */
	.pmsyt-root .pmsyt-wrapper--main,
	.pmsyt-root--with-siblings .pmsyt-wrapper--main,
	.pmsyt-root--playlist .pmsyt-wrapper--main {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
	}

	/* NASCONDO prev/next - ora usiamo solo playlist in tutti i casi */
	.pmsyt-root--playlist .pmsyt-wrapper--prev,
	.pmsyt-root--playlist .pmsyt-wrapper--next,
	.pmsyt-root--with-siblings .pmsyt-wrapper--prev,
	.pmsyt-root--with-siblings .pmsyt-wrapper--next {
		display: none !important;
	}

	/* ============================================
	   MAIN PLAYER: titolo sotto (se visibile)
	   ============================================ */
	.pmsyt-root .pmsyt-wrapper--main .pmsyt-title-wrap {
		z-index: 3;
		position: relative;
	}

	.pmsyt-root .pmsyt-wrapper--main .pmsyt-title {
		display: block !important;
		position: static;
		background: transparent;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	/* ============================================
	   PLAYLIST CAROUSEL MOBILE: sotto il player
	   ============================================ */
	.pmsyt-root--playlist .pmsyt-playlist-carousel {
		position: relative;
		flex: 1 1 auto;
		max-width: 100%;
		margin-top: calc(var(--pmsyt-unit) * 0.5);
		padding-top: 0;
		border-top: none;
		background: transparent;
		overflow: hidden;
	}

	/* Intestazione carosello mobile */
	.pmsyt-root--playlist .pmsyt-carousel-header {
		display: flex;
		align-items: center;
		gap: calc(var(--pmsyt-unit) * 0.6);
		margin: 0 0 calc(var(--pmsyt-unit) * 0.4) 0;
		padding: calc(var(--pmsyt-unit) * 0.5) calc(var(--pmsyt-unit) * 0.2);
		font-size: calc(var(--pmsyt-unit) * 1);
		font-weight: 500;
		letter-spacing: 0.01em;
		color: #0f3669;
		background: transparent;
		line-height: 1.3;
	}

	.pmsyt-root--playlist .pmsyt-carousel-header::before {
		width: calc(var(--pmsyt-unit) * 0.2);
		height: calc(var(--pmsyt-unit) * 1.1);
	}

	.pmsyt-root--playlist .pmsyt-playlist-track {
		position: relative;
		/* Altezza per mostrare ~3.5 elementi */
		max-height: calc((28vw * 0.5625 + 3vw) * 3.5 * 0.85);
		padding: calc(var(--pmsyt-unit) * 0.3) 0;
		padding-bottom: 60px; /* Spazio per blur */
		display: flex;
		flex-direction: column;
		gap: calc(var(--pmsyt-unit) * 0.3);
		margin-left: 0;
		white-space: normal;
		overflow-x: hidden;
		overflow-y: auto;
		cursor: default;
	}

	/* Indicatore scroll: effetto vetro sfumato */
	.pmsyt-root--playlist .pmsyt-playlist-carousel::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background: linear-gradient(
			to bottom,
			transparent 0%,
			rgba(15,54,105,0.08) 50%,
			rgba(15,54,105,0.15) 100%
		);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
		mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
		backdrop-filter: blur(0.5px);
		-webkit-backdrop-filter: blur(0.5px);
		pointer-events: none;
		z-index: 5;
	}

	/* Chevron singolo blu */
	.pmsyt-root--playlist .pmsyt-playlist-carousel::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 12px;
		width: 10px;
		height: 10px;
		margin-left: -5px;
		border-right: 2px solid #0f3669;
		border-bottom: 2px solid #0f3669;
		transform: rotate(45deg);
		pointer-events: none;
		z-index: 6;
		transition: transform 0.3s ease;
		animation: pmsyt-scroll-hint 1.8s ease-in-out infinite;
	}

	/* Stato: scrollato in fondo - freccia verso l'alto */
	.pmsyt-root--playlist .pmsyt-playlist-carousel.at-bottom::after {
		transform: rotate(-135deg);
		animation: pmsyt-scroll-hint-up 1.8s ease-in-out infinite;
	}

	@keyframes pmsyt-scroll-hint {
		0%, 100% {
			bottom: 12px;
			opacity: 0.6;
		}
		50% {
			bottom: 17px;
			opacity: 1;
		}
	}

	@keyframes pmsyt-scroll-hint-up {
		0%, 100% {
			bottom: 17px;
			opacity: 0.6;
		}
		50% {
			bottom: 12px;
			opacity: 1;
		}
	}

	/* Scrollbar verticale sobria */
	.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar {
		width: 4px;
		height: auto;
	}

	/* ITEM PLAYLIST MOBILE: stile minimale pulito */
	.pmsyt-root--playlist .pmsyt-playlist-item {
		flex: 0 0 auto;
		max-width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: calc(var(--pmsyt-unit) * 0.4);
		padding: calc(var(--pmsyt-unit) * 0.25);
		border-radius: 0;
		border: none;
		background: transparent;
		box-shadow: none;
		opacity: 0.75;
		transition: opacity 0.15s;
	}

	.pmsyt-root--playlist .pmsyt-playlist-item:hover {
		opacity: 1;
		background: transparent;
		transform: none;
		box-shadow: none;
	}

	.pmsyt-root--playlist .pmsyt-playlist-item--active {
		opacity: 1;
		background: rgba(15,54,105,0.2);
		border-left: 2px solid #0f3669;
	}

	.pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper {
		flex: 0 0 28%;
		max-width: 28%;
		min-width: 70px;
		overflow: hidden;
		border-radius: calc(var(--pmsyt-radius-inner) * 0.5);
		aspect-ratio: 16 / 9;
	}

	.pmsyt-root--playlist .pmsyt-playlist-thumb-img {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 16 / 9 !important;
		object-fit: cover !important;
		transform: scale(1.01);
	}

	.pmsyt-root--playlist .pmsyt-playlist-title {
		flex: 1 1 auto;
		white-space: normal;
		font-size: 0.85em;
		line-height: 1.3;
		padding: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

}

@media (max-width: 480px) {
	.pmsyt-root .pmsyt-wrapper .pmsyt-title-wrap {
		padding-top: 0;
	}
	
	/* =========================
	   SOLO BARRA CONTROLLI PLAYER
	   ========================= */

	/* forza il wrap della riga comandi */
	.pmsyt-root .pmsyt-ui .pmsyt-controls-row {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		gap: calc(var(--pmsyt-gap-controls) * 0.7) !important;
	}

	/* sinistra e destra diventano due righe */
	.pmsyt-root .pmsyt-ui .pmsyt-controls-left,
	.pmsyt-root .pmsyt-ui .pmsyt-controls-right {
		flex: 1 1 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: calc(var(--pmsyt-gap-controls) * 0.8) !important;
	}

	/* seconda riga: volume elastico */
	.pmsyt-root .pmsyt-ui .pmsyt-volume-group {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	.pmsyt-root .pmsyt-ui .pmsyt-volume-range {
		width: 100% !important;
		min-width: 0 !important;
	}

	/* velocità compatta */
	.pmsyt-root .pmsyt-ui .pmsyt-select-group {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
	}

	/* timer sempre su una riga */
	.pmsyt-root .pmsyt-ui .pmsyt-time,
	.pmsyt-root .pmsyt-ui .pmsyt-time-separator {
		white-space: nowrap !important;
	}

	/* pulsanti leggermente più piccoli, senza cambiare logica */
	.pmsyt-root .pmsyt-ui .pmsyt-btn {
		width: calc(var(--pmsyt-control-size) * 0.9);
		height: calc(var(--pmsyt-control-size) * 0.9);
	}

	/* padding un filo più stretto solo nei controlli */
	.pmsyt-root .pmsyt-ui-inner {
		padding: 0 calc(var(--pmsyt-unit) * 0.2);
	}
}