/* =============================================================================
   GoYou 2026 — foglio di stile unico, responsive
   telefono <600 · tablet 600-1023 · computer >=1024 · schermi larghi >=1560
   ============================================================================= */

:root {
  --bg: #F5F7FA; --surface: #FFFFFF; --surface-2: #EEF2F6; --surface-3: #F5F7FA;
  --line: #DDE3EA; --line-2: #C9D2DC; --line-3: #E6EAF0; --line-strong: #D5DCE4;
  --ink: #0E1621; --ink-2: #3D4A59; --ink-3: #5B6878; --ink-4: #9AA7B5;
  --accent: #F5A524; --accent-ink: #9A5B00; --accent-soft: #FCEFD6; --on-accent: #0E1621;
  --link: #1F63C7; --focus: #1F63C7;
  --ad-bg: #ECEFF3; --ad-line: #B5C0CC;
  --dark: #0E1621; --dark-2: #141D28; --dark-line: #2C3A4C; --dark-ink: #F1F4F7; --dark-ink-2: #D5DCE4; --dark-ink-3: #A9B4C0;
  --c-cybersecurity: #0B7A70; --b-cybersecurity: #DDF3F0; --d-cybersecurity: #3CCFBF; --db-cybersecurity: #0E2A2E;
  --c-crypto: #92640A;        --b-crypto: #F7ECD6;        --d-crypto: #E8B04B;        --db-crypto: #2B2210;
  --c-wiki: #6D4FD8;          --b-wiki: #ECE7FB;          --d-wiki: #A08BF5;          --db-wiki: #1E1838;
  --c-tecnologia: #1F63C7;    --b-tecnologia: #E1ECFB;    --d-tecnologia: #60A5FA;    --db-tecnologia: #0F2238;
  --c-geopolitica: #C2412F;   --b-geopolitica: #FBE4E0;   --d-geopolitica: #F27B6B;   --db-geopolitica: #2E1715;
  --f-titolo: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-testo: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 14px;
  --ombra: 0 18px 48px rgba(14, 22, 33, .16);
  /* nomi usati dai testi delle pagine legali (sito precedente) */
  --bg-card: var(--surface-2); --text-main: var(--ink); --text-muted: var(--ink-3);
  --border-color: var(--line); --color-accent: var(--accent-ink); --color-surface: var(--surface-2);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0B1118; --surface: #121B26; --surface-2: #18232F; --surface-3: #0F1720;
  --line: #22303F; --line-2: #2C3A4C; --line-3: #1C2733; --line-strong: #2C3A4C;
  --ink: #F1F4F7; --ink-2: #C3CCD6; --ink-3: #93A1B0; --ink-4: #6B7A8B;
  --accent-ink: #F5B44A; --accent-soft: #2B2210; --link: #7DB4FF; --focus: #7DB4FF;
  --ad-bg: #18232F; --ad-line: #3A4A5D;
  --c-cybersecurity: #3CCFBF; --b-cybersecurity: #0E2A2E;
  --c-crypto: #E8B04B;        --b-crypto: #2B2210;
  --c-wiki: #A08BF5;          --b-wiki: #1E1838;
  --c-tecnologia: #60A5FA;    --b-tecnologia: #0F2238;
  --c-geopolitica: #F27B6B;   --b-geopolitica: #2E1715;
  --ombra: 0 18px 48px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

.cat-cybersecurity { --cat: var(--c-cybersecurity); --cat-bg: var(--b-cybersecurity); --cat-d: var(--d-cybersecurity); --cat-db: var(--db-cybersecurity); }
.cat-crypto        { --cat: var(--c-crypto);        --cat-bg: var(--b-crypto);        --cat-d: var(--d-crypto);        --cat-db: var(--db-crypto); }
.cat-wiki          { --cat: var(--c-wiki);          --cat-bg: var(--b-wiki);          --cat-d: var(--d-wiki);          --cat-db: var(--db-wiki); }
.cat-tecnologia    { --cat: var(--c-tecnologia);    --cat-bg: var(--b-tecnologia);    --cat-d: var(--d-tecnologia);    --cat-db: var(--db-tecnologia); }
.cat-geopolitica   { --cat: var(--c-geopolitica);   --cat-bg: var(--b-geopolitica);   --cat-d: var(--d-geopolitica);   --cat-db: var(--db-geopolitica); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--f-testo); -webkit-font-smoothing: antialiased; }
body.lettore-attivo { padding-bottom: 76px; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.lk:hover, .lk:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.salta { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 10px 14px; border-radius: 8px; }
.salta:focus { left: 8px; }
.mono { font-family: var(--f-mono); }
.kick { font: 500 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kick.cat { color: var(--cat); }
.meta { font: 400 12px/1.5 var(--f-mono); color: var(--ink-3); }
.i { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i.pieno { fill: currentColor; stroke: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- pulsanti ---------- */
.pill { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; background: transparent; cursor: pointer; white-space: nowrap; }
.pill:hover { border-color: var(--ink-4); background: var(--surface-2); }
.pill.sm { min-height: 40px; padding: 0 14px; font-weight: 500; }
.pill.mono { font: 500 13px var(--f-mono); }
.btn-acc { min-height: 44px; padding: 0 18px 0 12px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-acc:hover { filter: brightness(1.05); }
.btn-play { min-height: 48px; padding: 0 20px 0 8px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; font-weight: 600; }
.btn-play .tondo { width: 34px; height: 34px; border-radius: 999px; background: var(--dark); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.btn-tondo { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.btn-tondo:hover { background: var(--surface-2); }
.play-mini { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 94%, transparent); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--ink); }
.play-mini:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.in-ascolto .play-mini, .play-mini[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- striscia ULTIM'ORA ---------- */
.ticker { background: var(--dark); color: var(--dark-ink-2); }
.ticker .wrap { display: flex; align-items: center; gap: 16px; height: 40px; overflow: hidden; }
.ticker .tag { flex: none; font: 500 11px var(--f-mono); letter-spacing: .12em; color: var(--on-accent); background: var(--accent); padding: 3px 8px; border-radius: 4px; }
.ticker .scorre { flex: 1 1 auto; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker .nastro { display: inline-flex; gap: 14px; white-space: nowrap; font-size: 13px; animation: nastro 70s linear infinite; }
.ticker .nastro a:hover { color: #fff; text-decoration: underline; }
.ticker .nastro .sep { color: #5B6878; }
.ticker:hover .nastro, .ticker:focus-within .nastro { animation-play-state: paused; }
.ticker .data { flex: none; font: 12px var(--f-mono); color: var(--dark-ink-3); }
@keyframes nastro { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .nastro { animation: none; } }

/* ---------- testata ---------- */
.testata { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.testata .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo b { font: 800 30px/1 var(--f-titolo); letter-spacing: -.03em; }
.logo b i { font-style: normal; color: var(--accent); }
.logo small { font: 10px var(--f-mono); letter-spacing: .12em; color: var(--ink-3); margin-top: 5px; }
.nav { flex: 1 1 520px; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav::-webkit-scrollbar { display: none; }
.nav a, .nav button { padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav a:hover, .nav button:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"], .nav .attivo { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav .nav-pod[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.nav .nav-pod .i { transition: transform .15s; }
.nav .nav-pod[aria-expanded="true"] .i { transform: rotate(180deg); }
.azioni { display: flex; align-items: center; gap: 6px; }
.solo-tel-flex { display: none !important; }

/* pannello podcast (computer) */
.pannello-pod { position: absolute; top: calc(100% - 6px); right: var(--gutter); width: min(780px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--ombra); padding: 22px; display: flex; flex-direction: column; gap: 18px; z-index: 40; }
.pannello-pod .righe { display: flex; flex-wrap: wrap; gap: 22px; }
.pannello-pod .brief-box { flex: 1 1 250px; min-width: 0; background: var(--surface-3); border: 1px solid var(--line-3); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pannello-pod .brief-box h3 { font: 800 22px/1.15 var(--f-titolo); letter-spacing: -.01em; }
.pannello-pod .canali { flex: 2 1 380px; min-width: 0; display: flex; flex-direction: column; }
.riga-canale { display: flex; align-items: center; gap: 12px; border-radius: 10px; padding: 0 4px 0 10px; }
.riga-canale:hover { background: var(--surface-3); }
.riga-canale > a:first-child { flex: 1 1 auto; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 12px; }
.ico-canale { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--cat-bg); color: var(--cat); display: flex; align-items: center; justify-content: center; }
.riga-canale .nome { display: flex; flex-direction: column; min-width: 0; }
.riga-canale .nome b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.riga-canale .nome span { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pannello-pod .piede-pan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; border-top: 1px solid var(--line-3); padding-top: 14px; font-size: 14px; }
.pannello-pod .piede-pan div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }

/* ---------- annunci ---------- */
.ad { display: block; margin: 56px auto 0; max-width: 970px; text-align: center; clear: both; }
.ad-et { display: block; margin-bottom: 6px; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-3); }
.ad ins { margin: 0 auto; }
.ad-banner ins.adsbygoogle { min-height: 250px; }
.ad-leader { max-width: 970px; margin-top: 24px; }
.ad-leader ins.adsbygoogle { min-height: 90px; }
.ad-inarticle { margin: 32px 0; max-width: none; }
.ad-inarticle ins.adsbygoogle { min-height: 160px; }
.ad-rett ins.adsbygoogle { min-height: 250px; }
.ad-half ins.adsbygoogle { min-height: 600px; }
.ad-multiplex { max-width: none; text-align: left; }
.ad-multiplex ins.adsbygoogle { min-height: 320px; }
.ad-infeed { margin: 0; max-width: none; text-align: left; }
.ad-ph { min-height: 250px; border-radius: 10px; background: var(--ad-bg); border: 1px dashed var(--ad-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; font-size: 14px; color: var(--ink-2); }
.ad-ph b { font-weight: 600; }
.ad-ph span { font: 12px var(--f-mono); color: var(--ink-3); }
.ad-leader .ad-ph { min-height: 90px; }
.ad-inarticle .ad-ph { min-height: 160px; }
.ad-half .ad-ph { min-height: 600px; }
.ad-infeed .ad-ph { min-height: 84px; }
.ad-multiplex .ad-ph { min-height: 320px; }
.ad-torre .ad-ph { min-height: 600px; }
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.solo-tel { display: none; }
.rail { display: none; }
@media (min-width: 1560px) {
  .rail { display: block; position: absolute; top: 300px; bottom: 120px; width: 160px; z-index: 5; }
  .rail.sx { left: 20px; } .rail.dx { right: 20px; }
  .rail > div { position: sticky; top: 130px; }
  .rail .ad { margin: 0; }
}

/* ---------- immagini delle schede ---------- */
.media { position: relative; display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background-color: var(--cat-bg, var(--surface-2)); aspect-ratio: 16 / 10;
  background-image: radial-gradient(circle at 72% 40%, transparent 0 18%, color-mix(in srgb, var(--cat) 55%, transparent) 18.4% 19%, transparent 19.4% 34%, color-mix(in srgb, var(--cat) 30%, transparent) 34.4% 35%, transparent 35.4% 52%, color-mix(in srgb, var(--cat) 16%, transparent) 52.4% 53%, transparent 53.4%); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a:hover > .media img, .media:hover img { transform: scale(1.03); }
.media.r169 { aspect-ratio: 16 / 9; }
.media .play-mini { position: absolute; left: 12px; bottom: 12px; }
.media .etichetta { position: absolute; left: 16px; top: 16px; font: 500 12px var(--f-mono); letter-spacing: .1em; color: var(--cat); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); padding: 5px 10px; border-radius: 6px; }
.durata { position: absolute; right: 12px; bottom: 12px; font: 12px var(--f-mono); color: #fff; background: rgba(0, 0, 0, .78); padding: 2px 7px; border-radius: 4px; }

/* ---------- home: apertura ---------- */
.hero { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 36px; }
.hero .lead { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero .lead .media { border-radius: 16px; aspect-ratio: 16 / 9; }
.hero .lead .btn-play { position: absolute; left: 20px; bottom: 20px; }
.hero h1 { font: 800 clamp(30px, 3.6vw, 46px)/1.06 var(--f-titolo); letter-spacing: -.025em; }
.hero .lead p { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 760px; }
.hero .info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font: 13px var(--f-mono); color: var(--ink-3); }
.hero .info a { color: var(--ink-2); }
.hero aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.riga { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.riga .media { flex: none; width: 128px; height: 84px; aspect-ratio: auto; border-radius: 10px; }
.riga .media.pic { width: 112px; height: 76px; }
.riga .testo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.riga h3 { font: 700 17px/1.25 var(--f-titolo); }
.riga .kick { font-size: 11px; letter-spacing: .1em; }

/* ---------- flash briefing ---------- */
.brief { margin-top: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.brief .grande { flex: none; width: 68px; height: 68px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.brief .testo { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.brief .kick { color: var(--accent-ink); }
.brief h2 { font: 800 26px/1.15 var(--f-titolo); letter-spacing: -.01em; }
.brief .sotto { font-size: 14px; color: var(--ink-2); }
.onda { flex: 2 1 300px; min-width: 0; height: 44px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.onda i { flex: 1 0 3px; max-width: 5px; border-radius: 2px; background: var(--line-strong); }
.onda i.on { background: var(--accent); }

/* ---------- sezioni ---------- */
.sez { margin-top: 56px; }
.sez-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; border-top: 1px solid var(--line-strong); padding-top: 22px; margin-bottom: 26px; }
.sez-testa .tit { display: flex; align-items: center; gap: 12px; }
.sez-testa .tit::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--cat, var(--accent)); }
.sez-testa h2 { font: 800 32px/1.1 var(--f-titolo); letter-spacing: -.02em; }
.sez-testa .azioni-sez { display: flex; flex-wrap: wrap; gap: 8px; }
.testa-larga { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 26px; }
.testa-larga > div { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.testa-larga h2 { font: 800 34px/1.1 var(--f-titolo); letter-spacing: -.02em; }
.testa-larga p { font-size: 16px; color: var(--ink-2); }
.testa-larga .kick { color: var(--accent-ink); }
.due { display: flex; flex-wrap: wrap; gap: 36px; }
.due > .grande { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.due > .lista { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }
.grande .media { aspect-ratio: 16 / 9; border-radius: 14px; }
.grande h3 { font: 800 30px/1.12 var(--f-titolo); letter-spacing: -.02em; }
.grande p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* griglia */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 28px 24px; }
.scheda { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.scheda h3 { margin-top: 4px; font: 700 18px/1.25 var(--f-titolo); }
.scheda .sommario { font-size: 14px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* guide numerate */
.numerate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); column-gap: 40px; }
.numerate li { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.numerate .n { flex: none; width: 44px; font: 500 26px/1 var(--f-mono); color: var(--cat); }
.numerate h3 { font: 700 18px/1.3 var(--f-titolo); }
.numerate .testo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* schede a riquadro (tecnologia) */
.riquadri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 20px 36px; }
.riquadro { display: flex; gap: 18px; min-width: 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.riquadro .media { flex: none; width: 168px; border-radius: 10px; border: 0; }
.riquadro .testo { min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.riquadro h3 { font: 700 18px/1.25 var(--f-titolo); }

/* geopolitica: apertura con riquadro sovrapposto */
.sovrap { flex: 999 1 620px; min-width: 0; position: relative; min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.sovrap .media { position: absolute; inset: 0; border: 0; border-radius: 0; aspect-ratio: auto; height: 100%; }
.sovrap .box { position: relative; margin: 20px; padding: 22px 24px; background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.sovrap h3 { font: 800 28px/1.12 var(--f-titolo); letter-spacing: -.02em; }
.sovrap .righe-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 12px var(--f-mono); color: var(--ink-2); }
.btn-cat { min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; border: 0; background: var(--cat); color: #fff; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
[data-theme="dark"] .btn-cat { color: var(--dark); }
.colonna-titoli { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.colonna-titoli article { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.colonna-titoli h3 { font: 700 20px/1.25 var(--f-titolo); }

/* canali podcast */
.canali-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 22px; }
.canale { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.copertina { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--cat-bg); border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; color: var(--cat); }
.copertina::after { content: ""; position: absolute; right: -54px; bottom: -54px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 21px, currentColor 22px 23px, transparent 24px 45px, color-mix(in srgb, currentColor 70%, transparent) 46px 47px, transparent 48px 69px, color-mix(in srgb, currentColor 45%, transparent) 70px 71px, transparent 72px 93px, color-mix(in srgb, currentColor 22%, transparent) 94px 95px, transparent 96px); }
.copertina .alto { position: relative; display: flex; justify-content: space-between; align-items: center; }
.copertina .alto b { font: 800 16px var(--f-titolo); letter-spacing: -.02em; color: var(--ink); }
.copertina .alto b i { font-style: normal; color: var(--cat); }
.copertina .parola { position: relative; font: 800 31px/.98 var(--f-titolo); letter-spacing: -.025em; white-space: pre-line; }
.copertina .tipo { position: relative; font: 11px var(--f-mono); letter-spacing: .16em; color: var(--ink-2); }
.canale h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.canale .ultimo { font-size: 14px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.canale .bottoni { display: flex; gap: 8px; margin-top: auto; }
.canale .bottoni .pill { flex: 1 1 auto; background: var(--surface); }

/* fascia video scura */
.fascia-video { margin-top: 56px; background: var(--dark); color: var(--dark-ink); }
.fascia-video .wrap { padding-top: 48px; padding-bottom: 56px; }
.fascia-video .testa-larga h2 { color: var(--dark-ink); }
.fascia-video .kick { color: var(--accent); }
.fascia-video .pill { border-color: var(--dark-line); color: var(--dark-ink); }
.fascia-video .pill:hover { background: var(--dark-2); border-color: #41546B; }
.griglia-video { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.vscheda { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vscheda .media { aspect-ratio: 16 / 9; border-radius: 14px; }
.fascia-video .vscheda .media { border-color: #1C2733; background-color: var(--cat-db); --cat: var(--cat-d); }
.tondo-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.vscheda .kick { font-size: 11px; letter-spacing: .1em; }
.fascia-video .vscheda .kick { color: var(--cat-d); }
.vscheda h3 { font: 700 19px/1.25 var(--f-titolo); }

/* sostegno + piede */
.sostegno { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sostegno p { font-size: 15px; color: var(--ink-2); max-width: 640px; }
.sostegno .bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet { width: 100%; display: grid; gap: 8px; font: 13px var(--f-mono); }
.wallet div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.wallet code { word-break: break-all; flex: 1 1 260px; }
.piede { margin-top: 48px; padding: 40px 0 32px; background: var(--surface); border-top: 1px solid var(--line); }
.piede .wrap.alto { display: flex; flex-wrap: wrap; gap: 28px 60px; }
.piede .marchio { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.piede .marchio b { font: 800 26px var(--f-titolo); letter-spacing: -.03em; }
.piede .marchio b i { font-style: normal; color: var(--accent); }
.piede .marchio p { font-size: 14px; color: var(--ink-2); max-width: 380px; }
.piede nav { flex: 2 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 24px; font-size: 14px; color: var(--ink-2); }
.piede nav a, .piede nav button { padding: 8px 0; text-align: left; background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.piede nav a:hover, .piede nav button:hover { color: var(--ink); text-decoration: underline; }
.piede .basso { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-3); font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* ---------- pagina articolo ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 28px; }
.colonna { display: none; }
.art-testa { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.briciole { display: flex; flex-wrap: wrap; gap: 6px; font: 12px var(--f-mono); color: var(--ink-3); }
.briciole a { color: var(--ink-2); }
.art-testa h1 { font: 800 clamp(30px, 4vw, 46px)/1.08 var(--f-titolo); letter-spacing: -.025em; }
.art-testa .sottotitolo { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.art-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 13px var(--f-mono); color: var(--ink-3); }
.art-info a { color: var(--ink-2); }
.box-ascolto { margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.box-ascolto .su { display: flex; align-items: center; gap: 16px; }
.box-ascolto .grande { flex: none; width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.box-ascolto .titoli { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.box-ascolto .titoli b { font-size: 16px; font-weight: 600; }
.box-ascolto .titoli span { font: 12px var(--f-mono); color: var(--ink-3); }
.box-ascolto .onda { flex: 0 1 260px; height: 36px; }
.box-ascolto .giu { display: flex; flex-wrap: wrap; gap: 8px; }
.copertina-art { margin-top: 26px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: var(--cat-bg); }
.copertina-art img { width: 100%; height: 100%; object-fit: cover; }
.in-breve { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--cat); border-radius: 12px; padding: 18px 22px; }
.in-breve h2 { font: 500 12px var(--f-mono); letter-spacing: .12em; color: var(--ink-3); margin-bottom: 10px; }
.in-breve ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.5; }
.prose { margin-top: 28px; font-size: 18px; line-height: 1.7; color: var(--ink); max-width: 720px; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 800 26px/1.2 var(--f-titolo); letter-spacing: -.015em; margin-top: 1.6em; }
.prose h3 { font: 700 21px/1.25 var(--f-titolo); margin-top: 1.4em; }
.prose h4 { font-size: 18px; margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.prose img { height: auto; border-radius: 10px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose code { font-family: var(--f-mono); font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.prose pre { overflow-x: auto; background: var(--surface-2); padding: 14px; border-radius: 10px; font-size: 14px; }
.prose .ad { margin-left: 0; margin-right: 0; }
.fonte { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); max-width: 720px; }
.fonte a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.box-canale { margin-top: 32px; background: var(--cat-bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.box-canale .t { display: flex; flex-direction: column; gap: 2px; }
.box-canale b { font-size: 17px; }
.box-canale span { font-size: 14px; color: var(--ink-2); }
.box-canale .pill { background: var(--surface); }
.correlati { margin-top: 40px; }
.correlati h2 { font: 800 24px var(--f-titolo); margin-bottom: 18px; }
.correlati .griglia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.box-lato { display: flex; flex-direction: column; gap: 28px; }
.box-lato h2 { font: 500 12px var(--f-mono); letter-spacing: .12em; color: var(--ink-3); margin-bottom: 4px; }
.box-lato .ultimi a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font: 600 15px/1.35 var(--f-titolo); }
.fisso { position: sticky; top: 96px; }
.colonna .ad { margin: 0; }

/* ---------- liste, podcast, video ---------- */
.testata-pagina { background: var(--cat-bg, var(--surface)); border-bottom: 1px solid var(--line); }
.testata-pagina .wrap { padding-top: 36px; padding-bottom: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; }
.testata-pagina .copertina { flex: none; width: 220px; padding: 20px; }
.testata-pagina .copertina .parola { font-size: 36px; }
.testata-pagina .copertina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testata-pagina .testi { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.testata-pagina h1 { font: 800 clamp(32px, 4vw, 44px)/1.05 var(--f-titolo); letter-spacing: -.025em; }
.testata-pagina p { font-size: 18px; color: var(--ink-2); max-width: 760px; }
.testata-pagina .bottoni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.testata-pagina .bottoni .pill { background: var(--surface); }
.lista-pagina { margin-top: 36px; }
.pager { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font: 14px var(--f-mono); }
.pager a, .pager span { min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-2); }
.pager a:hover { background: var(--surface-2); }
.pager [aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pager .vuoto { border-color: transparent; }
.episodi { display: flex; flex-direction: column; }
.ep { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ep .tondo { flex: none; width: 52px; height: 52px; border-radius: 999px; border: 0; background: var(--cat, var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
[data-theme="dark"] .ep .tondo { color: var(--dark); }
.ep .testo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ep h3 { font: 700 19px/1.3 var(--f-titolo); }
.ep p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ep .lk { font-size: 14px; font-weight: 600; align-self: flex-start; }
.ep.in-ascolto { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.ad-tra { margin: 28px 0; }
.lato-canali a { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 600; }

/* video */
.lettore-video { position: relative; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; }
.lettore-video.verticale { aspect-ratio: auto; max-width: 420px; margin: 0 auto; }
.lettore-video video { width: 100%; height: 100%; background: #000; }
.lettore-video.verticale video { aspect-ratio: 9 / 16; height: auto; max-height: 80vh; }
.scelta-video { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scelta-video .pill[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.video-testa { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.video-testa h1 { font: 800 clamp(26px, 3.2vw, 38px)/1.12 var(--f-titolo); letter-spacing: -.02em; }
.video-testa .riga-info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.video-testa .riga-info .bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.video-testa p { font-size: 17px; color: var(--ink-2); max-width: 760px; }
.dist-player { margin-top: 150px; }
.trascr { margin-top: 32px; }
.trascr h2 { font: 800 22px var(--f-titolo); }
.prossimo { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prossimo .media { flex: none; width: 140px; aspect-ratio: 16 / 9; border-radius: 8px; }
.prossimo .t { min-width: 0; display: flex; flex-direction: column; gap: 4px; font: 600 14px/1.35 var(--f-titolo); }
.prossimo .t .kick { font-size: 10px; }

/* pagine legali */
.statica { max-width: 820px; margin: 32px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 4vw, 48px); }
.statica h1 { font: 800 clamp(30px, 4vw, 42px)/1.1 var(--f-titolo); letter-spacing: -.02em; margin-bottom: 8px; }
.statica .article-content { margin-top: 20px; font-size: 17px; line-height: 1.7; }
.statica .article-content > * + * { margin-top: 1em; }
.statica h2 { font: 800 24px/1.2 var(--f-titolo); margin-top: 1.4em; }
.statica h3 { font: 700 19px/1.25 var(--f-titolo); margin-top: 1.2em; }
.statica a { color: var(--link); }
.statica ul { padding-left: 1.3em; }

/* ---------- lettore audio in basso ---------- */
.lettore { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -6px 20px rgba(14, 22, 33, .08); }
.lettore .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 10px; padding-bottom: 10px; }
.lettore .chi { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.lettore .quad { flex: none; width: 48px; height: 48px; border-radius: 8px; background: var(--cat-bg, var(--accent-soft)); color: var(--cat, var(--accent-ink)); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.lettore .nomi { min-width: 0; display: flex; flex-direction: column; }
.lettore .nomi span { font: 11px var(--f-mono); letter-spacing: .1em; color: var(--cat, var(--accent-ink)); }
.lettore .nomi a { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lettore .comandi { display: flex; align-items: center; gap: 4px; }
.lettore .comandi button { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lettore .comandi .pp { width: 48px; height: 48px; background: var(--accent); color: var(--on-accent); }
.lettore .barra { flex: 2 1 240px; min-width: 0; display: flex; align-items: center; gap: 12px; font: 12px var(--f-mono); color: var(--ink-3); }
.lettore input[type=range] { flex: 1 1 auto; accent-color: var(--accent); height: 24px; }
.lettore .vel { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 13px var(--f-mono); cursor: pointer; }
.lettore .chiudi { width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ---------- ricerca e menu telefono ---------- */
.velo { position: fixed; inset: 0; z-index: 60; background: rgba(14, 22, 33, .45); display: flex; justify-content: center; align-items: flex-start; padding: 72px 16px 16px; }
.finestra { width: min(720px, 100%); max-height: calc(100vh - 100px); overflow: auto; background: var(--surface); border-radius: 18px; box-shadow: var(--ombra); padding: 20px; }
.finestra .riga-cerca { display: flex; gap: 10px; align-items: center; }
.campo { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-3); color: var(--ink); font: 16px var(--f-testo); }
.campo::placeholder { color: var(--ink-3); }
.risultati { list-style: none; margin: 14px 0 0; padding: 0; }
.risultati li a { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.risultati li a:hover, .risultati li a:focus-visible { background: var(--surface-2); }
.risultati li b { font: 600 16px/1.3 var(--f-titolo); }
.risultati .kick { font-size: 11px; }
.aiuto { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
mark { background: var(--accent-soft); color: inherit; padding: 0 1px; border-radius: 2px; }
.menu-m { position: fixed; inset: 0; z-index: 70; background: var(--surface); overflow-y: auto; }
.menu-m .testa { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.menu-m .logo b { font-size: 26px; }
.menu-m .gruppo { display: block; padding: 16px 16px 4px; font: 11px var(--f-mono); letter-spacing: .12em; color: var(--ink-3); }
.menu-m nav a { min-height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.menu-m nav a .q { width: 10px; height: 10px; border-radius: 2px; background: var(--cat); }
.menu-m nav a .fr { margin-left: auto; color: var(--ink-4); }
.menu-m .flash { margin: 2px 16px 4px; min-height: 48px; padding: 0 12px; border-radius: 12px; background: var(--accent-soft); }
.menu-m .flash .ic { width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.menu-m .flash span { display: flex; flex-direction: column; font-size: 15px; }
.menu-m .canale-m { font-size: 15px; font-weight: 500; }
.menu-m .canale-m .ico-canale { width: 28px; height: 28px; border-radius: 6px; }
.menu-m .basso { margin-top: 8px; padding: 12px 16px 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lingue { display: flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.lingue a { min-height: 40px; padding: 0 16px; display: flex; align-items: center; font: 13px var(--f-mono); }
.lingue a[aria-current="true"] { background: var(--ink); color: var(--surface); }
.copia { font: 12px var(--f-mono); }

/* ---------- tema scuro: ritocchi ---------- */
[data-theme="dark"] .ticker, [data-theme="dark"] .fascia-video { background: #070B10; }
[data-theme="dark"] .btn-play .tondo { background: var(--bg); }
[data-theme="dark"] .pager [aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* =============================================================================
   computer (>= 1024)
   ============================================================================= */
@media (min-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
  .colonna { display: block; }
  .colonna .box-lato { height: 100%; }
  .layout.video { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* =============================================================================
   tablet e telefono (< 1024)
   ============================================================================= */
@media (max-width: 1023px) {
  .testata .wrap { gap: 10px 16px; padding-top: 10px; padding-bottom: 0; }
  .logo b { font-size: 26px; }
  .logo small { display: none; }
  .azioni { margin-left: auto; }
  .nav { order: 3; flex: 1 1 100%; margin: 0 calc(var(--gutter) * -1); padding: 0 calc(var(--gutter) - 8px); border-top: 1px solid var(--line-3); }
  .nav .nav-pod .i { display: none; }
  .pannello-pod { display: none !important; }
  .hero { gap: 24px; }
}

/* =============================================================================
   telefono (< 600)
   ============================================================================= */
@media (max-width: 599px) {
  body { font-size: 16px; }
  .solo-desk { display: none !important; }
  .solo-tel { display: block; }
  .solo-tel-flex { display: inline-flex !important; }
  .nascosto-tel { display: none !important; }
  .ticker .data { display: none; }
  .ticker .wrap { height: 36px; }
  .azioni .pill.mono, .azioni .btn-acc, .azioni .btn-tema { display: none; }
  .ad { margin-top: 40px; }
  .ad-leader ins.adsbygoogle, .ad-leader .ad-ph { min-height: 100px; }
  .hero { margin-top: 20px; }
  .hero .lead .media { margin: 0 calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; }
  .hero .lead .btn-play { left: 16px; bottom: 16px; min-height: 44px; font-size: 14px; }
  .hero .lead p { font-size: 16px; }
  .riga .media { width: 96px; height: 64px; }
  .riga h3 { font-size: 16px; }
  .brief { padding: 18px; gap: 14px 16px; margin-top: 40px; }
  .brief .grande { width: 56px; height: 56px; }
  .brief h2 { font-size: 21px; }
  .brief .onda { order: 3; flex-basis: 100%; height: 34px; }
  .sez { margin-top: 44px; }
  .sez-testa h2, .testa-larga h2 { font-size: 26px; }
  .sez-testa .azioni-sez .pill:not(:last-child) { display: none; }
  .grande h3 { font-size: 24px; }
  .grande p { font-size: 16px; }
  .griglia { grid-template-columns: 1fr; gap: 0; }
  .griglia .scheda { flex-direction: row; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .griglia .scheda .media { flex: none; width: 112px; height: 76px; aspect-ratio: auto; border-radius: 10px; }
  .griglia .scheda .media .play-mini { display: none; }
  .griglia .scheda h3 { margin: 0; font-size: 16px; }
  .griglia .scheda .sommario { display: none; }
  .griglia .scheda .corpo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .griglia .ad-infeed { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .numerate li { gap: 14px; padding: 16px 0; }
  .numerate .n { width: 34px; font-size: 20px; }
  .riquadro { padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; gap: 14px; }
  .riquadro .media { width: 112px; height: 76px; aspect-ratio: auto; }
  .riquadro h3 { font-size: 16px; }
  .sovrap { min-height: 0; border: 0; border-radius: 0; overflow: visible; }
  .sovrap .media { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--line); }
  .sovrap .box { margin: 12px 0 0; padding: 0; border: 0; background: transparent; }
  .sovrap h3 { font-size: 22px; }
  .canali-griglia { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .canali-griglia::-webkit-scrollbar { display: none; }
  .canale { flex: 0 0 168px; scroll-snap-align: start; }
  .copertina .parola { font-size: 24px; }
  .canale .ultimo, .canale .kick { display: none; }
  .canale .bottoni .pill.rss { display: none; }
  .fascia-video .wrap { padding-top: 36px; padding-bottom: 40px; }
  .griglia-video { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; gap: 14px; scrollbar-width: none; }
  .griglia-video::-webkit-scrollbar { display: none; }
  .griglia-video .vscheda { flex: 0 0 78%; scroll-snap-align: start; }
  .vscheda h3 { font-size: 16px; }
  .art-testa h1 { font-size: 29px; }
  .art-testa .sottotitolo { font-size: 17px; }
  .box-ascolto .onda { display: none; }
  .copertina-art { margin: 20px calc(var(--gutter) * -1) 0; border-radius: 0; border-left: 0; border-right: 0; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 22px; }
  .testata-pagina .wrap { padding-top: 24px; padding-bottom: 24px; gap: 18px; }
  .testata-pagina .copertina { width: 132px; padding: 12px; }
  .testata-pagina .copertina .parola { font-size: 22px; }
  .testata-pagina p { font-size: 16px; }
  .ep { gap: 14px; padding: 18px 0; }
  .ep .tondo { width: 44px; height: 44px; }
  .ep h3 { font-size: 17px; }
  .ep p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .lettore-video { margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .dist-player { margin-top: 120px; }
  .lettore .wrap { gap: 6px 10px; padding-top: 8px; padding-bottom: 8px; }
  .lettore .chi { flex: 1 1 0; }
  .lettore .quad, .lettore .vel, .lettore .salto { display: none !important; }
  .lettore .barra { order: 5; flex: 1 1 100%; }
  body.lettore-attivo { padding-bottom: 112px; }
  .piede .wrap.alto { gap: 20px; }
}

/* stampa */
@media print {
  .ticker, .testata, .ad, .rail, .lettore, .piede, .colonna, .box-ascolto, .correlati, .box-canale, .sostegno { display: none !important; }
  body { background: #fff; color: #000; }
}

/* icone che cambiano con lo stato */
:root:not([data-theme="dark"]) .ic-sole, [data-theme="dark"] .ic-luna { display: none !important; }
.lettore .ic-pausa { display: none; }
.lettore.suona .ic-play { display: none; }
.lettore.suona .ic-pausa { display: block; }
.media > .copri { display: block; width: 100%; height: 100%; }
.media .tondo-play { pointer-events: none; }
.griglia > .ad-banner, .riquadri > .ad-banner { grid-column: 1 / -1; margin: 8px auto; width: 100%; }
.griglia > .ad-infeed, .riquadri > .ad-infeed { align-self: start; }
.numerate > li:has(> .ad:only-child) { display: block; }
.numerate li:empty { display: none; }
.griglia-video.hub { display: grid; }
@media (max-width: 599px) {
  .griglia-video.hub { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; overflow: visible; }
  .griglia-video.hub .vscheda { flex: none; }
}

/* annunci dentro liste e griglie: occupano il posto di una scheda */
.lista > .ad, .colonna-titoli > .ad, .episodi .ad, .ad-tra .ad, .box-lato .ad, .numerate .ad, .prossimo + .ad, .box-lato section > .ad { margin: 20px 0 0; max-width: none; width: 100%; }
.griglia > .ad-scheda, .riquadri > .ad-riquadro, .griglia-video > .ad-scheda { grid-column: auto; margin: 0; max-width: none; width: 100%; }
.griglia > .ad-scheda .ad-ph, .riquadri > .ad-riquadro .ad-ph { min-height: 180px; height: 100%; }
.riquadri > .ad-riquadro { align-self: stretch; }
.numerate > li > .ad { margin: 0; }
.ad-tra { margin: 8px 0 20px; }
.ad-tra .ad { margin: 0; }
@media (max-width: 599px) {
  .canali-griglia, .griglia-video { scroll-padding: 0 var(--gutter); }
  .canale .bottoni .rss { display: none; }
}
.copertina.con-img { padding: 0; } .copertina.con-img::after { display: none; }
@media (min-width: 1024px) and (max-width: 1359px) {
  .logo small { display: none; }
  .testata .wrap { gap: 12px 14px; }
  .nav a, .nav button { padding: 0 8px; font-size: 14px; }
  .azioni .btn-acc { padding: 0 13px; }
  .azioni .btn-acc .txt { display: none; }
}
@media (min-width: 1024px) {
  .nav-autore { display: none !important; }
  .logo small { letter-spacing: .08em; }
  .nav a, .nav button { padding: 0 10px; }
  .testata .wrap { column-gap: 22px; }
}
@media (min-width: 1360px) { .logo small { font-size: 9px; letter-spacing: .05em; } }
@media (min-width: 1024px) { .nav a, .nav button { padding: 0 8px; } .nav { gap: 0; } }