/* ==========================================================================
   Blocco condiviso — GRUPPI DI IMMAGINI
   Monitoring & Reporting `Data Sources` (le estensioni) 113:2032 · 1512 x 1546

   ⚠️ Non e il componente `Use Cases` di Maintenance e Compliance, malgrado il
   nome del layer: la struttura non ha niente in comune. Vedi spec §4.7.

   Come `Use Cases` e `Before After`, la sezione rientra dai bordi di 160:
   contenuto largo 1192, non 1432.

   Verifica altezza: 160 + 93 + 80 + 930 + 80 + 43 + 160 = 1546 ✔
     lista  = 289 + 40 + 289 + 40 + 272 = 930 ✔
     gruppo = 56 (testo) + 16 + 200 (immagini) = 272
     gruppi 1 e 2 = 272 + 16 (padding sotto) + 1 (filetto) = 289
     testo  = 29 (titolo 24) + 8 + 19 (riga 16) = 56 ✔
   ========================================================================== */

.gruppi {
  /* padding 160 su tutti e quattro i lati: il rientro orizzontale lo fa la
     larghezza del container qui sotto, quello verticale sta qui. */
  padding-block: var(--space-7);         /* 160 */
  background: var(--gradient-section-dark);
  color: var(--text-on-dark);
}

.gruppi > .container {
  width: 1192px;                         /* 1512 - 2 x 160 */
  max-width: 100%;
  align-items: center;
}

/* --- Intro 113:2033 / 113:2095 — 1192 x 93 ------------------------------- */
.gruppi__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                   /* 16 */
  width: 100%;
}

.gruppi__titolo {
  width: 100%;
  color: var(--text-on-dark);
  text-align: center;
}

.gruppi__lead {
  width: 100%;
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* --- I tre gruppi 113:2034 — 1192 x 930 ---------------------------------- */
.gruppi__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);                   /* 40 */
  width: 100%;
  margin-top: var(--space-6);            /* 80 — il gap di sezione */
}

.gruppo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                   /* 16 */
  width: 100%;
}

/* ⚠️ STROKE OUTSIDE, non inside. Qui il filetto SI SOMMA all'altezza: il
   gruppo senza bordo misura 272, quelli con bordo 289 = 272 + 16 di padding
   + 1 di filetto. Con `box-shadow: inset` la sezione verrebbe 2px piu corta
   del mockup. E il caso opposto alle celle di `tabella-confronto`, dove lo
   stroke e dichiarato inside e NON contribuisce. Vedi spec §4.2. */
.gruppo:not(:last-child) {
  padding-bottom: var(--space-3);        /* 16 */
  border-bottom: 1px solid var(--color-tertiary-300);
}

.gruppo__testo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                   /* 8 */
  width: 100%;
}

.gruppo__titolo { color: var(--text-on-dark); }
.gruppo__riga   { color: var(--text-on-dark-muted); }

/* Quattro immagini `flex: 1 0 0`: (1192 - 3 x 16) / 4 = 286 ciascuna. */
.gruppo__immagini {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);                   /* 16 */
  width: 100%;
}

/* ⚠️ Radius 8, non 16: e l'unico posto del progetto dove le immagini non
   hanno il raggio dominante delle card. */
.gruppo__immagine {
  flex: 1 0 0;
  min-width: 0;
  height: 200px;
  border-radius: var(--radius-md);       /* 8 */
  overflow: hidden;
}

.gruppo__immagine > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gruppi .btn-group {
  margin-top: var(--space-6);            /* 80 — il gap di sezione */
}