/* ==========================================================================
   STARSEED Travel — scorrimento a schermate (entrambi i temi)

   La pagina si ferma sempre all'inizio di una schermata intera: niente più carte
   tagliate a metà. Ogni sezione (gli alloggi sono due) è alta uno schermo e il
   suo contenuto ci sta dentro: le misure si stringono con l'altezza (unità svh).
   Lo scatto è quello nativo del browser (scroll-snap obbligatorio): il movimento
   segue la velocità del dito, ma una schermata per gesto (scroll-snap-stop), sia
   con una spinta normale sia con un lancio veloce, e si ferma precisa (scelta del
   proprietario, 15/10). Caroselli (pacchetti, feste, zone, locandine) si girano
   di lato: la pagina non resta mai bloccata su di loro per farli scorrere.

   Altezze: la schermata è alta quanto la parte sempre visibile dello schermo
   (100svh, con la barra del browser aperta). Chrome e Safari fermano lo scatto
   sull'area visibile: una schermata più alta (100lvh) diventava un tratto in
   cui la pagina poteva fermarsi ovunque, e risalendo (barra del browser che
   ricompare) si fermava col titolo tagliato. Con la barra del browser chiusa
   avanza qualche pixel in fondo: sul telefono resta dietro la barra in basso.
   In basso resta il posto della barra d'acquisto (telefono e tablet), in alto
   quello della barra di navigazione (tablet e desktop).

   Caricato per ultimo e fuori dai livelli: vince sulle regole dei due temi.
   Telefono in orizzontale (troppo basso per una schermata): scorrimento libero.
   ========================================================================== */
:root {
  --pg-top: calc(var(--nav-h) + clamp(8px, 3svh - 8px, 32px));
  --pg-bot: clamp(16px, 3svh, 40px);
  --pg-tool: 0px;
  --pg-bar: 0px;
  /* fondo delle schermate dove può comparire la barra d'acquisto */
  --pg-end: calc(var(--pg-bot) + var(--pg-tool));
}
/* telefono e tablet: sotto c'è la barra d'acquisto, sopra di lei basta un filo d'aria */
@media (max-width: 1099px) { :root { --pg-bar: calc(72px + var(--safe-b)); --pg-end: calc(10px + var(--pg-tool) + var(--pg-bar)); } }
/* telefono: in alto non c'è più nessuna barra dopo la prima schermata (menu e acquisto stanno in basso) */
@media (max-width: 699px) { :root { --pg-top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 3.2svh, 28px)); } }

@media (orientation: portrait), (min-height: 501px) {
  html { scroll-snap-type: y mandatory; scroll-padding-top: 0 !important; }
  /* una schermata per volta: anche un lancio veloce si ferma alla schermata successiva (niente salti di più pagine) */
  .hero, .packs, .manifesto, .formats, .week, .reviews, .how, .photos, .posters, .sound, .faq, .final, .footer { scroll-snap-align: start; scroll-snap-stop: always; }
  .pg-far, .pg-start { scroll-snap-align: none !important; }
  .pg-far::after, .pg-end::after { scroll-snap-align: none !important; }
  /* l'inizio della schermata è il punto d'arrivo anche per i link del menu (niente margini d'ancora) */
  .section[id], .packs[id], .posters[id], .formats[id] { scroll-margin-top: 0; }
  /* nastro e manifesto: una fermata sola, all'inizio del nastro (tablet e desktop: sotto la barra in alto, che resta) */
  .manifesto[id] { scroll-margin-top: var(--mq-h, 0px); }
  @media (min-width: 700px) {
    :root { --mq-nav: var(--nav-h); }
    .marquee { margin-top: var(--nav-h); }
    .manifesto[id] { scroll-margin-top: calc(var(--mq-h, 0px) + var(--nav-h)); }
  }

  /* ---------- la schermata ---------- */
  .packs, .week, .reviews, .how, .sound, .faq, .final {
    box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--pg-top); padding-bottom: var(--pg-end);
  }
  .reviews { contain: content; }
  /* qui la barra d'acquisto si fa da parte (pacchetti, inviti a prenotare, finale): il suo posto torna al contenuto.
     Sul telefono la barra in basso è anche il menu e resta ovunque: ogni schermata le tiene il posto */
  .packs, .how, .final { padding-bottom: calc(var(--pg-bot) + var(--pg-tool)); }
  @media (max-width: 699px) {
    .packs, .how, .final, .photos { padding-bottom: var(--pg-end); }
    .posters__sticky { padding-bottom: calc(10px + var(--pg-bar)); }
    .footer { padding-bottom: calc(var(--pg-bar) + 50px); }
  }
  .hero { min-height: 100svh; }
  .logo--hero { font-size: min(clamp(2.4rem, 14.6vw, 11rem), 15.5svh); }
  html:not([data-theme]) .hero__inner { gap: clamp(8px, 1.4svh, 24px); padding-top: calc(var(--nav-h) + clamp(6px, 1.2svh, 20px)); padding-bottom: clamp(8px, 1.5svh, 30px); }
  .footer { box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  /* schermate più alte dello schermo (footer, FAQ con le risposte aperte): anche la loro fine è una fermata. Dentro si
     scorre libero col dito, ma Fine, PagGiù, il fuoco del Tab e scrollTo il browser li riporta a una fermata: senza
     questa tornavano all'inizio della schermata e la sua fine (la fila in basso del footer) non si raggiungeva */
  .footer, .faq { position: relative; }
  /* stop sempre: senza, un gesto che oltrepassava la fine del FAQ scendeva nella schermata dopo e poi la pagina risaliva da sola (fino a 650 px) */
  .footer::after, .faq::after { content: ""; position: absolute; inset: auto 0 0; height: 0; scroll-snap-align: end; scroll-snap-stop: always; pointer-events: none; }
  .footer:has(.footer__bottom:focus-within) { scroll-snap-align: none; }

  /* titoli e testate: non più alti di un decimo dello schermo (su un portatile basso restano su una riga) */
  .h2 { font-size: min(clamp(2.6rem, 11vw, 7.6rem), 10svh); }
  :is(.formats__head, .posters__sticky) .h2 { font-size: min(clamp(2.3rem, 9vw, 5rem), 8svh); }
  .sec-head { gap: clamp(10px, 1.8svh, 18px); margin-bottom: clamp(12px, 3svh, 52px); }
  .eyebrow { margin-bottom: clamp(.5rem, 1.4svh, 1.1rem); }
  /* eccezioni dei temi che qui (regole fuori dai livelli) andrebbero perse: locandine e confronto come prima */
  .posters__sticky .sec-head { margin-bottom: 0; }
  .compare__head .eyebrow { margin-bottom: .6rem; }
  /* fuori dallo Studio le testate senza strumenti non tengono una riga vuota */
  :root:not(.studio-on) .sec-tools:not(:has(> :not(.add-chip))) { display: none; }

  /* ---------- pacchetti: testata, selettori e la fila in una schermata ---------- */
  @media (min-width: 700px) { .packs { padding-bottom: calc(clamp(10px, 2svh, 40px) + var(--pg-tool)); } }
  .packs__head { gap: clamp(10px, 1.4svh, 16px); }
  .packs .eyebrow { margin-bottom: clamp(.4rem, 1svh, 1.1rem); }
  .rail { margin-top: clamp(8px, 1.5svh, 24px); padding-bottom: clamp(8px, 1.3svh, 22px); }
  .pack { min-height: var(--pack-h, 0px); gap: clamp(6px, 1svh, 16px); padding: clamp(12px, 1.8svh, 20px) 20px clamp(12px, 1.8svh, 18px); }
  .pack__name { margin-top: clamp(0px, .6svh, 18px); font-size: min(clamp(3rem, 15vw, 4.2rem), 7.4svh); }
  .pack__price { padding-bottom: clamp(6px, 1.2svh, 14px); }
  .pack__price b { font-size: min(2.6rem, 5.4svh); }
  .inc { gap: clamp(3px, .65svh, 9px); }
  /* portatile basso (barre del browser e del sistema): titolo e nomi un filo più piccoli, i quattro pacchetti restano interi */
  @media (min-width: 1100px) and (max-height: 760px) { .packs .h2 { font-size: 8svh; } .pack__name { font-size: 6.4svh; } }
  /* schermo largo: città e tipo di pacchetto affiancati, la testata resta alta una riga */
  @media (min-width: 1100px) { .packs__switches { grid-auto-flow: column; align-items: center; } }

  /* ---------- nastro + manifesto: una schermata ---------- */
  .manifesto {
    box-sizing: border-box; min-height: calc(100svh - var(--mq-h, 120px) - var(--mq-nav, 0px)); display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(20px, 4svh, 48px); padding-bottom: var(--pg-end);
  }

  /* ---------- feste ---------- */
  @media (max-width: 899px) {
    .formats__sticky {
      box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; gap: clamp(12px, 2.2svh, 22px);
      padding-block: var(--pg-top) var(--pg-end);
    }
    .formats__track { flex: 1 1 auto; min-height: 0; }
    .fmt { height: auto; max-height: 640px; }
  }
  @media (min-width: 900px) { .formats__sticky { padding-block: var(--pg-top) var(--pg-bot); } }

  /* ---------- la settimana ---------- */
  @media (max-width: 899px) {
    /* agenda compatta: giorno e ora, logo della festa, titolo (il luogo è nella scheda della festa) */
    .night__btn { grid-template-columns: 3.6rem minmax(0, 1fr) auto 2.4rem; grid-template-areas: "day logo logo arrow" "day title pill arrow"; align-items: center; gap: 2px 12px; padding: clamp(4px, .8svh, 14px) 2px; }
    .night__info { display: contents; }
    .night__info b { grid-area: title; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .92rem; }
    .night__info > span:not(.pill) { display: none; }
    .night .pill { grid-area: pill; justify-self: end; margin: 0; }
    .night__day { font-size: 1.85rem; }
    .night__day small { margin-top: 4px; }
    .night__logo { font-size: 1.45rem; line-height: 1.05; }
    .night__arrow { width: 2.4rem; height: 2.4rem; }
  }
  @media (min-width: 900px) {
    .night__btn { padding-block: clamp(6px, 1.1svh, 26px); }
    .night__day { font-size: clamp(1.8rem, 4svh, 3rem); }
    .night__logo { font-size: clamp(1.5rem, 4.2svh, 2.6rem); line-height: 1.1; }
  }


  /* ---------- recensioni ---------- */
  .reviews__stats { margin-bottom: clamp(12px, 2.4svh, 26px); }
  .reviews__stats div { padding: clamp(10px, 1.6svh, 16px); }
  .rv-rows { gap: clamp(8px, 1.4svh, 14px); }
  .rv { gap: clamp(8px, 1.2svh, 12px); padding: clamp(14px, 2.2svh, 20px); }
  .rv p { -webkit-line-clamp: 4; }
  @media (max-width: 699px) { .rv p { -webkit-line-clamp: 5; } }

  /* ---------- come prenotare ---------- */
  .how__steps { gap: clamp(8px, 1.4svh, 12px); margin-bottom: clamp(14px, 3svh, 30px); }
  @media (max-width: 899px) { .how__steps li { padding-block: clamp(12px, 2.2svh, 22px); } }

  /* ---------- foto: la tela prende tutto lo spazio sotto la testata ---------- */
  .photos { box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--pg-top); padding-bottom: var(--pg-tool); }
  @media (max-width: 699px) { .photos { padding-bottom: var(--pg-end); } }
  .photos .canvas { flex: 1 1 auto; height: auto; min-height: 300px; }

  /* ---------- locandine ---------- */
  .posters__sticky { padding-top: var(--pg-top); }

  /* ---------- radio ---------- */
  .sound__grid { gap: clamp(14px, 3svh, 32px); }
  .sound__lede { margin-top: clamp(8px, 1.8svh, 20px); }
  @media (max-width: 699px) {
    .sound__grid { gap: clamp(12px, 2svh, 32px); }
    .sound__lede { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; }
    .machine { gap: clamp(8px, 1.4svh, 16px); padding: 12px; }
    .machine__screen { height: clamp(64px, 12svh, 130px); }
    .step { min-height: 40px; }
    /* comandi su una riga: play, tre manopole, "Nuovo groove" con la sola stellina */
    .controls { grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; gap: 10px; }
    .controls .knob:nth-of-type(n + 2), .controls .btn { grid-column: auto; }
    .controls .btn { width: 46px; min-width: 46px; padding: 0; }
    .controls .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .play { width: 50px; height: 50px; }
    .knob { letter-spacing: .06em; }
    .knob > span { gap: 6px; }
    @media (max-width: 400px) {
      .knob { letter-spacing: 0; }
      .knob > span { gap: 3px; }
    }
  }

  /* ---------- FAQ e finale ---------- */
  .faq__list summary { min-height: 48px; padding-block: clamp(8px, 1.6svh, 18px); }
  .faq__list p { padding-bottom: clamp(12px, 2svh, 22px); }
  .faq__more { margin-top: clamp(8px, 2svh, 24px); }
  .final .wrap { gap: clamp(14px, 2.6svh, 22px); }

  /* ---------- schermi bassi: app.js (fit) stringe le schermate che non entrano ---------- */
  .pg-tight .eyebrow { display: none; }
  .packs.pg-tight .seg button small { display: none; }
  .packs.pg-tight .rail { margin-top: 6px; }
  .packs.pg-tight .pack { gap: 5px; min-width: 0; }
  .packs.pg-tight .pack__name { font-size: min(clamp(3rem, 15vw, 4.2rem), 6.2svh); }
  .packs.pg-tight .inc { gap: 2px; }
  .packs.pg-tight .pack__venues { gap: 4px; padding-block: 7px 8px; }
  .packs.pg-tight .pack__venues p { font-size: 1.15rem; }
  .week.pg-tight .night__btn { padding-block: 2px; }
  .reviews.pg-tight .rv p { -webkit-line-clamp: 3; }
  .how.pg-tight .how__steps li { padding-block: 8px; }
  .sound.pg-tight .sound__lede { display: none; }
  .faq.pg-tight .faq__list summary { min-height: 44px; padding-block: 6px; }
}

/* ---------- pacchetti: extra, voli e confronto ---------- */
/* telefono e tablet: ultima carta della fila; schermo largo: una riga sotto i pacchetti */
.pack--info { justify-content: center; gap: 16px; }
.pack__info-t { font: 400 clamp(2.4rem, 11vw, 3.4rem)/.9 var(--f-acid); text-transform: uppercase; }
.pack--info .extras { flex-direction: column; align-items: flex-start; gap: 10px; }
.pack--info .extras span, .pack--info .extras span:first-child { font-size: .8rem; color: var(--ink-2); text-transform: none; letter-spacing: .06em; }
.pack--info .fine { max-width: 34ch; }
.pack--info [data-compare] { margin-top: 6px; }
@media (max-width: 1099px) { .packs__foot { display: none; } }
@media (min-width: 1100px) {
  .pack--info { display: none; }
  .packs__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; margin-top: clamp(10px, 2svh, 18px); }
}

/* ---------- caroselli: una carta per volta ---------- */
/* pacchetti, feste e zone: anche un lancio deciso si ferma sulla carta successiva (la fila non vola oltre) */
.pack, .fmt { scroll-snap-stop: always; }
/* schermo largo: la fila dei pacchetti non scorre più di lato (va a capo), quindi le carte diventerebbero punti di
   aggancio della pagina intera: una fermata in più a metà sezione (la pagina andava oltre e tornava indietro) e un
   sobbalzo a ogni passaggio del mouse (la carta si alza di 6px e la pagina la seguiva) */
@media (min-width: 1100px) { .pack { scroll-snap-align: none; } }

/* ---------- prova: scorrimento "morbido" (?scorrimento=morbido, app.js) ----------
   la pagina la muove app.js seguendo il dito (blocca solo i gesti verticali, uno per uno): niente scatto del browser;
   file di carte, anello, galleria, finestre e menu restano nativi */
html.pg-js { scroll-snap-type: none !important; scroll-behavior: auto !important; overscroll-behavior-y: none; }

/* ---------- rifiniture dal collaudo ---------- */
/* telefono stretto: nella barra in basso il prezzo resta intero (via "/pers.", etichetta più stretta) */
@media (max-width: 380px) {
  .buybar p small { display: none; }
  .buybar p span { letter-spacing: 0; }
}
/* locandine sul telefono: "Apri" non è un secondo pulsante arancione accanto a "Prenota" della barra */
@media (max-width: 699px) {
  .posters__ctrl .btn--solid { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
}
/* settimana: righe tutte uguali (i loghi in corsivo e la pillola non le allungano: la pillola alta quanto il titolo) */
@media (max-width: 899px) {
  .night__logo { height: 1.55rem; display: flex; align-items: center; overflow: visible; }
  .night .pill { padding-block: .25em; line-height: 1.2; }
}
/* schermo largo: il logo tiene l'altezza di una riga (Stella, più alta, allungava la sua di 6px) */
@media (min-width: 900px) { .night__logo { height: 1.1em; display: flex; align-items: center; } }