/* =========================================================================
   GenXTalks Media Hub — components only.

   The theme owns the palette, the type scale and the card. This file styles
   the pieces only the plugin knows about: archive headers, filter pills, the
   single-item layout, the platform link row, the follow row and sharing.

   Every colour here comes from a theme token with a light-theme fallback, so
   the plugin still looks deliberate if it is ever run under another theme.
   ====================================================================== */

:root{
  --gxt-ease:cubic-bezier(.2,.7,.3,1);
}

/* Local aliases. If the theme defines the token we use it; otherwise these
   fall back to a sensible light default. */
.gxt-page,.gxt-hero,.gxt-filters,.gxt-single__grid,.gxt-platforms,.gxt-share{
  --c-ink:var(--g-ink,#141a2e);
  --c-mute:var(--g-mute,#4a5169);
  --c-dim:var(--g-dim,#8b92ab);
  --c-line:var(--g-line,#e4e7f2);
  --c-line-2:var(--g-line-2,#cfd4e6);
  --c-surface:var(--g-panel,#fff);
  --c-surface-2:var(--g-bg-2,#f6f7fc);
  --c-red:var(--g-red,#f00000);
  --c-radius:var(--g-r,14px);
}

.gxt-wrap{width:min(var(--g-max,1320px),calc(100% - 44px));margin-inline:auto}
.gxt-page{background:transparent}

/* ---------- archive header ---------- */
.gxt-hero{
  position:relative;overflow:hidden;padding:clamp(40px,5vw,72px) 0 clamp(26px,3vw,40px);
  background:
    radial-gradient(72% 130% at 4% -10%,rgba(61,107,255,.18) 0%,transparent 58%),
    radial-gradient(64% 110% at 100% 0%,rgba(255,43,28,.20) 0%,transparent 55%),
    var(--g-bg-2,#080c2e);
  border-bottom:1px solid var(--c-line);
}
.gxt-hero__inner{width:min(var(--g-max,1320px),calc(100% - 44px));margin-inline:auto;position:relative;z-index:1}
.gxt-kicker{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-red);margin-bottom:12px}
.gxt-hero .gxt-hero__title,.gxt-hero h1{margin:0 0 14px}
.gxt-hero__sub{font-size:clamp(16px,1.5vw,19px);color:var(--c-mute);max-width:64ch;margin:0;line-height:1.6}
.gxt-hero__count{margin:14px 0 0;font-size:13px;color:var(--c-dim);letter-spacing:.04em}

/* ---------- filter pills ---------- */
.gxt-filters{
  position:sticky;top:var(--g-head-h,0px);z-index:20;
  background:color-mix(in srgb,var(--g-bg,#fff) 82%,transparent);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--c-line)}
.gxt-filters__inner{width:min(var(--g-max,1320px),calc(100% - 44px));margin-inline:auto;
  display:flex;gap:8px;padding:14px 0;overflow-x:auto;scrollbar-width:none}
.gxt-filters__inner::-webkit-scrollbar{display:none}
.gxt-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);text-decoration:none;
  font-size:14px;font-weight:600;transition:.18s var(--gxt-ease)}
.gxt-pill span{font-size:11px;color:var(--c-dim);background:var(--c-surface-2);padding:2px 7px;border-radius:999px}
.gxt-pill:hover{border-color:var(--c-line-2);color:var(--c-ink);transform:translateY(-1px)}
.gxt-pill.is-active{background:var(--c-red);border-color:var(--c-red);color:#fff}
.gxt-pill.is-active span{background:rgba(255,255,255,.2);color:#fff}

/* ---------- grid ---------- */
.gxt-grid{display:grid;gap:20px;padding:36px 0;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}

/* Show accents. The theme styles the chip itself; this only tints it. */
.gxt-chip[data-show="off-the-record"]     {--chip:#ff2b1c}
.gxt-chip[data-show="the-world-show"]     {--chip:#3d6bff}
.gxt-chip[data-show="the-garage-show"]    {--chip:#ffb020}
.gxt-chip[data-show="bottom-of-the-glass"]{--chip:#b45cff}
.gxt-chip[data-show="interviews"]         {--chip:#00c2a8}
.gxt-chip[data-show="community"]          {--chip:#ff6b9d}
.gxt-chip[data-show="shorts"]             {--chip:#4ade80}
.gxt-chip[data-show="the-podcast"]        {--chip:#1db954}
.gxt-chip[data-show]{
  color:var(--chip);
  background:color-mix(in srgb,var(--chip) 14%,transparent);
  border-color:color-mix(in srgb,var(--chip) 34%,transparent)}

/* ---------- shows index ---------- */
.gxt-shows{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));padding:8px 0}
.gxt-show{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:7px;padding:24px;
  border-radius:var(--c-radius);text-decoration:none;background:var(--c-surface);
  border:1px solid var(--c-line);transition:.24s var(--gxt-ease)}
.gxt-show::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sh,#3d6bff)}
.gxt-show[data-show="off-the-record"]     {--sh:#ff2b1c}
.gxt-show[data-show="the-garage-show"]    {--sh:#ffb020}
.gxt-show[data-show="bottom-of-the-glass"]{--sh:#b45cff}
.gxt-show[data-show="interviews"]         {--sh:#00c2a8}
.gxt-show[data-show="community"]          {--sh:#ff6b9d}
.gxt-show[data-show="shorts"]             {--sh:#4ade80}
.gxt-show[data-show="the-podcast"]        {--sh:#1db954}
.gxt-show:hover{transform:translateY(-4px);border-color:var(--c-line-2)}
.gxt-show__name{font-weight:700;font-size:19px;color:var(--c-ink)}
.gxt-show__desc{font-size:14px;color:var(--c-mute);line-height:1.5}
.gxt-show__count{margin-top:auto;font-size:12px;color:var(--c-dim);letter-spacing:.04em}

/* ---------- schedule ---------- */
.gxt-schedule{display:grid;gap:10px}
.gxt-slot{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;
  padding:15px 18px;border-radius:12px;background:var(--c-surface);
  border:1px solid var(--c-line);text-decoration:none;color:inherit;transition:.2s var(--gxt-ease)}
a.gxt-slot:hover{border-color:var(--c-line-2);transform:translateX(4px)}
.gxt-slot__day{font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--c-red)}
.gxt-slot__main{display:flex;flex-direction:column;gap:2px}
.gxt-slot__main strong{font-size:16px}
.gxt-slot__main em{font-style:normal;font-size:13px;opacity:.68}
.gxt-slot__time{font-weight:700;font-size:14px;opacity:.9}

/* ---------- section head ---------- */
.gxt-section{padding:8px 0}
.gxt-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:10px;border-bottom:1px solid var(--c-line);margin-bottom:18px}
.gxt-section__head h2{margin:0;font-size:clamp(22px,3vw,32px)}
.gxt-more{font-weight:700;font-size:14px;color:var(--c-mute);text-decoration:none;white-space:nowrap}
.gxt-more:hover{color:var(--c-red)}

/* ---------- single ---------- */
.gxt-crumbs{border-bottom:1px solid var(--c-line);font-size:12.5px;padding:14px 0;color:var(--c-dim)}
.gxt-crumbs a{color:var(--c-mute);text-decoration:none}
.gxt-crumbs a:hover{color:var(--c-ink)}
.gxt-crumbs span{margin:0 6px;opacity:.5}
.gxt-single__grid{display:grid;gap:48px;grid-template-columns:minmax(0,1fr) 340px;padding:36px 0 64px}
@media(max-width:1000px){.gxt-single__grid{grid-template-columns:1fr;gap:34px}}
.gxt-player{position:relative;aspect-ratio:16/9;border-radius:var(--g-r-lg,20px);overflow:hidden;
  background:#0b0d14;border:1px solid var(--c-line);cursor:pointer}
.gxt-player img,.gxt-player iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.gxt-player__btn{position:absolute;inset:0;margin:auto;width:82px;height:82px;border-radius:50%;border:0;
  background:var(--c-red);color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 14px 42px -8px var(--c-red);transition:.24s var(--gxt-ease)}
.gxt-player__btn svg{width:34px;height:34px;margin-left:3px}
.gxt-player:hover .gxt-player__btn{transform:scale(1.08)}
.gxt-single__art{width:100%;max-width:520px;border-radius:var(--g-r-lg,20px);border:1px solid var(--c-line)}
.gxt-single__title{font-size:clamp(30px,4.2vw,54px);line-height:1;margin:20px 0 12px}
.gxt-single__meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px;color:var(--c-dim);margin-bottom:24px}
.gxt-audio{width:100%;margin:8px 0 26px}
.gxt-prose{font-size:17px;line-height:1.75;color:var(--c-mute);max-width:68ch}
.gxt-prose p{margin:0 0 1.1em}
.gxt-single__cta{margin-top:30px}
.gxt-btn{display:inline-flex;align-items:center;gap:9px;background:var(--c-red);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:15px 28px;border-radius:999px;
  transition:.22s var(--gxt-ease)}
.gxt-btn:hover{transform:translateY(-2px);color:#fff;filter:brightness(1.08)}
.gxt-btn--ghost{background:transparent;border:1px solid var(--c-line-2);color:var(--c-ink)}
.gxt-btn--ghost:hover{color:var(--c-ink);filter:none;background:color-mix(in srgb,var(--c-ink) 8%,transparent)}
.gxt-side__title{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--c-dim);
  padding-bottom:12px;border-bottom:1px solid var(--c-line);margin:0 0 18px}
.gxt-side__list{display:grid;gap:16px}
.gxt-side__list .gxt-card__desc{display:none}

/* ---------- pagination + empty ---------- */
.gxt-pagination{padding:16px 0 64px}
.gxt-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gxt-pagination .page-numbers{min-width:44px;height:44px;display:grid;place-items:center;padding:0 14px;
  border-radius:11px;border:1px solid var(--c-line);background:var(--c-surface);
  text-decoration:none;color:var(--c-mute);font-weight:650}
.gxt-pagination .page-numbers.current{background:var(--c-red);border-color:var(--c-red);color:#fff}
.gxt-pagination .page-numbers:hover:not(.current){border-color:var(--c-line-2);color:var(--c-ink)}
.gxt-empty{text-align:center;padding:90px 20px;color:var(--c-mute)}
.gxt-empty h2{margin:0 0 8px}

/* ---------- platform links ----------
   Every service this recording exists on, so a visitor can finish it wherever
   they already have an account. ---------------------------------------- */
.gxt-platforms{margin:30px 0 8px;padding:22px;border:1px solid var(--c-line);
  border-radius:var(--c-radius);background:var(--c-surface-2)}
.gxt-platforms__label{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-dim);margin-bottom:14px}
.gxt-platforms__row{display:flex;flex-wrap:wrap;gap:10px}
.gxt-plat-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:11px;
  background:var(--c-surface);border:1px solid var(--c-line);text-decoration:none;color:var(--c-ink);
  font-size:14px;font-weight:650;transition:.2s var(--gxt-ease)}
.gxt-plat-btn:hover{border-color:var(--plat);transform:translateY(-2px);color:var(--c-ink)}
.gxt-plat-btn__dot{width:10px;height:10px;border-radius:50%;background:var(--plat);flex:0 0 auto}
.gxt-plat-btn__verb{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-dim)}
.gxt-card__plats{margin-left:auto;display:inline-flex;gap:4px;align-items:center}
.gxt-card__plats i{width:8px;height:8px;border-radius:50%;display:block}
@media(max-width:600px){.gxt-plat-btn{flex:1 1 100%;justify-content:flex-start}}

/* ---------- follow row ---------- */
.gxt-follow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gxt-follow__i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--g-ink,#141a2e) 6%,transparent);
  border:1px solid var(--g-line,#e4e7f2);color:var(--g-mute,#4a5169);
  transition:.2s var(--gxt-ease)}
.gxt-follow__i svg{width:20px;height:20px}
.gxt-follow__i:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-3px)}
.gxt-follow--stack{flex-direction:column;align-items:stretch}

/* ---------- share ----------
   Plain links plus the browser's own Web Share API. No network SDKs, so
   nothing here can track a visitor who never clicks. --------------------- */
.gxt-share{margin:30px 0;padding:18px 20px;border:1px solid var(--c-line);
  border-radius:var(--c-radius);background:var(--c-surface-2)}
.gxt-share__label{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-dim);margin-bottom:12px}
.gxt-share__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gxt-share__i,.gxt-share__copy,.gxt-share__native{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:10px;
  border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);text-decoration:none;
  font:650 13.5px/1 inherit;cursor:pointer;transition:.18s var(--gxt-ease)}
.gxt-share__i svg,.gxt-share__native svg{width:17px;height:17px}
.gxt-share__i:hover,.gxt-share__copy:hover,.gxt-share__native:hover{
  transform:translateY(-2px);border-color:var(--c-line-2);color:var(--c-ink)}
.gxt-share__i--facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.gxt-share__i--x:hover{background:#000;border-color:#000;color:#fff}
.gxt-share__i--reddit:hover{background:#ff4500;border-color:#ff4500;color:#fff}
.gxt-share__i--whatsapp:hover{background:#25d366;border-color:#25d366;color:#fff}
.gxt-share__native{background:var(--c-red);border-color:var(--c-red);color:#fff}
.gxt-share__native:hover{color:#fff}
.gxt-share__copy.is-done{background:#0f6b4c;border-color:#0f6b4c;color:#fff}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* =========================================================================
   Discord card

   Data is fetched server-side and cached, so nothing here costs the visitor a
   third-party request. Discord's own blurple is used for the mark and button
   because it is the one place on this site where borrowing a platform's colour
   helps recognition more than the house palette does.
   ====================================================================== */
.gxt-dc{
  --dc:#5865f2;
  position:relative;overflow:hidden;display:grid;gap:22px;align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:26px 28px;border-radius:var(--g-r-lg,20px);
  border:1px solid color-mix(in srgb,var(--dc) 34%,transparent);
  background:
    radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--dc) 22%,transparent) 0%,transparent 62%),
    var(--g-panel,#fff);
}
.gxt-dc__mark{
  width:58px;height:58px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:var(--dc);color:#fff}
.gxt-dc__mark svg{width:30px;height:30px}
.gxt-dc__body{min-width:0}
.gxt-dc__eyebrow{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dc)}
.gxt-dc__title{margin:0 0 8px;font-size:clamp(22px,2.4vw,30px)}
.gxt-dc__text{margin:0;color:var(--g-mute,#4a5169);font-size:15px;line-height:1.6;max-width:60ch}
.gxt-dc__live{display:flex;align-items:center;gap:9px;margin:14px 0 0;font-size:14px;
  color:var(--g-mute,#4a5169)}
.gxt-dc__live strong{color:var(--g-ink,#141a2e);font-size:17px}
.gxt-dc__dot{width:9px;height:9px;border-radius:50%;background:#3ba55d;flex:none;
  box-shadow:0 0 0 0 rgba(59,165,93,.75);animation:gxtdc 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes gxtdc{70%{box-shadow:0 0 0 10px rgba(59,165,93,0)}100%{box-shadow:0 0 0 0 rgba(59,165,93,0)}}

.gxt-dc__voice{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gxt-dc__voice li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--dc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--dc) 28%,transparent);
  font-size:13px;font-weight:600;color:var(--g-ink,#141a2e)}
.gxt-dc__voice svg{width:14px;height:14px;color:var(--dc);flex:none}
.gxt-dc__voice b{font-weight:800;color:var(--dc)}
.gxt-dc__cta{flex:none}

.btn--discord{background:var(--dc);color:#fff;border-color:var(--dc);
  box-shadow:0 8px 26px -10px var(--dc)}
.btn--discord:hover{background:#4752c4;border-color:#4752c4;color:#fff;transform:translateY(-2px)}
.btn--discord svg{width:19px;height:19px}

/* Compact: one line, for a sidebar or a footer column. */
.gxt-dc--compact{padding:16px 18px;gap:14px}
.gxt-dc--compact .gxt-dc__mark{width:42px;height:42px;border-radius:12px}
.gxt-dc--compact .gxt-dc__mark svg{width:22px;height:22px}
.gxt-dc--compact .gxt-dc__title{font-size:17px;font-family:var(--g-sans,inherit);
  text-transform:none;font-weight:700;margin:0}
.gxt-dc--compact .gxt-dc__live{margin:4px 0 0;font-size:13px}
.gxt-dc--compact .gxt-dc__live strong{font-size:14px}

@media (max-width:820px){
  .gxt-dc{grid-template-columns:auto minmax(0,1fr);row-gap:18px}
  .gxt-dc__cta{grid-column:1 / -1}
  .gxt-dc__cta .btn{width:100%;justify-content:center}
}
.gxt-dc__total{color:var(--g-dim,#8b92ab)}