/* ============================================================
   Prada Reporter — SCROLL GUIDATO
   Additivo, page-scoped su .pg-prada[data-snap]. Caricato DOPO css/style.css.
   Il sistema di base (una schermata per sezione, snap mandatory) sta gia in
   style.css sotto "Guided scroll: sistema condiviso": qui c'e' solo quello che
   serve a far stare i moduli di questa pagina dentro una schermata.
   Sette schermate: 01 cover+titolo · 02 film · 03 Veritas · 04 Witness ·
   05 collection · 06 pop-up (carosello) · 07 credits+chiusura.
   ============================================================ */

/* La barra di progresso e' l'unico ancoraggio visibile: accesa da subito. */
.pg-prada[data-snap] .nav__progress { opacity: .9; }

/* Nav su fondo carta dall'atterraggio: la prima schermata comincia sotto. */
.pg-prada[data-snap] .nav {
  background: var(--paper-85);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-block: 14px;
}

/* Ogni modulo e' un punto d'appoggio: niente scroll interno, quello che non
   entra cede altezza. */
.pg-prada[data-snap] main > section { overflow: hidden; }

/* ---------- 01. Cover + titolo ----------
   La chiave cede altezza, il blocco titolo resta intero, About compreso. */
.pg-prada[data-snap] .case-intro__head { padding-inline: var(--gutter); }
.pg-prada[data-snap] main > section.case-intro { padding-top: 56px; }
/* L'occhiello "Capsule Collection Launch" e' fuori ovunque, non solo mobile
   (richiesta 01.09): il titolo parla da solo. Markup intatto. */
.pg-prada .case-head__brand { display: none; }
@media (min-width: 821px) {
  /* La chiave e' la schermata: 70svh pieni come su Disney e Come piace a noi,
     cover che scorre sotto la fascia della nav, niente padding sopra. */
  .pg-prada[data-snap] main > section.case-intro { overflow: visible; height: auto; padding-top: 0; }
  .pg-prada[data-snap] .case-intro__cover { flex: 0 0 auto; height: 70svh; min-height: 0; }
  .pg-prada[data-snap] .case-intro__head .case-meta { margin-top: clamp(46px, 8vh, 96px); }
}

/* ---------- 02. Il film ----------
   Il 16:9 resta 16:9 e prende quasi tutta la schermata. Il blocco film + testo
   e' centrato nella viewport, con la stessa aria sopra e sotto; regia e prosa
   restano ancorate al film, con la bodycopy spostata a destra. */
.pg-prada[data-snap] main > section.intro-film {
  padding-block: clamp(20px, 3vh, 44px);
  justify-content: center;
}
.pg-prada[data-snap] .intro-film .bleed {
  display: flex; justify-content: center;
  width: auto; /* il bleed sfonda la gutter da entrambi i lati: senza questo
                  la regola width:100% del sistema lo teneva ancorato a sinistra */
}
.pg-prada[data-snap] .intro-film .player {
  width: auto; max-width: 100%;
  height: min(73svh, 860px);
  aspect-ratio: 16 / 9;
}
.pg-prada[data-snap] .intro-film .split {
  margin-top: clamp(16px, 2.4vh, 30px) !important;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: end;
}

/* ---------- 03. Veritas ----------
   Il beat isolato: la citazione al centro di una schermata vuota. Il glitch
   resta legato al puntatore (hover fine), come oggi. */
.pg-prada[data-snap] main > section.veritas { padding-block: clamp(96px, 15vh, 200px); }

/* ---------- 04. Witness to Nature ----------
   Testo ancorato in alto, le due foto prendono l'altezza che avanza. */
.pg-prada[data-snap] main > section.sec-witness {
  padding-block: clamp(84px, 12vh, 150px) clamp(48px, 8vh, 104px);
  justify-content: flex-start;
}
.pg-prada[data-snap] .sec-witness .duo { margin-top: auto; }
.pg-prada[data-snap] .sec-witness .duo .zoom img {
  height: min(38svh, 400px); width: 100%; object-fit: cover;
}

/* ---------- 05. The collection ----------
   Immagine e testo affiancati, centrati: l'immagine cede altezza. */
.pg-prada[data-snap] main > section.sec-collection {
  padding-block: clamp(84px, 12vh, 160px);
}
.pg-prada[data-snap] .sec-collection .split__media .zoom img {
  height: min(62svh, 640px); width: 100%; object-fit: cover;
}

/* ---------- 06. Pop-up: testo e carosello nella stessa schermata ----------
   Le quattro foto in 16:9, grandi, ancorate: il formato del film ripreso in
   negozio. Il carosello scorre solo quando la sua schermata e' quella attiva. */
.pg-prada[data-snap] main > section.sec-popup {
  padding-block: clamp(76px, 11vh, 132px) clamp(16px, 2.5vh, 30px);
  justify-content: flex-start;
}
.pg-prada[data-snap] .sec-popup .split { margin-bottom: clamp(20px, 3vh, 36px) !important; }
.pg-prada[data-snap] .sec-popup > .section-label { margin-bottom: clamp(14px, 2vh, 22px) !important; }
.pg-prada[data-snap] .sec-popup .ooh-carousel {
  padding-block: 0;
  margin-top: auto;
  margin-inline: calc(var(--gutter) * -1);
  width: auto;
}
.pg-prada[data-snap] .sec-popup .ooh-carousel__viewport { padding-inline: var(--gutter); }
.pg-prada[data-snap] .sec-popup .ooh-carousel__slide {
  flex: 0 0 auto;
  width: auto;
  height: min(40svh, 430px);
  aspect-ratio: 16 / 9;
  cursor: zoom-in;
}
.pg-prada[data-snap] .sec-popup .ooh-carousel__slide img { height: 100%; }
.pg-prada[data-snap] .sec-popup .ooh-carousel__bar {
  margin-top: clamp(12px, 1.8vh, 20px);
  padding-inline: var(--gutter);
}

/* ---------- 07. Credits e chiusura: una schermata sola ----------
   I credits sono una nota a pie' di pagina: mezza scala, e da 900px in su la
   tabella scende nella colonna di destra. Il footer chiude dentro la sezione. */
.pg-prada[data-snap] main > section.sec-close {
  justify-content: space-between;
  padding-block: clamp(84px, 12vh, 150px) 0;
}
@media (min-width: 900px) {
  .pg-prada[data-snap] .sec-close .credits {
    display: grid; grid-template-columns: 42% minmax(0, 1fr);
    align-items: start; column-gap: clamp(30px, 4vw, 60px);
  }
  .pg-prada[data-snap] .sec-close .credits > .section-label { grid-column: 1; margin: 0; }
  .pg-prada[data-snap] .sec-close .credits__cols { grid-column: 2; margin-top: 0; }
}
.pg-prada[data-snap] .sec-close .credits__cols { gap: 7px 24px; }
.pg-prada[data-snap] .sec-close .credits__col { gap: 7px; }
.pg-prada[data-snap] .sec-close .credit { padding-bottom: 5px; }
.pg-prada[data-snap] .sec-close .credit dt { font-size: 0.56rem; letter-spacing: 0.09em; }
.pg-prada[data-snap] .sec-close .credit dd { font-size: 0.78rem; line-height: 1.25; }
.pg-prada[data-snap] .sec-close .next { padding-block: clamp(30px, 6vh, 72px) 0; }
.pg-prada[data-snap] .sec-close .footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(24px, 4vh, 40px);
  margin-top: clamp(24px, 4vh, 44px);
}
.pg-prada[data-snap] .sec-close .footer .wrap { padding-inline: 0; }

/* ============================================================
   Mobile: stesso snap, stessa regola di una schermata per modulo.
   Cambiano solo le misure. Il vecchio blocco .pg-prada .scene di style.css
   spegneva il sistema sotto gli 820px: qui non si spegne piu' niente.
   ============================================================ */
@media (max-width: 760px) {
  /* il respiro in alto e' quello laterale, piu' l'altezza della nav */
  .pg-prada[data-snap] main > section { padding-block: calc(54px + var(--gutter)) var(--gutter); }

  /* ---------- 01. Cover alta e croppata, titolo compattato sotto ---------- */
  .pg-prada[data-snap] main > section.case-intro { padding-block: 0; }
  .pg-prada[data-snap] .case-intro__cover {
    flex: 0 0 auto;
    height: min(58svh, 124vw);
    min-height: 0;
  }
  .pg-prada[data-snap] .case-intro__cover img { object-position: 50% 38%; }
  .pg-prada[data-snap] .case-intro__head {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding-top: 16px; padding-bottom: 16px;
  }
  .pg-prada[data-snap] .case-intro__head .case-meta {
    margin-top: auto; padding-top: 12px;
    grid-template-columns: 1fr 1fr;
    gap: 9px 16px;
  }
  .pg-prada[data-snap] .case-intro__head .case-head__brand { font-size: 14px; margin-bottom: 5px; }
  .pg-prada[data-snap] .case-intro__head .case-head__title { font-size: 34px; line-height: .98; letter-spacing: -.028em; }
  .pg-prada[data-snap] .case-intro__head .case-meta dt { font-size: 10px; }
  .pg-prada[data-snap] .case-intro__head .case-meta dd { font-size: 14px; }
  /* l'About sta nella prima schermata, a piena larghezza sotto la meta:
     le tre voci corte si affiancano su due colonne per fargli spazio */
  .pg-prada[data-snap] .case-intro__head .case-meta__desc { grid-column: 1 / -1; }

  /* ---------- 02. Il film ---------- */
  .pg-prada[data-snap] main > section.intro-film { padding-block: calc(54px + var(--gutter)) var(--gutter); }
  .pg-prada[data-snap] .intro-film { --step: 14px; }
  .pg-prada[data-snap] .intro-film .player { width: 100%; height: auto; }
  .pg-prada[data-snap] .intro-film .split {
    grid-template-columns: 1fr;
    gap: var(--step);
    margin-top: var(--step) !important;
    align-items: start;
  }
  .pg-prada[data-snap] .intro-film .h2 { margin-bottom: 6px; }

  /* ---------- 03. Veritas ----------
     I due fantasmi cromatici sono pseudo-elementi con lo stesso testo. La
     citazione usa text-wrap: balance, che Safari calcola in modo diverso su
     un box assoluto: sul telefono i fantasmi andavano a capo su parole
     diverse dalla frase vera. Sotto i 760px restano spenti. */
  /* l'occhiello sta stretto sopra il titolo su schermo piccolo: resta
     solo da desktop */
  .pg-prada .case-head__brand { display: none; }

  .pg-prada .veritas__quote::before,
  .pg-prada .veritas__quote::after { content: none; }
  .pg-prada[data-snap] main > section.veritas { padding-block: calc(54px + var(--gutter)) var(--gutter); }
  .pg-prada[data-snap] .veritas__cite { margin-top: clamp(24px, 5vh, 44px); }

  /* ---------- 04. Witness: testo in alto, le due foto in colonna ---------- */
  .pg-prada[data-snap] main > section.sec-witness { padding-block: calc(54px + var(--gutter)) calc(var(--gutter) - 4px); }
  .pg-prada[data-snap] .sec-witness { --step: 12px; }
  .pg-prada[data-snap] .sec-witness .split { gap: var(--step); }
  .pg-prada[data-snap] .sec-witness .h2 { margin-bottom: var(--step); }
  /* Le due foto prendono l'altezza che resta, mai lo spazio del testo:
     prima erano due 16:9 fissi che schiacciavano il gap a zero contro
     la prosa (e' il "testo attaccato ai box" visto da telefono). */
  .pg-prada[data-snap] .sec-witness .duo {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--step);
    margin-top: 16px;
    padding-top: 0;
    flex: 1 1 0; min-height: 0;
  }
  .pg-prada[data-snap] .sec-witness .duo .zoom { min-height: 0; overflow: hidden; margin: 0; }
  .pg-prada[data-snap] .sec-witness .duo .zoom img {
    height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover;
  }

  /* ---------- 05. The collection ---------- */
  .pg-prada[data-snap] main > section.sec-collection { padding-block: calc(54px + var(--gutter)) var(--gutter); }
  .pg-prada[data-snap] .sec-collection .split { gap: 26px; }
  .pg-prada[data-snap] .sec-collection .split__media .zoom img {
    height: min(42svh, 420px);
  }

  /* ---------- 06. Pop-up: il carosello a piena larghezza ---------- */
  .pg-prada[data-snap] main > section.sec-popup { padding-block: calc(54px + var(--gutter)) var(--gutter); }
  .pg-prada[data-snap] .sec-popup { --step: 14px; }
  .pg-prada[data-snap] .sec-popup .split { gap: var(--step); margin-bottom: var(--step) !important; }
  .pg-prada[data-snap] .sec-popup > .section-label { margin-bottom: var(--step) !important; }
  .pg-prada[data-snap] .sec-popup .ooh-carousel__slide {
    width: calc(100vw - var(--gutter) * 2);
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .pg-prada[data-snap] .sec-popup .ooh-carousel__bar { margin-top: var(--step); }
  .pg-prada[data-snap] .sec-popup .ooh-carousel__btn { width: 44px; height: 44px; }

  /* ---------- 07. Credits: una colonna sola ---------- */
  .pg-prada[data-snap] main > section.sec-close { padding-block: calc(54px + var(--gutter)) 0; }
  .pg-prada[data-snap] .sec-close .credits { padding-top: 0; }
  .pg-prada[data-snap] .sec-close .credits__cols { grid-template-columns: 1fr; gap: 0; }
  .pg-prada[data-snap] .sec-close .credit { padding-bottom: 4px; margin-bottom: 4px; }
  .pg-prada[data-snap] .sec-close .credit dt { font-size: 9px; letter-spacing: .12em; }
  .pg-prada[data-snap] .sec-close .credit dd { font-size: 13px; line-height: 1.25; }
  .pg-prada[data-snap] .sec-close .next { padding-block: clamp(18px, 3.5vh, 34px) 0; }
  .pg-prada[data-snap] .sec-close .next__title { font-size: 34px; letter-spacing: -.028em; }
  .pg-prada[data-snap] .sec-close .footer { margin-top: clamp(16px, 3vh, 26px); padding-block: clamp(18px, 3vh, 28px); }
}