/* ============================================================
   Birra Moretti — Mangiare come piace a noi — SCROLL GUIDATO
   Additivo, page-scoped su .pg-mangiare[data-snap]. Caricato DOPO
   css/style.css e css/mangiare-mobile.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, desktop e mobile.
   ============================================================ */

/* La barra di progresso e' l'unico ancoraggio visibile: sta accesa
   da subito, non solo quando la nav diventa solida. */
.pg-mangiare[data-snap] .nav__progress { opacity: .9; }

/* La nav e' su fondo carta dall'atterraggio, non trasparente sopra la
   chiave: la prima schermata comincia sotto la barra. */
.pg-mangiare[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 di appoggio: niente scroll dentro la
   schermata, quello che non entra si ridimensiona. */
.pg-mangiare[data-snap] main > section { overflow: hidden; }

/* ---------- 1. Cover + titolo ----------
   Chiave e blocco titolo stanno nella stessa schermata per intero,
   descrizione compresa: la chiave cede altezza, non il testo.
   La chiave parte sotto la nav, che qui e' opaca da subito. */
.pg-mangiare[data-snap] .case-intro__head { padding-inline: var(--gutter); }
.pg-mangiare[data-snap] main > section.case-intro { padding-top: 56px; }
@media (min-width: 821px) {
  /* La chiave e' la schermata: 70svh come su Disney e Come piace a noi.
     In viewport restano solo immagine e titolo, il blocco meta scende
     appena sotto la piega e arriva col mezzo scroll. */
  .pg-mangiare[data-snap] main > section.case-intro { overflow: visible; height: auto; }
  .pg-mangiare[data-snap] .case-intro__cover { flex: 0 0 auto; height: calc(70svh - 56px); min-height: 0; }
  .pg-mangiare[data-snap] .case-intro__head .case-meta { margin-top: clamp(46px, 8vh, 96px); }
}

/* ---------- 2. Challenge ---------- */
.pg-mangiare[data-snap] main > section.brief {
  padding-block: 0;
  display: block;
  margin-top: 0;
}
.pg-mangiare[data-snap] .brief .wrap {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(84px, 13vh, 150px);
}

/* ---------- 3. Solution: testo in alto, i frame che scorrono in basso ----------
   Il blocco di testo sta ancorato in alto, non centrato: la schermata si
   legge dall'alto come una pagina. La fascia degli still chiude a filo del
   bordo inferiore, tagliata: si legge che il film continua oltre la piega. */
.pg-mangiare[data-snap] main > section.sec-solution {
  padding-block: clamp(76px, 11vh, 132px) 0;
  justify-content: flex-start;
}
.pg-mangiare[data-snap] main > section.sec-ooh { justify-content: flex-start; }
.pg-mangiare[data-snap] .sec-solution .split { gap: clamp(40px, 8vw, 112px); }
.pg-mangiare[data-snap] .sec-solution .film-band {
  margin-top: auto;
  margin-inline: calc(var(--gutter) * -1);
  width: auto;
}

/* ---------- 4. Il film, grande e al centro della sua schermata ---------- */
.pg-mangiare[data-snap] main > section.sec-film {
  padding-block: clamp(64px, 10vh, 120px);
}
.pg-mangiare[data-snap] .sec-film .sec-film__frame {
  display: flex; justify-content: center;
  margin-inline: calc(var(--gutter) * -1);
  width: auto;
}
.pg-mangiare[data-snap] .sec-film .player-native {
  width: auto; max-width: 100%;
  height: min(64svh, 700px);
  aspect-ratio: 16 / 9;
}

/* ---------- La fascia degli still ----------
   I fotogrammi restano interi, in 16:9: la fascia prende l'altezza che
   serve. Scorre solo quando la sua schermata e' quella attiva. */
.pg-mangiare[data-snap] .film-band {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.pg-mangiare[data-snap] .film-band .film-strip {
  padding-block: 0;
  background: none;
}
.pg-mangiare[data-snap] .film-band .film-strip__viewport { overflow: visible; }
.pg-mangiare[data-snap] .film-band .film-strip__frame {
  width: clamp(320px, 32vw, 500px);
  gap: 0;
}
.pg-mangiare[data-snap] .film-strip__track { animation-play-state: paused; }
.pg-mangiare[data-snap] main > section.is-active .film-strip__track { animation-play-state: running; }

/* ---------- 5. Copy formula ----------
   Etichetta e descrizione staccate dal bordo alto quanto il margine
   laterale, il reel scende sotto il centro della schermata. */
.pg-mangiare[data-snap] main > section.engine {
  padding-block: calc(var(--gutter) + 34px) clamp(64px, 10vh, 130px);
  justify-content: flex-start;
}
.pg-mangiare[data-snap] .engine > .wrap { padding-top: 0; }
.pg-mangiare[data-snap] .engine__intro { margin-bottom: clamp(92px, 23vh, 280px); }

/* ---------- 6. Key visual ---------- */
.pg-mangiare[data-snap] main > section.sec-kv { padding-block: 0; }
.pg-mangiare[data-snap] .sec-kv .mangiare-spot { padding-block: 0; }
.pg-mangiare[data-snap] .sec-kv .kv-banner {
  padding: clamp(48px, 7vh, 92px) clamp(24px, 5vw, 96px) clamp(32px, 5.5vh, 68px);
  gap: clamp(18px, 3.4vh, 40px);
  min-height: 100svh;
  justify-content: center;
}
.pg-mangiare[data-snap] .sec-kv .kv-banner__frame {
  aspect-ratio: auto;
  height: min(70svh, 768px);
}
.pg-mangiare[data-snap] .sec-kv .kv-banner__frame img { object-fit: contain; }

/* ---------- 7. Out of Home: testo e carosello nella stessa schermata ----------
   Le foto in 16:9, grandi: il formato del film ripreso in strada. */
.pg-mangiare[data-snap] main > section.sec-ooh {
  padding-block: calc(clamp(64px, 9.5vh, 116px) + 18.8svh) clamp(8px, 1.2vh, 16px);
}
.pg-mangiare[data-snap] .sec-ooh .split { margin-bottom: clamp(18px, 2.6vh, 26px); }
.pg-mangiare[data-snap] .sec-ooh .ooh-carousel {
  padding-block: 0;
  margin-inline: calc(var(--gutter) * -1);
  width: auto;
}
.pg-mangiare[data-snap] .sec-ooh .ooh-carousel__viewport { padding-inline: var(--gutter); }
.pg-mangiare[data-snap] .sec-ooh .ooh-carousel__slide {
  flex: 0 0 auto;
  width: auto;
  height: min(52svh, 520px);
  aspect-ratio: 16 / 9;
}
.pg-mangiare[data-snap] .sec-ooh .ooh-carousel__bar {
  margin-top: clamp(12px, 1.8vh, 18px);
  padding-inline: var(--gutter);
}

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

/* ============================================================
   Mobile: stesso snap, stessa regola di una schermata per modulo.
   Cambiano solo le misure.
   ============================================================ */
@media (max-width: 760px) {
  /* il respiro in alto e' quello laterale, piu' l'altezza della nav */
  .pg-mangiare[data-snap] main > section { padding-block: calc(54px + var(--gutter)) var(--gutter); }

  /* cover + titolo: la chiave e' alta, un ritratto verticale, con il
     lockup BIRRA MORETTI al centro; il testo si compatta sotto */
  .pg-mangiare[data-snap] main > section.case-intro { padding-block: 0; }
  .pg-mangiare[data-snap] .case-intro__cover {
    flex: 0 0 auto;
    height: min(50svh, 108vw);
    min-height: 0;
  }
  .pg-mangiare[data-snap] .case-intro__cover img { object-position: 51% 38%; }
  .pg-mangiare[data-snap] .case-intro__head {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: 24px;
  }
  .pg-mangiare[data-snap] .case-intro__head .case-meta { margin-top: auto; padding-top: 13px; gap: 11px; }
  .pg-mangiare[data-snap] .case-intro__head .case-head__brand { font-size: 14px; margin-bottom: 5px; }
  .pg-mangiare[data-snap] .case-intro__head .case-head__title { font-size: 33px; line-height: .98; letter-spacing: -.028em; }
  .pg-mangiare[data-snap] .case-intro__head .case-meta dt { font-size: 10px; }
  .pg-mangiare[data-snap] .case-intro__head .case-meta dd { font-size: 14px; }

  /* Challenge: la foto in mezzo prende lo spazio libero (regola del
     file mobile), qui basta togliere il doppio padding */
  .pg-mangiare[data-snap] .brief .wrap { padding-block: 0; justify-content: flex-start; }

  /* Il titolo scende in fondo, attaccato alla bodycopy: prima l'etichetta,
     poi la foto che prende lo spazio, poi titolo e testo insieme. */
  .pg-mangiare[data-snap] .brief .wrap > .section-label { order: 1; }
  .pg-mangiare[data-snap] .brief .brief__photo { order: 2; }
  .pg-mangiare[data-snap] .brief .wrap > div:nth-of-type(1) {
    order: 3;
    margin-bottom: 14px !important;
  }
  .pg-mangiare[data-snap] .brief .wrap > div:nth-of-type(2) {
    order: 4;
    margin-top: 0;
  }

  /* ---------- Tre tagli della cover mobile, da scegliere ----------
     Si attivano con data-cover sullo shell (?cover=square|full|portrait).
     Senza attributo resta il taglio corrente. */

  /* A — quadrata e dominante: 1:1 esatto, testo compattato in fondo */
  .pg-mangiare[data-cover="square"] .case-intro__cover { flex: 0 0 auto; height: 100vw; min-height: 0; }
  .pg-mangiare[data-cover="square"] .case-intro__head { margin-top: auto; padding-top: 16px; padding-bottom: 18px; }
  .pg-mangiare[data-cover="square"] .case-intro__head .case-head__brand { font-size: 14px; margin-bottom: 5px; }
  .pg-mangiare[data-cover="square"] .case-intro__head .case-head__title { font-size: 33px; }
  .pg-mangiare[data-cover="square"] .case-intro__head .case-meta { margin-top: 14px; padding-top: 13px; gap: 11px; }
  .pg-mangiare[data-cover="square"] .case-intro__head .case-meta dd { font-size: 14px; }
  .pg-mangiare[data-cover="square"] .case-intro__head .case-meta dt { font-size: 10px; }

  /* B — a tutto schermo, titolo in overlay sul fondo scuro.
     Agency, Year e About escono dalla prima schermata. */
  .pg-mangiare[data-cover="full"] main > section.case-intro { position: relative; }
  .pg-mangiare[data-cover="full"] .case-intro__cover { position: absolute; inset: 0; min-height: 0; }
  .pg-mangiare[data-cover="full"] .case-intro__cover img { object-position: 50% 46%; }
  .pg-mangiare[data-cover="full"] .case-intro__head {
    position: relative; margin-top: auto;
    padding-top: 130px; padding-bottom: 38px;
    color: #f4f3f0;
    background: linear-gradient(180deg, rgba(20, 10, 6, 0) 0%, rgba(20, 10, 6, .68) 48%, rgba(20, 10, 6, .93) 100%);
  }
  .pg-mangiare[data-cover="full"] .case-intro__head .case-head__brand { color: color-mix(in srgb, #f4f3f0 78%, transparent); }
  .pg-mangiare[data-cover="full"] .case-intro__head .case-head__title { font-size: 40px; }
  .pg-mangiare[data-cover="full"] .case-intro__head .case-meta { display: none; }

  /* C — verticale 4/5, ritratto della tavola: resta Agency e Year, About esce */
  .pg-mangiare[data-cover="portrait"] .case-intro__cover { flex: 0 0 auto; height: min(70svh, 125vw); }
  .pg-mangiare[data-cover="portrait"] .case-intro__cover img { object-position: 53% 48%; }
  .pg-mangiare[data-cover="portrait"] .case-intro__head .case-head__title { font-size: 33px; }
  .pg-mangiare[data-cover="portrait"] .case-intro__head .case-meta { margin-top: 14px; padding-top: 13px; gap: 10px; }
  .pg-mangiare[data-cover="portrait"] .case-intro__head .case-meta dd { font-size: 14px; }
  .pg-mangiare[data-cover="portrait"] .case-intro__head .case-meta__desc { display: none; }

  /* Solution: testo in alto, i frame chiudono la schermata */
  .pg-mangiare[data-snap] main > section.sec-solution { padding-block: calc(54px + var(--gutter)) 0; }

  /* Film: grande, al centro della sua schermata */
  .pg-mangiare[data-snap] main > section.sec-film { padding-block: calc(54px + var(--gutter)); }
  .pg-mangiare[data-snap] .sec-film .player-native { width: 100%; height: auto; }

  /* le due coppie di still in dissolvenza: 16:9 pieno, uno sopra l'altro,
     allineate alla gutter del testo. Un solo passo verticale (14px) per
     tutto il modulo: titolo, prosa, i due frame, i dots. */
  .pg-mangiare[data-snap] .sec-solution { --step: 14px; }
  .pg-mangiare[data-snap] .sec-solution .film-pairs {
    margin-top: auto;
    margin-inline: 0;
    width: 100%;
    padding: var(--step) 0;
    flex: 0 0 auto;
  }
  .pg-mangiare[data-snap] .sec-solution .film-pairs__stage { height: auto; }
  .pg-mangiare[data-snap] .sec-solution .film-pairs__pair {
    grid-template-columns: 1fr;
    gap: var(--step);
    height: auto;
  }
  .pg-mangiare[data-snap] .sec-solution .film-pairs figure { display: block; }
  .pg-mangiare[data-snap] .sec-solution .film-pairs img {
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  }
  .pg-mangiare[data-snap] .sec-solution .film-pairs__dots {
    margin: 0; padding: var(--step) 0 0;
  }
  .pg-mangiare[data-snap] .sec-solution .h2 { margin-bottom: var(--step); }
  .pg-mangiare[data-snap] .sec-solution .split { gap: var(--step); }
  .pg-mangiare[data-snap] .sec-solution .section-label { margin-bottom: var(--step) !important; }

  /* Copy formula */
  .pg-mangiare[data-snap] main > section.engine { padding-block: clamp(44px, 7vh, 72px) clamp(44px, 7vh, 76px); }
  .pg-mangiare[data-snap] .engine > .wrap { padding-top: 0; }
  .pg-mangiare[data-snap] .engine__intro { margin-bottom: clamp(56px, 13vh, 130px); }

  /* Key visual */
  .pg-mangiare[data-snap] .sec-kv .kv-banner { padding: clamp(56px, 9vh, 84px) 16px clamp(28px, 5vh, 44px); gap: 20px; }
  .pg-mangiare[data-snap] .sec-kv .kv-banner__frame { height: auto; aspect-ratio: 2270 / 1250; }
  .pg-mangiare[data-snap] .sec-kv .kv-banner__frame img { object-fit: cover; transform: scale(1.11); }

  /* Out of Home */
  .pg-mangiare[data-snap] main > section.sec-ooh { padding-block: clamp(70px, 11vh, 104px) clamp(24px, 4vh, 40px); }
  .pg-mangiare[data-snap] .sec-ooh .ooh-carousel__slide { width: calc(100vw - 40px); height: auto; aspect-ratio: 16 / 9; }
  .pg-mangiare[data-snap] .sec-ooh .ooh-carousel__viewport { padding-inline: 20px; }
  .pg-mangiare[data-snap] .sec-ooh .ooh-carousel__bar { padding-inline: 20px; }

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

@media (prefers-reduced-motion: reduce) {
  .pg-mangiare[data-snap] .film-strip__track { animation-play-state: paused; }
}