/* ==========================================================================
   Centro Anna Rita Buonincontro — Chi siamo
   --------------------------------------------------------------------------
   Si carica DOPO css/base.css e css/inner.css e contiene solo gli stili
   specifici della pagina.
   Riutilizza da base.css: token, bottoni, header/menu, .hero__bg / .hero__bg-img
   (sfondo con parallax), .split (righe immagine/testo), .splits__decor (onde),
   .split__text (testo corrente), .dots, .booking, .maps, footer, back-to-top.
   Riutilizza da inner.css: .cs-container, .cs-title, .cs-eyebrow, .page-hero,
   .split--cs (riga immagine/testo), FAQ.
   Riferimento design: artboard 1728px (chi-siamo/Chi siamo.pdf); valori fluidi
   con clamp(min, Xvw, max) dove X = px_design / 17.28.

   Indice
   03. La nostra storia
   04. La nostra missione (card livelli)
   05. Politica aziendale / Il nostro team (varianti di .split)
   06. Carta dei Servizi
   08. Responsive
   (01 utility, 02 Hero interno, base di .split--cs, 07 FAQ e 09 pre-animazione:
   in css/inner.css)
   ========================================================================== */

/* 03. La nostra storia --------------------------------------------------- */
.cs-story { padding: 92px 0 96px; }
/* Due colonne bilanciate (stesso numero di righe): column-fill: balance divide il testo
   riga per riga. Il reveal GSAP va sul contenitore e non sui paragrafi, perché un
   paragrafo con transform in animazione non viene spezzato tra le colonne. */
.cs-story__cols { margin-top: 27px; columns: 2; column-gap: 45px; column-fill: balance; text-align: justify; }
.cs-story__cols .split__text { margin-top: 0; orphans: 1; widows: 1; }   /* consente la riga singola in cima alla 2ª colonna, come nel design */
.cs-story__cols .split__text + .split__text { margin-top: 36px; }
.cs-story strong { font-weight: 600; color: var(--slate); }

/* 04. La nostra missione ------------------------------------------------- */
.cs-mission { padding: 93px 0 142px; background: var(--mist); text-align: center; }
.cs-mission__intro { max-width: 850px; margin-inline: auto; }
.cs-mission__intro .split__text { margin-top: 23px; }
.cs-mission__intro .split__text + .split__text { margin-top: 36px; }
.cs-levels { margin-top: 37px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px; text-align: left; }
.cs-level {
  position: relative; min-height: 226px; padding: 27px 32px 36px 45px;
  background: var(--white); border: 1px solid rgba(79, 117, 139, .45); border-bottom: 8px solid var(--teal);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cs-level:hover { transform: translateY(-6px); box-shadow: 0 18px 34px -12px rgba(1, 100, 106, .35); }
.cs-level__icon { height: 30px; width: auto; transition: transform .5s var(--ease); }
.cs-level:hover .cs-level__icon { transform: scale(1.12); }
.cs-level__title { margin-top: 18px; font-family: var(--ff-head); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--slate); }
.cs-level__text { margin-top: 5px; font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 23px; color: var(--gray-600); }
/* Frase di chiusura sotto le card (stesso stile del testo introduttivo) */
.cs-mission__outro { max-width: 850px; margin: 44px auto 0; }

/* 05. Politica aziendale / Il nostro team -------------------------------- */
/* Varianti di .split--cs (riga immagine/testo delle pagine interne, in inner.css) */
.cs-policy .split__media img { object-position: 50% 50%; }
.cs-list { margin: 19px 0 0 -5.5px; }                       /* il quadratino sporge a sinistra come nel design */
.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; }
.cs-list + .split__text { margin-top: 20px; }
.cs-team .split__body { padding-top: 135px; padding-bottom: 130px; }
.cs-team .split__text { margin-top: 26px; max-width: 671px; text-align: justify; }

/* 06. Carta dei Servizi -------------------------------------------------- */
.cs-carta {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 131px 0 135px; background: var(--slate); color: var(--white); text-align: center;
}
/* "clip" invece di "hidden": la sezione non diventa scorrevole (focus o scrollIntoView su un
   elemento interno non possono spostarne il contenuto) */
@supports (overflow: clip) { .cs-carta { overflow: clip; } }
/* Marchio in trasparenza (stesso asset di "I numeri" / "Prenota"), coordinate del design */
.cs-carta__mark {
  position: absolute; z-index: -1; top: -10px; left: 50%;
  width: 4645px; height: 2431px; margin-left: calc(-864px - 777px);
  background: url(../img/brand-mark.webp) 0 0 / 100% 100% no-repeat;
  opacity: .07; pointer-events: none;
}
.cs-carta__title { color: var(--white); }
.cs-carta .split__text { max-width: 600px; margin: 10px auto 0; }
.cs-carta__swiper { width: min(760px, 100%); margin-top: 28px; }
/* Anteprima sfogliabile: l'immagine include la barra strumenti; la maschera SVG
   ricrea le aree trasparenti del file originale (copertina + barra). */
.cs-doc { display: block; transition: transform .5s var(--ease), filter .5s var(--ease); }
.cs-doc img {
  width: 100%; height: auto; aspect-ratio: 984 / 798;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 984 798' preserveAspectRatio='none'%3E%3Crect x='4' y='3' width='973' height='689'/%3E%3Crect x='106' y='714' width='780' height='76'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 984 798' preserveAspectRatio='none'%3E%3Crect x='4' y='3' width='973' height='689'/%3E%3Crect x='106' y='714' width='780' height='76'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.cs-doc:hover { transform: translateY(-4px); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .25)); }
/* Documento sfogliabile: css/flipbook.css. Finché il libro non è pronto resta l'anteprima. */
.flipbook.is-loading .cs-doc { pointer-events: none; opacity: .6; transition: opacity .3s; }
.cs-carta__dots { justify-content: center; gap: 10px; margin-top: 30px; }
.dots--lg .swiper-pagination-bullet { width: 16px; height: 16px; }

/* 08. Responsive --------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .cs-level { padding: 27px 24px 32px 32px; }
}

/* ≤1023 — tablet (le .split si impilano come in Home) */
@media (max-width: 1023.98px) {
  .cs-story { padding: 72px 0 80px; }
  .cs-story__cols { columns: 1; text-align: left; }   /* niente giustificato su colonna singola: evita spazi larghi */

  .cs-mission { padding: 72px 0 88px; }
  .cs-levels { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 24px; }
  .cs-level { min-height: 0; }

  .cs-team .split__body { padding: 56px var(--gutter) 72px; }
  .cs-policy .split__media img { object-position: 50% 30%; }
  .cs-team .split__text { text-align: left; }

  .cs-carta { padding: 88px 0 96px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {
  .cs-story { padding: 56px 0 64px; }
  .cs-story__cols { margin-top: 20px; }
  .cs-story__cols .split__text + .split__text { margin-top: 30px; }

  .cs-mission { padding: 56px 0 72px; }
  .cs-mission__intro .split__text { margin-top: 18px; }
  .cs-mission__intro .split__text + .split__text { margin-top: 24px; }
  .cs-levels { margin-top: 32px; gap: 20px; }
  .cs-level { padding: 24px 22px 28px; }
  .cs-level__title { font-size: 22px; }

  .cs-team .split__body { padding: 44px 20px 56px; }
  .cs-list li { font-size: 18px; line-height: 28px; }
  .cs-list li::before { top: 12px; }

  .cs-carta { padding: 64px 0 72px; }
  .cs-carta .split__text br { display: none; }
  .cs-carta__swiper { margin-top: 24px; }
  .cs-carta__dots { margin-top: 22px; }
  .cs-mission__outro { margin-top: 32px; }
}