/* ==========================================================================
   Le pagine del dopo-forum: Media, Rassegna stampa, Vodcast.
   Si carica DOPO style.css e ne riusa variabili, testata, menu e footer.
   Le pagine le genera lo script gen_media.py (vedi CLAUDE.md, "Le pagine
   media"): qui c'e' solo l'aspetto.
   Come il resto del sito, tutto e' squadrato: nessun angolo arrotondato.
   ========================================================================== */

:root {
  --panna:  #f2f1df;
  --carta:  #f7f7f2;
  --notte:  #1d1d1b;
  --filo:   rgba(29, 29, 27, .16);
  --esce:   cubic-bezier(.16, 1, .3, 1);
  --barra-h: 64px;
  --gap-mosaico: clamp(6px, .6vw, 10px);
}

::selection { background: var(--red); color: var(--panna); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.salta-contenuto {
  position: absolute;
  left: var(--gutter);
  top: 10px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--notte);
  color: var(--panna);
  text-decoration: none;
  translate: 0 -160%;
}
.salta-contenuto:focus { translate: 0 0; }

/* ---------- Il menu che resta (come nella home e in Voci in dialogo) ----- */

.menu-fisso {
  position: fixed;
  z-index: 120;
  right: calc(var(--gutter) - 12px);
  top: clamp(14px, 2.6vw, 34px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: rgba(29, 29, 27, 0);
  transition: background-color .35s var(--esce), box-shadow .35s var(--esce);
}
.menu-fisso img { width: 32px; height: auto; display: block; }
.menu-fisso.is-staccato {
  background: var(--notte);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55);
}
.menu-fisso.is-staccato img { filter: invert(1); }

/* ---------- Pezzi comuni -------------------------------------------------- */

.md-intro { padding-block: clamp(72px, 9vw, 144px) clamp(56px, 7vw, 112px); }
.md-lead {
  max-width: 34em;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--notte);
}
.md-nota { margin-top: 22px; max-width: 38em; font-size: 16px; line-height: 1.5; color: var(--notte); opacity: .75; }

/* i salti dentro la pagina, sotto al paragrafo d'apertura */
.md-salti-testo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(24px, 2.6vw, 36px);
  font-size: 16px;
}
.md-salti-testo a {
  color: var(--notte);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--red);
  transition: color .2s;
}
.md-salti-testo a:hover { color: var(--red); }

.md-h2 {
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.md-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  background: var(--red);
  color: var(--btn-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.md-btn svg { width: 13px; height: 13px; flex: none; }
.md-btn:hover, .md-btn:focus-visible { background: var(--notte); color: var(--panna); }
.md-btn:active { translate: 0 1px; }
.md-btn--secondo { background: transparent; color: var(--notte); box-shadow: inset 0 0 0 1px var(--notte); }
.md-btn--secondo:hover, .md-btn--secondo:focus-visible { background: var(--notte); color: var(--panna); }

.md-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid var(--red);
  background: none;
  color: var(--notte);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.md-link svg { width: 10px; height: 10px; flex: none; }
.md-link:hover { color: var(--red); }
.md-link--chiaro { color: var(--panna); }
.md-link--chiaro:hover { color: #fff; border-color: #fff; }

/* ==========================================================================
   MEDIA — i reel
   ========================================================================== */

.md-reel {
  background: var(--notte);
  color: var(--panna);
  padding-block: clamp(80px, 10vw, 168px) clamp(110px, 14vw, 240px);
  overflow: clip;
}
.md-reel-dentro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}
.md-reel-testa { grid-column: 1 / span 4; padding-top: clamp(8px, 2vw, 32px); }
.md-reel-testo {
  margin-block: 22px 28px;
  max-width: 24em;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(242, 241, 223, .82);
}
.reel-fila {
  grid-column: 5 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 44px);
}
/* le tre cornici scendono a gradini: si leggono in fila, come i tre giorni */
.reel:nth-child(2) { margin-top: clamp(40px, 6vw, 96px); }
.reel:nth-child(3) { margin-top: clamp(80px, 12vw, 192px); }

/* La cornice: un 9:16 con il bordo del formato disegnato attorno, staccato
   di 12px. Passandoci sopra il bordo si stringe sul video. */
.reel-cornice {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  background: #0f0f0e;
  color: var(--panna);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  outline: 1px solid rgba(242, 241, 223, .4);
  outline-offset: 12px;
  transition: outline-offset .6s var(--esce), outline-color .3s;
}
.reel-cornice:hover,
.reel-cornice:focus-visible { outline-offset: 0; outline-color: var(--panna); }
.reel-cornice > * { pointer-events: none; }
.reel-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.4s var(--esce);
}
.reel-cornice:hover .reel-poster { transform: scale(1.07); }
/* la lettura: un velo neutro solo sotto al testo, in basso e in alto */
.reel-cornice::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(14, 16, 18, .55), rgba(14, 16, 18, 0) 28%),
    linear-gradient(to top, rgba(14, 16, 18, .82), rgba(14, 16, 18, 0) 42%);
  pointer-events: none;
}
.reel-giorno {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 14px;
  font-size: clamp(44px, 4.4vw, 72px);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.045em;
}
.reel-piede {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.reel-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  background: var(--red);
  color: var(--panna);
  transition: background-color .25s, color .25s;
}
.reel-play svg { width: 15px; height: 15px; fill: currentColor; }
.reel-cornice:hover .reel-play { background: var(--panna); color: var(--red); }
.reel-testo { display: grid; gap: 4px; min-width: 0; }
.reel-titolo { font-size: 17px; font-weight: 500; line-height: 1.15; }
.reel-luogo { font-size: 13px; line-height: 1.3; color: rgba(242, 241, 223, .78); }

/* il reel che suona: il lettore di YouTube prende il posto della cornice */
.reel-lettore {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  outline: 1px solid var(--panna);
  outline-offset: 0;
}
.reel-lettore iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel-lettore .reel-torna {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
}

/* se l'autoblocco del consenso trattiene il lettore, lo si dice */
.md-consenso {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 20px;
  background: rgba(18, 18, 17, .92);
  color: var(--panna);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
.md-consenso button {
  justify-self: center;
  padding: 10px 16px;
  border: 0;
  background: var(--red);
  color: var(--panna);
  font: inherit;
  cursor: pointer;
}

/* ==========================================================================
   MEDIA — la galleria
   ========================================================================== */

.md-galleria { padding-block: clamp(80px, 10vw, 160px) clamp(40px, 5vw, 80px); }
.gal-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 64px);
}
.gal-intro-testo { max-width: 30em; font-size: 17px; line-height: 1.55; justify-self: end; }

.gal-giorno {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 24px clamp(20px, 3vw, 48px);
  padding-block: clamp(40px, 5vw, 88px);
  scroll-margin-top: 16px;
}
.gal-testa {
  position: sticky;
  top: clamp(96px, 10vw, 130px);
  align-self: start;
}
.gal-titolo { font-weight: 400; }
.gal-num {
  display: block;
  font-size: clamp(96px, 11vw, 190px);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--red);
}
.gal-mese { display: block; margin-top: 10px; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.gal-nome { margin-top: 22px; font-size: 18px; font-weight: 500; line-height: 1.25; }
.gal-luogo { margin-top: 4px; font-size: 15px; line-height: 1.4; }

/* Il mosaico: sei colonne e righe alte due terzi di una colonna. La stessa
   fotografia orizzontale diventa ora un campo largo, ora una striscia alta. */
.gal-mosaico { container-type: inline-size; min-width: 0; }
.mosaico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - 5 * var(--gap-mosaico)) / 6 * .66);
  gap: var(--gap-mosaico);
}
/* le misure di ogni tessera le scrive gen_media.py (--c, --r; --cm, --rm
   sul telefono): composte a fasce, ogni giorno finisce senza buchi */
.tessera { grid-column: span var(--c, 2); grid-row: span var(--r, 2); overflow: hidden; background: #e7e6dc; }

.tessera-link { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.tessera-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--esce), opacity .5s;
}
.tessera-link:hover img { transform: scale(1.05); }
.tessera-link:focus-visible { outline-offset: -3px; outline-color: var(--panna); }
.tessera--oltre { display: none; }
.gal-giorno.is-tutte .tessera--oltre { display: block; }
.gal-altre { margin-top: clamp(20px, 2vw, 28px); }
.gal-giorno.is-tutte .gal-altre { display: none; }

/* chi e' nella fotografia, quando lo sappiamo: compare passandoci sopra */
.tessera-link[data-nomi]::after {
  content: attr(data-nomi);
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  padding: 7px 10px;
  background: var(--notte);
  color: var(--panna);
  font-size: 13px;
  line-height: 1.3;
  opacity: 0;
  translate: 0 6px;
  transition: opacity .3s, translate .4s var(--esce);
}
.tessera-link[data-nomi]:hover::after,
.tessera-link[data-nomi]:focus-visible::after { opacity: 1; translate: 0 0; }

/* ---------- La fotografia intera ---------- */

.lb {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #121211;
  color: var(--panna);
  overflow: hidden;
}
.lb::backdrop { background: rgba(0, 0, 0, .9); }
.lb[open] { display: block; }
.lb-figura {
  position: absolute;
  inset: clamp(16px, 3vw, 48px) clamp(72px, 7vw, 120px) clamp(64px, 7vw, 96px);
  margin: 0;
  display: grid;
  place-items: center;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity .25s;
}
.lb-img.is-carica { opacity: .25; }
.lb-dida {
  position: fixed;
  left: var(--gutter);
  right: 140px;
  bottom: clamp(18px, 2.4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 15px;
  line-height: 1.35;
}
.lb-nomi { font-weight: 500; }
.lb-nomi:empty { display: none; }
.lb-dove { color: rgba(242, 241, 223, .7); }
.lb-btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: rgba(242, 241, 223, .08);
  color: var(--panna);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lb-btn svg { width: 18px; height: 18px; }
.lb-btn:hover { background: var(--panna); color: var(--notte); }
.lb-btn:focus-visible { outline-color: var(--panna); }
.lb-prec { left: clamp(10px, 1.6vw, 24px); top: 50%; translate: 0 -50%; }
.lb-succ { right: clamp(10px, 1.6vw, 24px); top: 50%; translate: 0 -50%; }
.lb-chiudi { right: clamp(10px, 1.6vw, 24px); top: clamp(10px, 1.6vw, 24px); }

/* ---------- La barra delle sezioni (come in Voci in dialogo) ---------- */

.md-salti {
  position: fixed;
  z-index: 55;
  left: 50%;
  bottom: clamp(14px, 2.4vh, 26px);
  translate: -50% 140%;
  display: flex;
  align-items: center;
  padding: 9px 10px;
  gap: 4px;
  background: var(--notte);
  color: var(--panna);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: translate .5s var(--esce), opacity .3s;
}
.md-salti.is-visibile { translate: -50% 0; opacity: 1; pointer-events: auto; }
.md-salti a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 40px;
  padding-inline: 12px;
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.md-salti a:hover { background: rgba(242, 241, 223, .14); }
.md-salti a.is-attivo { background: var(--panna); color: var(--notte); }
.md-salti .md-salti-inizio {
  margin-right: 6px;
  padding-inline: 18px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(242, 241, 223, .35);
}

/* ==========================================================================
   RASSEGNA STAMPA
   ========================================================================== */

.rs-pdf {
  background: var(--carta);
  padding-block: clamp(80px, 10vw, 160px);
  overflow: clip;
}
.rs-pdf-dentro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
}
/* Il fascicolo: la copertina sopra, due pagine vere sotto, sfalsate. */
.rs-fascicolo {
  grid-column: 1 / span 5;
  position: relative;
  display: block;
  width: min(100%, 440px);
  aspect-ratio: 1100 / 1555;
  justify-self: center;
}
.rs-foglio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  background: #fff;
  /* un'ombra sola, corta: e' quanto basta perche' i fogli si stacchino */
  box-shadow: 0 1px 3px rgba(29, 29, 27, .22);
  transition: transform .8s var(--esce);
}
.rs-foglio--3 { transform: translate(14%, 5%) rotate(7deg); }
.rs-foglio--2 { transform: translate(7%, 2.5%) rotate(3.5deg); }
.rs-copertina { position: relative; }
.rs-fascicolo:hover .rs-foglio--3,
.rs-fascicolo:focus-visible .rs-foglio--3 { transform: translate(24%, 6%) rotate(11deg); }
.rs-fascicolo:hover .rs-foglio--2,
.rs-fascicolo:focus-visible .rs-foglio--2 { transform: translate(12%, 3%) rotate(5.5deg); }
.rs-fascicolo:hover .rs-copertina,
.rs-fascicolo:focus-visible .rs-copertina { transform: translateY(-8px); }
.rs-fascicolo:focus-visible { outline-offset: 10px; }

.rs-pdf-testo { grid-column: 7 / -1; }
.rs-pdf-desc { margin-top: 22px; max-width: 30em; font-size: 18px; line-height: 1.55; }
.rs-fatti {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 3vw, 48px);
  margin: clamp(28px, 3vw, 40px) 0;
}
.rs-fatti dt { font-size: 14px; opacity: .7; }
.rs-fatti dd { margin: 4px 0 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; }
.rs-pdf-desc + .rs-pdf-desc { margin-top: 14px; }
.rs-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }

.rs-pagine-wrap { margin-top: clamp(72px, 8vw, 128px); }
.rs-pagine-titolo { margin-bottom: 20px; font-size: 18px; font-weight: 500; }
.rs-pagine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.rs-pagina { display: block; color: var(--notte); text-decoration: none; }
.rs-pagina-img {
  display: block;
  aspect-ratio: 520 / 736;
  overflow: hidden;
  background: #fff;
  transition: transform .6s var(--esce), box-shadow .6s var(--esce);
}
.rs-pagina-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rs-pagina:hover .rs-pagina-img,
.rs-pagina:focus-visible .rs-pagina-img { transform: translateY(-8px); box-shadow: 0 18px 30px -18px rgba(29, 29, 27, .5); }
.rs-pagina:focus-visible { outline: none; }
.rs-pagina:focus-visible .rs-pagina-img { outline: 2px solid var(--red); outline-offset: 3px; }
.rs-pagina-testata { display: block; margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.25; }
.rs-pagina-data { display: block; margin-top: 2px; font-size: 13px; opacity: .7; }

/* ---------- I servizi video ---------- */

.rs-video {
  background: var(--notte);
  color: var(--panna);
  padding-block: clamp(80px, 10vw, 160px);
}
.rs-video-testa {
  display: grid;
  /* stesse colonne del lettore e della scaletta, cosi' l'etichetta cade
     esattamente sopra la scaletta */
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 18px clamp(20px, 2.4vw, 40px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.rs-video-desc { max-width: 30em; font-size: 17px; line-height: 1.55; color: rgba(242, 241, 223, .82); justify-self: end; }
.rs-video-testa .md-link { grid-column: 2; justify-self: end; }

/* Etichetta di stato accanto al titolo: stesso segno del riquadro
   "in aggiornamento" (il quadrato rosso che respira), su fondo scuro. */
.md-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  border: 1px solid rgba(242, 241, 223, .32);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.md-tag::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--red);
  animation: agg-respiro 2.4s ease-in-out infinite;
}
.rs-video-testa .md-tag { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }

.rs-schermo-fila {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}
.rs-schermo-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.rs-schermo-video img,
.rs-schermo-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center 62%;
  transition: opacity .35s;
}
.rs-schermo.is-cambia .rs-schermo-video img { opacity: 0; }
.rs-schermo-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 24px;
  align-items: end;
  padding-top: 22px;
}
.rs-schermo-titolo { grid-column: 1; font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.2; }
.rs-schermo-data { grid-column: 1; font-size: 14px; color: rgba(242, 241, 223, .72); }
.rs-schermo-info .md-btn { grid-column: 2; grid-row: 1 / span 2; }

.rs-scaletta {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 0;
  max-height: calc(min(100vw, var(--maxw)) * .62 * .5625);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 241, 223, .3) transparent;
}
.rs-riga {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.rs-riga:hover { background: rgba(242, 241, 223, .06); }
.rs-riga.is-attiva { background: rgba(242, 241, 223, .12); box-shadow: inset 3px 0 0 var(--red); }
.rs-riga:focus-visible { outline-color: var(--panna); outline-offset: -2px; }
.rs-riga-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.rs-riga-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.rs-riga-testo { display: grid; gap: 3px; }
.rs-riga-testata { font-size: 13px; color: rgba(242, 241, 223, .7); }
.rs-riga-titolo { font-size: 15px; line-height: 1.3; }
.rs-riga-data { font-size: 13px; color: rgba(242, 241, 223, .6); }

/* ==========================================================================
   VODCAST
   ========================================================================== */

.md-filtri {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 241, 223, .96);
  border-block: 1px solid var(--filo);
}
.md-filtri-dentro {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 10px calc(var(--gutter) + 72px) 10px var(--gutter);
  min-height: var(--barra-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.md-temi { display: flex; flex-wrap: wrap; gap: 4px; }
.md-chip {
  min-height: 38px;
  padding-inline: 14px;
  border: 0;
  background: rgba(29, 29, 27, .07);
  color: var(--notte);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.md-chip:hover { background: rgba(29, 29, 27, .14); }
.md-chip[aria-pressed="true"] { background: var(--notte); color: var(--panna); }
.md-select select {
  height: 40px;
  padding: 0 38px 0 14px;
  border: 1px solid rgba(29, 29, 27, .22);
  border-radius: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231d1d1b' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  color: var(--notte);
  font: inherit;
  font-size: 15px;
  appearance: none;
}
.md-conta { margin-left: auto; font-size: 14px; opacity: .75; }

.vc-elenco { padding-block: clamp(56px, 7vw, 112px); }
.vc-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(48px, 6vw, 96px);
}
.vc-puntata {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
}
.vc-puntata[hidden] { display: none; }
.vc-media {
  grid-column: 1 / span 5;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e6dc;
}
.vc-media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--esce); }
.vc-puntata:hover .vc-media > img { transform: scale(1.04); }
.vc-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vc-testo { grid-column: 7 / -1; }
/* la puntata piu' recente apre la pagina, piu' grande */
.vc-puntata--prima .vc-media { grid-column: 1 / span 7; }
.vc-puntata--prima .vc-testo { grid-column: 9 / -1; }
.vc-puntata--prima .vc-titolo { font-size: clamp(32px, 3.6vw, 54px); }

.vc-play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  background: var(--red);
  color: var(--panna);
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.vc-play svg { width: 18px; height: 18px; fill: currentColor; }
.vc-play:hover { background: var(--panna); color: var(--red); }
.vc-arrivo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  background: rgba(29, 29, 27, .86);
  color: var(--panna);
  font-size: 14px;
  font-weight: 500;
}
.vc-esempio {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 9px;
  background: var(--sand);
  font-size: 13px;
  font-weight: 500;
}
.vc-titolo { font-size: clamp(24px, 2.4vw, 36px); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.vc-ospite { margin-top: 18px; font-size: 16px; line-height: 1.45; }
.vc-ospite b { display: block; font-size: 18px; font-weight: 500; }
.vc-temi { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vc-temi li { padding: 6px 10px; background: rgba(29, 29, 27, .07); font-size: 14px; }
.vc-durata { margin-top: 16px; font-size: 14px; opacity: .7; }
.vc-vuoto { padding: 40px 0; text-align: left; font-size: 18px; }
.vc-vuoto .md-link { margin-top: 14px; }

/* ==========================================================================
   In chiusura: le altre pagine del dopo-forum
   ========================================================================== */

.md-altri { padding-block: clamp(80px, 10vw, 160px) clamp(56px, 6vw, 96px); }
.md-altri-titolo { margin-bottom: 22px; font-size: 18px; font-weight: 500; }
.md-altri-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.md-altro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: clamp(12px, 1.2vw, 16px);
  background: var(--panna);
  color: var(--notte);
  text-decoration: none;
  transition: background-color .3s;
}
.md-altro:hover { background: var(--sand); }
.md-altro-foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.md-altro-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--esce); }
.md-altro:hover .md-altro-foto img { transform: scale(1.06); }
.md-altro-testo { display: grid; gap: 8px; }
.md-altro-titolo { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.02em; }
.md-altro-titolo svg { width: 14px; height: 14px; flex: none; color: var(--red); transition: translate .4s var(--esce); }
.md-altro:hover .md-altro-titolo svg { translate: 3px -3px; }
.md-altro-desc { font-size: 15px; line-height: 1.45; }

/* ==========================================================================
   In aggiornamento: tre fotografie sfalsate e accanto il testo. E' la
   versione online di Media e Vodcast finche' il materiale non e' completo.
   ========================================================================== */

.md-agg-sezione { padding-block: clamp(24px, 4vw, 64px) clamp(40px, 5vw, 80px); }
.agg {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  padding: clamp(28px, 4vw, 64px);
  background: var(--sand);
}
.agg-foto-fila { position: relative; aspect-ratio: 5 / 4; }
.agg-foto { position: absolute; overflow: hidden; background: #cfcfc0; }
.agg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.agg-foto--1 { left: 0; top: 0; width: 64%; aspect-ratio: 3 / 2; }
.agg-foto--2 { right: 0; top: 18%; width: 44%; aspect-ratio: 4 / 5; }
.agg-foto--3 { left: 14%; bottom: 0; width: 48%; aspect-ratio: 3 / 2; }
.agg-stato {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--red);
}
/* il segno che dice "in corso": un quadrato che respira */
.agg-stato::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--red);
  animation: agg-respiro 2.4s ease-in-out infinite;
}
@keyframes agg-respiro { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.agg-titolo {
  margin-top: 16px;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.agg-desc { margin-top: 20px; max-width: 30em; font-size: 18px; line-height: 1.55; }
.agg-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 3vw, 36px); }
.md-galleria .agg { margin-top: clamp(8px, 1vw, 16px); }

@media (max-width: 899px) {
  .agg { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .agg-stato::before, .md-tag::before { animation: none; }
}

/* ==========================================================================
   Entrate: le parti di ogni sezione salgono quando arrivano (js/media.js
   mette .entra sugli elementi e .is-dentro quando entrano). Senza JS o con
   il movimento ridotto restano ferme e visibili.
   ========================================================================== */

.js-entrate .entra { opacity: 0; translate: 0 24px; transition: opacity .8s var(--esce), translate .9s var(--esce); }
.js-entrate .entra.is-dentro { opacity: 1; translate: 0 0; }

/* ==========================================================================
   Tablet e telefono
   ========================================================================== */

@media (max-width: 1100px) {
  .reel-luogo { display: none; }
  .rs-pagine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rs-pagine li:nth-child(n+5) { display: none; }
}

@media (max-width: 899px) {
  .md-reel-dentro { display: block; }
  .md-reel-testa { margin-bottom: 36px; }
  /* i reel diventano una fila da scorrere col dito */
  .reel-fila {
    display: flex;
    gap: 22px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 14px var(--gutter) 60px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .reel-fila::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 min(68vw, 320px); scroll-snap-align: start; }
  .reel:nth-child(2), .reel:nth-child(3) { margin-top: 0; }
  .reel-cornice { outline-offset: 8px; }
  .reel-luogo { display: block; }
  .md-reel { padding-bottom: clamp(56px, 10vw, 96px); }

  .gal-intro { grid-template-columns: 1fr; }
  .gal-intro-testo { justify-self: start; }
  .gal-giorno { grid-template-columns: 1fr; }
  .gal-testa {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    align-items: end;
  }
  .gal-titolo { grid-row: span 4; }
  .gal-num { font-size: clamp(88px, 26vw, 130px); }
  .gal-mese { display: none; }
  .gal-nome { margin-top: 0; }
  /* sul telefono il mosaico va su due colonne, con una tessera larga ogni cinque */
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--gap-mosaico)) / 2 * .66); }
  .tessera { grid-column: span var(--cm, 1); grid-row: span var(--rm, 1); }
  .tessera-link[data-nomi]::after { display: none; }

  .lb-figura { inset: 64px 0 120px; }
  .lb-prec, .lb-succ { top: auto; bottom: 16px; translate: 0 0; }
  .lb-prec { left: auto; right: 80px; }
  .lb-dida { right: 150px; bottom: 20px; font-size: 14px; }

  .rs-pdf-dentro { display: block; }
  .rs-fascicolo { width: min(70vw, 340px); margin: 0 auto clamp(48px, 10vw, 72px) 0; }
  .rs-pagine {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 6px var(--gutter) 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .rs-pagine li, .rs-pagine li:nth-child(n+5) { display: block; flex: 0 0 38vw; scroll-snap-align: start; }
  .rs-video-testa { grid-template-columns: 1fr; }
  .rs-video-desc, .rs-video-testa .md-link { justify-self: start; grid-column: 1; }
  .rs-video-testa .md-tag { grid-column: 1; grid-row: auto; justify-self: start; margin-bottom: 0; }
  .rs-schermo-fila { grid-template-columns: 1fr; }
  .rs-schermo-info { grid-template-columns: 1fr; }
  .rs-schermo-info .md-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
  .rs-scaletta { max-height: none; padding: 0; margin-top: 18px; }
  .rs-riga { grid-template-columns: 104px minmax(0, 1fr); padding: 10px 0; }
  .rs-riga.is-attiva { padding-left: 12px; }

  .md-filtri-dentro { padding-right: calc(var(--gutter) + 64px); }
  .md-temi { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .md-chip { flex: none; }
  .md-conta { margin-left: 0; }
  .vc-puntata,
  .vc-puntata--prima { display: block; }
  .vc-media { margin-bottom: 22px; }

  .md-altri-fila { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .md-altro { grid-template-columns: 1fr; }
  .md-salti { padding: 7px; gap: 2px; }
  .md-salti a { min-width: 38px; padding-inline: 9px; font-size: 14px; }
  .md-salti .md-salti-inizio { padding-inline: 11px; font-size: 11px; margin-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .md-salti, .reel-cornice, .reel-poster, .rs-foglio, .rs-pagina-img, .tessera-link img, .md-altro-foto img { transition: none; }
  .reel-cornice:hover .reel-poster, .tessera-link:hover img, .md-altro:hover .md-altro-foto img { transform: none; }
}