/* ==================================================
   PAGINE AUTONOME — "Perché un viaggio può trasformare",
   "Prenota il tuo viaggio trasformativo" (V2.9) e "Checkout unificato"
   (V3.1, vedi checkout.html + js/checkout.js).
   File dedicato, caricato dalle pagine autonome (non da index.html — la
   Home non ne ha bisogno e non va toccata). Riusa il sistema .ios-card
   generico (radius, spaziatura, restringimento laterale in uscita via
   [data-ios-card], vedi css/ios-cards.css e js/hero.js — nessun codice
   nuovo necessario per quella parte, nessuna animazione inventata).
   ================================================== */

.viaggi-page,
.prenota-page,
.checkout-page,
.filtro-page {
  /* L'header e' position:fixed (vedi css/components.css): questa e' la
     PRIMA sezione della pagina, serve quindi liberare spazio sotto la
     barra esattamente come fa .intro-cover sulla Home (stesso calcolo,
     css/hero.css riga 9), non il semplice --scene-gap usato tra due
     card che si susseguono nel normale flusso. */
  padding-top: calc(var(--brand-bar-height) + var(--safe-top) + var(--scene-gap));
  /* Il restringimento laterale in uscita (sistema generico [data-ios-card],
     vedi js/hero.js/setupCardExit) scatta solo quando lo scroll porta il
     piede della card oltre la meta' dello schermo risalendo: su una
     pagina autonoma con una sola card e un footer breve non ci sarebbe
     spazio di scroll sufficiente perche' questo accada mai. Il margine
     extra qui sotto (oltre al normale --scene-gap) garantisce lo spazio
     necessario perche' l'effetto, gia' esistente e non reinventato, sia
     davvero raggiungibile scrollando fino in fondo. */
  /* V3.7 — 34% del portrait-stage invece di 34vh puro: su un telefono
     ruotato in landscape 34vh sarebbe minuscolo (vera altezza ridotta),
     mentre lo spazio di scroll necessario a [data-ios-card] dipende
     dalla larghezza della shell (portrait-stage), non dall'orientamento
     reale del device. */
  padding-bottom: max(var(--scene-gap), calc(34 * var(--ps-stage-pct)));
}

/* Entrambe le card sono molto lunghe (115% / 110% della iOS 2, vedi
   sotto) ma il contenuto reale è compatto: il link "indietro" resta
   ancorato in alto (flex:0 0 auto), il resto del contenuto è centrato
   nello spazio verticale residuo — stessa soluzione già usata per la
   iOS 5, evita un vuoto residuo in fondo alla card. */
.ios-card--viaggi-info,
.ios-card--prenota,
.ios-card--checkout,
.ios-card--filtro {
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

/* Lunghezza = percentuale della iOS 2 (184vh, --hero-scroll-span in
   css/hero.css — fonte di verità, NON stimata; V3.8: valore di default
   invariato, ora usato solo come area di sicurezza del pin, vedi
   js/hero.js): 184 * 1.15 = 211.6vh, 184 * 1.10 = 202.4vh. */
/* V3.7 — le 4 card sotto passano al riferimento canonico
   "portrait-stage" (vedi variables.css): stessa proporzione (211.6%/
   202.4%), ma stabile anche in landscape/tablet/desktop invece di
   basarsi sulla vera altezza del viewport. Le righe *vh/*dvh restano
   come fallback per browser senza supporto cqw/svh. */
.ios-card--viaggi-info {
  min-height: 211.6svh;
  min-height: 211.6dvh;
  min-height: calc(211.6 * var(--ps-stage-pct));
}

.ios-card--prenota {
  min-height: 202.4svh;
  min-height: 202.4dvh;
  min-height: calc(202.4 * var(--ps-stage-pct));
}

.ios-card--checkout {
  min-height: 202.4svh;
  min-height: 202.4dvh;
  min-height: calc(202.4 * var(--ps-stage-pct));
}

.ios-card--filtro {
  min-height: 202.4svh;
  min-height: 202.4dvh;
  min-height: calc(202.4 * var(--ps-stage-pct));
}

.viaggi-page__nav,
.prenota-page__nav,
.checkout-page__nav,
.filtro-page__nav {
  flex: 0 0 auto;
  padding: clamp(20px, calc(5 * var(--vw)), 32px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
}

.filtro-page__nav--bottom {
  padding-top: clamp(28px, calc(6 * var(--vw)), 40px);
  padding-bottom: clamp(28px, calc(6 * var(--vw)), 40px);
}

.viaggi-page__content,
.prenota-page__content,
.checkout-page__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, calc(6 * var(--vw)), 40px) clamp(20px, calc(6 * var(--vw)), 40px) clamp(40px, calc(9 * var(--vw)), 64px);
}

/* Il Filtro ha due possibili stati (locked/unlocked) di lunghezza
   diversa: a differenza delle altre pagine qui il blocco contenuto non
   e' centrato verticalmente in tutto lo spazio residuo (col testo
   lungo dello stato unlocked risulterebbe uno scroll scomodo prima di
   vedere l'inizio) — flex-start, il respiro naturale del contenuto. */
.filtro-page__locked,
.filtro-page__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, calc(6 * var(--vw)), 40px) clamp(20px, calc(6 * var(--vw)), 40px) clamp(40px, calc(9 * var(--vw)), 64px);
}

/* Senza questa regola, il display:flex qui sopra vince sulla regola
   [hidden]{display:none} dello user-agent (stessa specificita', ma
   questa arriva dopo nel foglio stile): risultato, l'attributo hidden
   smetteva di funzionare e i due stati (locked/unlocked) restavano
   entrambi visibili insieme. Stesso trattamento gia' applicato a
   .interest-sheet[hidden] in css/travel-planner.css. */
.filtro-page__locked[hidden],
.filtro-page__content[hidden] {
  display: none;
}

.viaggi-page__title,
.prenota-page__title,
.checkout-page__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, calc(7 * var(--vw)), 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--text);
}

.viaggi-page__quote {
  margin: clamp(18px, calc(4 * var(--vw)), 26px) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, calc(4.2 * var(--vw)), 1.5rem);
  line-height: 1.4;
  color: var(--accent);
}

.viaggi-page__body {
  margin-top: clamp(32px, calc(7 * var(--vw)), 48px);
  max-width: 42rem;
  text-align: left;
}

.viaggi-page__body p {
  margin: 0 0 1.3em;
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.6 * var(--vw)), 1.12rem);
  line-height: 1.7;
  color: var(--text-muted);
}

.viaggi-page__body p:last-child {
  margin-bottom: 0;
}

/* Le citazioni interne al testo (dal file sorgente, invariate) —
   leggero rilievo tipografico, stessa logica gia' usata altrove nel
   sito per le citazioni (corsivo, colore pieno), nessuna riscrittura
   del contenuto. */
.viaggi-page__body p.viaggi-page__pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, calc(3.8 * var(--vw)), 1.2rem);
  color: var(--text);
}

.viaggi-page__cta {
  margin-top: clamp(36px, calc(8 * var(--vw)), 56px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, calc(3 * var(--vw)), 18px);
  justify-content: center;
}

/* V3.3 — testo editoriale sull'origine del nome "Psicologia Selvatica",
   stesso trattamento tipografico di .viaggi-page__body (paragrafi
   separati, respiro, nessun blocco compresso). */
.viaggi-page__wild-text {
  margin-top: clamp(32px, calc(7 * var(--vw)), 48px);
  max-width: 42rem;
  text-align: left;
}

.viaggi-page__wild-text p {
  margin: 0 0 1.1em;
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.6 * var(--vw)), 1.1rem);
  line-height: 1.7;
  color: var(--text-muted);
}

.viaggi-page__wild-text p:last-child {
  margin-bottom: 0;
}

/* Invito a "Viaggi Selvatici": pulsante volutamente piu' importante
   (~25% in piu' di padding/font-size rispetto a .button-secondary) e
   microcopy piu' piccola subito sotto, centrati insieme. */
.viaggi-page__travel-vote {
  margin-top: clamp(28px, calc(6 * var(--vw)), 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, calc(2.4 * var(--vw)), 14px);
}

.viaggi-page__travel-vote-btn {
  padding: 1.13rem 2.25rem;
  font-size: 1.19rem;
}

.viaggi-page__travel-vote-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

.prenota-page__content {
  gap: clamp(14px, calc(3 * var(--vw)), 20px);
}

.prenota-page__links {
  margin-top: clamp(28px, calc(6 * var(--vw)), 40px);
  display: flex;
  gap: clamp(12px, calc(3 * var(--vw)), 20px);
  flex-wrap: wrap;
  justify-content: center;
}

/* --------------------------------------------------
   Checkout unificato (V3.1) — il contenuto testuale e' popolato da
   js/checkout.js in base al prodotto in query string; qui solo lo
   stile, coerente col resto delle pagine autonome. */
.checkout-page__content {
  gap: clamp(10px, calc(2.4 * var(--vw)), 16px);
}

.checkout-page__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.checkout-page__desc {
  margin: 0;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.6 * var(--vw)), 1.1rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.checkout-page__summary {
  margin-top: clamp(18px, calc(4 * var(--vw)), 26px);
  width: 100%;
  max-width: 26rem;
}

.checkout-page__plans {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, calc(3 * var(--vw)), 20px);
}

.checkout-page__plan {
  padding-bottom: clamp(12px, calc(3 * var(--vw)), 18px);
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}

.checkout-page__plan:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.checkout-page__plan-name {
  margin: 0 0 0.3em;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 560;
  color: var(--text);
}

.checkout-page__plan-detail {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-muted);
}

.checkout-page__plan-detail strong {
  color: var(--text);
}

.checkout-page__cta {
  margin-top: clamp(28px, calc(6 * var(--vw)), 40px);
}

.checkout-page__note {
  margin: clamp(16px, calc(3.6 * var(--vw)), 22px) 0 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.checkout-page__note:empty {
  display: none;
}

/* --------------------------------------------------
   "Filtro di Selvaticità" (V3.3) — due stati mostrati/nascosti da
   js/filtro-selvaticita.js in base a js/feature-access.js.
   -------------------------------------------------- */
.filtro-page__title {
  margin: 0 0 clamp(28px, calc(6 * var(--vw)), 40px);
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, calc(6.6 * var(--vw)), 3rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text);
}

.filtro-page__media {
  width: min(calc(50 * var(--vw)), 220px);
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(28px, calc(6 * var(--vw)), 40px);
}

/* Wilson qui e' usato piu' grande rispetto alla piccola icona della
   lista Community (index.html, slide 6D) — stesso file sorgente,
   dimensione diversa a seconda del contesto, mai deformato. */
.filtro-page__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.filtro-page__body {
  max-width: 38rem;
  text-align: left;
}

.filtro-page__body p {
  margin: 0 0 1.3em;
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.6 * var(--vw)), 1.1rem);
  line-height: 1.7;
  color: var(--text-muted);
}

.filtro-page__body p:last-child {
  margin-bottom: 0;
}

.filtro-page__highlight {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, calc(4 * var(--vw)), 1.35rem);
  color: var(--text);
}

.filtro-page__highlight--score {
  text-align: center;
  font-style: normal;
  font-weight: 560;
  letter-spacing: 0.02em;
}

.filtro-page__whatsapp {
  margin-top: clamp(36px, calc(8 * var(--vw)), 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, calc(3 * var(--vw)), 16px);
}

.filtro-page__whatsapp-feedback {
  margin: 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* Stato LOCKED */
.filtro-page__locked-title {
  margin: 0 0 clamp(16px, calc(3.6 * var(--vw)), 22px);
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, calc(5.6 * var(--vw)), 2.3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}

.filtro-page__locked-text {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.filtro-page__locked-cta {
  margin-top: clamp(28px, calc(6 * var(--vw)), 40px);
}

/* --------------------------------------------------
   FAQ (V3.5, nuova) — pagina standalone predisposta solo nella struttura
   (nessun contenuto lungo/non fornito): stesso sistema .ios-card (radius,
   restringimento laterale in uscita via [data-ios-card]) e stessa
   tipografia delle altre pagine autonome, card piu' corta perche' il
   contenuto reale e' ancora minimo.
   -------------------------------------------------- */
.faq-page {
  padding-top: calc(var(--brand-bar-height) + var(--safe-top) + var(--scene-gap));
  padding-bottom: var(--scene-gap);
}

.ios-card--faq {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  min-height: 62svh;
  min-height: 62dvh;
  /* V3.7 — vedi nota su .ios-card--viaggi-info sopra. */
  min-height: calc(62 * var(--ps-stage-pct));
}

.faq-page__nav {
  flex: 0 0 auto;
  padding: clamp(20px, calc(5 * var(--vw)), 32px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
}

.faq-page__nav--bottom {
  padding-top: clamp(28px, calc(6 * var(--vw)), 40px);
  padding-bottom: clamp(28px, calc(6 * var(--vw)), 40px);
}

.faq-page__title {
  margin: clamp(20px, calc(5 * var(--vw)), 32px) clamp(20px, calc(6 * var(--vw)), 40px) clamp(12px, calc(3 * var(--vw)), 16px);
  font-family: var(--font-display);
  font-size: clamp(2rem, calc(6.6 * var(--vw)), 3rem);
  font-weight: 500;
  color: var(--text);
}

.faq-page__intro {
  margin: 0 clamp(20px, calc(6 * var(--vw)), 40px) clamp(28px, calc(6 * var(--vw)), 40px);
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.4 * var(--vw)), 1.1rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.faq-page__list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(2.4 * var(--vw)), 14px);
  padding: 0 clamp(20px, calc(6 * var(--vw)), 40px) clamp(24px, calc(6 * var(--vw)), 36px);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: clamp(14px, calc(3.4 * var(--vw)), 18px) clamp(16px, calc(4 * var(--vw)), 22px);
}

.faq-item__question {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, calc(3.6 * var(--vw)), 1.2rem);
  font-weight: 500;
  color: var(--text);
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__answer {
  margin: clamp(10px, calc(2.4 * var(--vw)), 14px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, calc(3.2 * var(--vw)), 1rem);
  line-height: 1.6;
  color: var(--text-muted);
}