/*
  Nuova grafica: area notizie (DEC-87, tappa 5). Elenco /news/ (sito/notizie.html), categorie (sito/categoria.html),
  articolo (sito/articolo.html). Si appoggia a css/sito.css (token, caratteri, pulsanti, comparse) e usa solo le
  sue variabili. Nel corpo dell'articolo nessuna animazione: testo e immagine di copertina visibili dal primo paint.
*/

/* ---------- Pezzi comuni ---------- */
.oi-briciole ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.oi-briciole li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.oi-briciole li + li::before {
  content: "/";
  color: var(--muted);
}
.oi-briciole a {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
}
.oi-briciole a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.oi-briciole [aria-current="page"],
.oi-briciole__ultimo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(60ch, 70vw);
  color: var(--muted);
}

.oi-notizie-apertura {
  display: grid;
  gap: 1.25rem;
}
.oi-notizie-apertura .oi-apertura {
  min-height: clamp(14rem, 32vh, 22rem);
}
.oi-numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.oi-numeri > span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--campo);
  font-size: 0.9rem;
  color: var(--muted);
}
.oi-numeri b {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink);
}
.oi-punto-vivo {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50% !important;
  background: var(--cielo);
  box-shadow: 0 0 0 3px rgb(14 165 233 / 0.25);
}

.oi-ultimora {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  align-items: start;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--brick);
  border-left-width: 4px;
  background: var(--campo);
}
.oi-ultimora__etichetta {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brick);
  padding-top: 0.2rem;
}
.oi-ultimora ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
.oi-ultimora a {
  color: var(--ink);
  font-weight: 500;
}
.oi-ultimora a:hover {
  color: var(--brick);
}

/* Card delle notizie: carta, bordo sottile, si solleva al passaggio. Tutto il riquadro è cliccabile. */
.oi-notizie-griglia {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.oi-notizia {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--campo);
  box-shadow: var(--ombra);
  transition: border-color 0.4s var(--morbido), box-shadow 0.4s var(--morbido), transform 0.4s var(--morbido);
}
.oi-notizia:hover,
.oi-notizia:focus-within {
  border-color: var(--ink);
  box-shadow: var(--ombra-su);
}
.oi-notizia__immagine {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.oi-notizia__immagine img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--uscita);
}
.oi-notizia:hover .oi-notizia__immagine img {
  transform: scale(1.04);
}
.oi-notizia__vuota {
  display: grid;
  place-content: center;
  height: 100%;
  text-align: center;
  background: var(--surface);
  background-image: linear-gradient(135deg, rgb(37 99 235 / 0.08), rgb(14 165 233 / 0.14));
}
.oi-notizia__giorno {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink);
}
.oi-notizia__data-pillola {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.55rem;
  background: var(--campo);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.oi-notizia__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: clamp(1rem, 2vw, 1.4rem);
}
.oi-notizia__titolo {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.22;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.oi-notizia__titolo a {
  color: var(--ink);
  text-decoration: none;
}
/* Il link del titolo copre tutta la card (come before:absolute del vecchio template). */
.oi-notizia__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.oi-notizia__titolo a:focus-visible {
  outline: none;
}
.oi-notizia__titolo a:focus-visible::after {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.oi-notizia:hover .oi-notizia__titolo a {
  color: var(--accent);
}
.oi-notizia__sommario {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oi-notizia__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.oi-notizia__leggi {
  color: var(--accent);
  font-weight: 500;
}
.oi-notizia__meta {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.oi-notizia__meta b {
  color: var(--cielo-testo, var(--accent));
  font-weight: 500;
}

/* Versione orizzontale (feed «Ultime notizie», elenco della categoria) */
.oi-notizie-elenco {
  display: grid;
  gap: 1rem;
}
.oi-notizia--riga {
  flex-direction: row;
}
.oi-notizia--riga .oi-notizia__immagine {
  flex: 0 0 clamp(9rem, 26%, 13rem);
  aspect-ratio: auto;
  min-height: 9rem;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.oi-notizia--riga .oi-notizia__immagine img {
  position: absolute;
  inset: 0;
}
.oi-notizia--riga .oi-notizia__sommario {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (max-width: 40rem) {
  .oi-notizia--riga {
    flex-direction: column;
  }
  .oi-notizia--riga .oi-notizia__immagine {
    flex-basis: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
/* Card arrivate con «carica altri»: js/sito-carte.js non le vede, entrano con una dissolvenza. */
.oi-movimento .oi-notizia[data-carta].oi-entrata {
  transition: opacity 0.6s var(--uscita), border-color 0.4s var(--morbido), box-shadow 0.4s var(--morbido);
}

/* Elenco più colonna laterale */
.oi-notizie-corpo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .oi-notizie-corpo {
    grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 19rem);
  }
}
.oi-notizie-principale {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  min-width: 0;
}
.oi-notizie-laterale {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
/* Desktop: colonna compatta (circa 38rem in tutto) perché i tre riquadri stiano interi nella finestra;
   resta ferma allo scorrimento solo se la finestra è abbastanza alta da mostrarla tutta (38rem + 5.5rem di testata). */
@media (min-width: 64rem) {
  .oi-notizie-laterale {
    gap: 0.75rem;
  }
  .oi-notizie-laterale .oi-riquadro {
    gap: 0.45rem;
    padding: 0.9rem 1.05rem;
  }
  .oi-notizie-laterale .oi-riquadro__titolo {
    font-size: 1.05rem;
  }
  .oi-notizie-laterale .oi-riquadro p {
    font-size: 0.82rem;
    line-height: 1.45;
  }
  .oi-notizie-laterale .oi-etichetta {
    font-size: 0.66rem;
  }
  .oi-notizie-laterale .oi-iscrizione {
    gap: 0.5rem;
  }
  .oi-notizie-laterale .oi-input,
  .oi-notizie-laterale .oi-bottone {
    min-height: 2.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.9rem;
  }
}
@media (min-width: 64rem) and (min-height: 45.5rem) {
  .oi-notizie-laterale {
    position: sticky;
    top: 5.5rem;
  }
}

.oi-argomenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.oi-argomenti a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-controllo);
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line);
  background: var(--campo);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.94rem;
  text-decoration: none;
  transition: border-color 0.3s var(--morbido), background-color 0.3s var(--morbido), color 0.3s var(--morbido);
}
.oi-argomenti a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.oi-argomenti a[data-in-evidenza] {
  border-color: var(--accent);
  background: var(--accent);
  background-image: var(--sfumatura);
  color: var(--su-accento, #fff);
}
.oi-argomenti a[data-in-evidenza]:hover {
  color: var(--su-accento, #fff);
  background: var(--ink);
}

.oi-pagine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.oi-pagine a,
.oi-pagine span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alto-controllo);
  min-height: var(--alto-controllo);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--campo);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.82rem;
  text-decoration: none;
}
.oi-pagine a:hover {
  border-color: var(--ink);
}
.oi-pagine [aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--su-accento, #fff);
}
.oi-carica {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.oi-carica__filo {
  width: 8rem;
  height: 2px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.oi-carica__filo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sfumatura);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .oi-carica__filo::after {
    animation: oi-carica 1.4s var(--morbido) infinite;
  }
}
@keyframes oi-carica {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Riquadri laterali */
.oi-riquadro {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--ombra);
}
.oi-riquadro__titolo {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.oi-riquadro p {
  color: var(--muted);
  font-size: 0.94rem;
}
.oi-riquadro--notte {
  position: relative;
  border-color: transparent;
  background: var(--notte, var(--ink));
  background-image: var(--sfumatura-notte);
  color: var(--su-notte, #fff);
  box-shadow: var(--ombra-su);
}
.oi-riquadro--notte::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sfumatura);
}
.oi-riquadro--notte p,
.oi-riquadro--notte .oi-etichetta {
  color: var(--su-notte-tenue, #cbd5e1);
}
.oi-riquadro--notte .oi-input {
  width: 100%;
  border-color: var(--su-notte, #fff);
  font-family: var(--f-testo);
  letter-spacing: 0;
  color: var(--ink);
}
.oi-riquadro--notte .oi-bottone {
  width: 100%;
  border-color: var(--su-notte, #fff);
  background: var(--su-notte, #fff);
  color: var(--ink) !important;
}
.oi-riquadro--notte .oi-bottone:hover {
  background: transparent;
  color: var(--su-notte, #fff) !important;
}
.oi-riquadro--notte :focus-visible {
  outline-color: var(--su-notte, #fff);
}
.oi-iscrizione {
  display: grid;
  gap: 0.75rem;
}
.oi-riquadro .oi-messaggio:empty {
  display: none;
}
.oi-riquadro--notte .oi-messaggio {
  background: var(--campo);
}
.oi-riquadro .oi-elenco-breve {
  display: grid;
  gap: 0.25rem;
  border-top: 1px solid var(--line);
}
.oi-elenco-breve li {
  border-bottom: 1px solid var(--line);
}
.oi-elenco-breve a {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  color: var(--ink);
  text-decoration: none;
}
.oi-elenco-breve a:hover b {
  color: var(--accent);
}
.oi-elenco-breve b {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.oi-elenco-breve time {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.oi-testo-seo {
  display: grid;
  gap: 0.85rem;
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.65;
}
.oi-testo-seo strong {
  color: var(--ink);
  font-weight: 500;
}

/* Collegamenti del vecchio piè di pagina (Chi siamo, Politica editoriale, Correzioni…): il piede comune è più corto. */
.oi-notizie-piede {
  display: grid;
  gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}
.oi-notizie-piede__gruppo {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.oi-notizie-piede__gruppo p {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 36ch;
}
.oi-notizie-piede ul {
  display: grid;
  gap: 0.15rem;
}
.oi-notizie-piede a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--ink);
  text-decoration: none;
}
.oi-notizie-piede a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.oi-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.oi-social a {
  min-height: var(--alto-controllo);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--campo);
  font-size: 0.88rem;
  font-weight: 500;
}

/* ---------- Categoria ---------- */
.oi-categoria-testa {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.oi-categoria-testa::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sfumatura);
}
.oi-categoria-testa .oi-titolo {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
}

/* ---------- Articolo ---------- */
.oi-articolo {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
}
.oi-articolo__testa {
  display: grid;
  gap: 1.1rem;
  max-width: 60rem;
}
.oi-articolo__categoria {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.oi-articolo__categoria:hover {
  background: var(--accent);
  color: var(--su-accento, #fff) !important;
}
.oi-articolo__titolo {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.oi-articolo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}
.oi-articolo__autore {
  display: grid;
  gap: 0.1rem;
  line-height: 1.3;
}
.oi-articolo__autore a {
  color: var(--ink);
  font-weight: 500;
}
.oi-articolo__autore a:hover {
  color: var(--accent);
}
.oi-articolo__autore small {
  font-size: 0.82rem;
}
.oi-articolo__autore small a {
  font-weight: 400;
  color: var(--muted);
}
.oi-articolo__dato {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Pulsante «Aggiungi alle fonti preferite su Google» (P39): un link, nessuno script esterno. */
.oi-fonte-google {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--alto-controllo);
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line);
  background: var(--campo);
  color: var(--ink) !important;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.3s var(--morbido), box-shadow 0.3s var(--morbido);
}
.oi-fonte-google:hover {
  border-color: var(--accent);
  box-shadow: var(--ombra);
}
.oi-fonte-google svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Copertina: subito visibile, nessuna comparsa (LCP). */
.oi-copertina {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--notte, var(--ink));
  border: 1px solid var(--line);
}
.oi-copertina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  object-fit: cover;
}
.oi-copertina__credito {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.6rem;
  background: rgb(11 31 77 / 0.72);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.oi-copertina__credito a {
  color: inherit;
  text-decoration: underline;
}

/* Griglia: colonna sinistra degli annunci (solo da 1280 px, come il vecchio) e colonna di lettura. */
.oi-articolo__griglia {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
.oi-articolo__annunci {
  display: none;
}
@media (min-width: 1280px) {
  .oi-articolo__griglia {
    grid-template-columns: clamp(160px, 15vw, 250px) minmax(0, 1fr);
  }
  .oi-articolo__annunci {
    display: block;
    align-self: stretch;
  }
}
#left-ads-sticky {
  position: sticky;
  top: 6.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
#left-ads-sticky.is-active {
  opacity: 1;
  visibility: visible;
}
#left-ads-sticky-card {
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: var(--campo);
}
#left-sticky-ad-ins {
  display: block;
  width: 100%;
  text-align: center;
}
.oi-articolo__colonna {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  min-width: 0;
  max-width: 46rem;
  width: 100%;
}

/* Annunci: stessi slot e stessi collassi del vecchio template. */
.oi-annuncio-testa {
  min-height: 120px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: var(--campo);
  overflow: hidden;
  text-align: center;
}
#breadcrumb-ad-ins {
  display: block;
  width: 100%;
  min-height: 120px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) {
  .oi-annuncio-testa,
  #breadcrumb-ad-ins {
    min-height: 250px;
  }
}
.oi-sito ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}
#breadcrumb-ad-slot:has(> ins[data-ad-status="unfilled"]),
.in-article-ad-placeholder:has(> ins[data-ad-status="unfilled"]),
#left-ads-sticky-card:has(ins[data-ad-status="unfilled"]) {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.in-article-ad-placeholder {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 2rem 0;
  min-height: 160px;
  overflow: visible;
  text-align: center;
}
.in-article-ad-placeholder ins.adsbygoogle {
  width: 100% !important;
}
.in-article-ad-placeholder iframe,
.in-article-ad-placeholder [id^="aswift_"],
#breadcrumb-ad-slot iframe,
#breadcrumb-ad-slot [id^="aswift_"] {
  max-width: 100% !important;
}
.in-article-ad-placeholder[data-ad-mode="fluid"] {
  min-height: 180px;
}
@media (min-width: 1280px) {
  .in-article-ad-placeholder[data-ad-mode="horizontal"] {
    min-height: 250px;
  }
}
@media (max-width: 767px) {
  #breadcrumb-ad-slot,
  .in-article-ad-placeholder {
    max-width: calc(100vw - 24px) !important;
    overflow: hidden;
  }
  .in-article-ad-placeholder ins.adsbygoogle,
  #breadcrumb-ad-ins {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  .in-article-ad-placeholder iframe,
  .in-article-ad-placeholder [id^="aswift_"],
  #breadcrumb-ad-slot iframe,
  #breadcrumb-ad-slot [id^="aswift_"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Indice dei contenuti (riempito da js/sito-articolo.js) */
.oi-indice {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface);
}
.oi-indice__titolo {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
#toc-container {
  display: grid;
  gap: 0.1rem;
  counter-reset: indice;
}
.toc-link {
  display: block;
  padding: 0.4rem 0.5rem;
  color: var(--ink) !important;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s var(--morbido), color 0.2s var(--morbido);
}
.toc-link:hover {
  background: var(--campo);
  color: var(--accent) !important;
}
.toc-item-h2 {
  font-weight: 500;
}
.toc-item-h3 {
  margin-left: 0.75rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--line);
  font-size: 0.92em;
  color: var(--muted) !important;
}
.toc-item-h3.toc-item-piccolo {
  margin-left: 1.5rem;
  font-size: 0.85em;
}

/* Corpo dell'articolo: tipografia leggibile, niente animazioni. */
.oi-corpo {
  color: var(--ink);
  font-size: clamp(1.0625rem, 1.2vw, 1.15rem);
  line-height: 1.75;
  overflow-wrap: break-word;
  min-width: 0;
}
.oi-corpo p {
  margin: 0 0 1.15em;
}
.oi-corpo p:last-child {
  margin-bottom: 0;
}
.oi-corpo h1,
.oi-corpo h2,
.oi-corpo h3,
.oi-corpo h4,
.oi-corpo h5,
.oi-corpo h6 {
  font-family: var(--f-titolo);
  color: var(--ink);
  letter-spacing: -0.02em;
  scroll-margin-top: 6.5rem;
}
.oi-corpo h1,
.oi-corpo h2 {
  position: relative;
  margin: 2.2em 0 0.8em;
  padding-top: 0.9rem;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  line-height: 1.15;
}
.oi-corpo h1::before,
.oi-corpo h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3px;
  background: var(--sfumatura);
}
.oi-corpo h3 {
  margin: 1.8em 0 0.6em;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  line-height: 1.25;
}
.oi-corpo h4,
.oi-corpo h5,
.oi-corpo h6 {
  margin: 1.5em 0 0.5em;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
}
.oi-corpo .content-wrapper > :first-child,
.oi-corpo > :first-child {
  margin-top: 0;
}
.oi-corpo a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.oi-corpo a:hover {
  color: var(--ink);
}
.oi-corpo strong,
.oi-corpo b {
  font-weight: 500;
}
.oi-corpo ul,
.oi-corpo ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
}
.oi-corpo ul {
  list-style: disc;
}
.oi-corpo ol {
  list-style: decimal;
}
.oi-corpo li {
  margin-bottom: 0.45em;
  padding-left: 0.2em;
}
.oi-corpo li::marker {
  color: var(--accent);
}
.oi-corpo blockquote {
  margin: 1.6em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--cielo);
  font-family: var(--f-corsivo);
  font-style: italic;
  font-size: 1.25em;
  line-height: 1.45;
  color: var(--ink);
}
.oi-corpo blockquote p {
  margin-bottom: 0.5em;
}
.oi-corpo img,
.oi-corpo video,
.oi-corpo iframe {
  max-width: 100%;
}
.oi-corpo img {
  height: auto;
  display: block;
  margin: 1.5em 0;
}
.oi-corpo figure {
  margin: 1.75em 0;
}
.oi-corpo figure img {
  margin: 0;
}
.oi-corpo figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.oi-corpo hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}
.oi-corpo code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  background: var(--surface);
  padding: 0.1em 0.3em;
}
.oi-corpo p:empty,
.oi-corpo div:empty:not(.in-article-ad-placeholder) {
  display: none;
}
.oi-corpo script {
  display: none !important;
}

/* Tabelle: sempre dentro un contenitore che scorre in orizzontale (filtro avvolgi_tabelle). */
.oi-corpo .oi-tabella {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.6em 0;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--campo);
}
.oi-corpo .oi-tabella:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.oi-corpo table {
  width: 100%;
  min-width: 32rem;
  margin: 0 !important;
  border-collapse: collapse;
  font-size: 0.92em;
  line-height: 1.5;
}
.oi-corpo th,
.oi-corpo td {
  padding: 0.7rem 0.85rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  text-align: left;
  vertical-align: top;
  color: var(--ink) !important;
}
.oi-corpo th {
  background: var(--notte, var(--ink)) !important;
  color: var(--su-notte, #fff) !important;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oi-corpo tbody tr:nth-child(even) td {
  background: var(--surface) !important;
}
.oi-corpo tbody tr:last-child td {
  border-bottom: 0 !important;
}
@media (max-width: 40rem) {
  .oi-corpo table {
    min-width: 30rem;
  }
}

/* FAQ in fondo al corpo */
.oi-corpo .faq-section {
  margin-top: 2.5em;
}
.oi-corpo .faq-section > h2,
.oi-corpo .faq-section > h3 {
  margin-top: 0;
}
.oi-corpo #faq-container .faq-item {
  margin: 0 0 0.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  background: var(--campo);
}
.oi-corpo .faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0 !important;
  padding: 0.6rem 0 !important;
  font-family: var(--f-testo);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.oi-corpo .faq-question::before {
  display: none;
}
.oi-corpo .faq-question:hover {
  color: var(--accent);
}
.oi-corpo .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.35s var(--morbido), padding 0.35s var(--morbido);
}
.oi-corpo .faq-answer.active {
  max-height: 1600px;
  padding: 0.25rem 0 0.75rem;
}
.faq-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.3s var(--morbido), background-color 0.3s var(--morbido);
}
.faq-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--su-accento, #fff);
}

/* Box verso la guida «PEI con l'IA» (P20) */
.oi-guida-pei {
  margin: 0 0 1.75em;
  padding: 1rem 1.2rem;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  background: var(--surface);
}
.oi-guida-pei[data-oi-avviso] {
  border-color: var(--brick);
}
.oi-guida-pei .oi-etichetta {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--accent);
}
.oi-guida-pei[data-oi-avviso] .oi-etichetta {
  color: var(--brick);
}
.oi-guida-pei p {
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
  line-height: 1.6;
}
.oi-guida-pei p:last-child {
  margin: 0;
}
.oi-corpo .oi-guida-pei .oi-bottone {
  text-decoration: none;
}

/* Fonti, autore, condivisione */
.oi-fonti,
.oi-autore,
.oi-condividi,
.oi-segui {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.oi-fonti h2,
.oi-segui h2 {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}
.oi-fonti ul {
  display: grid;
  gap: 0.6rem;
}
.oi-fonti a {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.oi-fonti a span[aria-hidden] {
  margin-left: 0.3rem;
  text-decoration: none;
  display: inline-block;
}
.oi-autore {
  position: relative;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1.1rem 1.25rem;
  background: var(--campo);
}
.oi-autore::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--sfumatura);
}
.oi-autore__segno {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--bg);
}
.oi-autore__segno img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}
.oi-autore__testo {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.oi-autore h4 {
  margin: 0;
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.oi-autore h4 a {
  color: var(--ink);
  text-decoration: none;
}
.oi-autore h4 a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.oi-autore p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}
@media (max-width: 30rem) {
  .oi-autore {
    grid-template-columns: 1fr;
  }
}
.oi-condividi {
  justify-items: start;
}
.oi-condividi__pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.oi-condividi__pulsanti a {
  min-height: var(--alto-controllo);
}
.oi-condividi__nota {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Correlati */
.oi-correlati {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 40rem) {
  .oi-articolo__meta {
    gap: 0.75rem 1rem;
  }
  .oi-fonte-google {
    width: 100%;
    justify-content: center;
  }
}