/* ==========================================================================
   Compliance — `Visibility` 63:2056 · 1512 x 623
   Sezione che non esiste su nessun'altra pagina.

   ⚠️ Niente padding-bottom: si chiude a filo e passa direttamente alla
   tabella Before After.

   Verifica altezza: 160 + 463 (colonna) + 0 = 623 ✔
   Colonna sinistra: 116+16+19 (titolo+occhiello) + 160 di gap + paragrafo
   Colonna destra: 696 x 463 — e l'immagine a decidere l'altezza della riga.
   ========================================================================== */

.visibility {
  padding-bottom: 0;
}

.visibility__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);                 /* 40 */
  width: 100%;
}

.visibility__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* ⚠️ 160 di gap: e questo numero a dare l'aria alla sezione, non il
     padding. Ridurlo la fa collassare. */
  gap: var(--space-7);
}

.visibility__testa {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                 /* 16 */
}

.visibility__titolo   { color: var(--text-on-light); }
.visibility__occhiello,
.visibility__corpo    { color: var(--color-tertiary-300); }

/* ⚠️ 8 set 2026 — IL CORPO E' DIVENTATO DUE PARAGRAFI.
   Era un <p> solo con dentro <br><br>: una riga vuota da 28px fra i due
   capoversi, che e' lo «spazio di troppo» segnalato da Andrea. Ora sono due
   <p> dentro questo contenitore, distanziati di 16 come il resto del tema.
   Il colore qui sopra vale per ereditarieta, quindi non cambia niente. */
.visibility__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                 /* 16 */
}

/* L'inciso in grassetto viene dal mockup. */
.visibility__corpo b { font-weight: 700; }

.visibility__media {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  height: 463px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ⚠️ `object-fit` NON si dichiara qui: lo fa assets.css, che si carica dopo
   e con la stessa specificita vincerebbe comunque. Fino al 7 set 2026 questa
   regola diceva `contain` e l'immagine veniva ritagliata lo stesso — la
   regola c'era, semplicemente non arrivava a destinazione. Vedi la nota
   accanto a `.visibility__media > img` in assets.css. */
.visibility__media > img {
  width: 100%;
  height: 100%;
  object-position: center;
}