/* ============================================================================
   VIDEOS & SHORTS - /resources/videos/
   Linked only from that page. Builds on main.css tokens and the .ep-* tab
   patterns already defined in landing.css, so the tab row, listen chips and
   section headings match the podcast page exactly.
   All text is navy (--ink) or a navy tint - never black.
   ========================================================================== */

/* ---- EMBEDS --------------------------------------------------------------
   The hero plays the channel's real uploads playlist (UU… - the uploads
   playlist that mirrors every video), so it never needs updating when Safie
   posts. Shorts are shot 9:16, so their player gets its own ratio rather than
   being letterboxed inside a 16:9 box. */
.vid-embed{aspect-ratio:16/9;background:var(--navy-deep)}
.vid-embed--vertical{aspect-ratio:9/16;max-width:320px;width:100%;margin-inline:auto}
.vid-embed-note{
  text-align:center;margin-top:.9rem;color:var(--ink-faint);
}

/* ---- FEATURED SHORT ------------------------------------------------------- */
.vid-feature{
  display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.5rem,3.4vw,2.6rem);box-shadow:var(--shadow-md);
}
@media(min-width:820px){.vid-feature{grid-template-columns:300px 1fr}}
.vid-feature h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:.6rem 0 .8rem;max-width:20ch}
.vid-feature p{color:var(--ink-soft)}
.vid-feature .vid-feature-sub{
  font-size:var(--fs-small);margin-top:.9rem;
  padding-top:.9rem;border-top:1px solid var(--line);
}
.vid-feature .listen-row{margin-top:1.4rem}

/* ---- SHARED CARD PLAY BADGE ---------------------------------------------- */
.sh-play{
  position:absolute;inset:0;margin:auto;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(25,36,81,.62);color:#fff;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:transform .35s var(--ease-spring),background-color var(--t-fast);
}
.sh-play svg{width:17px;height:17px;margin-left:2px}

/* ---- SHORTS GRID ---------------------------------------------------------
   Vertical cards, because the source material is vertical. The thumbnail YouTube
   serves is 16:9 with the 9:16 frame pillarboxed in the middle, so `object-fit:
   cover` on a 9:16 box crops the black bars off and leaves the actual frame. */
.sh-grid{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
@media(min-width:640px){.sh-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}}
.sh{
  display:flex;flex-direction:column;gap:.7rem;
  border-radius:var(--r-md);
  transition:transform var(--t-fast);
}
.sh-thumb{
  position:relative;display:block;
  aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;
  background:var(--navy-deep);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t-fast),border-color var(--t-fast);
}
.sh-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.sh-tag{
  position:absolute;top:.5rem;left:.5rem;
  font-size:.6875rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(25,36,81,.72);
  padding:.2rem .5rem;border-radius:var(--r-pill);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.sh-title{
  font-size:var(--fs-small);font-weight:600;line-height:1.4;color:var(--ink);
  transition:color var(--t-fast);
}
.sh:hover{transform:translateY(-4px)}
.sh:hover .sh-thumb{box-shadow:var(--shadow-md);border-color:rgba(96,36,149,.28)}
.sh:hover .sh-thumb img{transform:scale(1.05)}
.sh:hover .sh-play{transform:scale(1.12);background:var(--purple)}
.sh:hover .sh-title{color:var(--purple)}

/* ---- FULL-LENGTH GRID ----------------------------------------------------- */
.vg-grid{
  display:grid;gap:1.3rem;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
}
.vg{
  display:flex;flex-direction:column;gap:.75rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:.75rem .75rem 1.1rem;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.vg-thumb{
  position:relative;display:block;
  aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;
  background:var(--navy-deep);
}
.vg-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vg-title{
  font-family:var(--font-display);font-size:1.02rem;font-weight:600;
  line-height:1.35;color:var(--ink);padding-inline:.35rem;
  transition:color var(--t-fast);
}
.vg-go{
  margin-top:auto;padding-inline:.35rem;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-tiny);font-weight:650;color:var(--purple);
}
.vg-go svg{width:12px;height:12px;transition:transform .35s var(--ease-spring)}
.vg:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(96,36,149,.2)}
.vg:hover .vg-thumb img{transform:scale(1.05)}
.vg:hover .sh-play{transform:scale(1.12);background:var(--purple)}
.vg:hover .vg-go svg{transform:translate(2px,-2px)}

/* ---- THEME CARDS ("what you'll find here") -------------------------------- */
.th-grid{
  display:grid;gap:1.3rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.th{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,1.9rem);box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.th:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.th-ic{
  flex:none;width:48px;height:48px;border-radius:15px;
  display:grid;place-items:center;margin-bottom:1.1rem;
  background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(96,36,149,.22);
}
.th-ic svg{width:22px;height:22px}
.th h3{font-size:1.18rem;margin-bottom:.6rem}
.th p{font-size:var(--fs-small);color:var(--ink-soft);line-height:1.65}
.th .btn--ghost{margin-top:1.1rem;align-self:flex-start;padding-left:0}

/* ---- CROSS-LINK CARDS ----------------------------------------------------- */
.xl-grid{
  display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.xl{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.4vw,1.7rem);box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.xl:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(96,36,149,.2)}
.xl-ic{
  flex:none;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;margin-bottom:.9rem;
  background:var(--purple-tint);color:var(--purple);
}
.xl-ic svg{width:20px;height:20px}
.xl h3{font-size:1.08rem;margin-bottom:.45rem}
.xl p{font-size:var(--fs-small);color:var(--ink-soft);line-height:1.6}
.xl-go{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--fs-tiny);font-weight:650;color:var(--purple);
}
.xl-go svg{width:13px;height:13px;transition:transform .35s var(--ease-spring)}
.xl:hover .xl-go svg{transform:translateX(4px)}

/* ---- YOUTUBE CHIP --------------------------------------------------------- */
.listen-chip--yt svg{color:#C4302B}

/* ---- LIGHTBOX ------------------------------------------------------------
   Cards are plain links to YouTube, so the page works with JavaScript off.
   With JS on, videos.js upgrades them to open in this <dialog> instead, which
   gives Escape-to-close, a focus trap and a return of focus for free. */
.ytlb{
  border:0;padding:0;background:transparent;
  max-width:min(94vw,1080px);max-height:94vh;width:100%;
  overflow:visible;color:var(--ink);
  /* The global `*{margin:0}` reset overrides the UA stylesheet's `margin:auto`
     on an open dialog, which is what centers it. Put it back. */
  margin:auto;
}
.ytlb::backdrop{background:rgba(17,26,62,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ytlb-inner{
  position:relative;width:100%;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy-deep);box-shadow:var(--shadow-lift);
  aspect-ratio:16/9;
}
.ytlb[data-orientation="vertical"] .ytlb-inner{
  aspect-ratio:9/16;max-width:min(420px,52vh);margin-inline:auto;
}
.ytlb[data-orientation="vertical"]{max-width:min(94vw,480px)}
.ytlb-inner iframe{display:block;width:100%;height:100%;border:0}
.ytlb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:.75rem;
}
.ytlb-title{
  font-family:var(--font-display);font-size:1.02rem;font-weight:600;
  line-height:1.35;color:#fff;
}
.ytlb-close{
  flex:none;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;
  transition:background-color var(--t-fast),transform var(--t-fast);
}
.ytlb-close:hover{background:rgba(255,255,255,.28);transform:scale(1.06)}
.ytlb-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ytlb-close svg{width:16px;height:16px}
.ytlb-foot{
  margin-top:.8rem;display:flex;justify-content:center;
}
.ytlb-foot a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--fs-tiny);font-weight:600;color:rgba(255,255,255,.82);
  padding:.45rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);
  transition:background-color var(--t-fast),color var(--t-fast);
}
.ytlb-foot a:hover{background:rgba(255,255,255,.2);color:#fff}
.ytlb-foot svg{width:13px;height:13px}

/* ---- MOTION --------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .sh,.vg,.th,.xl,.sh-thumb img,.vg-thumb img,.sh-play,.ytlb-close,
  .xl-go svg,.vg-go svg{transition:none!important;transform:none!important}
}