/* =====================================================================
   TABELLE RESPONSIVE — trasformazione a schede su schermi stretti
   Sotto gli 820px ogni riga della tabella diventa una scheda leggibile.
   Sopra gli 820px la tabella resta normale, com'è ora.
   Agisce SOLO sulle tabelle: non tocca il resto del sito.
   ===================================================================== */

@media (max-width: 820px) {

  /* LA CAUSA DELLO SCORRIMENTO: in style.css la tabella di confronto ha
     min-width:640px, quindi si rifiuta di stringersi sotto i 640px anche
     su uno schermo da telefono. Qui lo annullo. */
  table.compare,
  table.av-tabella-responsive {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Il contenitore non deve più scorrere lateralmente */
  .tablewrap {
    overflow-x: visible !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* La tabella diventa un elenco di schede */
  table.av-tabella-responsive {
    display: block;
    border: 0;
    box-shadow: none;
    background: transparent;
    box-sizing: border-box;
  }

  /* Nasconde l'intestazione: le etichette compaiono dentro le celle */
  table.av-tabella-responsive thead { display: none; }

  table.av-tabella-responsive tbody {
    display: block;
    width: 100%;
  }

  /* Ogni riga = una scheda */
  table.av-tabella-responsive tbody tr {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #E2E9EE;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(14,42,74,.05);
  }

  /* Prima cella = titolo della scheda (il parametro) */
  table.av-tabella-responsive tbody .av-cella-titolo {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #0E3F78;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: .8rem 1rem;
    border: 0;
    text-align: left;
    overflow-wrap: break-word;
  }

  /* Le altre celle = valori con etichetta sopra */
  table.av-tabella-responsive tbody td[data-col] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid #EDF2F5;
    padding: .8rem 1rem;
    text-align: left;
    font-size: .9rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* L'etichetta della colonna, sopra il valore */
  table.av-tabella-responsive tbody td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #6B7885;
    margin-bottom: .3rem;
  }

  /* La colonna evidenziata (Amniocentesi Virtuale) resta distinta */
  table.av-tabella-responsive tbody td.col-nifs { background: #F0FAFA; }
  table.av-tabella-responsive tbody td.col-nifs::before { color: #127E85; }

  /* I marcatori colorati restano leggibili */
  table.av-tabella-responsive .mark-yes,
  table.av-tabella-responsive .mark-no,
  table.av-tabella-responsive .mark-part { display: inline; }
}

/* Schermi molto stretti: un filo più compatto */
@media (max-width: 420px) {
  table.av-tabella-responsive tbody .av-cella-titolo { font-size: .9rem; padding: .7rem .9rem; }
  table.av-tabella-responsive tbody td[data-col] { padding: .7rem .9rem; font-size: .88rem; }
}