/**
 * Story Hub — self-contained component styles.
 *
 * Written as plain CSS (using the theme's --bos-* brand color variables) so the
 * hub landing page, directory, widget, and episode UI render correctly WITHOUT
 * a Tailwind rebuild. Utility classes are purged from the compiled main.css when
 * unused, so hub-specific visuals live here instead.
 */

/* ── Hub hero ──────────────────────────────────────────────────────────── */
/* No banner → light parchment card (dark text reads). With a banner → dark
   backdrop behind the image + scrim (white text reads). */
.bos-hub-hero { position: relative; overflow: hidden; background: rgb(var(--bos-cream)); border-radius: 1rem; }
.bos-hub-hero--has-banner { background: rgb(var(--bos-ink)); }
.bos-hub-hero__img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.bos-hub-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--bos-deep) / 0.92), rgb(var(--bos-deep) / 0.35) 55%, rgba(0,0,0,0)); }
.bos-hub-hero__content { position: relative; padding: 1.5rem; }
@media (min-width: 640px) { .bos-hub-hero__content { padding: 2rem; } }
.bos-hub-hero--has-banner .bos-hub-hero__content { position: absolute; left: 0; right: 0; bottom: 0; }
.bos-hub-hero__title { line-height: 1.15; font-size: 1.875rem; color: rgb(var(--bos-deep)); margin: 0; }
@media (min-width: 768px) { .bos-hub-hero__title { font-size: 3rem; } }
.bos-hub-hero--has-banner .bos-hub-hero__title { color: #fff; }
.bos-hub-hero__intro { margin-top: 1rem; max-width: 42rem; line-height: 1.7; color: rgb(var(--bos-muted)); }
.bos-hub-hero--has-banner .bos-hub-hero__intro { color: rgb(var(--bos-cream)); }

/* Meta / chip row */
.bos-hub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.bos-hub-meta__count { font-size: 0.875rem; color: rgb(var(--bos-muted)); }
.bos-hub-hero--has-banner .bos-hub-meta__count { color: rgb(var(--bos-cream)); }

/* ── Chips (labels + status pills) ─────────────────────────────────────── */
.bos-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 9999px; line-height: 1; }
.bos-chip--hub { background: rgb(var(--bos-saffron) / 0.15); color: rgb(var(--bos-saffron)); text-transform: uppercase; letter-spacing: 0.04em; }
.bos-chip .bos-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }
.bos-chip--ongoing { background: rgb(var(--bos-saffron) / 0.18); color: rgb(var(--bos-saffron)); }
.bos-chip--ongoing .bos-dot { background: rgb(var(--bos-saffron)); }
.bos-chip--completed { background: rgb(var(--bos-gold) / 0.20); color: rgb(var(--bos-gold)); }
.bos-chip--completed .bos-dot { background: rgb(var(--bos-gold)); }
/* Brighter on a dark banner */
.bos-hub-hero--has-banner .bos-chip--ongoing { background: rgb(var(--bos-saffron) / 0.9); color: #fff; }
.bos-hub-hero--has-banner .bos-chip--ongoing .bos-dot { background: #fff; }
.bos-hub-hero--has-banner .bos-chip--completed { background: rgb(var(--bos-gold) / 0.92); color: rgb(var(--bos-deep)); }
.bos-hub-hero--has-banner .bos-chip--completed .bos-dot { background: rgb(var(--bos-deep)); }

/* ── Episode strip on single posts ─────────────────────────────────────── */
.bos-episode-strip { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 1rem; font-size: 0.875rem; font-weight: 500; color: rgb(var(--bos-saffron)); }
.bos-episode-strip:hover { color: rgb(var(--bos-deep)); }
.bos-episode-strip svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* ── Episode card badge (on the hub landing grid) ──────────────────────── */
.bos-ep-badge { position: absolute; top: 0.75rem; left: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem; background: rgb(var(--bos-deep) / 0.9); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1; padding: 0.35rem 0.6rem; border-radius: 9999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ── Hub card placeholder (no banner set) ──────────────────────────────── */
.bos-hub-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; background: rgb(var(--bos-ink)); }
.bos-hub-card__ph span { font-size: 1.5rem; color: rgb(var(--bos-cream) / 0.75); }
.bos-hub-card .bos-chip--status { position: absolute; top: 0.75rem; left: 0.75rem; }
.bos-hub-card--status-completed .bos-chip--status { background: rgb(var(--bos-gold) / 0.92); color: rgb(var(--bos-deep)); }
.bos-hub-card--status-ongoing .bos-chip--status { background: rgb(var(--bos-saffron) / 0.9); color: #fff; }
.bos-hub-card--status-completed .bos-chip--status .bos-dot { background: rgb(var(--bos-deep)); }
.bos-hub-card--status-ongoing .bos-chip--status .bos-dot { background: #fff; }

/* ── Widget list rows ──────────────────────────────────────────────────── */
.bos-hubs-list { list-style: none; margin: 0; padding: 0; }
.bos-hub-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgb(var(--bos-cream)); }
.bos-hub-row:last-child { border-bottom: 0; }
.bos-hub-row__thumb { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 0.5rem; overflow: hidden; background: rgb(var(--bos-ink)); display: flex; align-items: center; justify-content: center; }
.bos-hub-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bos-hub-row__ph { color: rgb(var(--bos-cream) / 0.75); font-size: 1.125rem; }
.bos-hub-row__body { min-width: 0; }
.bos-hub-row__title { display: block; font-weight: 500; color: rgb(var(--bos-deep)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bos-hub-row__title:hover { color: rgb(var(--bos-saffron)); }
.bos-hub-row__meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgb(var(--bos-muted)); }
.bos-hub-row__meta .bos-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; }
.bos-dot--ongoing { background: rgb(var(--bos-saffron)); }
.bos-dot--completed { background: rgb(var(--bos-gold)); }