/* ==========================================================================
   Centro Anna Rita Buonincontro — Template pagina SERVIZIO
   --------------------------------------------------------------------------
   Foglio di stile unico per tutte le pagine dei servizi (stessa impaginazione,
   testi e immagini differenti). Ordine di caricamento:
     css/base.css → css/inner.css → css/servizio.css
   Riutilizza da base.css: token, bottoni (.btn), header/menu, .hero__bg /
   .hero__bg-img, .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.
   Riferimento design: artboard 1728px (servizi/Servizi _ Riabilitazione
   ambulatoriale.pdf); valori fluidi con clamp(min, Xvw, max), X = px / 17.28.

   Struttura della pagina (blocchi indipendenti, tutti opzionali):
     .page-hero                → Hero (eyebrow + titolo + sottotitolo)
     .sv-intro                 → presentazione: immagine + testo + CTA
     .sv-flow                  → contenitore con le onde di sfondo, contiene:
       .sv-paths               →   "Percorsi": griglia di .sv-card + CTA
       .sv-conditions          →   "Patologie trattate": griglia di .sv-area + CTA
       .sv-faq                 →   FAQ (componente .faq di inner.css)
     .booking, .maps           → identici alla Home

   Indice
   01. Elementi comuni (titolo di sezione, CTA centrata)
   02. Presentazione (intro)
   03. Contenitore con onde di sfondo
   04. Percorsi (card)
   05. Patologie trattate (aree)
   06. FAQ (variante)
   07. Responsive
   ========================================================================== */

/* 01. Elementi comuni ---------------------------------------------------- */
.sv-head { text-align: center; }
.sv-head .split__text { margin-top: 27px; }
/* CTA centrata sotto le griglie: 424px nel design */
.sv-cta { width: 424px; margin: 36px auto 0; }

/* 02. Presentazione ------------------------------------------------------ */
/* Riga immagine/testo (.split--cs): immagine 703px, testo a 101px, altezza 618px a 1728 */
.sv-intro .split__media img { object-position: 50% 50%; }
.sv-intro .split__body { align-self: start; padding-top: 107px; padding-bottom: 140px; }
.sv-intro .split__body > * { max-width: 656px; }                        /* colonna di testo del design */
.sv-intro__title { line-height: 1.5; }                                   /* 36/54 nel design */
.sv-intro .split__text { margin-top: 20px; text-align: justify; }
.sv-intro .btn { margin-top: 30px; padding-inline: 41px; }

/* 03. Contenitore con onde di sfondo ------------------------------------- */
/* Riusa .splits / .splits__decor / .splits__waves della Home: stesse onde (waves-2)
   nella stessa posizione del design (y = 5425.2px dall'inizio della pagina,
   il contenitore inizia a y = 1170px → 4255.2px). */
.sv-flow .splits__waves { transform: matrix(.706, -.709, .709, .706, -4238, 4255.2); }
/* Le sezioni con sfondo pieno lo disegnano SOTTO le onde (z-index -2 nel contesto
   di .splits), così le linee restano visibili anche sulla fascia colorata. */
.sv-band { position: relative; }
.sv-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--mist); }

/* 04. Percorsi ----------------------------------------------------------- */
.sv-paths { padding: 110px 0 137px; }
.sv-cards {
  margin-top: 43px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px;
}
.sv-card {
  position: relative; display: flex; flex-direction: column; min-height: 277px;
  padding: 18px 36px 27px 33px;                  /* colonna di testo di ~218px: a-capo come nel design */
  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);
  /* "translate" (e non "transform") per l'hover: non interferisce con il reveal GSAP */
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.sv-card:hover, .sv-card:focus-within { translate: 0 -6px; box-shadow: 0 18px 34px -12px rgba(1, 100, 106, .35); }
.sv-card__icon { align-self: flex-start; height: 28px; width: auto; transition: scale .5s var(--ease); transform-origin: 0 50%; }
.sv-card:hover .sv-card__icon { scale: 1.12; }
.sv-card__title { margin-top: 20px; font-family: var(--ff-head); font-weight: 700; font-size: 24px; line-height: 28px; color: var(--slate); }
.sv-card__title:first-child { margin-top: 0; }                            /* card senza icona (es. terapie della Fisiokinesiterapia) */
.sv-card__text { margin-top: 18px; font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 23px; color: var(--gray-600); }
/* Link "Scopri": ancorato in basso; lo pseudo-elemento rende cliccabile l'intera card */
.sv-card__link {
  margin-top: auto; padding-top: 10px; width: fit-content;
  font-family: var(--ff-head); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--teal);
}
.sv-card__link::after { content: ""; position: absolute; inset: 0; }
.sv-card__link:focus-visible { outline: none; }
.sv-card:has(.sv-card__link:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
.sv-card__arrow { display: inline-block; margin-left: 2px; transition: transform .35s var(--ease); }
.sv-card:hover .sv-card__link { text-decoration: underline; text-underline-offset: 3px; }
.sv-card:hover .sv-card__arrow { transform: translateX(4px); }

/* 05. Patologie trattate ------------------------------------------------- */
.sv-conditions { padding: 136px 0 0; }
.sv-areas {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.sv-area {
  min-height: 218px; padding: 27px 31px 36px;
  background: var(--mist); border: 1px solid rgba(1, 156, 165, .45); border-top: 8px solid var(--teal);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.sv-area:hover { translate: 0 -4px; box-shadow: 0 16px 30px -12px rgba(1, 100, 106, .3); }
.sv-area__title { font-family: var(--ff-head); font-weight: 600; font-size: 24px; line-height: 28px; color: var(--slate); }
.sv-area__list { margin-top: 22px; }
.sv-area__list li { font-family: var(--ff-head); font-weight: 400; font-size: 14px; line-height: 24px; color: var(--gray-600); }
.sv-area__list li::before { content: "— "; content: "— " / ""; }        /* trattino decorativo, ignorato dagli screen reader */
.sv-conditions .sv-cta { margin-top: 42px; }

/* 06. FAQ ---------------------------------------------------------------- */
/* Stesso componente di "Chi siamo", qui su fondo bianco (onde visibili) */
.sv-faq { padding: 109px 0 110px; background: none; }

/* 07. Responsive --------------------------------------------------------- */
@media (min-width: 1024px) {
  /* rientri del design (31px a sinistra, 26px a destra dell'icona) */
  .sv-faq .faq__btn { padding-left: 31px; padding-right: 26px; }
  .sv-faq .faq__answer { padding-left: 31px; }
}

/* ≤1199 — percorsi su 2 colonne (4 righe bilanciate) */
@media (max-width: 1199.98px) {
  .sv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .sv-card { min-height: 250px; padding-right: 33px; }
}

/* ≤1023 — tablet (la riga immagine/testo si impila come nelle altre pagine) */
@media (max-width: 1023.98px) {
  .sv-intro .split__body { padding-top: 56px; padding-bottom: 72px; }
  .sv-intro__title { line-height: 1.3; }

  .sv-paths { padding: 72px 0 88px; }
  .sv-conditions { padding-top: 72px; }
  .sv-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .sv-faq { padding: 80px 0 96px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {
  .sv-intro .split__body { padding: 44px 20px 56px; }
  .sv-intro .split__text { text-align: left; }
  .sv-intro .btn { width: 100%; padding-inline: 16px; }

  .sv-head .split__text { margin-top: 18px; }
  .sv-cta, .sv-conditions .sv-cta { width: 100%; margin-top: 32px; }

  .sv-paths { padding: 56px 0 72px; }
  .sv-cards { margin-top: 32px; }
  .sv-conditions { padding-top: 56px; }
  .sv-areas { margin-top: 32px; }
  .sv-faq { padding: 64px 0 72px; }
}

/* ≤599 — una colonna */
@media (max-width: 599.98px) {
  .sv-cards, .sv-areas { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sv-card { min-height: 0; padding: 20px 22px 24px; }
  .sv-card__title, .sv-area__title { font-size: 22px; line-height: 26px; }
  .sv-area { min-height: 0; padding: 24px 22px 28px; }
}

/* 08. Blocco di solo testo (servizi senza design dedicato, es. Diagnosi DSA) --
   Stessa impaginazione di "La nostra storia" (Chi siamo) e "Come accedere" (Iter
   di accesso): titolo, testo giustificato su due colonne, pulsante. Fondo bianco
   oppure azzurro (.sv-band, disegnato sotto le onde di sfondo). */
.sv-text { padding: 96px 0 104px; }
.sv-text__body { margin-top: 27px; columns: 2; column-gap: 45px; text-align: justify; }
.sv-text__body .split__text { margin-top: 0; orphans: 2; widows: 2; }
.sv-text__body .split__text + .split__text { margin-top: 36px; }
.sv-text .btn { margin-top: 36px; padding-inline: 41px; }

@media (max-width: 1023.98px) {
  .sv-text { padding: 72px 0 80px; }
  .sv-text__body { columns: 1; text-align: left; max-width: 760px; }   /* colonna singola: niente giustificato */
}

@media (max-width: 767.98px) {
  .sv-text { padding: 56px 0 64px; }
  .sv-text__body { margin-top: 20px; }
  .sv-text .btn { width: 100%; margin-top: 32px; padding-inline: 16px; white-space: normal; line-height: 1.15; }
}

/* 09. Scheda con elenco espandibile (es. Macchinari della Riabilitazione Robotica) --
   Blocco di testo su una colonna + pulsante "Leggi tutte le patologie" che apre
   l'elenco (attributo hidden, animato da assets/js/home.js, modulo 2d [data-expand]).
   Con immagine usa la riga immagine/testo (.split--cs .sv-intro). */
.sv-text__body--single { columns: 1; max-width: 1000px; }
.sv-machine__more { margin-top: 26px; }
.sv-machine__toggle {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 0;
  font-family: var(--ff-head); font-weight: 700; font-size: 16px; line-height: 20px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--teal);
}
.sv-machine__toggle:hover .sv-machine__label, .sv-machine__toggle:focus-visible .sv-machine__label { text-decoration: underline; text-underline-offset: 3px; }
.sv-machine__chevron {
  flex-shrink: 0; width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .4s var(--ease), margin .4s var(--ease);
}
.sv-machine__toggle[aria-expanded="true"] .sv-machine__chevron { transform: rotate(225deg); margin-top: 4px; }
.sv-machine__list { overflow: hidden; max-width: 1000px; columns: 2; column-gap: 45px; padding-top: 14px; }
.sv-machine__list[hidden] { display: none; }
.sv-machine__list li {
  position: relative; padding-left: 19.5px; break-inside: avoid;
  font-weight: 200; font-size: 18px; line-height: 30px;
}
.sv-machine__list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; background: var(--teal); }
.sv-intro .sv-machine__list { columns: 1; }                              /* nella riga immagine/testo: colonna singola */
.sv-intro .sv-machine__more { max-width: 656px; }

@media (max-width: 1023.98px) {
  .sv-machine__list { columns: 1; }
}
@media (max-width: 767.98px) {
  .sv-machine__list li { font-size: 16px; line-height: 26px; }
  .sv-machine__list li::before { top: 11px; }
}