/* ============================================================
   LIBRARY — videos / audio / character index pages.
   Filter chips + card grid + featured slot.
   ============================================================ */

/* Filter chip row */
.lib-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 0 0 30px;
}
.lib-chip {
  padding: 10px 18px;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(244, 237, 215,0.75);
  background: rgba(5, 5, 5,0.55);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
}
.lib-chip:hover {
  background: rgba(194, 158, 70,0.12);
  border-color: rgba(194, 158, 70,0.55);
  color: var(--ivory, #F4EDD7);
}
.lib-chip.is-active {
  background: rgba(194, 158, 70,0.20);
  border-color: var(--bronze-hi, #E1CD9B);
  color: var(--ivory, #F4EDD7);
}

/* Card grid — 3 wide, responsive */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1280px;
  margin: 36px auto 0;
}
.lib-card {
  display: block;
  text-decoration: none;
  background: rgba(5, 5, 5,0.55);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.lib-card:hover {
  transform: translateY(-3px);
  border-color: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 22px 64px rgba(0,0,0,0.65), 0 0 32px rgba(194, 158, 70,0.32);
}
.lib-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1A2736;
}
.lib-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.4s ease;
}
.lib-card:hover .lib-thumb img {
  transform: scale(1.04);
  filter: brightness(1.06);
}
.lib-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(5, 5, 5,0.78);
  border: 2px solid rgba(194, 158, 70,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory, #F4EDD7);
  font-size: 18px;
  transition: background 0.25s, transform 0.25s;
}
.lib-card:hover .lib-play {
  background: rgba(194, 158, 70,0.85);
  transform: translate(-50%, -50%) scale(1.08);
}
.lib-meta {
  padding: 18px 20px 22px;
}
.lib-tag {
  display: inline-block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 8px;
}
.lib-meta h3 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.18;
  margin: 0 0 8px;
  color: var(--ivory, #F4EDD7);
}
.lib-meta p {
  font-family: 'Belda', serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 237, 215,0.78);
  margin: 0;
}

/* Coming-soon variant */
.lib-card--coming {
  cursor: default;
  opacity: 0.65;
}
.lib-card--coming:hover {
  transform: none;
  box-shadow: none;
}
.lib-thumb--coming {
  background:
    radial-gradient(ellipse 60% 50% at center, rgba(194, 158, 70,0.16) 0%, transparent 70%),
    linear-gradient(135deg, #1A2736 0%, #050505 100%);
  display: flex; align-items: center; justify-content: center;
}
.lib-coming-icon {
  font-size: 36px;
  color: rgba(194, 158, 70,0.45);
}

@media (max-width: 980px) {
  .lib-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-filters { gap: 6px; }
  .lib-chip { font-size: 10px; padding: 8px 14px; letter-spacing: 0.26em; }
}

/* ============================================================
   AUDIO LIBRARY — variant of lib-card with audio-specific accents
   ============================================================ */
.lib-card--audio .lib-thumb {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(194, 158, 70,0.22) 0%, transparent 70%),
    linear-gradient(135deg, #1A2736 0%, #050505 100%);
}
.lib-card--audio .lib-thumb img {
  object-fit: cover;
}
.lib-card--audio .lib-play {
  width: 72px; height: 72px;
  font-size: 22px;
}
.lib-card--audio .lib-duration {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(5, 5, 5,0.85);
  color: var(--ivory, #F4EDD7);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ============================================================
   CHARACTER INDEX (the 90 lives) — denser tile grid
   ============================================================ */
.char-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.char-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(5, 5, 5,0.55);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
.char-tile:hover {
  transform: translateY(-2px);
  border-color: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}
.char-tile-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(194, 158, 70,0.16) 0%, transparent 70%),
    linear-gradient(135deg, #1A2736 0%, #050505 100%);
  overflow: hidden;
}
.char-tile-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.char-tile:hover .char-tile-portrait img { transform: scale(1.05); }
.char-tile-meta { padding: 14px 16px 16px; }
.char-tile-name {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--ivory, #F4EDD7);
}
.char-tile-era {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}
.char-tile-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(194, 158, 70,0.92);
  color: #050505;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
}
.char-tile-badge--coming {
  background: rgba(5, 5, 5,0.85);
  color: rgba(244, 237, 215,0.78);
  border: 1px solid rgba(194, 158, 70,0.45);
}
@media (max-width: 600px) {
  .char-index { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .char-tile-meta { padding: 10px 12px 12px; }
  .char-tile-name { font-size: 14px; }
  .char-tile-era { font-size: 9px; letter-spacing: 0.22em; }
}

/* ============================================================
   ERA GROUP HEADERS for character index
   ============================================================ */
.char-era-group { margin-top: 60px; }
.char-era-group:first-child { margin-top: 30px; }
.char-era-header {
  border-top: 1px solid rgba(194, 158, 70,0.28);
  padding-top: 26px;
  margin-bottom: 18px;
}
.char-era-header-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  display: block;
  margin-bottom: 8px;
}
.char-era-header h2 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 6px;
  color: var(--ivory, #F4EDD7) !important;
}
.char-era-header-sub {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(244, 237, 215,0.85);
  margin: 0;
}