/* assets/css/pmswt-playlist.css - CONTAINER PLAYLIST SOTTO IL PLAYER */
.pmsyt-root--playlist .pmsyt-playlist-carousel {
	margin-top: calc(var(--pmsyt-unit) * 2);
}

.pmsyt-root--playlist .pmsyt-playlist-track {
	position: relative;
	display: flex;
	margin-left: -2%;
	padding: 0 2% 3%;
	gap: calc(var(--pmsyt-unit) * 2);
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
}

/* dimensione della scrollbar */
.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar {
    height: 6px;
}

.pmsyt-root--playlist .pmsyt-playlist-track.pmsyt-playlist-track--dragging {
    cursor: grabbing;
}

/* fondo della barra */
.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-track {
    border-radius: 999px;
    margin-left: 2%;
}

/* thumb (parte che si muove) */
.pmsyt-root--playlist .pmsyt-playlist-track::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.9);
    border-radius: 999px;
}

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

/* 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);
}

/* video MP4 in loop */
.pmsyt-video-area .pmsyt-teaser {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	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 */
.pmsyt-root--playlist .pmsyt-playlist-item {
	flex: 0 0 calc(100% / 6);
	max-width: calc(100% / 6);
	border-radius: var(--pmsyt-radius-inner);
	border: 1px solid rgba(148,163,184,0.35);
	display: flex;
	flex-direction: column;
	text-align: left;
	cursor: pointer;
	opacity: 0.6;
	padding: 0;
	box-shadow: 0 calc(var(--pmsyt-unit) * 0.4) calc(var(--pmsyt-unit) * 1.2) rgba(0,0,0,0.3);
	transition:
	transform 0.16s ease-out,
	opacity 0.16s ease-out,
	box-shadow 0.16s ease-out,
	border-color 0.16s ease-out,
	background 0.16s ease-out;
}

.pmsyt-root--playlist .pmsyt-playlist-item:hover {
	opacity: 1;
	transform: translateY(calc(var(--pmsyt-unit) * -0.2));
	box-shadow: var(--pmsyt-shadow-btn);
}

/* ITEM ATTIVO (VIDEO CORRENTE) */
.pmsyt-root--playlist .pmsyt-playlist-item--active {
	opacity: 1;
	border-color: var(--pmsyt-color-accent);
}

/* THUMB */
.pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--pmsyt-radius-inner) var(--pmsyt-radius-inner) 0 0;
}

.pmsyt-root--playlist .pmsyt-playlist-thumb-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform 0.2s ease-out, filter 0.2s ease-out;
}

.pmsyt-root--playlist .pmsyt-playlist-item:hover .pmsyt-playlist-thumb-img {
	transform: scale(1.04);
	filter: brightness(1.05);
}

/* 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
 * ======================================================
 */
@media (max-width: 1024px) {
	.pmsyt-root {
		--pmsyt-unit: 2vw;
	}
	.pmsyt-root--playlist .pmsyt-playlist-item {
		flex: 0 0 calc(100% / 4);
		max-width: calc(100% / 4);
	}
}

/* ======================================================
 * MOBILE VERSION
 * ======================================================
 */
@media (max-width: 768px) {

	.pmsyt-root {
		--pmsyt-unit: 4vw;
	}
	
	/* HEADER: griglia 2x2 → main sopra, prev/next sotto */
	.pmsyt-root .pmsyt-header {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"main main"
			"prev next";
		align-items: stretch;
	}

	.pmsyt-root .pmsyt-wrapper--main {
		grid-area: main;
	}

	.pmsyt-root .pmsyt-wrapper--prev {
		grid-area: prev;
	}

	.pmsyt-root .pmsyt-wrapper--next {
		grid-area: next;
		text-align: right;
	}

	/* niente max-width strani in mobile */
	.pmsyt-root .pmsyt-header .pmsyt-wrapper:nth-child(odd) {
		max-width: 100%;
	}
	
	.pmsyt-root--playlist .pmsyt-wrapper--main .pmsyt-title-wrap {
		z-index: 3;
		position: relative;
	}

	/* MAIN + PREV/NEXT: stessa estetica, cambia solo la larghezza */
	.pmsyt-root .pmsyt-wrapper--main .pmsyt-inner,
	.pmsyt-root .pmsyt-wrapper--prev .pmsyt-inner,
	.pmsyt-root .pmsyt-wrapper--next .pmsyt-inner {
		display: block;
	}

	/* prev/next: niente box extra, uso solo la card esistente */
	.pmsyt-root .pmsyt-wrapper--prev .pmsyt-link-card,
	.pmsyt-root .pmsyt-wrapper--next .pmsyt-link-card {
		display: block;
		padding: 0;
		border: none;
		box-shadow: none;
		background: transparent;
	}

	/* prev/next: il video mantiene il 16:9 e resta sopra */
	.pmsyt-root .pmsyt-wrapper--prev .pmsyt-video-area,
	.pmsyt-root .pmsyt-wrapper--next .pmsyt-video-area {
		padding-top: 56.25%;
		overflow: hidden;
	}

	/* TITOLI SEMPRE VISIBILI, piccoli, sotto all’immagine */

	/* azzero il trucchetto del title-wrap con height:0 */
	.pmsyt-root .pmsyt-title-wrap {
		position: static;
		top: auto;
		height: auto;
		overflow: visible;
	}

	/* main player in modalità playlist: mostrato sempre */
	.pmsyt-root--playlist .pmsyt-wrapper--main .pmsyt-title {
		display: block !important;
		position: static;
		background: transparent;
		padding: 0;
		margin: 0;
		border-radius: 0;
		width: 100%;
	}

	/* prev/next: titoli sempre visibili sotto al video */
	.pmsyt-root .pmsyt-wrapper--prev .pmsyt-title,
	.pmsyt-root .pmsyt-wrapper--next .pmsyt-title {
		display: block !important;
		position: static;
		background: transparent;
		padding: 0;
		margin: 0;
	}

	/* etichette “Video precedente/successivo” piccole, sopra al titolo */
	.pmsyt-root .pmsyt-wrapper--prev .pmsyt-title-wrap::before,
	.pmsyt-root .pmsyt-wrapper--next .pmsyt-title-wrap::before {
		display: inline-block;
		text-transform: uppercase;
	}

	.pmsyt-root .pmsyt-wrapper--prev .pmsyt-title-wrap::before {
		content: "←"
	}

	.pmsyt-root .pmsyt-wrapper--next .pmsyt-title-wrap::before {
		text-align: right;
		content: "→";
	}

	/* opzionale: next “specchiato” per simmetria (puoi togliere se non ti piace) */
	.pmsyt-root--with-siblings .pmsyt-wrapper--next .pmsyt-inner {
		transform: none !important;
		opacity: 1;
		filter: none;
	}

	/* disattivo l’effetto 3D su mobile */
	.pmsyt-root--with-siblings .pmsyt-wrapper--prev .pmsyt-inner,
	.pmsyt-root--with-siblings .pmsyt-wrapper--next .pmsyt-inner {
		transform: none !important;
		opacity: 1;
		filter: none;
	}

	/* PLAYLIST MOBILE: verticale, scorrevole, senza sfondo extra */
	
	.pmsyt-root--playlist {
		display: flex;
		flex-direction: column;
	}

	.pmsyt-root--playlist .pmsyt-inner {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	.pmsyt-root--playlist .pmsyt-header {
		flex: 0 0 auto;
	}

	.pmsyt-root--playlist .pmsyt-playlist-carousel {
		flex: 1 1 auto;
		margin-top: 2%;
		padding-top: 0;
		border-top: none;
		background: transparent;
		overflow: hidden;
	}

	.pmsyt-root--playlist .pmsyt-playlist-track {
		position: relative;
		max-height: 80vw;
		padding: 5% 0;
		display: flex;
		flex-direction: column;
		margin-left: 0;
		white-space: normal;
		overflow-x: hidden;
		overflow-y: auto;
		cursor: default;
	}

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

	/* ITEM PLAYLIST: thumb a sinistra + titolo a destra */
	.pmsyt-root--playlist .pmsyt-playlist-item {
		flex: 0 0 auto;
		max-width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		opacity: 0.7;
		/* niente layout 50%/50% su mobile */
	}

	.pmsyt-root--playlist .pmsyt-playlist-thumb-wrapper {
		flex: 0 0 30%;
		max-width: 30%;
		overflow: hidden;
		border-radius: var(--pmsyt-radius-inner);
	}

	.pmsyt-root--playlist .pmsyt-playlist-thumb-img {
		aspect-ratio: 16 / 9;
		transform: scale(1.01);
	}

	.pmsyt-root--playlist .pmsyt-playlist-title {
		flex: 1 1 auto;
		white-space: normal;
	}

}