/* ==================================================
   SISTEMA "SCHEDE iOS"
   Primitive riutilizzabile per grandi superfici autonome con angoli
   molto arrotondati. Ogni macro-capitolo del sito puo' diventare una
   .ios-card: la coerenza nasce dal comportamento della superficie
   (radius, margine, easing, restringimento in uscita), non da un
   colore/sfondo obbligatorio — vedi 05_SPEC_VISIVE_E_TESTI/SPEC_SISTEMA_SCHEDE_IOS.md.
   ================================================== */

.ios-card {
  position: relative;
  /* V1.7 — niente margine laterale fisso: a riposo la scheda e' quasi a
     piena larghezza (niente bordi bianchi sempre visibili). Il margine
     torna solo su desktop (vedi sotto) dove la scheda diventa un riquadro
     centrato. Su mobile l'unico restringimento laterale e' quello,
     lieve e temporaneo, dell'--exit-progress qui sotto. */
  margin-inline: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--background);
  /* --exit-progress va da 0 (a riposo) a 1 (piede della scheda che ha
     superato la meta' dello schermo risalendo verso l'alto, cioe' la
     scheda sta per uscire): impostata via JS per OGNI [data-ios-card],
     stesso comportamento uniforme su tutte le schede (vedi js/hero.js,
     setupCardExit). clip-path assottiglia la SUPERFICIE di una
     percentuale minima (100% -> 97% di larghezza), mai lo scale() del
     contenuto interno (testo/immagine restano alla loro dimensione reale). */
  --exit-progress: 0;
  clip-path: inset(
    0
    calc(var(--exit-progress) * var(--card-exit-inset))
    0
    calc(var(--exit-progress) * var(--card-exit-inset))
    round var(--card-radius)
  );
}

@media (min-width: 1024px) {
  .ios-card {
    max-width: var(--card-max-width-wide);
    margin-inline: auto;
  }

  .ios-card--narrow {
    max-width: var(--card-max-width);
  }
}

/* superficie piena: la card occupa tutta l'altezza utile del viewport */
.ios-card--viewport {
  min-height: 100dvh;
  min-height: 100svh;
}

/* varianti di "materiale" — solo lo sfondo cambia, il comportamento resta identico */
.ios-card--doodle {
  background: #ffffff;
}

/* V1.7 — scheda iOS 1: tinta unita "terra rossa" stile campo da tennis in
   terra battuta, nessuna texture/pattern residuo, testi bianchi (vedi
   css/hero.css per i colori del testo di .intro-cover). */
.ios-card--intro {
  background: var(--clay-red);
}

.ios-card--paper {
  background: var(--background-secondary);
}

/* V2.0 — scheda iOS 3 "Viaggi trasformativi": tono "sand", volutamente
   piu' distinto dal fondo pagina di --background-secondary (troppo simile
   a --background, mascherava lo stondato inferiore — vedi css/variables.css).
   Il layout interno (sequenza orizzontale di slide) e' in css/hero.css. */
.ios-card--ios3 {
  background: var(--sand);
}

.ios-card--dark {
  background: var(--text);
  color: var(--background);
}

@media (prefers-reduced-motion: reduce) {
  .ios-card {
    clip-path: none !important;
  }
}