/* responsive-home.css - Rete Chiara: adattamento mobile della home (index.php)
   Solo media query: sopra i 992px il layout desktop non viene toccato.
   Va caricato DOPO i CSS esistenti del sito. */

/* ---------- Tablet e inferiori ---------- */
@media (max-width: 991px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, iframe, video { max-width: 100%; height: auto; }

  .container { width: auto !important; max-width: 100% !important; padding-left: 14px; padding-right: 14px; box-sizing: border-box; }
  .pvert { padding-top: 14px; padding-bottom: 14px; }

  /* Testata: le 3 colonne si impilano */
  .testata_home_col_1, .testata_home_col_2, .testata_home_col_3 {
    float: none !important; display: block; width: 100% !important; margin: 0 0 18px 0 !important; box-sizing: border-box;
  }
  .testata_home_col_1 figure, .testata_home_col_2 figure { margin: 0; }
  .testata_home_col_1 img, .testata_home_col_2 img { width: 100%; height: auto; display: block; }

  /* Banner */
  .adv_full_hor, .adv_quadro, .tr_banner_c, .tr_banner_cc, .tr_banner_cc_video { width: 100% !important; max-width: 100%; overflow: hidden; text-align: center; box-sizing: border-box; }
  .adv_full_hor img, .adv_quadro img, .tr_banner_c img, .tr_banner_cc img, .tr_banner_cc_video img { width: 100%; height: auto; }
  ins.adsbygoogle { max-width: 100%; }

  /* Blocchi per categoria: griglia a 2 colonne */
  .homequatc { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .homequatc > * { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }

  /* Video */
  .homevideo_c1, .homevideo_c2 { float: none !important; width: 100% !important; margin: 0 0 16px 0 !important; box-sizing: border-box; }
  .homevi_block, .livestreaming_home { max-width: 100%; }
  .livestreaming_home_logo { max-width: 100%; height: auto; }
}

/* ---------- Smartphone ---------- */
@media (max-width: 640px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .homequatc { grid-template-columns: 1fr; gap: 14px; }

  h2 { font-size: 1.25rem; line-height: 1.25; }
  h4, .emtitle { font-size: 1.05rem; }
  .emcat { font-size: .75rem; }
  .testata_home_col_1 p, .testata_home_col_2 p { font-size: .95rem; line-height: 1.4; }

  /* Link piu' facili da toccare */
  .italynews a, .homequatc a { display: block; padding: 6px 0; }
}

/* ---------- Fix: sezioni con sfondo grigio (es. "Politica e Enti locali") ----------
   Annulla eventuali trucchi "a tutta larghezza" (100vw, margini negativi,
   left:50%, transform) che su mobile spostano il blocco fuori dallo schermo. */
@media (max-width: 991px) {
  .homequat.greybkg, .greybkg {
    position: relative !important;
    left: auto !important; right: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    transform: none !important;
    box-sizing: border-box;
  }
  .greybkg::before, .greybkg::after {
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; transform: none !important;
  }
  .greybkg .container { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Fix: sezioni con titolo (Politica, Attualita) spinte a destra su smartphone */
@media (max-width: 991px) {
  .homequat .container { display: flow-root; }
  .homequat .emtitle { float: none !important; display: block; width: 100% !important; }
  .homequatc { clear: both; width: 100% !important; float: none !important; }
  .homequatc > a figure,
  .homequatc > a h2,
  .homequatc > a p { float: none !important; width: 100% !important; display: block; }
  .homequatc > a figure img { float: none !important; width: 100% !important; height: auto; display: block; }
}