/* ==========================================================================
   Centro Anna Rita Buonincontro — pagina LE NOSTRE SEDI
   --------------------------------------------------------------------------
   Ordine di caricamento:
     css/base.css → css/inner.css → css/sedi.css
   Riutilizza da base.css: token, bottoni (.btn, .btn--teal), pallini (.dots,
   .dots--light), header/menu, .hero__bg / .hero__bg-img, .split__text,
   .splits / .splits__decor (onde di sfondo), .booking, .maps (fascia finale
   e stile di pin/popup delle mappe), footer, back-to-top.
   Riutilizza da inner.css: .cs-container, .cs-title, .cs-eyebrow, .page-hero,
   FAQ.
   Riferimento design: artboard 1728px (sedi/Le nostre sedi.pdf).

   Struttura della pagina:
     .page-hero.sd-hero        → Hero (eyebrow + titolo + sottotitolo); il fondo
                                 prosegue sotto la parte alta delle card
     .sd-sedi                  → card delle sedi, sovrapposte all'Hero, su onde
       .sd-card                →   slider foto (Swiper) + testi + mappa + CTA
     .cs-faq.sd-faq            → FAQ
     .booking, .maps           → identici alla Home

   Indice
   01. Hero (variante)
   02. Sedi: contenitore e griglia
   03. Card della sede
   04. Slider foto
   05. Mappa nella card
   06. FAQ (variante)
   07. Responsive
   ========================================================================== */

/* 01. Hero --------------------------------------------------------------- */
/* Le card salgono sull'Hero di --sd-overlap: a 1728 il fondo finisce a 754px,
   le card iniziano a 503px (76px sotto il sottotitolo). */
:root { --sd-overlap: 251px; }
.sd-hero { min-height: 0; padding-bottom: calc(76px + var(--sd-overlap)); }
.sd-hero .hero__bg-img { background-position: 50% 30%; }
/* Sottotitolo su 2 righe (a-capo dopo "esigenza"), righe da 35px come nel design */
.sd-hero .page-hero__text { margin-top: 35px; max-width: 660px; line-height: 35px; }

/* 02. Sedi --------------------------------------------------------------- */
/* Riusa .splits (onde di sfondo, waves-2): qui le linee escono in basso a destra,
   sotto le card, come nel design. */
.sd-sedi { margin-top: calc(-1 * var(--sd-overlap)); padding-bottom: 140px; }
.sd-sedi .splits__waves { transform: matrix(.706, -.709, .709, .706, -1838, 4430); }
/* Colonne del design: 612px + 550px, 45px di spazio (1207px in tutto a 1728) */
.sd-cards {
  max-width: 1207px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 612fr) minmax(0, 550fr); gap: 45px;
  align-items: stretch;
}

/* 03. Card della sede ---------------------------------------------------- */
.sd-card {
  --sd-pad: 40px;                                   /* rientro dei testi (e dei pallini dello slider) */
  --sd-inset: 20px;                                 /* rientro di mappa e bottone */
  display: flex;
  background: var(--white); border: 1px solid rgba(79, 117, 139, .35);
  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);
}
.sd-card:hover, .sd-card:focus-within { translate: 0 -6px; box-shadow: 0 18px 34px -12px rgba(1, 100, 106, .35); }
.sd-card > article { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-bottom: 26px; }

.sd-card__body { flex: 1; display: flex; flex-direction: column; padding: 35px var(--sd-pad) 0; }
.sd-card__tag {
  align-self: flex-start; height: 23px; padding: 0 12px; border-radius: 3px;
  background: var(--teal); color: var(--white);
  font-family: var(--ff-head); font-weight: 700; font-size: 12px; line-height: 23px;
  letter-spacing: .02em; text-transform: uppercase;
}
.sd-card__title { margin-top: 17px; font-family: var(--ff-head); font-weight: 700; font-size: 24px; line-height: 28px; color: var(--slate); }
.sd-card__city { margin-top: 8px; font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--gray-600); }
/* Elenco servizi: quadratino da 4px, testo a 24px dal bordo */
.sd-card__list { margin: 22px 0 22px; }
.sd-card__list li {
  position: relative; padding-left: 24px;
  font-family: var(--ff-head); font-weight: 400; font-size: 15px; line-height: 23px; color: var(--gray-600);
}
.sd-card__list li::before { content: ""; position: absolute; left: 10px; top: 10px; width: 4px; height: 4px; background: currentColor; }
/* Contatti ancorati in basso: restano allineati tra le due card */
.sd-card__contacts {
  margin-top: auto; display: flex; flex-direction: column;
  font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--gray-600);
}
.sd-card__contacts strong { font-weight: 700; color: var(--ink-2); }
.sd-card__contacts a { transition: color .3s var(--ease); }
.sd-card__contacts a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.sd-card__cta { width: auto; height: 59px; margin: 19px var(--sd-inset) 0; }

/* 04. Slider foto -------------------------------------------------------- */
.sd-card__swiper { width: 100%; height: clamp(240px, 21.99vw, 380px); background: #e8eef0; }
.sd-card__swiper .swiper-slide { overflow: hidden; }
.sd-card__swiper img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: scale 1.2s var(--ease);
}
.sd-card:hover .sd-card__swiper img { scale: 1.04; }
/* Pallini chiari in basso a sinistra, allineati ai testi della card */
.sd-card__dots.dots {
  position: absolute; z-index: 2; left: var(--sd-pad); bottom: 41px; top: auto;
  width: auto; gap: 9px;
}
.sd-card__dots .swiper-pagination-bullet { box-shadow: inset 0 0 0 1px var(--white), 0 1px 4px rgba(0, 0, 0, .25); }

/* 05. Mappa nella card --------------------------------------------------- */
/* Mappa interattiva (Leaflet, js/maps.js); fallback: screenshot statici del design */
.sd-card__map {
  position: relative; z-index: 0; height: 168px; margin: 53px var(--sd-inset) 0;
  font-family: var(--ff-body); background: #eef1f2;
}
.sd-card__map:not(.leaflet-container) { background: url(../img/map-fallback-sede-1.webp) 50% 50% / cover no-repeat; }
.sd-card__map--2:not(.leaflet-container) { background-image: url(../img/map-fallback-sede-2.webp); }
/* Controlli e link del popup come nella fascia mappe (.maps, base.css) */
.sd-card__map .maps__popup-link { display: inline-block; margin-top: 10px; font-family: var(--ff-head); font-weight: 700; text-transform: uppercase; color: var(--teal); }
.sd-card__map .maps__popup-link:hover { color: var(--teal-deep); text-decoration: underline; }
.sd-card__map .leaflet-bar { border: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.sd-card__map .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; color: var(--teal); transition: background-color .3s var(--ease), color .3s var(--ease); }
.sd-card__map .leaflet-bar a:hover { background: var(--teal); color: var(--white); }
.sd-card__map .leaflet-control-attribution { font-size: 10px; }
.sd-card__map .leaflet-gesture-handling-touch-warning::after,
.sd-card__map .leaflet-gesture-handling-scroll-warning::after { font-size: 15px; font-family: var(--ff-head); padding: 0 16px; }

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

/* 07. Responsive --------------------------------------------------------- */
@media (min-width: 1024px) {
  /* righe da ~72px e rientri del design: domande a 164px dal bordo, icona a 33px da destra */
  .sd-faq .faq__btn { padding: 19px 33px 20px clamp(12px, 9.49vw, 164px); }
  .sd-faq .faq__answer { padding-left: clamp(12px, 9.49vw, 164px); padding-right: 98px; }
}

/* ≤1199 — colonne uguali, card più compatte */
@media (max-width: 1199.98px) {
  .sd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .sd-card { --sd-pad: 32px; --sd-inset: 18px; }
}

/* ≤1023 — tablet */
@media (max-width: 1023.98px) {
  :root { --sd-overlap: 200px; }
  .sd-hero { padding-bottom: calc(64px + var(--sd-overlap)); }
  .sd-sedi { padding-bottom: 96px; }
  .sd-cards { gap: 20px; }
  .sd-card { --sd-pad: 24px; --sd-inset: 14px; }
  .sd-card__body { padding-top: 28px; }
  .sd-card__title { font-size: 22px; line-height: 26px; }
  .sd-card__map { margin-top: 36px; }
  .sd-card__cta { height: 56px; font-size: 18px; }
  .sd-card__dots.dots { bottom: 24px; }
  .sd-faq { padding: 80px 0 96px; }
}

/* ≤767 — mobile: una card per riga */
@media (max-width: 767.98px) {
  :root { --sd-overlap: 150px; }
  .sd-hero { padding-bottom: calc(44px + var(--sd-overlap)); }
  .sd-hero .page-hero__text { margin-top: 20px; line-height: 28px; }
  .sd-sedi { padding-bottom: 72px; }
  .sd-cards { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 560px; }
  .sd-card { --sd-pad: 22px; --sd-inset: 12px; }
  .sd-card:hover, .sd-card:focus-within { translate: none; }
  .sd-card__swiper { height: auto; aspect-ratio: 16 / 10; }
  .sd-card__body { padding-top: 24px; }
  .sd-card__list { margin: 18px 0; }
  .sd-card__map { height: 190px; margin-top: 28px; }
  .sd-card__cta { height: 54px; margin-top: 14px; font-size: 17px; }
  .sd-card > article { padding-bottom: 12px; }
  .sd-card__dots.dots { bottom: 16px; }
  .sd-faq { padding: 64px 0 72px; }
}

/* Stato pre-animazione: le card sono nel primo schermo, partono nascoste come
   il contenuto dell'Hero (rivelate da GSAP, js/home.js modulo 5) */
.js-anim .sd-cards > * { opacity: 0; }