/* ==========================================================================
   Centro Anna Rita Buonincontro — componenti condivisi delle pagine interne
   --------------------------------------------------------------------------
   Si carica DOPO css/base.css e PRIMA del CSS specifico della pagina
   (es. css/chi-siamo.css, css/servizio.css). Contiene i blocchi riusati da
   tutte le pagine interne: container, titoli, eyebrow, Hero interno, FAQ.
   (Il prefisso .cs- è storico: nasce con "Chi siamo" ma è di uso generale.)
   Riferimento design: artboard 1728px; valori fluidi con clamp(min, Xvw, max)
   dove X = px_design / 17.28.

   Indice
   01. Utility (container, titoli, eyebrow, testo solo per screen reader)
   02. Hero pagina interna
   02b. Riga immagine/testo (variante .split--cs)
   03. FAQ (accordion)
   04. Responsive
   05. Stato pre-animazione
   ========================================================================== */

/* 01. Utility ------------------------------------------------------------ */
.cs-container { width: min(1210px, 100% - 2 * var(--gutter)); margin-inline: auto; }   /* 260px di margine a 1728 */
.cs-title {
  font-family: var(--ff-head); font-weight: 700;
  font-size: clamp(28px, 2.083vw, 36px); line-height: 1.125;
  color: var(--slate);
}
.cs-eyebrow {
  font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 02. Hero pagina interna ------------------------------------------------ */
/* Sfondo: riusa .hero__bg / .hero__bg-img della Home (margine per il parallax) */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 552px; padding: 228px 0 96px;
  background: var(--slate); color: var(--white);
}
.page-hero .hero__bg { z-index: -2; }
.page-hero .hero__bg-img { background-position: 50% 50%; }
/* Overlay del design: ardesia 70% + nero 30% */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
              linear-gradient(rgba(79, 117, 139, .7), rgba(79, 117, 139, .7));
}
.page-hero__eyebrow { color: var(--mist); }
.page-hero__title { margin-top: 18px; font-family: var(--ff-head); font-weight: 700; font-size: clamp(38px, 3.704vw, 64px); line-height: 1; }
.page-hero__text { margin-top: 25px; max-width: 720px; font-size: 20px; line-height: 30px; font-weight: 400; }
/* CTA dell'Hero (opzionale): nel contenitore, così GSAP anima il contenitore e il
   pulsante mantiene le micro-interazioni all'hover. Con [data-scroll] scorre alla
   sezione indicata (js/home.js, modulo 2c). */
.page-hero__cta { margin-top: 36px; }
.page-hero__cta .btn { padding-inline: 41px; }

/* 02b. Riga immagine/testo ---------------------------------------------- */
/* Variante di .split (Home): colonna immagine 703px su 1728 (40.683%), testo a 101px */
.split--cs { grid-template-columns: 40.683% minmax(0, 1fr); min-height: 0; }
.split--cs .split__body {
  align-self: center; max-width: none;
  padding: 124px var(--gutter) 81px clamp(32px, 5.845vw, 101px);
}
.split--cs .split__text { margin-top: 7px; max-width: 620px; }
.split--cs .split__text + .split__text { margin-top: 36px; }

/* 03. FAQ ---------------------------------------------------------------- */
.cs-faq { padding: 78px 0 150px; background: var(--mist); }
.cs-faq__head { text-align: center; }
.cs-faq__head .cs-eyebrow { color: var(--teal); }
.cs-faq__head .cs-title { margin-top: 18px; }
.faq { margin-top: 38px; border-top: 1px solid var(--teal); }
.faq__item { border-bottom: 1px solid var(--teal); }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 21px 22px 21px 24px; text-align: left;
  font-family: var(--ff-head); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--slate);
  transition: color .35s var(--ease);
}
.faq__btn:hover, .faq__btn[aria-expanded="true"] { color: var(--teal); }
/* Icona del design (come in Iter di accesso): cerchio da 28px con tratto sottile (2px), uguale in tutte le pagine */
.faq__icon {
  flex-shrink: 0; width: 28px; height: 28px;
  background: url(../svg/ic-faq-plus-thin.svg) center / contain no-repeat;
  transition: transform .45s var(--ease);
}
.faq__btn:hover .faq__icon { transform: scale(1.1); }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }    /* "+" → "×" */
.faq__panel { overflow: hidden; }
.faq__panel[hidden] { display: none; }
.faq__answer { padding: 0 80px 26px 24px; }
.faq__answer .split__text { margin-top: 0; }
.faq__answer .split__text + .split__text { margin-top: 16px; }   /* risposte su più paragrafi */
.faq__answer a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* 04. Responsive --------------------------------------------------------- */
/* ≤1023 — tablet */
@media (max-width: 1023.98px) {
  .page-hero { min-height: 480px; padding: 200px 0 80px; }
  .split--cs { grid-template-columns: 1fr; }
  .split--cs .split__body { padding: 56px var(--gutter) 72px; max-width: 760px; }
  .cs-faq { padding: 72px 0 96px; }
  .faq__answer { padding-right: 24px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {
  .page-hero { min-height: 0; padding: 164px 0 64px; }
  .page-hero__title br { display: none; }
  .page-hero__text { margin-top: 20px; font-size: 17px; line-height: 28px; }
  .page-hero__cta { margin-top: 28px; }
  .page-hero__cta .btn { width: 100%; padding-inline: 16px; white-space: normal; line-height: 1.15; }
  .split--cs .split__body { padding: 44px 20px 56px; }

  .cs-faq { padding: 56px 0 72px; }
  .faq { margin-top: 28px; }
  .faq__btn { gap: 16px; padding: 18px 0 18px 4px; font-size: 19px; }
  .faq__answer { padding: 0 4px 22px; }
}

/* 05. Stato pre-animazione ----------------------------------------------- */
/* Come per l'Hero della Home: il contenuto del primo schermo parte nascosto
   (solo con JS attivo e senza reduced motion) e viene rivelato da GSAP. */
/* Intro in CSS (come in Home, vedi base.css sez. 14): non attende il JavaScript */
.bic-intro .page-hero__content > * { animation: bic-intro-up 1.1s cubic-bezier(.215, .61, .355, 1) .25s backwards; }
.bic-intro .page-hero__content > :nth-child(2) { animation-delay: .37s; }
.bic-intro .page-hero__content > :nth-child(3) { animation-delay: .49s; }
.bic-intro .page-hero__content > :nth-child(4) { animation-delay: .61s; }