/* ==========================================================================
   SAE Salute — sezione Podcast (/podcast) e riquadri "Da ascoltare".
   Identità SAE (docs/analisi/design.md §2.16): Charis SIL, blu #145ead, navy #062f52 per le intestazioni scure e il lettore,
   colore della rubrica per canali e copertine, chip con raggio 2 e stato attivo navy pieno, focus giallo sui fondi
   scuri. Solo classi con prefisso pd- (il lettore ha il suo foglio: podcast-player.css). I nomi dei token dei
   componenti riusati (--brand, --ink, --surface…) sono mappati qui sui token SAE di sae.css.
   ========================================================================== */

:root {
  --brand: var(--sae-blue); --brand-strong: var(--sae-navy); --brand-soft: #e3eef9; --brand-ink-on: #fff;
  --ink: var(--sae-ink); --ink-2: var(--sae-text-soft); --ink-3: var(--sae-muted);
  --surface: #fff; --surface-2: var(--sae-pale); --line: var(--sae-line); --line-strong: #b8c6d2;
  --shadow-1: 0 1px 3px rgba(6, 47, 82, .1); --shadow-2: 0 8px 22px rgba(6, 47, 82, .16);
  --font-display: var(--sae-font); --font-text: var(--sae-font);
  --radius: 4px; --pill: 2px; --t-fast: .15s; --gutter: var(--sae-page-gutter); --focus: var(--sae-blue);
  /* intestazioni scure: navy SAE */
  --pd-hero-1: #0b416f; --pd-hero-2: #062f52; --pd-hero-3: #041f37;
  /* testi in evidenza sui fondi navy (occhielli, numeri): azzurro chiaro, contrasto ≥ 7:1 sul navy */
  --pd-accent: #9cc9f5;
  /* filetto decorativo delle copertine: il rosso dei titoli di colonna SAE */
  --pd-mark: var(--sae-red-bar);
  /* focus sui fondi scuri: giallo (11:1 sul navy) */
  --pd-focus-dark: #f2be3a;
  /* frase in ascolto e battuta corrente nella trascrizione */
  --pd-hl-bg: var(--sae-mark); --pd-hl-ink: var(--sae-navy); --pd-para-bg: var(--sae-pale);
  /* bordo dei campi: almeno 3:1 sul fondo */
  --pd-field-line: #7f8f9c;
  /* messaggio d'errore accanto a un comando */
  --pd-err-bg: #fdf3f4; --pd-err-ink: #8a0a1f;
}

/* "hidden" vince sempre sulle classi che impostano display */
.pd [hidden], .pd-box [hidden] { display: none !important; }

/* ---------- Base ---------- */
.pd { font-family: var(--font-display); font-size: 1rem; line-height: 1.5; padding-bottom: 24px; }
.pd h1, .pd h2, .pd h3, .pd h4, .pd-box h2, .pd-box h3 { font-family: var(--font-display); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .5em; }
.pd h2 { font-size: 1.4rem; }
.pd h3 { font-size: 1.1rem; }
:where(.pd, .pd-box) a { color: var(--brand); text-decoration: none; }
:where(.pd, .pd-box) a:hover { text-decoration: underline; text-underline-offset: .18em; }
.pd-muted { color: var(--ink-2); }
.pd-small { font-size: .875rem; }
.pd-spacer { flex: 1; }
.pd-flag { display: inline-block; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(1, 16, 30, .15); vertical-align: -2px; flex-shrink: 0; }
.pd-i-pause { display: none; }
[data-pd-state="playing"] .pd-i-pause { display: inline-block; }
[data-pd-state="playing"] .pd-i-play { display: none; }

/* ---------- Pulsanti, chip, badge, campi ---------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 2px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--sae-navy);
  font-family: var(--font-display); font-size: .95rem; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pd-btn:hover { border-color: var(--brand); text-decoration: none; }
.pd-btn .sae-icon { width: 16px; height: 16px; }
.pd-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink-on); }
.pd-btn-primary:hover { background: var(--sae-blue-dark); border-color: var(--sae-blue-dark); }
.pd .pd-btn-hero { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.pd .pd-btn-hero:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.pd-btn-live { background: var(--sae-red); border-color: var(--sae-red); color: #fff; }
.pd-btn-live:hover { background: #b3222f; border-color: #b3222f; }
.pd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; animation: pd-live 1.6s ease-in-out infinite; }
@keyframes pd-live { 50% { opacity: .3; } }

.pd-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border-radius: var(--pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font-family: var(--font-display); font-weight: 700; font-size: .875rem; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.pd-chip:hover { border-color: var(--brand); color: var(--sae-navy); }
.pd-chip[aria-pressed="true"] { background: var(--sae-navy); color: #fff; border-color: var(--sae-navy); }

.pd-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 2px; font-size: .8125rem; font-weight: 700;
  line-height: 1.5; white-space: nowrap; background: var(--surface-2); color: var(--ink-2);
}
.pd-badge-navy { background: var(--sae-navy); color: #fff; }
.pd-badge-info { background: var(--brand-soft); color: var(--sae-navy); }
.pd-badge-teal { background: #e2f3f1; color: var(--sae-green); }

.pd-input {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--pd-field-line); border-radius: 2px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem;
}
.pd-input::placeholder { color: var(--ink-3); opacity: 1; }
.pd-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.pd-input-lg { min-height: 48px; padding: 10px 14px; font-size: 1.0625rem; }

/* Pulsante tondo di ascolto */
.pd-fab {
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-ink-on);
  box-shadow: var(--shadow-2); transition: transform var(--t-fast), background var(--t-fast);
}
.pd-fab:hover { transform: scale(1.06); background: var(--sae-blue-dark); }
.pd-fab .sae-icon { width: 45%; height: 45%; vertical-align: 0; }
.pd-fab-lg { width: 60px; height: 60px; }
/* sulle intestazioni scure il pulsante è bianco con l'icona navy: resta ben visibile sul fondo */
.pd-hero .pd-fab, .pd-sbanner .pd-fab { background: #fff; color: var(--sae-navy); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), var(--shadow-2); }
.pd-hero .pd-fab:hover, .pd-sbanner .pd-fab:hover { background: #fff; }

/* Focus sulle parti scure: anello giallo */
.pd-hero :focus-visible, .pd-sbanner :focus-visible, .pd-scard :focus-visible, .pd-chcard-top :focus-visible { outline-color: var(--pd-focus-dark); }

/* ---------- Copertina quadrata (port di CoverArt.vue): immagine, oppure sfumatura del colore della rubrica ---------- */
.pd-cover {
  position: relative; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; color: #fff; box-shadow: 0 4px 14px rgba(6, 47, 82, .18);
  background: radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 42%), linear-gradient(140deg, var(--c, var(--sae-blue)) 0%, color-mix(in srgb, var(--c, var(--sae-blue)) 45%, var(--sae-navy)) 62%, var(--sae-navy) 100%);
}
.pd-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-cover > img + .pd-cover-overlay { background: linear-gradient(180deg, rgba(4, 31, 55, .2) 0%, rgba(4, 31, 55, .62) 32%, rgba(4, 31, 55, .9) 100%); }
.pd-cover-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12% 10% 10%; }
/* mezzaluna SAE in alto a sinistra al posto del filetto */
.pd-cover-overlay::before { content: ""; position: absolute; left: 10%; top: 10%; width: 9%; height: 12%; border-radius: 999px 0 0 999px; background: var(--pd-mark); }
.pd-cover-section { font-size: .72rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; opacity: .95; }
.pd-cover-title { font-weight: 700; line-height: 1.15; font-size: 1rem; overflow-wrap: anywhere; }
.pd-cover-title-sm { font-size: .9rem; }
.pd-cover-title-xs { font-size: .8rem; }
.pd-cover-md .pd-cover-title { min-height: calc(5 * 1.15 * 1rem); }
.pd-cover-logo { position: absolute; top: 10%; right: 9%; width: 46%; display: flex; justify-content: flex-end; opacity: .96; }
.pd-cover-logo img { width: 100%; height: auto; }
.pd-cover-sm .pd-cover-title, .pd-cover-sm .pd-cover-section, .pd-cover-sm .pd-cover-overlay::before { display: none; }
.pd-cover-sm .pd-cover-logo { width: 74%; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); justify-content: center; }
.pd-cover-lg .pd-cover-title { font-size: 1.4rem; }
/* card piccole (pd_cover bare): sulle foto niente sopra l'immagine; sulle copertine generate niente mezzaluna e, nella
   misura md, niente logo (restano etichetta e titolo in basso). Se l'immagine non si carica, onerror la toglie. */
.pd-cover-bare .pd-cover-overlay::before, .pd-cover-bare.pd-cover-md .pd-cover-logo { display: none; }
.pd-cover-bare > img + .pd-cover-overlay { display: none; }
.pd-cover-lg .pd-cover-title-sm { font-size: 1.2rem; }
.pd-cover-lg .pd-cover-title-xs { font-size: 1.05rem; }
.pd-cover-lg .pd-cover-section { font-size: .82rem; }
@media (max-width: 760px) {
  .pd-cover-lg .pd-cover-title { font-size: 1.05rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .pd-cover-lg .pd-cover-title-sm { font-size: .95rem; }
  .pd-cover-lg .pd-cover-title-xs { font-size: .85rem; }
  .pd-cover-lg .pd-cover-section { font-size: .7rem; }
  .pd-cover-play-space .pd-cover-overlay { padding-bottom: 50px; gap: 4px; }
  .pd-cover-play-space .pd-cover-section { font-size: .62rem; }
  .pd-cover-play-space .pd-cover-title { font-size: .82rem; }
  .pd-cover-play-space .pd-cover-title-sm { font-size: .74rem; }
  .pd-cover-play-space .pd-cover-title-xs { font-size: .68rem; }
  .pd-cover-md.pd-cover-play-space .pd-cover-title { min-height: calc(4 * 1.15 * .82rem); }
}

/* ---------- Testata della sezione (home e Tutti gli episodi) e briciole delle altre pagine ---------- */
.pd-top { padding-bottom: 4px; }
.pd-top .sae-breadcrumb { margin-bottom: 12px; }
.pd-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; padding: 4px 0 28px; border-bottom: 1px solid var(--sae-line); }
.pd-intro-text { max-width: 760px; }
.pd .pd-intro h1 { font-size: 2.75rem; line-height: 1.12; letter-spacing: -.02em; color: var(--sae-ink); margin: 6px 0 12px; }
.pd-intro .pd-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: var(--sae-red); }
.pd-intro .pd-kicker .sae-icon { width: 18px; height: 18px; }
.pd-lead { font-size: 1.25rem; line-height: 1.5; color: var(--sae-deck); }
.pd-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.pd-intro-actions .pd-i { width: 14px; height: 14px; }
.pd-section-link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 0 0 14px; }
.pd-section-name { display: inline-flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 700; color: var(--sae-blue); }
.pd-section-name .sae-crescent { width: 14px; height: 18px; }
.pd .pd-section-name a { color: inherit; }
.pd-section-all { font-size: .95rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.pd-section-all .sae-icon { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .pd-intro { grid-template-columns: minmax(0, 1fr); }
  .pd .pd-intro h1 { font-size: 2rem; }
  .pd-lead { font-size: 1.0625rem; }
}

/* Diretta: titolo in onda in un riquadro a destra della testata (sotto il testo su schermi stretti) */
.pd-onair { position: relative; justify-self: end; width: 100%; max-width: 380px; }
.pd-onair-box { display: grid; gap: 10px; padding: 18px 20px; border-radius: 2px; background: var(--sae-pale); border-top: 3px solid var(--sae-red-bar); font-family: var(--font-display); }
.pd-onair-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-onair-channel { color: var(--ink-3); font-size: .8125rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
.pd-onair-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 2px; background: var(--sae-red); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .06em; }
.pd-onair-tag .pd-live-dot { width: 7px; height: 7px; }
.pd-onair-title { margin: 0; color: var(--sae-navy); font-weight: 700; font-size: 1.25rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .pd-onair { justify-self: stretch; max-width: none; } }

/* ---------- Intestazione scura di canale, serie ed episodio (port di .pv-hero) ---------- */
.pd-hero {
  color: #fff;
  background:
    radial-gradient(75% 150% at 8% 0%, color-mix(in srgb, var(--c, var(--sae-blue)) 42%, transparent) 0%, transparent 72%),
    linear-gradient(165deg, var(--pd-hero-1) 0%, var(--pd-hero-2) 55%, var(--pd-hero-3) 100%);
  border-bottom: 4px solid var(--c, var(--sae-blue));
}
.pd .pd-hero h1 { color: #fff; text-wrap: balance; margin-bottom: 12px; }
.pd .pd-hero a { color: #fff; }
.pd-eyebrow { margin: 0 0 6px; color: var(--pd-accent); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; }
.pd .pd-hero .pd-eyebrow a { color: var(--pd-accent); }
.pd .pd-eyebrow-link { text-decoration: underline; text-underline-offset: .2em; }
.pd-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.pd-block { margin-top: 44px; }
.pd-block-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.pd .pd-block-head h2 { margin: 0; }
.pd .pd-show-all { margin-left: auto; font-weight: 700; font-size: .95rem; }

/* scaffale semplice (altri episodi del canale): scorre dentro il proprio contenitore, mai la pagina */
.pd-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 210px); gap: 20px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x mandatory; }
.pd-shelf > * { scroll-snap-align: start; }

/* ---------- Card dell'episodio (port di PodcastCard.vue) ---------- */
.pd-card { min-width: 0; padding: 10px; border-radius: 4px; background: var(--surface); transition: box-shadow .15s; }
.pd-card:hover, .pd-card:focus-within { box-shadow: var(--shadow-2); }
.pd-card.is-current .pd-card-title a { color: var(--brand); }
.pd-card-media { position: relative; }
.pd-card-link { display: block; }
.pd-card-play { position: absolute; right: 10px; bottom: 10px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.pd-card:hover .pd-card-play, .pd-card-play:focus-visible, .pd-card-play[data-pd-state="playing"] { opacity: 1; transform: none; }
@media (hover: none) { .pd-card-play { opacity: 1; transform: none; } }
.pd .pd-card-title, .pd-box .pd-card-title { font-size: 1.125rem; line-height: 1.3; margin: 12px 0 6px; min-height: calc(3 * 1.3em); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pd .pd-card-title a, .pd-box .pd-card-title a { color: var(--ink); }
.pd-card-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--ink-3); }
.pd-card-meta .pd-badge { margin-right: 4px; }
.pd-card-langs { font-weight: 700; }
.pd-card-when { margin-left: auto; text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .pd-card-meta { flex-wrap: nowrap; gap: 4px; }
  .pd-card-meta .pd-badge { margin-right: 0; flex-shrink: 0; }
  .pd-card-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pd-card-home .pd-card-play { width: 40px; height: 40px; left: 50%; right: auto; bottom: 8px; transform: translateX(-50%); opacity: 1; }
  .pd-card-home .pd-card-play:hover { transform: translateX(-50%) scale(1.06); }
}

/* ---------- Home: intestazioni, card larghe, scaffali scorrevoli (comportamento: podcast-shelves.js) ---------- */
.pd[data-pd-page="home"] .pd-latest, .pd[data-pd-page="home"] .pd-rail-block, .pd[data-pd-page="home"] .pd-channels, .pd[data-pd-page="home"] .pd-topics { margin-top: 48px; }
.pd[data-pd-page="home"] .pd-latest { margin-top: 32px; }
.pd-rail-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 18px; }
.pd-rail-titles { min-width: 0; max-width: 760px; }
.pd .pd-rail-titles :is(h2, h3) { margin: 0; font-size: 1.6rem; color: var(--sae-navy); display: flex; align-items: center; gap: 8px; }
.pd .pd-rail-titles h2::before { content: ""; width: 14px; height: 20px; border-radius: 10px 0 0 10px; background: var(--sae-blue); flex: none; }
.pd-rail-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ink-3); font-size: .8125rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
.pd-rail-kicker .sae-icon { width: 16px; height: 16px; vertical-align: 0; }
.pd-rail-sub { margin: 6px 0 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.45; }
.pd-rail-meta { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--ink-2); font-size: .875rem; font-weight: 700; }
.pd-rail-meta .sae-icon { width: 15px; height: 15px; vertical-align: 0; }
.pd-topic .pd-rail-meta { color: var(--c-ink, var(--c, var(--ink-2))); }
.pd-rail-tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.pd .pd-rail-more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; font-size: .95rem; color: var(--brand); white-space: nowrap; }
.pd-rail-more .sae-icon { width: 16px; height: 16px; vertical-align: 0; transition: transform var(--t-fast); }
.pd .pd-rail-more:hover .sae-icon { transform: translateX(3px); }
.pd-rail-nav { display: flex; gap: 8px; }
.pd-rail-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--sae-blue);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.pd-rail-btn .sae-icon { width: 20px; height: 20px; vertical-align: 0; }
.pd-rail-btn:not([aria-disabled="true"]):hover { border-color: var(--brand); background: var(--surface-2); }
.pd-rail-btn[aria-disabled="true"] { opacity: .38; cursor: default; }
@media (hover: none), (pointer: coarse), (max-width: 639px) { .pd .pd-rail-nav { display: none !important; } }

.pd-rail {
  --rail-gap: 20px; --bleed: 10px;
  position: relative; display: grid; grid-auto-flow: column; gap: var(--rail-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed);
  margin: -10px calc(-1 * var(--bleed)) -6px; padding: 10px var(--bleed) 24px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.pd-rail > * { scroll-snap-align: start; }
.pd-rail-eps { grid-auto-columns: clamp(200px, 72%, 240px); }
.pd-rail-series { --rail-gap: 24px; grid-auto-columns: calc((100% - 2 * var(--rail-gap)) / 3); }
@media (max-width: 1023px) { .pd-rail-series { grid-auto-columns: calc((100% - var(--rail-gap)) / 2.15); } }
@media (max-width: 639px) {
  .pd-rail { --bleed: var(--gutter); --rail-gap: 14px; }
  .pd-rail-series { grid-auto-columns: 86%; }
  .pd .pd-rail-titles :is(h2, h3) { font-size: 1.35rem; }
  .pd-rail-sub { font-size: .95rem; }
  .pd-rail-head { margin-bottom: 14px; }
  .pd-rail-tools { margin-left: 0; }
}

/* Ultimi episodi: 4 card larghe, 2 per riga sotto i 1024 px, riga scorrevole sul telefono */
.pd-ecards { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1023px) { .pd-ecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .pd-ecards {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin: -10px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) 18px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  .pd-ecards > * { scroll-snap-align: start; }
}

/* Copertina larga 16:9 (decorativa): colore della rubrica con le mezzelune SAE, poi la foto se c'è */
.pd-wart {
  position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, var(--c, var(--sae-blue)) 0%, color-mix(in srgb, var(--c, var(--sae-blue)) 40%, var(--sae-navy)) 58%, var(--sae-navy) 100%);
}
/* due mezzelune sovrapposte (il segno dei titoli di sezione SAE), grandi e trasparenti */
.pd-wart-deco { position: absolute; right: 7%; bottom: -18%; width: 34%; height: 78%; z-index: 0; pointer-events: none; }
.pd-wart-deco::before, .pd-wart-deco::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46%; border-radius: 999px 0 0 999px; background: rgba(255, 255, 255, .13); }
.pd-wart-deco::before { left: 0; }
.pd-wart-deco::after { left: 52%; background: rgba(255, 255, 255, .2); }
.pd-wart-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.pd-wart-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 31, 55, .28) 0%, rgba(4, 31, 55, 0) 30%, rgba(4, 31, 55, .25) 55%, rgba(4, 31, 55, .86) 100%);
}
.pd-wart-label {
  position: absolute; left: 6%; right: calc(12px + 44px + 12px); bottom: 9%; z-index: 2; font-size: .75rem; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(1, 16, 30, .55);
}
.pd-wart-label::before { content: ""; display: block; width: 12px; height: 16px; margin-bottom: 8px; border-radius: 999px 0 0 999px; background: var(--pd-mark); }
.pd .pd-wart-logo { z-index: 2; top: 10%; right: 5%; width: 30%; filter: drop-shadow(0 1px 2px rgba(1, 16, 30, .45)); }
.pd-wart-stacked .pd-wart-label { top: 9%; bottom: auto; right: 40%; }
.pd-wart-stack { position: absolute; left: 7%; bottom: 12%; z-index: 1; height: 54%; display: flex; align-items: flex-end; }
.pd-wart-stack img { height: 100%; width: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 20px rgba(1, 16, 30, .45); background: var(--sae-navy); }
.pd-wart-stack img + img { margin-left: -9%; }
.pd-wart-stack img:nth-child(1) { transform: rotate(-5deg); position: relative; z-index: 3; }
.pd-wart-stack img:nth-child(2) { transform: translateY(-6%) rotate(1deg); position: relative; z-index: 2; }
.pd-wart-stack img:nth-child(3) { transform: translateY(-10%) rotate(6deg); position: relative; z-index: 1; }

/* Card larga dell'episodio */
.pd-ecard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); transition: box-shadow var(--t-fast), transform var(--t-fast); }
.pd-ecard:hover, .pd-ecard:focus-within { box-shadow: var(--shadow-2); }
.pd-ecard:hover { transform: translateY(-2px); }
.pd-ecard-media { position: relative; }
.pd-ecard-art { display: block; }
.pd-ecard .pd-wart { border-radius: 3px 3px 0 0; }
.pd .pd-ecard-play { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; background: #fff; color: var(--sae-navy); box-shadow: 0 0 0 2px rgba(255, 255, 255, .4), var(--shadow-2); }
.pd .pd-ecard-play:hover { background: #fff; }
.pd-ecard-play:focus-visible { outline-color: var(--pd-focus-dark); }
.pd-ecard-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.pd-ecard-eyebrow { margin: 0; color: var(--c-ink, var(--c, var(--brand))); font-size: .8125rem; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pd .pd-ecard-title { margin: 2px 0 0; font-size: 1.2rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd .pd-ecard-title a { color: var(--ink); }
.pd .pd-ecard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 4px; }
.pd .pd-ecard-title a:hover { text-decoration: underline; text-underline-offset: .18em; }
.pd .pd-ecard.is-current .pd-ecard-title a { color: var(--brand); }
.pd-ecard-desc { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-ecard-meta { margin: auto 0 0; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: .875rem; color: var(--ink-3); }
.pd-ecard-meta > * + *::before { content: "·"; margin: 0 7px; content: "·" / ""; }
.pd-ecard-meta > span:first-child { font-weight: 700; color: var(--ink-2); }

/* Card della serie: scura come l'intestazione */
.pd-scard {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 4px; overflow: hidden; color: #fff;
  background:
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--c, var(--sae-blue)) 36%, transparent) 0%, transparent 72%),
    linear-gradient(160deg, var(--pd-hero-1) 0%, var(--pd-hero-2) 60%, var(--pd-hero-3) 100%);
  box-shadow: 0 4px 12px rgba(4, 31, 55, .16);
}
.pd-scard-art { display: block; }
.pd-scard-art .pd-wart { border-bottom: 3px solid var(--c, var(--sae-blue)); }
.pd-scard-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 20px 20px; }
.pd-scard-eyebrow { margin: 0; color: var(--pd-accent); font-size: .8125rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }
.pd .pd-scard-title { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.pd .pd-scard-title a { color: #fff; }
.pd-scard-meta { margin: 0; color: #c9dcee; font-size: .875rem; font-weight: 700; }
.pd-scard-desc { margin: 4px 0 0; color: #dce7f2; font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-scard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: auto; padding-top: 14px; }
.pd .pd-scard-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: #fff; font-weight: 700; font-size: .95rem; }
.pd-scard-link .sae-icon { width: 16px; height: 16px; vertical-align: 0; transition: transform var(--t-fast); }
.pd .pd-scard-link:hover .sae-icon { transform: translateX(3px); }
.pd .pd-btn-accent { background: #fff; border-color: #fff; color: var(--sae-navy); min-height: 44px; padding: 0 18px; }
.pd .pd-btn-accent:hover { background: #e3eef9; border-color: #e3eef9; }
.pd-btn-accent .pd-i { width: 14px; height: 14px; }
.pd-when-playing { display: none; }
[data-pd-state="playing"] .pd-when-paused { display: none; }
[data-pd-state="playing"] .pd-when-playing { display: inline; }

/* ---------- I canali (home): una card per rubrica, fascia navy con il colore della rubrica ---------- */
.pd-chcards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.pd-chcard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 4px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: box-shadow var(--t-fast); }
.pd-chcard:hover, .pd-chcard:focus-within { box-shadow: var(--shadow-2); }
.pd-chcard-top {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px 18px; padding: 20px; color: #fff;
  background:
    radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--c, var(--sae-blue)) 34%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, var(--pd-hero-1) 0%, var(--pd-hero-2) 60%, var(--pd-hero-3) 100%);
  border-bottom: 4px solid var(--c, var(--sae-blue));
}
/* la descrizione occupa tutta la larghezza della fascia, sotto copertina e nome: così entra in 3 righe (la console
   avvisa oltre i 110 caratteri); l'altezza di 3 righe è fissa, perché le card di una riga restino allineate */
.pd-chcard-cover { grid-column: 1; grid-row: 1; align-self: center; }
.pd-chcard-head { grid-column: 2; grid-row: 1; min-width: 0; align-self: center; }
.pd .pd-chcard-title { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.2; }
.pd .pd-chcard-title a { color: #fff; }
.pd .pd-chcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pd .pd-chcard-title a:hover { text-decoration: underline; text-underline-offset: .18em; }
.pd-chcard-stats { display: flex; flex-wrap: wrap; align-items: center; margin: 0; color: #c9dcee; font-size: .875rem; font-weight: 700; line-height: 1.4; }
.pd-chcard-stats .sae-icon { width: 15px; height: 15px; margin-right: 7px; vertical-align: 0; color: var(--pd-accent); }
.pd-chcard-stats > span + span::before { content: "·"; content: "·" / ""; margin: 0 7px; }
.pd-chcard-desc { grid-column: 1 / -1; grid-row: 2; min-height: 4.5em; margin: 0; color: #dce7f2; font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-chcard-body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 16px 20px 18px; }
.pd-chcard-row { min-width: 0; }
.pd-chcard-label { margin: 0 0 8px; color: var(--ink-3); font-size: .8125rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
.pd-chcard-series { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chcard-series li { min-width: 0; max-width: 100%; }
.pd .pd-chcard-series .pd-chip { max-width: 100%; color: var(--ink-2); text-decoration: none; }
.pd .pd-chcard-series .pd-chip:hover { color: var(--sae-navy); }
.pd-chcard-series .pd-chip span:not(.sr-only) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-chcard-series .pd-chip .sae-icon { width: 14px; height: 14px; vertical-align: 0; color: var(--ink-3); }
.pd-chcard-ep { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.pd-chcard-thumb { display: block; }
.pd-chcard-thumb .pd-cover { box-shadow: 0 0 0 1px var(--line); }
.pd-chcard-ep-text { min-width: 0; }
.pd .pd-chcard-ep-title { color: var(--ink); font-weight: 700; font-size: 1.05rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd .pd-chcard-latest.is-current .pd-chcard-ep-title { color: var(--brand); }
.pd-chcard-ep-meta { margin: 2px 0 0; color: var(--ink-3); font-size: .875rem; }
.pd .pd-chcard-play { width: 44px; height: 44px; }
.pd-chcard-latest .pd-start-error { margin-top: 10px; }
.pd .pd-chcard-more { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin-top: auto; color: var(--brand); font-weight: 700; font-size: 1rem; }
.pd-chcard-more .sae-icon { width: 16px; height: 16px; vertical-align: 0; transition: transform var(--t-fast); }
.pd .pd-chcard-more:hover .sae-icon { transform: translateX(3px); }
/* canale in preparazione (rubrica senza episodi): solo testo, il link porta alle notizie della rubrica */
.pd-chcard--attesa .pd-chcard-top { grid-template-rows: auto; }
.pd-chcard-wait { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.pd-chcard-wait .sae-icon { width: 16px; height: 16px; color: var(--c-ink, var(--c, var(--brand))); flex: none; }
@media (max-width: 639px) {
  .pd-chcard-top { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: none; padding: 16px; gap: 0 14px; }
  .pd-chcard-head { display: contents; }
  .pd-chcard-cover { grid-row: 1; align-self: center; }
  .pd .pd-chcard-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 1.3rem; }
  .pd-chcard-stats { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; }
  .pd-chcard-desc { grid-column: 1 / -1; grid-row: 3; min-height: 0; margin-top: 8px; }
  .pd-chcard-body { padding: 14px 16px 16px; }
  .pd-chcard-ep { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
}

/* Scaffali per rubrica: fondo chiaro nel colore della rubrica */
.pd-topic { position: relative; isolation: isolate; padding: 28px 28px 10px; border-radius: 4px; background: color-mix(in srgb, var(--c, var(--sae-blue)) 8%, #fff); border-top: 4px solid var(--c, var(--sae-blue)); overflow: hidden; }
.pd[data-pd-page="home"] .pd-topics > .pd-rail-block { margin-top: 0; }
.pd[data-pd-page="home"] .pd-topics > .pd-rail-block + .pd-rail-block { margin-top: 20px; }
.pd .pd-topic .pd-rail-titles :is(h2, h3) { font-size: 1.4rem; color: var(--sae-ink); }
@media (min-width: 1024px) {
  .pd-topic { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; padding: 28px 28px 20px; }
  .pd-topic .pd-rail-head { grid-column: 1; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; margin: 0; }
  .pd .pd-topic .pd-rail-titles :is(h2, h3) { line-height: 1.15; text-wrap: balance; }
  .pd-topic .pd-rail-tools { flex-direction: column; align-items: flex-start; gap: 12px; margin: auto 0 0; padding-top: 16px; }
  .pd-topic .pd-rail { grid-column: 2; align-self: center; padding-bottom: 12px; }
}
.pd-topic .pd-rail-kicker { color: var(--c-ink, var(--c, var(--ink-3))); }
.pd .pd-topic .pd-rail-more { color: var(--sae-navy); }
@media (max-width: 639px) {
  .pd-topic { margin-inline: calc(-1 * var(--gutter)); padding: 24px var(--gutter) 6px; border-radius: 0; }
  .pd .pd-topic .pd-rail-titles :is(h2, h3) { font-size: 1.2rem; }
}

/* ---------- Riga dell'episodio (port di EpisodeRow.vue) ---------- */
.pd-rows { list-style: none; margin: 0; padding: 0; }
.pd-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--sae-line-module); }
.pd-row-cover { display: block; }
.pd .pd-row-title { font-size: 1.25rem; margin: 0 0 6px; }
.pd-row-title .pd-badge { margin-right: 8px; vertical-align: 2px; }
.pd .pd-row-title a { color: var(--ink); }
.pd .pd-row.is-current .pd-row-title a { color: var(--brand); }
.pd-row-desc { margin: 0 0 10px; color: var(--ink-2); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .875rem; color: var(--ink-3); }
.pd-row-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.pd-row-meta .sae-icon { width: 14px; height: 14px; vertical-align: 0; }
.pd .pd-row-play { width: 40px; height: 40px; box-shadow: none; }
@media (max-width: 640px) { .pd-row { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px 0; } .pd .pd-row-title { font-size: 1.1rem; } }

/* ---------- Banner della serie (pagina del canale) ---------- */
.pd-sbanner {
  display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 4px; color: #fff;
  background:
    radial-gradient(60% 160% at 0% 50%, color-mix(in srgb, var(--c, var(--sae-blue)) 42%, transparent) 0%, transparent 75%),
    linear-gradient(120deg, var(--pd-hero-1) 0%, var(--pd-hero-2) 70%, var(--pd-hero-3) 100%);
  border-left: 4px solid var(--c, var(--sae-blue));
}
.pd-sbanner + .pd-sbanner { margin-top: 14px; }
.pd-sbanner-cover { display: block; width: 112px; flex-shrink: 0; }
.pd-sbanner-text { flex: 1; min-width: 0; }
.pd-sbanner-eyebrow { margin: 0 0 4px; color: var(--pd-accent); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; }
.pd .pd-sbanner-title { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.25; }
.pd .pd-sbanner-title a { color: #fff; }
.pd-sbanner-desc { margin: 0; color: #dce7f2; font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-sbanner-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
@media (max-width: 700px) {
  .pd-sbanner { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .pd-sbanner-cover { width: 80px; }
  .pd-sbanner-actions { width: 100%; }
}

/* ---------- Intestazioni di canale, serie ed episodio ---------- */
.pd-show-inner, .pd-ep-inner { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: end; padding-block: 40px 36px; }
.pd-show-cover, .pd-ep-cover { min-width: 0; }
.pd[data-pd-page="channel"] .pd-hero h1 { font-size: 2.75rem; }
.pd[data-pd-page="series"] .pd-hero h1 { font-size: 2.5rem; }
.pd .pd-ep-text h1 { font-size: 2.25rem; }
.pd-desc { color: #dce7f2; font-size: 1.125rem; max-width: 760px; }
.pd-meta { color: #c9dcee; font-size: .95rem; }
.pd .pd-meta-link { font-weight: 700; }
.pd-langs { display: flex; flex-wrap: wrap; gap: 12px; color: #dce7f2; font-size: .95rem; }
.pd-lang { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pd-play-hint { color: #c9dcee; font-size: .95rem; }
.pd-ep-meta { color: #dce7f2; margin-bottom: 6px; }
.pd .pd-ep-section { font-weight: 700; }
.pd-ep-voices { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #c9dcee; font-size: .95rem; }
.pd-ep-voices .sae-icon { width: 15px; height: 15px; vertical-align: 0; }
@media (max-width: 760px) {
  .pd-show-inner, .pd-ep-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .pd-show-cover, .pd-ep-cover { width: 180px; }
  .pd[data-pd-page="channel"] .pd-hero h1 { font-size: 2rem; }
  .pd[data-pd-page="series"] .pd-hero h1 { font-size: 1.8rem; }
  .pd .pd-ep-text h1 { font-size: 1.65rem; }
}

/* ---------- Canale: serie, strumenti, elenco ---------- */
.pd-series-block { padding-top: 32px; }
.pd .pd-series-block h2 { margin: 0 0 12px; }
.pd-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 28px 0 8px; }
.pd .pd-tools h2 { margin: 0; }
.pd-search-form { display: flex; align-items: center; gap: 12px; }
.pd-search-form .pd-input { width: 260px; }
.pd-sort { display: flex; align-items: center; gap: 10px; }
.pd-count { margin: 0 0 8px; font-size: .95rem; }
.pd-count:empty { display: none; }
.pd-more { display: flex; justify-content: center; padding: 24px 0; }
.pd-empty { text-align: center; padding: 48px 16px; color: var(--ink-3); }
.pd-empty p { margin: 0; }
.pd-empty-icon { display: block; width: 40px; height: 40px; margin: 0 auto 12px; }
.pd .pd-list-title { margin: 32px 0 8px; }
@media (max-width: 760px) {
  .pd-search-form { flex: 1 1 100%; }
  .pd-search-form .pd-input { width: 100%; flex: 1; }
}

/* Sezione senza episodi pubblicati: messaggio e canali delle rubriche in preparazione */
.pd-soon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; margin-top: 28px; padding: 24px; background: var(--sae-pale); border-top: 3px solid var(--sae-blue); }
.pd-soon-icon { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--sae-blue); }
.pd-soon-icon .sae-icon { width: 26px; height: 26px; }
.pd .pd-soon h2 { margin: 0; font-size: 1.5rem; color: var(--sae-navy); }
.pd-soon p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--sae-text-soft); max-width: 760px; }
.pd-soon p + p { margin-top: 8px; }
@media (max-width: 640px) { .pd-soon { grid-template-columns: minmax(0, 1fr); padding: 20px; } .pd-soon-icon { grid-row: auto; width: 44px; height: 44px; } }

/* ---------- Episodio: azioni, informazioni, fonti ---------- */
.pd-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 24px 0; }
.pd-langs-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pd-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .875rem; color: var(--ink-2); }
.pd-label .sae-icon { width: 16px; height: 16px; vertical-align: 0; }
.pd-lang-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-ep-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.pd-ep-nav .pd-btn { max-width: 100%; white-space: normal; text-align: left; padding-block: 8px; }
.pd-ep-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.pd-about-desc { font-size: 1.1875rem; line-height: 1.6; margin: 0 0 16px; }
.pd-facts { margin: 0; display: grid; gap: 10px; }
.pd-facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pd-facts dt { font-weight: 700; color: var(--sae-navy); }
.pd-facts dd { margin: 0; }
.pd-src-intro { margin: 0 0 16px; color: var(--ink-2); font-size: 1rem; max-width: 760px; }
.pd-src-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.pd-src-group { padding-top: 10px; border-top: 3px solid var(--sae-navy); }
.pd-src-group--sae { border-top-color: var(--sae-red-bar); }
.pd-src-group--gruppo { border-top-color: var(--sae-blue); }
.pd-src-group--istituzionali { border-top-color: var(--sae-green); }
.pd .pd-src-group h3 { font-size: 1.05rem; color: var(--sae-navy); margin-bottom: 8px; }
.pd-src-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pd-src-group li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; line-height: 1.35; }
.pd-src-group a { font-weight: 700; }
.pd-src-group a .sae-icon { width: 14px; height: 14px; vertical-align: -1px; }
.pd-src-host { font-size: .8125rem; color: var(--ink-3); }
.pd-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.pd-related-grid .sae-list > li:first-child { padding-top: 16px; }
@media (max-width: 900px) { .pd-ep-body { grid-template-columns: 1fr; } .pd-related-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pd-facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Trascrizione (port di TranscriptPanel.vue; comportamento in podcast.js) ---------- */
.pd-tr { min-width: 0; padding: 20px; border: 1px solid var(--line); border-top: 3px solid var(--sae-blue); border-radius: 2px; background: var(--surface); }
.pd-tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pd .pd-tr-h { margin: 0; font-size: 1.3rem; color: var(--sae-navy); }
.pd-tr-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pd-tr-toggle .sae-icon { vertical-align: 0; }
.pd-tr-chevron { width: 18px; height: 18px; transition: transform var(--t-fast); }
.pd-tr-toggle[aria-expanded="true"] .pd-tr-chevron { transform: rotate(180deg); }
.pd-tr.is-collapsed .pd-tr-head { margin-bottom: 0; }
.pd-tr.is-collapsed .pd-tr-langs { display: none; }
.pd-tr-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-tr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.pd-tr-hint { font-size: .875rem; color: var(--ink-3); }
.pd-tr-list { max-height: 440px; overflow: auto; padding-top: 8px; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.pd-tr-paras { display: flex; flex-direction: column; gap: 14px; padding: 4px 6px 8px; }
.pd-para { padding: 6px 10px; border-left: 3px solid transparent; }
.pd-para.is-current { border-left-color: var(--sae-blue); background: var(--pd-para-bg); }
.pd-para-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.pd-tr-time { min-height: 24px; padding: 0 2px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.pd-tr-time:hover { color: var(--brand); text-decoration: underline; }
.pd-para-speaker { color: var(--sae-navy); font-size: 1rem; }
.pd-para-text { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.pd-seg { cursor: pointer; border-radius: 2px; padding: 1px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pd-seg:hover { background: var(--surface-2); }
.pd-seg.is-active { background: var(--pd-hl-bg); color: var(--pd-hl-ink); font-weight: 700; }
.pd-seg:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (forced-colors: active) {
  .pd-seg.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pd-para.is-current { border-left-color: Highlight; }
}
.pd-tr-full { font-size: 1.0625rem; line-height: 1.7; padding-right: 8px; }
.pd-tr-full p { margin: 0 0 1em; }

/* ---------- Tutti gli episodi ---------- */
.pd-search-row { display: flex; gap: 12px; margin-bottom: 16px; }
.pd-search-row .pd-input { flex: 1; }
.pd-search-row .pd-btn { min-height: 48px; }
.pd-filters { display: grid; gap: 10px; margin-bottom: 20px; }
.pd-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pd-filter-row .pd-label { min-width: 72px; }
.pd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 20px; }
@media (max-width: 640px) { .pd-search-row { flex-direction: column; } }

/* ---------- Riquadro "Da ascoltare" (articoli, schede, percorsi, home): episodi collegati con il play ---------- */
.pd-box { margin: 36px 0 0; font-family: var(--font-display); }
.pd-box-list { list-style: none; margin: 0; padding: 0; }
.pd-box-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--sae-line-module); }
.pd-box-item:first-child { padding-top: 4px; }
.pd-box-cover { display: block; }
.pd-box-text { min-width: 0; }
.pd-box-kicker { margin: 0 0 2px; font-size: .875rem; font-weight: 700; color: var(--c-ink, var(--c, var(--sae-red))); }
.pd-box .pd-box-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.pd-box .pd-box-title a { color: var(--ink); }
.pd-box-item.is-current .pd-box-title a { color: var(--brand); }
.pd-box-meta { margin: 4px 0 0; font-size: .875rem; color: var(--ink-3); }
.pd-box .pd-fab { width: 44px; height: 44px; box-shadow: none; }
.pd-box-more { margin-top: 12px; font-size: .95rem; font-weight: 700; }
.pd-box .pd-start-error { grid-column: 1 / -1; }
/* home: scaffale a scorrimento (carosello del sito, static/js/sae.js) con 4 card, 3 nella colonna larga */
.sae-carousel--pd .sae-carousel-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
.sae-carousel--pd-main .sae-carousel-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
.sae-carousel--pd .pd-card { scroll-snap-align: start; border: 1px solid var(--sae-line); }
@media (max-width: 880px) { .sae-carousel--pd .sae-carousel-track, .sae-carousel--pd-main .sae-carousel-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 480px) { .sae-carousel--pd .sae-carousel-track, .sae-carousel--pd-main .sae-carousel-track { grid-auto-columns: 72%; } }
@media (max-width: 640px) { .pd-box-item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; } .pd-box .pd-box-title { font-size: 1.05rem; } }

/* ---------- Senza JavaScript: niente comandi che non farebbero nulla (resta il link all'audio nel <noscript>) ---------- */
html:not(.js) .pd [data-pd-play], html:not(.js) .pd [data-pd-play-series], html:not(.js) .pd .pd-langs-pick,
html:not(.js) .pd .pd-tr-langs, html:not(.js) .pd .pd-tr-tools, html:not(.js) .pd-box [data-pd-play] { display: none !important; }
.pd-audio-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Avvio non riuscito (indice o diretta non raggiungibili): messaggio accanto al comando premuto */
.pd-start-error { flex: 1 1 100%; margin: 0; padding: 8px 12px; border-left: 4px solid var(--sae-red); background: var(--pd-err-bg); color: var(--pd-err-ink); font-size: .95rem; font-weight: 700; }
.pd-hero .pd-start-error, .pd-sbanner .pd-start-error, .pd-scard .pd-start-error { background: rgba(213, 43, 58, .25); color: #fff; border-left-color: #ff8a9b; }

@media print {
  .pd-fab, .pd-hero-actions, .pd-intro-actions, .pd-onair, .pd-actions, .pd-tools, .pd-more, .pd-search-row, .pd-filters, .pd-tr-langs, .pd-tr-tools, .pd-rail-nav { display: none !important; }
  .pd-hero, .pd-sbanner, .pd-scard, .pd-topic, .pd-chcard-top { background: none !important; color: #000 !important; border: 0; }
  .pd .pd-hero h1, .pd .pd-hero a, .pd-desc, .pd-meta, .pd-ep-meta, .pd-ep-voices, .pd-sbanner-desc, .pd .pd-sbanner-title a, .pd .pd-chcard-title a, .pd-chcard-stats, .pd-chcard-desc { color: #000 !important; }
  .pd-rail, .pd-ecards { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .pd-tr-list { max-height: none; overflow: visible; }
}
.pd-box--home { margin: 4px 0 0; }

/* ---------- Card del canale nella colonna delle rubriche (pd_rubcard), in testa a "Ultime notizie" ---------- */
.pd-rubcard { position: relative; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface); font-family: var(--font-display); transition: box-shadow var(--t-fast); }
.pd-rubcard:hover, .pd-rubcard:focus-within { box-shadow: var(--shadow-2); }
.pd-rubcard [hidden] { display: none !important; }
.pd-rubcard a { text-decoration: none; }
.pd-rubcard-top {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; color: #fff;
  background:
    radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--c, var(--sae-blue)) 38%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, var(--pd-hero-1) 0%, var(--pd-hero-2) 60%, var(--pd-hero-3) 100%);
  border-bottom: 4px solid var(--c, var(--sae-blue));
}
.pd-rubcard-top :focus-visible { outline-color: var(--pd-focus-dark); }
.pd-rubcard-cover .pd-cover { width: 72px; }
.pd-rubcard-head { min-width: 0; }
.pd-rubcard-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: var(--pd-accent); font-size: .75rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
.pd-rubcard-eyebrow .sae-icon { width: 14px; height: 14px; vertical-align: 0; }
.pd-rubcard .pd-rubcard-title { margin: 0 0 4px; font-size: 1.3rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.pd-rubcard .pd-rubcard-title a { color: #fff; }
.pd-rubcard .pd-rubcard-title a:hover { text-decoration: underline; text-underline-offset: .18em; }
.pd-rubcard-stats { display: flex; flex-wrap: wrap; margin: 0; color: #c9dcee; font-size: .8125rem; font-weight: 700; line-height: 1.4; }
.pd-rubcard-stats > span + span::before { content: "·"; content: "·" / ""; margin: 0 6px; }
.pd-rubcard-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 12px; }
.pd-rubcard-label { margin: 0 0 6px; color: var(--ink-3); font-size: .75rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
.pd-rubcard-ep-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pd-rubcard-ep-text { min-width: 0; }
.pd-rubcard .pd-rubcard-ep-title { color: var(--ink); font-weight: 700; font-size: 1.02rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-rubcard .pd-rubcard-ep-title:hover { color: var(--brand); }
.pd-rubcard-ep.is-current .pd-rubcard-ep-title { color: var(--brand); }
.pd-rubcard-num { color: var(--c-ink, var(--c, var(--brand))); white-space: nowrap; }
.pd-rubcard-ep-meta { margin: 3px 0 0; color: var(--ink-3); font-size: .8125rem; }
.pd-rubcard .pd-rubcard-play { width: 44px; height: 44px; box-shadow: none; }
.pd-rubcard .pd-start-error { margin-top: 8px; }
.pd-rubcard-series { display: flex; gap: 6px; align-items: baseline; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .875rem; line-height: 1.4; }
.pd-rubcard-series .sae-icon { width: 14px; height: 14px; flex: none; color: var(--ink-3); transform: translateY(2px); }
.pd-rubcard-series a { color: var(--ink); font-weight: 700; }
.pd-rubcard-series a:hover { color: var(--brand); text-decoration: underline; }
.pd-rubcard .pd-rubcard-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; color: var(--brand); font-weight: 700; font-size: .95rem; }
.pd-rubcard-more .sae-icon { width: 15px; height: 15px; vertical-align: 0; transition: transform var(--t-fast); }
.pd-rubcard .pd-rubcard-more:hover .sae-icon { transform: translateX(3px); }