/* ==========================================================================
   Centro Anna Rita Buonincontro — pagina ITER DI ACCESSO
   --------------------------------------------------------------------------
   Ordine di caricamento:
     css/base.css → css/inner.css → css/servizio.css → css/iter-accesso.css
   Riutilizza da base.css: token, bottoni (.btn), header/menu, .hero__bg /
   .hero__bg-img (--flip), .split__text, .splits / .splits__decor (onde di
   sfondo), .booking, .maps, footer, back-to-top.
   Riutilizza da inner.css: .cs-container, .cs-title, .cs-eyebrow, .page-hero,
   FAQ. Da servizio.css: variante FAQ su fondo bianco (.sv-faq).
   Riferimento design: artboard 1728px (iter-accesso/Iter di accesso.pdf).

   Struttura della pagina:
     .page-hero.ia-hero        → Hero (eyebrow + titolo + sottotitolo su 2 righe)
     .ia-intro                 → "Come accedere": titolo, testo su 2 colonne, CTA
     .ia-lists                 → "Liste d'Attesa": introduzione + griglia di .ia-list
     .ia-flow                  → contenitore con le onde di sfondo, contiene la FAQ
     .booking, .maps           → identici alla Home

   Indice
   01. Hero (variante)
   02. Come accedere (testo su due colonne)
   03. Liste d'attesa (card)
   04. FAQ su onde di sfondo
   05. Responsive
   ========================================================================== */

/* 01. Hero --------------------------------------------------------------- */
/* Sottotitolo su due righe (36px di interlinea nel design): fondo a 552px come le altre pagine */
.ia-hero { padding-bottom: 72px; }
/* Foto B/N specchiata: bordo superiore a -456px dalla cima dell'Hero, come nel design */
.ia-hero .hero__bg-img { background-position: 50% 80.5%; }
.ia-hero .page-hero__text { margin-top: 22px; max-width: 760px; line-height: 36px; }

/* 02. Come accedere ------------------------------------------------------ */
.ia-intro { padding: 92px 0 132px; }
/* Due colonne di testo giustificato (580px + 45px + 575px a 1728). Il PDF compone Inter
   leggermente più largo del browser: +0.005em di spaziatura riproduce gli stessi a-capo
   (7 righe a sinistra, 8 a destra). */
.ia-intro__cols {
  margin-top: 27px; max-width: 1200px;
  display: grid; grid-template-columns: 580fr 575fr; column-gap: 45px;
}
.ia-intro__cols .split__text { margin-top: 0; text-align: justify; letter-spacing: .005em; }
.ia-intro__cta { margin-top: 36px; padding-inline: 33px; }

/* 03. Liste d'attesa ----------------------------------------------------- */
.ia-lists { padding: 150px 0 119px; background: var(--mist); scroll-margin-top: 24px; }
.ia-lists__head .split__text { margin-top: 24px; }
.ia-lists__grid {
  margin-top: 64px; max-width: 1207px;                    /* 2 card da 595px + 17px */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 17px;
}
/* Card: bordo ardesia 1px + barra teal di 9px a sinistra (ombra interna), altezza minima 300px */
.ia-list {
  position: relative; display: flex; flex-direction: column; min-height: 300px;
  padding: 42px 32px 34px 40px;
  background: var(--white); border: 1px solid var(--slate);
  box-shadow: inset 9px 0 0 var(--teal), 0 4px 20px rgba(0, 0, 0, .12);
  /* "translate" (e non "transform") per l'hover: non interferisce con il reveal GSAP */
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.ia-list:hover, .ia-list:focus-within {
  translate: 0 -6px;
  box-shadow: inset 13px 0 0 var(--teal), 0 18px 34px -12px rgba(1, 100, 106, .35);
}
.ia-list__title { font-family: var(--ff-head); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--slate); }
.ia-list__text { margin: 8px 0 17px; font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 23px; color: var(--gray-600); }
/* Pulsante a tutta larghezza, ancorato in basso (stessa riga in tutte le card) */
.ia-list__btn { width: 100%; min-height: 54px; margin-top: auto; }

/* 04. FAQ ---------------------------------------------------------------- */
/* Onde di sfondo (waves-2) nella stessa posizione del design: y = 5425.2px dall'inizio
   della pagina, la FAQ inizia a y = 2915px → 2510.2px */
.ia-flow .splits__waves { transform: matrix(.706, -.709, .709, .706, -4238, 2510.2); }
.ia-faq { padding: 120px 0 118px; }
.ia-faq .faq { max-width: 1207px; }                       /* stessa larghezza della griglia delle liste */
/* Icona: cerchio da 28px con tratto sottile, ora predefinita in inner.css */

/* 05. Responsive --------------------------------------------------------- */

@media (min-width: 1024px) {
  /* righe da ~74px e rientri del design (41px a sinistra, 24px a destra dell'icona) */
  .ia-faq .faq__btn { padding: 22px 24px 22px 41px; }
  .ia-faq .faq__answer { padding-left: 41px; }
}

/* ≤1023 — tablet: testo su una colonna */
@media (max-width: 1023.98px) {
  .ia-intro { padding: 72px 0 88px; }
  .ia-intro__cols { grid-template-columns: minmax(0, 1fr); row-gap: 16px; max-width: 760px; }
  .ia-intro__cta { margin-top: 40px; }

  .ia-lists { padding: 88px 0 96px; }
  .ia-lists__grid { margin-top: 48px; gap: 16px; }
  .ia-list { padding: 34px 26px 28px 36px; }

  .ia-faq { padding: 80px 0 96px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {
  .ia-hero { padding-bottom: 64px; }
  .ia-hero .page-hero__text { margin-top: 20px; line-height: 28px; }

  .ia-intro { padding: 56px 0 64px; }
  .ia-intro__cols { margin-top: 20px; }
  .ia-intro__cols .split__text { text-align: left; }
  .ia-intro__cta { width: 100%; margin-top: 32px; padding-inline: 16px; white-space: normal; line-height: 1.15; }

  .ia-lists { padding: 64px 0 72px; }
  .ia-lists__head .split__text { margin-top: 18px; }
  .ia-lists__grid { margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .ia-list { min-height: 0; padding: 26px 22px 24px 31px; }
  .ia-list__text { margin-bottom: 24px; }

  .ia-faq { padding: 64px 0 72px; }
}