/* ==================================================
   SCHEDA iOS 2.A — spina dorsale (stabile) + testo scroll-driven
   File dedicato (non tocca css/hero.css). V2.4: riscritta l'architettura
   per non far crescere la card col contenuto — vedi V2_4_NOTE.md per il
   dettaglio completo del cambio rispetto alla V2.3.
   ================================================== */

:root {
  /* V2.3 — colore della iOS 2.A: tono taupe/marrone-grigio caldo
     (riferimento fornito #897A70, usato cosi' come dato). Invariato. */
  --taupe: #897a70;
}

.ios2a {
  padding-block: var(--scene-gap);
}

/* --------------------------------------------------
   OUTER SCROLL STAGE — fornisce solo la DISTANZA di scroll necessaria
   alla lettura (nessuno scroll interno: e' lo scroll della PAGINA).
   Altezza = un viewport (per la parte sticky) + l'esatta eccedenza del
   testo (--ios2a-pin-extra, calcolata in JS = altezza reale del
   text-track meno l'altezza della finestra di testo): non un multiplo
   arbitrario, ma la distanza fisica 1:1 che serve a far scorrere il
   testo per intero, ne' un px di piu' ne' di meno.
   -------------------------------------------------- */
[data-ios2a-pin] {
  position: relative;
  height: calc(100dvh + var(--ios2a-pin-extra, 0px));
  height: calc(100svh + var(--ios2a-pin-extra, 0px));
}

/* --------------------------------------------------
   STICKY iOS CARD — resta pinnata mentre lo stage scorre. E' l'UNICO
   elemento sticky di tutta la scheda (a differenza della V2.3, la
   colonna della spina qui sotto NON e' piu' sticky per conto suo: non
   serve, l'intera card e' gia' stabile).
   -------------------------------------------------- */
.ios2a-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  height: 100svh;
  display: flex;
}

.ios-card--ios2a {
  width: 100%;
  height: 100%;
  background: var(--taupe);
  display: flex;
  flex-direction: column;
  /* Niente override di overflow qui: a differenza della V2.3, adesso
     l'elemento sticky (.ios2a-sticky) e' un ANTENATO di questa card, non
     un suo discendente — quindi l'overflow:hidden ereditato da .ios-card
     (necessario per gli angoli arrotondati) non intrappola piu' nulla. */
}

/* --------------------------------------------------
   V3.4 — due slide orizzontali (2.1A Sintesi / 2.1B Approfondimento),
   stesso sistema .horizontal-story gia' usato altrove nel sito per lo
   swipe/drag (js/main.js, generico, non toccato): qui ogni slide occupa
   l'intera larghezza/altezza della card (non "sbircia" la successiva),
   come gia' fa .ios6-panel per la Seduta conoscitiva. L'adattamento
   dell'altezza di scroll (--ios2a-pin-extra) alla slide attiva e'
   gestito da js/ios2a-swipe.js.
   -------------------------------------------------- */
.ios2a-story {
  height: 100%;
  margin-block: 0;
  /* V3.8 — Modifica 2: la card diventa una colonna flex per far posto,
     SOLO al suo interno, alla barra indicatori+hint generata da
     js/main.js (stesso standard riutilizzabile delle altre sezioni
     multi-slide). Il track passa da height:100% fisso a flex:1 (sotto):
     tutto cio' che sta dentro (pannelli, colonna testo, spina) e' gia'
     espresso in %/dvh/svh relativi o misurato via JS in tempo reale, mai
     in px fissi legati alla vecchia altezza — quindi si adatta da solo
     alla nuova altezza, leggermente ridotta, senza bisogno di ricalcolare
     alcun valore a mano. Nessuna proporzione della CARD (ios-card--ios2a,
     ancora 100% dell'altezza reale del viewport) e' stata toccata. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ios2a-track {
  flex: 1;
  min-height: 0;
  gap: 0;
  padding: 0;
}

/* V3.8 — Modifica 2: dots/hint generici (css/components.css) sopra lo
   sfondo scuro (--taupe) della card: stesso sistema, palette adattata per
   restare leggibile (bianco/quasi bianco anziche' i toni chiari pensati
   per sfondo chiaro). Sostituisce il vecchio `.ios2a-hint` (rimosso,
   ridondante con questa barra unica sempre visibile su entrambe le
   slide). */
.ios2a-story .horizontal-story-progress span {
  background: rgba(245, 240, 234, 0.4);
}

.ios2a-story .horizontal-story-progress span.is-active {
  background: #ffffff;
}

.ios2a-story .horizontal-story-hint {
  color: rgba(245, 240, 234, 0.92);
}

.ios2a-panel {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.ios2a-layout {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* --------------------------------------------------
   Colonna sinistra — spina dorsale, ora semplicemente stabile (l'intera
   card e' gia' sticky, non serve un secondo meccanismo). Zero grandi
   translate: resta ferma per tutta la lettura, come richiesto.
   -------------------------------------------------- */
.ios2a-spine-col {
  flex: 0 0 36%;
  /* FIX cruciale — un flex item ha di default min-width:auto (non 0): se
     il contenuto (qui la spina, che con height:70dvh + aspect-ratio
     "preferirebbe" essere larga ~330px) ha una dimensione intrinseca
     maggiore della flex-basis, il browser allarga comunque la colonna
     oltre il 36% per accomodarla, anche con flex-shrink:0 — la colonna
     misurava ~350px invece di ~140px, schiacciando il testo a ~37px.
     min-width:0 disattiva questo comportamento automatico: la colonna
     resta ancorata al 36% e max-width:100% sulla spina (sotto) la
     ridimensiona di conseguenza, come previsto. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(16px, calc(4 * var(--vw)), 30px) clamp(8px, calc(2.6 * var(--vw)), 18px);
}

.ios2a-spine-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Nota sull'altezza della spina: con un'immagine cosi' stretta e alta
   (941:1672) e una colonna affiancata al testo, la LARGHEZZA della
   colonna resta comunque il vincolo che decide quanto puo' crescere in
   altezza mantenendo le proporzioni intere (object-fit:contain, mai un
   crop). width:100% (dimensione definita, dalla colonna) + aspect-ratio
   + max-height come TETTO e' la combinazione che il CSS Sizing risolve
   correttamente senza deformare l'immagine — vedi V2_4_NOTE.md.
   Questo box NON viene ridimensionato: resta la "taglia logica" su cui
   si basano le coordinate percentuali dei marker qui sotto. L'ingrandimento
   al 250% (vedi V2_6/V2_7) e' applicato con transform:scale QUI SOTTO,
   non toccando width/aspect-ratio: transform non altera il layout (la
   colonna di testo accanto non si muove di un pixel), scala solo la resa
   visiva — ed e' l'unico modo per far crescere immagine e marker come
   UN'UNICA unita' coerente (vedi nota su .ios2a-marker). */
.ios2a-spine-frame {
  position: relative;
  width: 100%;
  max-height: min(70dvh, 70svh);
  aspect-ratio: 941 / 1672;

  /* Spina ingrandita al 250% (scale(2.5), come richiesto: "circa 2,5
     volte piu' grande, non un +250% aggiuntivo"). transform-origin
     ancorato al bordo sinistro/centro verticale: la spina cresce verso
     destra e simmetricamente in alto/basso, ma il suo bordo sinistro
     resta fermo dov'era — cosi' non viene spinta contro l'angolo
     arrotondato sinistro della card ne' tagliata li'. E' autorizzato
     debordare visivamente oltre la colonna (nessun overflow:hidden su
     .ios2a-spine-col/.ios2a-spine-sticky, vedi sotto): il vero e unico
     confine resta l'overflow:hidden della card stessa (angoli
     arrotondati), che taglia in modo "naturale" e mai brutale. */
  transform: scale(2.5);
  transform-origin: 0% 50%;
  z-index: 0;
}

.ios2a-spine-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Asset ora realmente trasparente (spina_dorsale_trasparente.png, RGBA
     con alpha reale): nessun mix-blend-mode, nessun filtro, nessun
     "trucco" per mascherare uno sfondo residuo — non ce n'e' piu'. La
     spina vive direttamente sul background:var(--taupe) della card. */
}

/* Tre indicatori sovrapposti ai tre punti luminosi gia' presenti
   nell'illustrazione originale (coordinate misurate in %, nessuna
   modifica al PNG). js/ios-spine-card.js imposta data-active in base
   alla STESSA progressione di scroll che muove il text-track.
   Nota sul 250%: i marker sono figli assoluti di .ios2a-spine-frame,
   lo STESSO elemento su cui e' applicato transform:scale(2.5) — quindi
   posizione (%) e dimensione vengono scalate automaticamente insieme
   all'immagine, come un'unica unita' visiva: nessun ricalcolo manuale di
   coordinate necessario, i tre punti restano esattamente sulle stesse
   vertebre a qualunque dimensione. */
.ios2a-marker {
  position: absolute;
  width: clamp(30px, calc(7 * var(--vw)), 46px);
  height: clamp(30px, calc(7 * var(--vw)), 46px);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: radial-gradient(circle, rgba(255, 214, 140, 0.95) 0%, rgba(255, 214, 140, 0.4) 45%, rgba(255, 214, 140, 0) 72%);
  opacity: 0.22;
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
  pointer-events: none;
}

.ios2a-marker--1 { left: 29.65%; top: 15.31%; }
.ios2a-marker--2 { left: 22.32%; top: 36.78%; }
.ios2a-marker--3 { left: 13.5%;  top: 64.47%; }

.ios2a-marker[data-active="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Stato finale (chiusura): tutti e tre visibili insieme, ma sobri —
   opacita' intermedia, nessuno scale-up, "senza glow aggressivo". */
.ios2a-marker[data-active="all"] {
  opacity: 0.75;
  transform: translate(-50%, -50%) scale(1);
}

/* --------------------------------------------------
   V3.4 — iOS 2.1A "Sintesi": stessa colonna spina, ma testo statico (in
   flusso normale, nessun track/transform) e piu' compatto — deve stare
   per intero in un solo viewport (--ios2a-pin-extra:0 quando questa
   slide e' attiva, vedi js/ios2a-swipe.js), quindi qui la tipografia e'
   volutamente un po' piu' piccola/stretta che in 2.1B.
   -------------------------------------------------- */
.ios2a-text-col--a {
  justify-content: center;
  padding-inline: clamp(14px, calc(4 * var(--vw)), 28px);
}

.ios2a-block--a {
  width: 100%;
  max-width: 44ch;
}

.ios2a-block.ios2a-block--a p {
  margin: 0 0 0.42em;
  font-family: var(--font-body);
  font-size: clamp(0.74rem, calc(2.6 * var(--vw)), 0.86rem);
  line-height: 1.32;
  color: #f5f0ea;
}

.ios2a-block.ios2a-block--a p:last-child {
  margin-bottom: 0;
}

.ios2a-block.ios2a-block--a p.ios2a-block__kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(0.88rem, calc(3.1 * var(--vw)), 1rem);
  color: #ffffff;
  margin-bottom: 0.2em;
}

.ios2a-block.ios2a-block--a p.ios2a-block__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.82rem, calc(2.9 * var(--vw)), 0.94rem);
  color: #ffffff;
}

/* --------------------------------------------------
   Colonna destra — finestra di testo (larghezza quasi piena, vedi punto
   4 della richiesta) + track scroll-driven.
   -------------------------------------------------- */
.ios2a-text-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* La spina al 250% (vedi .ios2a-spine-frame) e' autorizzata a debordare
     visivamente oltre la sua colonna: qui garantiamo che il testo resti
     SEMPRE sopra e SEMPRE leggibile, con due difese indipendenti —
     1) z-index piu' alto della colonna spina, per essere certi di essere
     dipinti dopo (sopra) qualunque debordamento;
     2) lo stesso colore di fondo della card (--taupe, invariato) applicato
     qui: se la spina debordasse fin sotto il testo, sparirebbe comunque
     dietro un fondo identico a quello della card — nessuna cucitura
     visibile, nessun nuovo "riquadro" (e' lo stesso colore della scena). */
  position: relative;
  z-index: 2;
  background: var(--taupe);
}

/* "Finestra" di ritaglio — MAI uno scroll: overflow:hidden qui serve solo
   a nascondere le parti del track fuori dai bordi correnti, il track si
   muove per intero via transform (JS), l'utente non puo' scrollare questo
   elemento per conto suo (nessuna scrollbar, nessun overflow:auto). */
.ios2a-text-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-inline: clamp(18px, calc(5 * var(--vw)), 34px);
}

.ios2a-text-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 11vh, 104px);
  padding-block: clamp(28px, calc(6 * var(--vw)), 44px);
  will-change: transform;
  /* niente transition sul transform: la relazione scroll -> posizione
     deve essere immediata e fisica, mai temporizzata (vedi richiesta). */
}

.ios2a-block {
  /* Punto 4 della richiesta — niente ulteriore "70%" dentro una colonna
     gia' stretta: qui il testo usa (quasi) tutta la larghezza della sua
     colonna; il tetto in ch conta solo su schermi larghi (desktop),
     dove altrimenti le righe diventerebbero scomodamente lunghe. */
  width: 100%;
  max-width: 46ch;
}

.ios2a-block p {
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, calc(3.7 * var(--vw)), 1.05rem);
  line-height: 1.62;
  color: #f5f0ea;
}

.ios2a-block p:last-child {
  margin-bottom: 0;
}

.ios2a-block p.ios2a-block__kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, calc(4.4 * var(--vw)), 1.4rem);
  color: #ffffff;
  margin-bottom: 0.9em;
}

.ios2a-block p.ios2a-block__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, calc(4 * var(--vw)), 1.22rem);
  color: #ffffff;
}

.ios2a-block p.ios2a-block__emphasis {
  font-weight: 700;
  color: #ffffff;
}

/* --------------------------------------------------
   prefers-reduced-motion — niente pin, niente sticky, niente transform:
   il contenuto torna in flusso normale (tutti i 5 blocchi leggibili in
   sequenza, spina in cima), esattamente come una scheda iOS "alta"
   qualunque. Nessuna struttura che impedisca di raggiungere il testo.
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-ios2a-pin] {
    height: auto;
  }

  .ios2a-sticky {
    position: relative;
    height: auto;
    display: block;
  }

  .ios-card--ios2a {
    height: auto;
  }

  /* V3.4 — le due slide (2.1A/2.1B) tornano impilate in verticale,
     leggibili in sequenza, niente swipe/scroll-snap da dover scoprire:
     coerente con lo spirito gia' esistente di questo fallback (vedi
     nota sopra). */
  .ios2a-story {
    height: auto;
  }

  .ios2a-track {
    display: block;
    overflow: visible;
  }

  .ios2a-panel {
    flex-basis: auto;
    height: auto;
    overflow: visible;
  }

  .ios2a-panel--a {
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(245, 240, 234, 0.2);
  }

  .ios2a-layout {
    flex-direction: column;
    height: auto;
  }

  .ios2a-spine-col {
    flex: 0 0 auto;
  }

  .ios2a-spine-frame {
    height: auto;
    max-width: calc(60 * var(--vw));
    margin-inline: auto;
    /* Il debordamento scenografico al 250% ha senso solo nel layout
       pin+overlay a due colonne; qui il flusso torna verticale/normale
       (niente colonna di testo accanto da proteggere con z-index), quindi
       lo scale(2.5) va neutralizzato per non produrre overflow orizzontale
       della pagina in un contenitore non pensato per contenerlo. */
    transform: none;
  }

  .ios2a-text-col {
    height: auto;
  }

  .ios2a-text-viewport {
    overflow: visible;
  }

  .ios2a-text-track {
    transform: none !important;
  }

  .ios2a-marker {
    transition: none;
  }
}

/* --------------------------------------------------
   V3.6 — DISATTIVATO: queste due regole modificavano la proporzione
   della colonna spina su schermi larghi (34%/30% invece del 36% mobile),
   una vera differenza di composizione tra mobile e desktop. Con la
   nuova modalita' "mobile shell centrata" (Parte 8-17: su desktop si
   vede la STESSA esperienza mobile, mai una composizione alternativa)
   questo genererebbe un'incoerenza proprio nel punto che il round
   richiede di preservare identico. Codice storico mantenuto in
   commento, non piu' applicato: la colonna spina resta sempre al 36%
   (valore mobile) qualunque sia la larghezza dello schermo.
@media (min-width: 768px) {
  .ios2a-spine-col {
    flex-basis: 34%;
  }
}

@media (min-width: 1024px) {
  .ios2a-spine-col {
    flex-basis: 30%;
  }
}
-------------------------------------------------- */