/* =========================================================
   PAGINA MEDIA · NextGen Media (pagina che scorre)
   Si appoggia ai blocchi how-* di style.css (stessa grammatica
   di nuove-generazioni) e aggiunge solo quello che manca:
   apertura scura, servizi accessori, portfolio con player
   Vimeo a clic, passi di lavoro, domande frequenti.
   ========================================================= */

/* ruoli: .page-media in style.css ribalta tutto in verde; qui la
   pagina torna chiara come le pagine HOW e il verde Media vive
   nelle fasce scure (apertura, lavori, Nube, epilogo). */
body.page-media.page-how {
	--c-page: var(--c-grey-100);
	--c-ink: var(--c-green-900);
	--c-accent: var(--c-green-700);
	--c-slab: var(--c-grey-200);
}

/* niente scorrimento orizzontale a nessuna larghezza */
.page-media.page-how main { overflow-x: clip; }

/* ---------- 1 · apertura scura ---------- */
.mv-hero {
	background-color: var(--c-green-900);
	color: var(--c-grey-100);
}
/* velatura dal basso: tiene leggibile il titolo sopra le foto vere */
.mv-hero::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	z-index: 1;
	height: 65%;
	background: linear-gradient(to top, color-mix(in srgb, var(--c-green-900) 88%, transparent), transparent);
	pointer-events: none;
}
.mv-hero .how-label { color: var(--c-green-500); }
.mv-hero .how-hero__dot { color: color-mix(in srgb, var(--c-grey-100) 50%, var(--c-green-900)); }
.mv-hero .how-hero__dot::before { background-color: color-mix(in srgb, var(--c-grey-100) 22%, var(--c-green-900)); }
.mv-hero .how-hero__dot::after { background-color: var(--c-grey-100); }
.mv-hero .how-hero__dot.is-active { color: var(--c-grey-100); }
.mv-hero .how-btn--ghost { color: var(--c-grey-100); }
.mv-hero .how-btn--ghost:hover { background-color: var(--c-grey-100); color: var(--c-green-900); }
.mv-hero__ctas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.mv-hero .how-btn { border: 0; cursor: pointer; }

/* video di sfondo: fermo immagine subito, il video sopra appena
   parte. Il player è grande (3840px, 1920px su telefono) e viene
   ridotto con --s da media.js: così YouTube sceglie il 4K. */
.mv-hero__video {
	position: absolute; inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.mv-hero__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.12);
}
.mv-hero__video iframe {
	position: absolute; left: 50%; top: 50%;
	width: var(--w, 3840px);
	height: calc(var(--w, 3840px) / var(--r, 1.7778));
	transform: translate(-50%, -50%) scale(var(--s, 1));
	border: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.mv-hero__video.is-ready iframe { opacity: 1; }
.mv-hero__credit {
	position: absolute; top: 6.5rem; right: 1.25rem;
	z-index: 2;
	margin: 0;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: .5625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-grey-100) 70%, transparent);
}

/* il video intero, con audio, sopra la pagina */
.mv-lightbox {
	position: fixed; inset: 0;
	z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: 4.5rem 1.25rem;
	background-color: color-mix(in srgb, var(--c-green-900) 94%, transparent);
	opacity: 0;
	transition: opacity .4s ease;
}
.mv-lightbox.is-open { opacity: 1; }
.mv-lightbox__frame {
	position: relative;
	width: min(100%, calc((100svh - 9rem) * var(--r, 1.7778)));
	aspect-ratio: var(--r, 1.7778);
}
.mv-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mv-lightbox__close {
	position: absolute; top: 1.25rem; right: 1.25rem;
	padding: .5rem .75rem;
	border: 0;
	border-radius: 2px;
	background-color: var(--c-grey-100);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: .625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-green-900);
	cursor: pointer;
}

/* ---------- 3 · servizi accessori ---------- */
.mv-more { margin-top: 4rem; }
.mv-more__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mv-more__list li {
	padding: 1rem 0 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--c-green-900) 14%, transparent);
	font-size: .875rem;
	letter-spacing: .2px;
	line-height: 1.5;
	color: var(--c-grey-600);
}
.mv-more__list strong {
	display: block;
	margin-bottom: .25rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--c-green-900);
}
.mv-more__list .n,
.mv-steps__list .n {
	display: block;
	margin-bottom: .625rem;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: .5625rem;
	letter-spacing: .12em;
	color: var(--c-accent);
}

/* ---------- 4 · portfolio (fascia scura) ---------- */
.mv-work {
	--c-accent: var(--c-green-500);
	padding: 5.5rem 0 6rem;
	background-color: var(--c-green-900);
	color: var(--c-grey-100);
}
.mv-work .how-label { color: var(--c-green-500); }
.mv-work__note {
	max-width: 16rem;
	margin: 0;
	font-size: .75rem;
	letter-spacing: .3px;
	line-height: 1.45;
	text-align: right;
	color: color-mix(in srgb, var(--c-grey-100) 60%, var(--c-green-900));
}
.mv-reel { margin-bottom: 3rem; }
.mv-grid { display: grid; gap: 2.5rem 1.25rem; }
.mv-work__cap { padding-top: 1.125rem; }
.mv-work__cap .how-label { margin-bottom: .5rem; }
.mv-work__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.2;
	text-transform: uppercase;
}
.mv-reel .mv-work__title { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.mv-work__meta {
	margin: .375rem 0 0;
	font-size: .8125rem;
	letter-spacing: .2px;
	color: color-mix(in srgb, var(--c-grey-100) 60%, var(--c-green-900));
}
.mv-work__foot { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3.5rem; }
.mv-work .how-btn--ghost { color: var(--c-grey-100); }
.mv-work .how-btn--ghost:hover { background-color: var(--c-grey-100); color: var(--c-green-900); }

/* player: facciata leggera, l'iframe Vimeo arriva solo al clic */
.mv-player {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.mv-player iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
	display: block;
	background-color: #000;
}
.mv-player .ph__label { z-index: 1; }
.mv-play {
	display: none;
	position: absolute; inset: 0;
	z-index: 2;
	width: 100%; height: 100%;
	padding: 0;
	border: 0;
	background: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mv-player.has-video .mv-play { display: flex; }
.mv-player.has-video .mv-empty { display: none; }
.mv-play__icon {
	position: relative;
	width: 4.5rem; height: 4.5rem;
	border-radius: 50%;
	background-color: var(--c-grey-100);
	transition: background-color .3s ease, transform .3s ease;
}
.mv-play__icon::before {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 0; height: 0;
	margin: -.6875rem 0 0 -.375rem;
	border-style: solid;
	border-width: .6875rem 0 .6875rem 1.125rem;
	border-color: transparent transparent transparent var(--c-green-900);
}
.mv-play:hover .mv-play__icon,
.mv-play:focus-visible .mv-play__icon { background-color: var(--c-green-500); transform: scale(1.06); }
.mv-play:focus-visible { outline: 2px solid var(--c-green-500); outline-offset: -2px; }
.mv-reel .mv-play__icon { width: 5.5rem; height: 5.5rem; }

/* ---------- 5 · come lavoriamo ---------- */
.mv-steps { padding: 5.5rem 0 6rem; }
.mv-steps__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mv-steps__list li {
	padding: 1.125rem 0 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--c-green-900) 14%, transparent);
}
.mv-steps__title {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}
.mv-steps__list p {
	max-width: 24rem;
	font-size: .875rem;
	letter-spacing: .2px;
	line-height: 1.5;
	color: var(--c-grey-600);
}

/* loghi: lo stemma verticale un filo più alto */
.how-logos__row .chosen--tall { max-height: 28px; }

/* ---------- 9 · domande frequenti ---------- */
/* ---------- da tablet ---------- */
@media only screen and (min-width: 768px) {
	.mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mv-more__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.25rem; }
}

/* sotto i 600px la nota del portfolio va sotto il titolo */
@media only screen and (max-width: 599px) {
	.mv-work .how-head { flex-direction: column; align-items: flex-start; }
	.mv-work__note { text-align: left; }
}

/* ---------- desktop ---------- */
@media only screen and (min-width: 1024px) {
	.mv-hero__ctas { margin-top: 2.25rem; }
	.mv-hero__credit { top: 7.5rem; right: 2.5rem; }
	.mv-lightbox__close { top: 2rem; right: 2.5rem; }
	.mv-more { margin-top: 5rem; }
	.mv-work { padding: 8rem 0 9rem; }
	.mv-reel { margin-bottom: 4.5rem; }
	.mv-grid { gap: 4rem 1.25rem; }
	.mv-steps { padding: 8rem 0; }
	.mv-steps__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.25rem; }
}


/* lavori compatti: quattro video in griglia, nessuno showreel a parte */
.mv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem .75rem; }
.mv-grid--4 .mv-work__title { font-size: .9375rem; }
.mv-grid--4 .mv-work__meta { font-size: .75rem; }
@media only screen and (min-width: 1024px) {
	.mv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.25rem; }
	.mv-work { padding: 6rem 0 6.5rem; }
}

/* tipografia normale, come il resto del sito */
.mv-hero__credit,
.mv-lightbox__close,
.mv-more__list strong,
.mv-steps__list .n,
.mv-work__title,
.mv-steps__title { font-family: var(--font-std); text-transform: none; letter-spacing: 0; }