/*
  Styles for interviews.html (Interviews & Media Appearances) only. The page
  carries body.home-page as well, so it shares the homepage's paper/ink/gold
  identity, topbar, buttons, and footer from home.css; everything added here
  is scoped to body.media-page.
*/

/* Current page in the nav */
.media-page .navlinks a[aria-current="page"]{color:var(--h-gold);box-shadow:inset 0 -2px 0 var(--h-gold2);padding-bottom:3px}

/* ---- Introduction -------------------------------------------------------- */
.media-page .m-hero{padding:76px 0 56px;background:radial-gradient(1000px 420px at 8% -10%,#f6e8cc,transparent 64%),var(--h-paper);border-bottom:1px solid var(--h-line)}
.media-page .m-hero h1{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.06;letter-spacing:-.01em;margin:16px 0 0;max-width:20ch}

/* ---- Featured appearance ------------------------------------------------- */
.media-page .m-featured{background:var(--h-paper2)}
.media-page .m-feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.media-page .m-feature-media{background:var(--h-card);border:1px solid var(--h-line);border-top:3px solid var(--h-gold);border-radius:6px;padding:24px;box-shadow:var(--h-soft)}
.media-page .m-feature-media .h-actions{margin-top:20px}
.media-page .m-source{margin:14px 0 0;font-size:.82rem;color:var(--h-ink3);line-height:1.5}
.media-page .m-feature-text .h-title{margin-top:12px}
.media-page .m-summary{max-width:64ch;color:var(--h-ink2);line-height:1.75;margin:22px 0 0;padding:16px 18px;background:var(--h-card);border-left:3px solid var(--h-gold2);border-radius:0 4px 4px 0}
.media-page .m-summary b{color:var(--h-ink)}

/* Official players */
.media-page .m-player{border-radius:4px;overflow:hidden;background:#f1ebdf}
.media-page .m-player iframe{display:block;width:100%;border:0}
.media-page .m-player--video{position:relative;aspect-ratio:16/9;background:#111}
.media-page .m-player--video iframe{position:absolute;inset:0;height:100%}
.media-page .m-thumb{display:block;width:100%;height:auto;border-radius:4px}

/* Meta line: program, host, episode, date, length */
.media-page .m-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:14px 0;border-top:1px solid var(--h-line);border-bottom:1px solid var(--h-line);color:var(--h-ink);font-size:.95rem}
.media-page .m-meta b{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h-gold);margin-bottom:2px}
.media-page .m-meta--small{font-size:.88rem;gap:6px 18px;padding:10px 0;margin-top:12px}

/* Subject tags */
.media-page .m-tags{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.media-page .m-tags li{font-size:.8rem;color:var(--h-teal);background:#eef4f2;border:1px solid #cfe0dc;border-radius:999px;padding:5px 12px}

/* ---- Library ------------------------------------------------------------- */
.media-page .m-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.media-page .m-filter[hidden]{display:none}
.media-page .m-filter-label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h-gold);font-weight:700;margin-right:6px}
.media-page .m-filter button{font:inherit;font-size:.86rem;color:var(--h-ink);background:var(--h-card);border:1px solid #d6c6aa;border-radius:999px;padding:7px 14px;cursor:pointer}
.media-page .m-filter button:hover{border-color:var(--h-gold)}
.media-page .m-filter button[aria-pressed="true"]{background:var(--h-ink);border-color:var(--h-ink);color:#fbf6ec}
.media-page .m-filter button:focus-visible{outline:3px solid var(--h-gold2);outline-offset:2px}
.media-page .m-count{margin:0 0 14px;min-height:1.2em;color:var(--h-ink3);font-size:.9rem}
.media-page .m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.media-page .m-card{display:flex;flex-direction:column;background:var(--h-card);border:1px solid var(--h-line);border-radius:6px;overflow:hidden;box-shadow:var(--h-soft)}
.media-page .m-card[hidden]{display:none}
.media-page .m-card>.m-player,.media-page .m-card>.m-thumb{border-radius:0}
.media-page .m-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.media-page .m-card h3{font-size:1.28rem;line-height:1.25;margin:10px 0 0;color:var(--h-ink)}
.media-page .m-card p{margin:12px 0 0;color:var(--h-ink2);line-height:1.65;font-size:.95rem}
.media-page .m-card .m-tags{margin-top:14px}
.media-page .m-card .h-link{margin-top:auto;padding-top:16px}
.media-page .m-badge{align-self:flex-start;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--h-gold);border:1px solid #e6d3ac;border-radius:3px;padding:3px 8px}
.media-page .m-empty{grid-column:1/-1;background:var(--h-card);border:1px dashed #d6c6aa;border-radius:6px;padding:26px 28px}
.media-page .m-empty p{margin:0;color:var(--h-ink2);line-height:1.7;max-width:70ch}
.media-page .m-empty b{color:var(--h-ink)}
.media-page .m-empty .h-link{display:inline-block}

/* ---- More from Judge Green ----------------------------------------------- */
.media-page .m-more{background:var(--h-card);border-top:1px solid var(--h-line)}
.media-page .m-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.media-page .m-more-card{display:block;background:var(--h-paper);border:1px solid var(--h-line);border-radius:6px;padding:22px;transition:border-color .15s ease}
.media-page .m-more-card:hover{border-color:var(--h-gold2)}
.media-page .m-more-card b{display:block;font:400 1.22rem/1.25 Georgia,serif;color:var(--h-ink)}
.media-page .m-more-card span{display:block;margin-top:8px;color:var(--h-ink3);line-height:1.55;font-size:.93rem}
.media-page .m-more-card--oath{background:var(--h-night);border-color:#2a2418}
.media-page .m-more-card--oath b{color:#f7f1e6;text-transform:uppercase;letter-spacing:.1em}
.media-page .m-more-card--oath span{color:#cfc5b4}
.media-page .m-more-card--oath:hover{border-color:var(--h-gold2)}

/* ---- Invitation ---------------------------------------------------------- */
.media-page .m-invite{padding:64px 0;background:var(--h-ink);color:#efe6d6}
.media-page .m-invite-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}
.media-page .m-invite h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:10px 0 0;color:#f7f1e6}
.media-page .m-invite p{margin:12px 0 0;max-width:62ch;color:#cfc5b4;line-height:1.7}
.media-page .m-invite .hbtn{flex:none}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:980px){
  .media-page .m-more-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .media-page .m-feature{grid-template-columns:1fr;gap:36px}
  .media-page .m-invite-inner{flex-direction:column;align-items:flex-start}
  .media-page .m-hero{padding:56px 0 44px}
}
@media(max-width:560px){
  .media-page .m-grid{grid-template-columns:1fr}
  .media-page .m-more-grid{grid-template-columns:1fr}
  .media-page .m-feature-media{padding:16px}
  .media-page .m-invite .hbtn{width:100%}
}