/* Blocco servizi-griglia */

.b-sg__eyebrow {
  font-size: 0.75rem; /* .small storico: 12px/700 blu, mb 10 */
  font-weight: 700;
  color: var(--c-primary-dark);
  margin-bottom: 10px;
}

.b-sg__subtitle {
  margin: 0 auto 1.875rem;
  line-height: 1.5;
  color: var(--c-text-muted); /* il grigio dei paragrafi storici, in tono AA */
}

/* --- Griglia standard (card da pagine collegate) ---
   PRIMA delle regole custom: a pari specificità le custom devono vincere. */
.b-sg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
}

@media (min-width: 64rem) {
  .b-sg__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .b-sg__grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.b-sg__card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  color: inherit;
}

.b-sg__img {
  width: 100%;
  aspect-ratio: 640 / 420;
  object-fit: cover;
}

.b-sg__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 640 / 420;
  background: var(--c-primary-light);
  color: var(--c-primary);
}

.b-sg__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
}

.b-sg__name {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-text-strong);
}

.b-sg__card:hover .b-sg__name {
  color: var(--c-primary-dark);
}

.b-sg__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-primary-dark);
}

.b-sg__card:hover .b-sg__more .icon {
  translate: 3px 0;
  transition: translate var(--transition);
}

/* --- Card custom: replica misurata dalla produzione ---------------------
   Il wrapper storico è col-xl-8 di un container-fluid: la larghezza è
   PERCENTUALE del viewport (66,6% ≥1200px, 91,6% tra 992 e 1199, piena
   sotto). Card: padding 48/24, gap 46 orizzontale e 48 verticale,
   radius 5, ombra 0 3 10 nero 10%. Sotto i 768px lo storico è un
   carosello: qui scroll-snap orizzontale senza JS. */
.b-sg--custom .b-sg__subtitle,
.b-sg__grid--custom {
  --sg-w: 100%;
  width: var(--sg-w);
  margin-inline: calc((100% - var(--sg-w)) / 2);
}

.b-sg--custom .b-sg__subtitle {
  margin-bottom: 1.875rem;
}

.b-sg__grid--custom {
  gap: 48px 46px;
}

@media (min-width: 62rem) {
  .b-sg--custom .b-sg__subtitle,
  .b-sg__grid--custom {
    --sg-w: calc((100vw - 30px) * 0.9166 - 46px);
  }
}

@media (min-width: 75rem) {
  .b-sg--custom .b-sg__subtitle,
  .b-sg__grid--custom {
    --sg-w: calc((100vw - 30px) * 0.6666 - 46px);
  }
}

@media (min-width: 48rem) {
  .b-sg__grid--custom {
    grid-template-columns: repeat(3, 1fr);
  }

  .b-sg__grid--custom.b-sg__grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* La fila a 4 card (pagina preventivo storica: col-md-3 in gabbia piena)
   occupa tutta la gabbia, non la percentuale della griglia homepage */
.b-sg--custom:has(.b-sg__grid--4) .b-sg__subtitle,
.b-sg__grid--custom.b-sg__grid--4 {
  --sg-w: 100%;
}

.b-sg__card--custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px; /* py-5 px-4 storici */
  border: 0;
  border-radius: 5px; /* radius-5 storico */
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.1); /* shadow-grey storica */
}

.b-sg__card--custom:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.14);
}

/* Sotto i 768px: carosello a scorrimento come lo slick storico */
@media (max-width: 47.999rem) {
  .b-sg__grid--custom {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--sp-2) var(--sp-1) var(--sp-6);
    scrollbar-width: thin;
  }

  .b-sg__grid--custom > .b-sg__card--custom {
    flex: 0 0 min(314px, 88%); /* larghezza card storica a 390px */
    scroll-snap-align: center;
  }
}

/* --- Variante banda blu (la sfondoblu-big storica del preventivo):
   niente card, cerchi bianchi da 106px con icona blu, testi bianchi --- */
.b-sg--blu .b-sg__subtitle {
  color: #fff;
  font-size: 1.25rem; /* l'h3 storico centrato sopra i cerchi */
  font-weight: 700;
  line-height: 1.3;
  max-width: 66ch;
}

.b-sg--blu .b-sg__grid--custom {
  --sg-w: 100%;
}

.b-sg--blu .b-sg__card--custom {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.b-sg--blu .b-sg__card--custom:hover {
  transform: none;
  box-shadow: none;
}

.b-sg--blu .b-sg__icona {
  width: 106px; /* figure storica: 106px, fondo bianco */
  height: 106px;
  background: #fff;
  margin: 20px auto;
}

.b-sg--blu .b-sg__icona img {
  width: 56px;
  height: 52px;
}

.b-sg--blu .b-sg__card--custom .b-sg__name,
.b-sg--blu .b-sg__testo {
  color: #fff;
}

/* Mobile: elenco impilato e centrato come le col-md-3 storiche */
@media (max-width: 47.999rem) {
  .b-sg--blu .b-sg__grid--custom {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 0;
    gap: var(--sp-5);
  }

  .b-sg--blu .b-sg__grid--custom > .b-sg__card--custom {
    flex: none;
  }
}

.b-sg__icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgb(0 128 235 / 0.1);
  margin: 0 0 25px;
}

/* Icone storiche a dimensione naturale (28-47px, variabile per icona) */
.b-sg__icona img {
  width: auto;
  height: auto;
  max-width: 52px;
  max-height: 48px;
  object-fit: contain;
}

.b-sg__card--custom .b-sg__name {
  font-size: 1.125rem; /* 18px/700, mb 5 misurati */
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
  margin-bottom: 5px;
}

.b-sg__testo {
  font-size: 0.75rem; /* 12px/700, lh 18, mb 22 misurati */
  font-weight: 700;
  color: var(--c-text-muted); /* il grigio storico, in tono AA */
  line-height: 1.5;
  margin-bottom: 22px;
}

.b-sg__azione {
  margin: auto 0 0;
}

/* Il bottone card storico ha il padding maggiorato (0 35) */
.b-sg__azione .btn {
  padding: 0 35px;
}

/* ============================================================
   la-clinica (page-id-274): valorizzazione delle card servizi
   (variante "pagine": immagine + nome + "Scopri di più").
   Scoped alla pagina → nessun impatto altrove.
   ============================================================ */

/* Card più tattile: bordo/ombra rifiniti, lift deciso su hover */
.page-id-274 .b-sg__card {
  border-color: rgb(13 43 74 / 0.08);
  box-shadow: var(--shadow-sm);
}

.page-id-274 .b-sg__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgb(0 128 235 / 0.28);
}

/* Immagine: zoom morbido su hover (il ritaglio resta nella card) */
.page-id-274 .b-sg__card .b-sg__img {
  transition: transform var(--transition);
}

.page-id-274 .b-sg__card:hover .b-sg__img {
  transform: scale(1.05);
}

/* Corpo più arioso; la CTA scende in fondo → baseline uniforme */
.page-id-274 .b-sg__body {
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}

.page-id-274 .b-sg__name {
  font-weight: 700;
}

/* "Scopri di più" come pill riconoscibile, che si accende su hover */
.page-id-274 .b-sg__more {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--c-primary-ghost);
  transition: background var(--transition), color var(--transition);
}

.page-id-274 .b-sg__card:hover .b-sg__more {
  background: var(--c-primary);
  color: #fff;
}

/* Fix dell'ultima riga "orfana" (7 card su 3 colonne): flex centrato,
   così la card che avanza resta al centro invece che sola a sinistra. */
@media (min-width: 64rem) {
  .page-id-274 .b-sg__grid--3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-6);
  }

  .page-id-274 .b-sg__grid--3 > .b-sg__card {
    flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3);
  }
}