/* home page */

/* ── stats bar ─────────────────────────────────────────────────────────── */
#stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 20px;
  background: #111;
  border: 1px solid #222;
}

.stat { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.stat-num   { font-size: 22px; font-weight: 700; color: #f0f0f0; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #666; }

/* ── era carousel (browse page) ────────────────────────────────────────── */
#era-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 20px;
}

#era-rail::-webkit-scrollbar { height: 3px; }
#era-rail::-webkit-scrollbar-thumb { background: #333; }

.era-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #2a2a2a;
  background: #111;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.era-pill:hover { border-color: #555; color: #f0f0f0; }

.era-pill.active {
  border-color: #f0f0f0;
  color: #f0f0f0;
  background: #1a1a1a;
}

.era-pill-count {
  font-size: 10px;
  color: #555;
}

.era-pill.active .era-pill-count { color: #888; }

/* ── filters ───────────────────────────────────────────────────────────── */
#filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* type checkbox dropdown */
#type-dropdown-wrap { position: relative; }

#type-toggle {
  padding: 6px 14px;
  border: 1px solid #333;
  background: transparent;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

#type-toggle #type-badge {
  display: inline-block;
  background: #f0f0f0;
  color: #0d0d0d;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  margin-right: 4px;
}

#type-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #111;
  border: 1px solid #333;
  z-index: 100;
  min-width: 180px;
  padding: 8px 0;
}

#type-menu.hidden, #member-menu.hidden { display: none; }

.type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
  white-space: nowrap;
}

.type-option:hover { background: #1a1a1a; }
.type-option input { cursor: pointer; accent-color: #f0f0f0; }

#dropdowns { display: flex; flex-wrap: wrap; gap: 16px; }

.range-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.range-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
}

.range-group span { color: #444; font-size: 12px; }

select {
  padding: 6px 10px;
  border: 1px solid #333;
  background: #0d0d0d;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
}

/* ── active filter tags ────────────────────────────────────────────────── */
#tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #1a1a1a;
  border: 1px solid #444;
  font-size: 12px;
  color: #ccc;
}

.tag button, #clear-all {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

#clear-all {
  font-size: 12px;
  color: #555;
  text-decoration: underline;
  margin-left: 4px;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  margin-bottom: 32px;
}

#hero a {
  display: block;
  text-decoration: none;
  position: relative;
}

#hero img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

#hero-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 24px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
}

#hero-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #aaa;
  margin-bottom: 6px;
}

#hero-meta h2 {
  font-size: 22px;
  color: #f0f0f0;
  margin-bottom: 6px;
}

#hero-stats {
  font-size: 12px;
  color: #777;
}

/* ── carousels (unfiltered) ────────────────────────────────────────────── */
.carousel { margin-bottom: 40px; }

.carousel h2 {
  margin-bottom: 10px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #aaa;
}

.carousel h2 .count {
  font-size: 12px;
  color: #555;
  font-weight: 400;
  margin-left: 6px;
}

.rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: #333; }

/* ── grid (filtered) ───────────────────────────────────────────────────── */
#results-header {
  font-size: 13px;
  color: #555;
  margin-bottom: 16px;
}

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* ── shared card ───────────────────────────────────────────────────────── */
.card {
  text-decoration: none;
  color: #f0f0f0;
  display: block;
}

.card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

/* in a rail, cards are fixed width */
.rail .card { flex: 0 0 200px; }
.rail .card img { width: 200px; height: 112px; }

.card-title {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  margin-top: 3px;
  font-size: 11px;
  color: #555;
}

/* ── era grid ──────────────────────────────────────────────────────────── */
#era-section { margin-bottom: 40px; }

#era-section h2 {
  margin-bottom: 14px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #aaa;
}

#era-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.era-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: #111;
  border: 1px solid #222;
  color: #f0f0f0;
  text-align: left;
  cursor: pointer;
}

.era-card:hover { border-color: #555; background: #181818; }

.era-name  { font-size: 13px; font-weight: 600; }
.era-count { font-size: 11px; color: #666; }
.era-year  { font-size: 11px; color: #444; }

.empty { color: #555; padding: 20px 0; }

.browse-hint { color: #444; font-size: 13px; margin-bottom: 16px; font-style: italic; }

.section-link {
  font-size: 12px;
  font-weight: 400;
  color: #555;
  text-decoration: none;
  margin-left: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.section-link:hover { color: #aaa; }

.disclaimer {
  font-size: 11px;
  color: #555;
  margin-bottom: 10px;
  font-style: italic;
}