/* ==========================================================================
   Centro Anna Rita Buonincontro — pagina ASSICURAZIONI E CONVENZIONI
   --------------------------------------------------------------------------
   Ordine di caricamento:
     css/base.css → css/inner.css → css/servizio.css → css/assicurazioni.css
   Riutilizza da base.css: token, bottoni (.btn, .btn--white, .btn--teal),
   header/menu, .hero__bg / .hero__bg-img (--flip), .split / .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,
   .split--cs (riga immagine/testo), FAQ. Da servizio.css: .sv-head.
   Da chi-siamo: elenco puntato .cs-list (ridichiarato qui, vedi sez. 04).
   Riferimento design: artboard 1728px
   (assicurazioni-convenzioni/Assicurazioni e convenzioni.pdf).

   Struttura della pagina:
     .page-hero.ac-hero        → Hero (eyebrow + titolo + sottotitolo su 1 riga)
     .ac-partner               → "Assicurazioni Partner": fascia ardesia + marchio + CTA
     .ac-modes                 → "Come prenotare": introduzione + 2 card + CTA
     .ac-flow > .ac-docs       → "Documentazione Necessaria": immagine/testo su onde
     .cs-faq.ac-faq            → FAQ
     .booking, .maps           → identici alla Home

   Indice
   01. Hero (variante)
   02. Assicurazioni Partner
   03. Come prenotare (card)
   04. Documentazione necessaria
   05. FAQ (variante)
   06. Responsive
   ========================================================================== */

/* 01. Hero --------------------------------------------------------------- */
/* Foto B/N specchiata: bordo superiore a -415.8px dalla cima dell'Hero, come nel design */
.ac-hero .hero__bg-img { background-position: 50% 72.7%; }
/* Sottotitolo su una sola riga (827px nel design) */
.ac-hero .page-hero__text { margin-top: 37px; max-width: 860px; }   /* baseline a 381px come nel design */

/* 02. Assicurazioni Partner ---------------------------------------------- */
.ac-partner {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 110px 0 132px; background: var(--slate); color: var(--white); text-align: center;
}
/* Marchio in trasparenza (stesso asset di "Prenota" / "Carta dei Servizi"): nel design
   è visibile solo negli ultimi 604px a destra; resta ancorato al bordo destro. */
.ac-partner__mark {
  position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 604px; max-width: 45%;
  overflow: hidden; pointer-events: none;
}
.ac-partner__mark::before {
  content: ""; position: absolute; top: -40px; left: -868.5px; width: 2548.3px; height: 1333.4px;
  background: url(../img/brand-mark.webp) 0 0 / 100% 100% no-repeat;
  opacity: .07;
}
.ac-partner .cs-title { color: var(--white); }
/* Colonna di testo di ~610px: stessi a-capo del design (3 righe) */
.ac-partner .split__text { max-width: 610px; margin: 27px auto 0; }
/* Larghezza del design (507px) come minimo: con testi più lunghi il pulsante si allarga invece di andare a capo */
.ac-partner .btn { min-width: 507px; margin: 31px auto 0; }

/* 03. Come prenotare ----------------------------------------------------- */
.ac-modes { padding: 131px 0 94px; background: var(--mist); }
.ac-modes .sv-head .split__text { margin-top: 23px; }
.ac-cards {
  max-width: 1207px; margin: 54px auto 0;                  /* 2 card da 583.5px + 40px */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
}
/* Card: bordo ardesia 1px + barra teal di 8px in basso (ombra interna) */
.ac-card {
  display: flex; flex-direction: column; min-height: 227px;
  padding: 44px 50px 46px 67px;
  background: var(--white); border: 1px solid var(--slate);
  box-shadow: inset 0 -8px 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);
}
.ac-card:hover {
  translate: 0 -6px;
  box-shadow: inset 0 -12px 0 var(--teal), 0 18px 34px -12px rgba(1, 100, 106, .35);
}
/* Icone di altezza diversa allineate in basso (come nel design), rientrate di 12px */
.ac-card__icon { display: flex; align-items: flex-end; height: 27px; padding-left: 12px; }
.ac-card__icon img { width: auto; transition: scale .5s var(--ease); transform-origin: 0 100%; }
.ac-card:hover .ac-card__icon img { scale: 1.12; }
.ac-card__title { margin-top: 21px; font-family: var(--ff-head); font-weight: 700; font-size: 24px; line-height: 28px; color: var(--slate); }
.ac-card__text { margin-top: 5px; font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 23px; color: var(--gray-600); }
.ac-modes .sv-cta { width: fit-content; min-width: 507px; margin-top: 54px; }
/* Nota sotto le card (stesso carattere del testo delle card) */
.ac-modes__note {
  max-width: 820px; margin: 36px auto 0; text-align: center;
  font-family: var(--ff-head); font-weight: 400; font-style: italic; font-size: 16px; line-height: 23px; color: var(--gray-600);
}
.ac-modes__note + div .sv-cta { margin-top: 36px; }

/* 04. Documentazione necessaria ------------------------------------------ */
/* Onde di sfondo (waves-2) nella stessa posizione delle altre pagine: y = 5425.2px
   dall'inizio della pagina, la sezione inizia a y = 1798px → 3627.2px */
.ac-flow .splits__waves { transform: matrix(.706, -.709, .709, .706, -4238, 3627.2); }
.ac-docs .split__media img { object-position: 50% 50%; }
.ac-docs .split__body { align-self: start; padding-bottom: 97px; }
.ac-docs .split__body > * { max-width: 660px; }                        /* colonna di testo del design */
.ac-docs .split__text { text-align: justify; }
/* Elenco puntato (come "Politica aziendale" di Chi siamo): quadratino che sporge a sinistra */
.cs-list { margin: 16px 0 0 -5.5px; }
.cs-list li {
  position: relative; padding-left: 19.5px;
  font-family: var(--ff-head); font-weight: 700; font-size: 20px; line-height: 32px; color: var(--teal);
}
.cs-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; background: currentColor; }
.ac-docs .cs-list + .split__text { margin-top: 16px; }
.ac-docs .btn { margin-top: 28px; padding-inline: 54px; }

/* 05. FAQ ---------------------------------------------------------------- */
.ac-faq { padding: 123px 0 134px; }
.ac-faq .faq { max-width: 1206px; margin-inline: auto; }

/* 06. Responsive --------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Hero: nel design il testo parte da x = 264px (5px oltre il bordo del container) */
  .ac-hero .page-hero__content { padding-left: 5px; }
  /* righe da 74px e rientri del design (12px a sinistra, 22px a destra dell'icona) */
  .ac-faq .faq__btn { padding: 20px 22px 21px 12px; }
  .ac-faq .faq__answer { padding-left: 12px; }
}

/* ≤1199 — card più compatte */
@media (max-width: 1199.98px) {
  .ac-card { padding: 38px 36px 42px 44px; }
}

/* ≤1023 — tablet (la riga immagine/testo si impila come nelle altre pagine) */
@media (max-width: 1023.98px) {
  .ac-partner { padding: 88px 0 96px; }
  .ac-partner__mark { max-width: 60%; }

  .ac-modes { padding: 80px 0 88px; }
  .ac-cards { margin-top: 44px; gap: 20px; }
  .ac-card { min-height: 0; padding: 32px 26px 38px 30px; }
  .ac-card__icon { padding-left: 0; }
  .ac-modes .sv-cta { margin-top: 44px; }
  .ac-modes__note { margin-top: 32px; }
  .ac-modes__note + div .sv-cta { margin-top: 32px; }

  .ac-docs .split__body { padding-top: 56px; padding-bottom: 72px; max-width: 760px; }
  .ac-faq { padding: 80px 0 96px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {
  .ac-hero .page-hero__text { margin-top: 20px; max-width: none; }

  .ac-partner { padding: 64px 0 72px; }
  .ac-partner .split__text { margin-top: 18px; }
  .ac-partner .btn { width: 100%; min-width: 0; margin-top: 32px; white-space: normal; line-height: 1.15; }
  .ac-partner__mark { max-width: 75%; opacity: .7; }

  .ac-modes { padding: 56px 0 64px; }
  .ac-modes .sv-head .split__text { margin-top: 18px; }
  .ac-cards { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 16px; }
  .ac-card { padding: 26px 22px 32px; }
  .ac-card__title { margin-top: 18px; font-size: 22px; line-height: 26px; }
  .ac-modes .sv-cta { width: 100%; min-width: 0; margin-top: 32px; white-space: normal; line-height: 1.15; }

  .ac-docs .split__body { padding: 44px 20px 56px; }
  .ac-docs .split__text { text-align: left; }
  .cs-list li { font-size: 18px; line-height: 28px; }
  .cs-list li::before { top: 12px; }
  .ac-docs .btn { width: 100%; padding-inline: 16px; }

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