/* ============================================================
   cards.css — Collectible Cards section styles
   Inherits CSS custom properties from styles.css (loaded first)
   DO NOT modify styles.css — this file is cards-branch only
   ============================================================ */

/* ── Header nav link (cards pages + injected into index/item via <style>) ── */
.header-nav { display:flex; align-items:center; margin:0 6px; }
.header-nav-link {
  font-family: var(--font-ui);
  font-size: .838rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 13px;
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.header-nav-link:hover { color: var(--yellow); border-color: var(--yellow-dark); }
.header-nav-link.active-section {
  color: var(--yellow);
  border-color: var(--yellow-dark);
  background: rgba(245,197,24,0.07);
}

/* ── Type badges ── */
.badge-type-nascar { background: var(--red-dark); color: var(--white); }
.badge-type-nfl    { background: #142a52; color: #7ab0e8; border: 1px solid #1e3e7a; }
.badge-type-nhl    { background: #0a2e2e; color: #3cc8c8; border: 1px solid #1a4a4a; }
.badge-type-movie  { background: #221435; color: #b080e0; border: 1px solid #382255; }

/* ── Set-status badges ── */
.badge-complete { background: #0a2a0a; color: #4fc74f; border: 1px solid #1e4a1e; }
.badge-partial  { background: #2a1a00; color: #c89030; border: 1px solid #3e2800; }
.badge-special  { background: #1a1a2a; color: #8888cc; border: 1px solid #2c2c44; }

/* Beckett value badge */
.badge-beckett  { background: #2a2000; color: var(--yellow); border: 1px solid #4a3800; }

/* ── Card grid card: title/subtitle tweaks for cards ── */
.card-subtitle {
  font-family: var(--font-body);
  font-size: .888rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Gallery: 3-column thumbs (overrides diecast 4-col) ── */
.gallery-thumbs-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
/* Dynamic column count set by JS via inline style; this is the fallback */
#galleryThumbs {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

/* ── Card-detail breadcrumb "Cards" section color ── */
.breadcrumb-cards { color: var(--yellow); }

/* ── Filter TYPE chip variants (active state uses base .chip.active red,
      but we add section-color highlight on hover) ── */
.chip[data-filter="type"]:hover { border-color: var(--red); }

/* ── No-results card state ── */
.no-results-cards .no-results-icon { font-size: 3.5rem; }

/* ── Beckett value row highlight ── */
.beckett-val { color: var(--yellow) !important; font-weight: 700 !important; }

/* ── Mobile filter panel — cards-specific labels ── */
.mfp-tooltip-cards {
  background: rgba(245,197,24,.08);
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .768rem;
  font-style: italic;
  line-height: 1.5;
  padding: 8px 12px;
  margin: 10px 0 14px;
}