/**
 * The Hub — video-led content hub styles.
 *
 * Design language: "broadcast network", not "company blog". The hub
 * front and section heroes sit on the deep navy ground with gold
 * accents (cinematic register); episode bodies sit on the warm cream
 * editorial ground. No blog furniture: no sidebars, no author boxes,
 * no date-led metadata. Thumbnails are the visual surface; duration
 * chips and pillar tags are the only chrome.
 *
 * Shares the site tokens from globals.css (--gildhart-*, --navy,
 * --cream, --font-*). Eyebrows use the crisp Inter treatment matched
 * to the rest of the site.
 */

/* ── Hub tokens ─────────────────────────────────────────────────── */

:root {
  --hub-ink: #fdfbf5;       /* warm white on dark grounds */
  --hub-navy-deep: #0d1424; /* broadcast ground */
  --hub-gold-deep: #8B6914; /* deep gold on cream (AA-safe) */
}

/* ── Nav seam ───────────────────────────────────────────────────── */
/* The fixed nav takes no layout space; header.php's transparent
 * .nav-spacer normally compensates, but on dark-first pages the cream
 * body shows through it as a strip. Same fix as the thank-you/about
 * pages: hide the spacer for the hub's body classes and fold the live
 * nav height (--nav-h, set by nav.js) into each hero's top padding so
 * the navy paints all the way up behind the nav. */
.page-template-page-hub .nav-spacer,
.tax-pillar .nav-spacer,
.single-episode .nav-spacer,
.post-type-archive-ai_tool .nav-spacer,
.single-ai_tool .nav-spacer {
  display: none;
}

/* ── Shared atoms ───────────────────────────────────────────────── */

.hub-eyebrow {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gildhart-gold);
  margin: 0 0 1.25rem;
}
.hub-crumb {
  color: var(--gildhart-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 74, 0.35);
  transition: border-color 0.2s ease;
}
.hub-crumb:hover { border-color: var(--gildhart-gold); }
.hub-crumb-sep { color: rgba(201, 164, 74, 0.5); margin: 0 0.35rem; }

.hub-headline {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hub-ink);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.hub-intro {
  /* Matched to .svc-why-now-beat — the approved dark-ground lead. */
  font-family: var(--font-body);
  font-size: 1.1875rem;
  line-height: 1.72;
  color: rgba(248, 244, 234, 0.78);
  max-width: 60ch;
  margin: 0;
}

.hub-rail-label {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gildhart-gold);
  margin: 0;
}

/* ── Hub front ──────────────────────────────────────────────────── */

.hub-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(201, 164, 74, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0f172a 0%, var(--hub-navy-deep) 100%);
  padding: calc(3.5rem + var(--nav-h, 130px)) 2rem 3.5rem;
}
/* Signal field — a whisper-faint gold dot grid in the hero's upper
 * right, faded out by a radial mask. Atmosphere, not decoration: it
 * gives the flat navy plane depth without adding an element. */
.hub-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(201, 164, 74, 0.22) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(55% 90% at 82% 18%, rgba(0, 0, 0, 0.9), transparent 70%);
  mask-image: radial-gradient(55% 90% at 82% 18%, rgba(0, 0, 0, 0.9), transparent 70%);
  pointer-events: none;
}
.hub-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Headline pivot phrase — gold, same accent pattern as the rest of
 * the site's dark headlines. */
.hub-headline-accent {
  color: var(--gildhart-gold);
}

/* Front-page headline runs a step more cinematic than the shared
 * scale; pillar/episode headlines keep the tighter clamp. */
.hub-hero .hub-headline {
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
}

/* ── AI Visibility Check — the hero's action machine ────────────── */
/* White capture row on the navy ground: website + email + gold CTA.
 * The hero stops being a headline and becomes an offer. */
.hub-check {
  margin-top: 2.5rem;
  max-width: 780px;
}
.hub-check-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.hub-check-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  border-radius: 14px;
  padding: 0.5rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 164, 74, 0.25);
  transition: box-shadow 0.25s ease;
}
.hub-check-row:focus-within {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--gildhart-gold);
}
.hub-check-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  padding: 0.85rem 1.1rem;
}
.hub-check-input::placeholder {
  color: var(--gray-400);
  font-weight: 400;
}
.hub-check-input:focus {
  outline: none;
}
.hub-check-input + .hub-check-input {
  border-left: 1px solid rgba(15, 23, 42, 0.12);
}
.hub-check-btn {
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  background: var(--gildhart-gold);
  color: var(--gildhart-black);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0 1.6rem;
  border-radius: 10px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hub-check-btn:hover {
  background: #b8912f;
  transform: translateY(-1px);
}
.hub-check-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.hub-check-note {
  /* Selling copy, not chrome — sits at the design system's readable
   * dark-ground body level (~0.78 cream), not the muted-meta floor. */
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(248, 244, 234, 0.8);
  margin: 1rem 0 0;
  max-width: 62ch;
}
.hub-check-error {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fca5a5;
  margin: 0.75rem 0 0;
}
.hub-check-success {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--hub-ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 164, 74, 0.35);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}
.hub-check-success-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gildhart-gold);
  margin-top: 0.1rem;
}

@media (max-width: 700px) {
  .hub-check-row {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
  }
  .hub-check-input {
    padding: 0.8rem 0.9rem;
  }
  .hub-check-input + .hub-check-input {
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
  }
  .hub-check-btn {
    padding: 0.9rem 1.25rem;
    width: 100%;
  }
}

/* On-air dot — the broadcast signal beside the hub eyebrow. Same
 * "live" language as the homepage AI card's pulsing dot. */
.hub-eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hub-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gildhart-gold);
  box-shadow: 0 0 0 0 rgba(201, 164, 74, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .hub-live-dot {
    animation: hubLivePulse 2.4s ease-out infinite;
  }
  @keyframes hubLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 164, 74, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(201, 164, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 164, 74, 0); }
  }

  /* Hero entrance — eyebrow, headline, intro rise in staggered on
   * load, matching the site's other heroes. Applies to all three hub
   * page types via their shared -inner wrappers. */
  .hub-hero-inner > *,
  .hub-pillar-hero-inner > *,
  .hub-episode-hero-inner > * {
    opacity: 0;
    transform: translateY(18px);
    animation: hubRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hub-hero-inner > *:nth-child(2),
  .hub-pillar-hero-inner > *:nth-child(2),
  .hub-episode-hero-inner > *:nth-child(2) { animation-delay: 0.12s; }
  .hub-hero-inner > *:nth-child(3),
  .hub-pillar-hero-inner > *:nth-child(3),
  .hub-episode-hero-inner > *:nth-child(3) { animation-delay: 0.24s; }
  .hub-hero-inner > *:nth-child(n+4),
  .hub-pillar-hero-inner > *:nth-child(n+4),
  .hub-episode-hero-inner > *:nth-child(n+4) { animation-delay: 0.34s; }
  @keyframes hubRise {
    to { opacity: 1; transform: none; }
  }
}

.hub-featured {
  background: var(--hub-navy-deep);
  padding: 2.5rem 2rem 4rem;
}
.hub-featured-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.hub-featured-label { margin-bottom: 1.25rem; }

/* Branded placeholder ground — shared by every thumb/poster surface.
 * When there's no image (or hub.js flags a dead YouTube frame with
 * .is-fallback) the slot degrades to an intentional brand moment —
 * navy→forest gradient, gold glow, a quiet wordmark "channel bug" in
 * the top-left corner — never a flat black box and never YouTube's
 * gray "unavailable" frame. */
.hub-featured-backdrop,
.hub-card-thumb,
.hub-embed {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201, 164, 74, 0.14) 0%, transparent 60%),
    linear-gradient(160deg, #0f172a 0%, var(--gildhart-green) 130%);
}
.hub-featured-backdrop::before,
.hub-card-thumb::before,
.hub-embed::before {
  content: 'GILDHART';
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(201, 164, 74, 0.5);
  pointer-events: none;
}
.hub-featured-backdrop.is-fallback img,
.hub-card-thumb.is-fallback img,
.hub-embed.is-fallback img {
  display: none;
}

/* ── Cinematic feature — the artwork IS the section ─────────────── */
.hub-featured-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 40vw, 480px);
  text-decoration: none;
  border: 1px solid rgba(201, 164, 74, 0.22);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.hub-featured-card:hover {
  border-color: rgba(201, 164, 74, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
.hub-featured-backdrop {
  position: absolute;
  inset: 0;
}
.hub-featured-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-featured-card:hover .hub-featured-backdrop img {
  transform: scale(1.03);
}
/* Scrim — navy rolls in from the left so the content sits on the
 * artwork and stays legible; a bottom lift guards the base. */
.hub-featured-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(13, 20, 36, 0.92) 0%, rgba(13, 20, 36, 0.62) 42%, rgba(13, 20, 36, 0.18) 72%, rgba(13, 20, 36, 0.05) 100%),
    linear-gradient(0deg, rgba(13, 20, 36, 0.75) 0%, transparent 40%);
  pointer-events: none;
}
.hub-featured-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 34rem;
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.hub-featured-title {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--hub-ink);
  text-wrap: balance;
}
.hub-featured-dek {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* 0.78 = the approved readable-body alpha on dark grounds. */
  color: rgba(248, 244, 234, 0.78);
}
.hub-featured-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gildhart-gold);
  margin-top: 0.25rem;
}
.hub-featured-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: clamp(2.5rem, 8vw, 6rem);
  transform: translateY(-50%);
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(201, 164, 74, 0.95);
  color: var(--gildhart-black);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(201, 164, 74, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hub-featured-card:hover .hub-featured-play {
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 0 14px rgba(201, 164, 74, 0.1);
}
.hub-featured-duration {
  z-index: 3;
  top: 1rem;
  right: 1rem;
  bottom: auto;
}

/* ── Finder — pillar chips + instant search ─────────────────────── */
/* Gated server-side behind catalogue size (gildhart_hub_finder_min):
 * the bar only renders once there are enough episodes for filtering
 * to mean something. While a filter/search is active the featured
 * and rails sections hide and the results grid takes over. */

/* The hidden attribute must always win — several hub elements carry
 * display:flex/grid that would otherwise override it. */
.hub-main [hidden] {
  display: none !important;
}

.hub-finder {
  background: var(--hub-navy-deep);
  padding: 0 2rem 2.25rem;
}
.hub-finder-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.hub-finder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hub-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(248, 244, 234, 0.72);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 164, 74, 0.2);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.hub-chip:hover {
  border-color: rgba(201, 164, 74, 0.5);
  color: var(--hub-ink);
}
.hub-chip.is-active {
  background: var(--gildhart-gold);
  border-color: var(--gildhart-gold);
  color: var(--gildhart-black);
  font-weight: 700;
}
.hub-finder-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 220px;
}
.hub-finder-search svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(248, 244, 234, 0.5);
  pointer-events: none;
}
.hub-finder-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 164, 74, 0.25);
  border-radius: 10px;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--hub-ink);
}
.hub-finder-search input::placeholder {
  color: rgba(248, 244, 234, 0.5);
}
.hub-finder-search input:focus {
  outline: none;
  border-color: var(--gildhart-gold);
  background: rgba(255, 255, 255, 0.08);
}

.hub-results {
  background: var(--hub-navy-deep);
  padding: 0 2rem 6rem;
}
.hub-results-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.hub-results-count {
  margin-bottom: 1.5rem;
}
.hub-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem 1.25rem;
}
.hub-results-empty {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(248, 244, 234, 0.72);
  margin: 1rem 0 0;
}

/* ── Rails ──────────────────────────────────────────────────────── */

.hub-rails {
  background: var(--hub-navy-deep);
  padding: 0 2rem 6rem;
}
.hub-rails-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.hub-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.hub-rail-more {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(248, 244, 234, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.hub-rail-more:hover { color: var(--gildhart-gold); }
.hub-rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 300px);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 164, 74, 0.4) transparent;
}
.hub-rail-track > .hub-card { scroll-snap-align: start; }

/* ── Episode card ───────────────────────────────────────────────── */

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-decoration: none;
  min-width: 0;
}
.hub-card-thumb {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(201, 164, 74, 0.14);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.hub-card:hover .hub-card-thumb {
  border-color: rgba(201, 164, 74, 0.5);
  transform: translateY(-3px);
}
.hub-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.hub-card-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13, 20, 36, 0.75);
  color: var(--hub-ink);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hub-card:hover .hub-card-play { opacity: 1; }
.hub-card-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--hub-ink);
  background: rgba(13, 20, 36, 0.85);
  border-radius: 5px;
  padding: 0.2rem 0.45rem;
  letter-spacing: 0.02em;
}
.hub-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hub-card-pillar {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gildhart-gold);
}
.hub-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--hub-ink);
  transition: color 0.2s ease;
}
.hub-card:hover .hub-card-title { color: var(--gildhart-gold); }

/* Cards on light grounds (pillar grid, related rail) flip the title
 * to navy. */
.hub-on-light .hub-card-title { color: var(--navy); }
.hub-on-light .hub-card:hover .hub-card-title { color: var(--hub-gold-deep); }

/* ── Empty state ────────────────────────────────────────────────── */

.hub-empty {
  background: var(--hub-navy-deep);
  padding: 4rem 2rem 7rem;
  text-align: center;
}
.hub-empty-line {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(248, 244, 234, 0.6);
  margin: 0;
}

/* ── Pillar flagship ────────────────────────────────────────────── */

.hub-pillar-hero {
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(201, 164, 74, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0f172a 0%, var(--hub-navy-deep) 100%);
  padding: calc(3.5rem + var(--nav-h, 130px)) 2rem 4rem;
}
.hub-pillar-hero-inner {
  max-width: 920px;
  margin: 0 auto;
}
.hub-pillar-embed { margin-top: 2.5rem; }

.hub-pillar-grid-section {
  background: var(--cream-warm, #fef7ed);
  padding: 4.5rem 2rem 6rem;
}
.hub-pillar-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.hub-pillar-grid-inner .hub-rail-label {
  color: var(--hub-gold-deep);
  margin-bottom: 1.5rem;
}
.hub-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}
/* Light-ground card colors come from .hub-on-light (applied in the
 * templates) — no per-grid duplicates. */
.hub-pillar-grid-section .hub-empty-line { color: var(--gray-600); text-align: left; }

/* ── Lite embed ─────────────────────────────────────────────────── */

.hub-embed {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(201, 164, 74, 0.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}
.hub-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.hub-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.hub-embed-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(201, 164, 74, 0.95);
  color: var(--gildhart-black);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, background 0.25s ease;
}
.hub-embed-play:hover { transform: scale(1.07); background: var(--gildhart-gold); }
.hub-embed.is-playing .hub-embed-play,
.hub-embed.is-playing img { display: none; }

/* ── Episode page ───────────────────────────────────────────────── */

.hub-episode-hero {
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(201, 164, 74, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0f172a 0%, var(--hub-navy-deep) 100%);
  padding: calc(3.5rem + var(--nav-h, 130px)) 2rem 4.5rem;
}
/* No valid video = no player block; close the hero cleanly rather
 * than leaving the hero-inner's bottom margin as dead space. */
.hub-episode-hero--no-player .hub-episode-hero-inner {
  margin-bottom: 0;
}
.hub-episode-hero-inner {
  max-width: 920px;
  margin: 0 auto 2.5rem;
}
.hub-episode-title { max-width: 20ch; }
.hub-episode-meta {
  /* Quiet Inter label — mono caps belong only to duration chips and
   * chapter timestamps. Renders just the validated duration. */
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(248, 244, 234, 0.6);
  margin: 1.25rem 0 0;
}
.hub-episode-player {
  max-width: 980px;
  margin: 0 auto;
}

.hub-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.hub-chapter {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(201, 164, 74, 0.3);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hub-chapter:hover {
  border-color: var(--gildhart-gold);
  background: rgba(201, 164, 74, 0.12);
}
.hub-chapter-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gildhart-gold);
}
.hub-chapter-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(248, 244, 234, 0.85);
}

/* Body — cream editorial ground */
.hub-episode-body {
  background: var(--cream-warm, #fef7ed);
  padding: 4rem 2rem 5rem;
}
.hub-episode-body-inner {
  max-width: 720px;
  margin: 0 auto;
}

.hub-takeaways {
  background: #ffffff;
  border: 1px solid rgba(201, 164, 74, 0.35);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 6px 24px rgba(26, 43, 60, 0.06);
}
.hub-takeaways-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hub-gold-deep);
  margin: 0 0 1.1rem;
}
.hub-takeaways-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.hub-takeaways-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
}
.hub-takeaway-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gildhart-gold);
  margin-top: 0.15rem;
}

/* The write-up — the layer that ranks. */
.hub-article {
  font-family: var(--font-body);
  color: var(--gray-700);
}
.hub-article > p {
  font-size: 1.125rem;
  line-height: 1.85;
  margin: 0 0 1.5rem;
}
.hub-article h2 {
  font-family: 'Inter', 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--navy);
  margin: 2.75rem 0 1rem;
}
.hub-article h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 2.25rem 0 0.85rem;
}
.hub-article ul,
.hub-article ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}
.hub-article li {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 0.5rem;
}
.hub-article blockquote {
  margin: 2.25rem 0;
  padding: 0.35rem 0 0.35rem 1.5rem;
  border-left: 3px solid var(--gildhart-gold);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy);
}
.hub-article blockquote p { margin: 0; font-size: inherit; line-height: inherit; }
.hub-article strong { color: var(--navy); }
.hub-article a { color: var(--hub-gold-deep); }
.hub-article img { max-width: 100%; height: auto; border-radius: 12px; }

/* Transcript accordion */
.hub-transcript {
  margin-top: 3rem;
  border-top: 1px solid rgba(26, 43, 60, 0.12);
  padding-top: 1.75rem;
}
.hub-transcript-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hub-gold-deep);
}
.hub-transcript-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
  line-height: 1;
}
.hub-transcript-toggle[aria-expanded="true"] .hub-transcript-chevron {
  transform: rotate(180deg);
}
.hub-transcript-panel {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--gray-600);
}

/* Episode CTA */
.hub-cta {
  margin-top: 3.5rem;
  background: var(--gildhart-green);
  border-radius: 16px;
  padding: 2.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border: 1px solid rgba(201, 164, 74, 0.35);
}
.hub-cta-line {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(240, 230, 200, 0.95);
  margin: 0;
  max-width: 46ch;
}
.hub-cta-btn {
  flex-shrink: 0;
  display: inline-block;
  background: var(--gildhart-gold);
  color: var(--gildhart-black);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.9rem 1.75rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hub-cta-btn:hover { background: #b8912f; transform: translateY(-1px); }

/* Related rail */
.hub-related {
  background: var(--cream-warm, #fef7ed);
  border-top: 1px solid rgba(26, 43, 60, 0.08);
  padding: 4rem 2rem 5.5rem;
}
.hub-related-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hub-related-inner .hub-rail-label {
  color: var(--hub-gold-deep);
  margin-bottom: 1.5rem;
}
.hub-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}
/* (light-ground card colors come from .hub-on-light) */

/* ── Reveal motion (added by hub.js, gated on reduced-motion) ───── */

@media (prefers-reduced-motion: no-preference) {
  .hub-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hub-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Cinematic feature on smaller screens: content anchors to the
   * bottom over a heavier base scrim; the play affordance lifts to
   * the upper area so it never collides with the text. */
  .hub-featured-card { min-height: 440px; }
  .hub-featured-scrim {
    background:
      linear-gradient(0deg, rgba(13, 20, 36, 0.94) 0%, rgba(13, 20, 36, 0.55) 45%, rgba(13, 20, 36, 0.15) 75%, transparent 100%);
  }
  .hub-featured-content { max-width: 100%; }
  .hub-featured-play {
    top: 30%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
  }
  .hub-featured-card:hover .hub-featured-play {
    transform: translate(-50%, -50%) scale(1.07);
  }
  .hub-pillar-grid,
  .hub-related-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .hub-hero,
  .hub-pillar-hero,
  .hub-episode-hero { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hub-featured,
  .hub-rails,
  .hub-finder,
  .hub-results,
  .hub-episode-body,
  .hub-related,
  .hub-pillar-grid-section { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hub-finder-search { flex: 1 1 100%; }
  .hub-pillar-grid,
  .hub-related-grid { grid-template-columns: 1fr; }
  .hub-rail-track { grid-auto-columns: minmax(230px, 260px); }
  .hub-cta { padding: 1.75rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════
 * The Gildhart AI Directory — /hub/tools/
 * Verdict-led reviews with traffic-light compliance ratings. Shares
 * the hub's broadcast register: dark heroes, cream review bodies.
 * ══════════════════════════════════════════════════════════════════ */

.hub-dir-disclosure {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 244, 234, 0.55);
  margin: 1.5rem 0 0;
}

/* ── Traffic-light rating ───────────────────────────────────────── */
.hub-tl {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}
.hub-tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.hub-tl--green { color: #4ade80; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3); }
.hub-tl--amber { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); }
.hub-tl--red   { color: #f87171; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.3); }
/* On the cream review body the tints deepen for contrast. */
.hub-tool-body .hub-tl--green,
.hub-on-light .hub-tl--green { color: #15803d; background: rgba(21, 128, 61, 0.08); border-color: rgba(21, 128, 61, 0.3); }
.hub-tool-body .hub-tl--amber,
.hub-on-light .hub-tl--amber { color: #a16207; background: rgba(161, 98, 7, 0.08); border-color: rgba(161, 98, 7, 0.3); }
.hub-tool-body .hub-tl--red,
.hub-on-light .hub-tl--red { color: #b91c1c; background: rgba(185, 28, 28, 0.08); border-color: rgba(185, 28, 28, 0.3); }
.hub-tl--large { font-size: 0.875rem; padding: 0.45rem 1.05rem; margin: 0 0 1rem; }

/* ── Flagship seal + badges ─────────────────────────────────────── */
.hub-tool-seal {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gildhart-black);
  background: var(--gildhart-gold);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}
.hub-tool-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.hub-tool-cat-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(248, 244, 234, 0.72);
  border: 1px solid rgba(201, 164, 74, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}

/* ── Directory grid + cards ─────────────────────────────────────── */
.hub-dir-finder { padding-top: 2.5rem; }
.hub-dir-grid-section {
  background: var(--hub-navy-deep);
  padding: 2.5rem 2rem 6rem;
}
.hub-dir-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.hub-dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.hub-tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 164, 74, 0.18);
  border-radius: 14px;
  padding: 1.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.hub-tool-card:hover {
  border-color: rgba(201, 164, 74, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}
.hub-tool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.hub-tool-card-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201, 164, 74, 0.14) 0%, transparent 60%),
    linear-gradient(160deg, #0f172a 0%, var(--gildhart-green) 130%);
  border: 1px solid rgba(201, 164, 74, 0.2);
  flex-shrink: 0;
}
.hub-tool-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-tool-card-monogram {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gildhart-gold);
}
.hub-tool-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hub-ink);
  transition: color 0.2s ease;
}
.hub-tool-card:hover .hub-tool-card-name { color: var(--gildhart-gold); }
.hub-tool-card-tagline {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(248, 244, 234, 0.78);
}
.hub-tool-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.75rem;
}
.hub-tool-card-cat {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 244, 234, 0.55);
}
/* Cards on the cream related rail flip to light-ground colors. */
.hub-on-light .hub-tool-card {
  background: #ffffff;
  border-color: rgba(26, 43, 60, 0.1);
  box-shadow: 0 4px 18px rgba(26, 43, 60, 0.05);
}
.hub-on-light .hub-tool-card-name { color: var(--navy); }
.hub-on-light .hub-tool-card:hover .hub-tool-card-name { color: var(--hub-gold-deep); }
.hub-on-light .hub-tool-card-tagline { color: var(--gray-600); }
.hub-on-light .hub-tool-card-cat { color: var(--gray-500); }

/* ── Tool review body ───────────────────────────────────────────── */
.hub-verdict {
  background: #ffffff;
  border-left: 4px solid var(--gildhart-gold);
  border-radius: 0 14px 14px 0;
  padding: 1.75rem 2rem;
  margin-bottom: 2.75rem;
  box-shadow: 0 6px 24px rgba(26, 43, 60, 0.06);
}
.hub-verdict-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hub-gold-deep);
  margin: 0 0 0.85rem;
}
.hub-verdict-text {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--navy);
  margin: 0;
}
.hub-tool-section { margin-bottom: 2.5rem; }
.hub-tool-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.85rem;
}
.hub-tool-section-text {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0;
}
.hub-tool-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.hub-tool-fit-cell {
  background: #ffffff;
  border: 1px solid rgba(26, 43, 60, 0.1);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}
.hub-tool-fit-cell--best { border-top: 3px solid #15803d; }
.hub-tool-fit-cell--skip { border-top: 3px solid #b91c1c; }
.hub-tool-fit-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 0.5rem;
}
.hub-tool-fit-text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy);
  margin: 0;
}
.hub-tool-visit { margin-top: 2.5rem; }
.hub-tool-visit .hub-cta-btn { display: inline-block; }
.hub-tool-disclosure {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0.75rem 0 0;
}
.hub-tool-reviewed {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(26, 43, 60, 0.1);
}

@media (max-width: 640px) {
  .hub-dir-grid { grid-template-columns: 1fr; }
  .hub-dir-grid-section { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hub-tool-fit { grid-template-columns: 1fr; }
}