/* ==========================================================================
   THE AMERICA AWARDS 2026 — Categories page
   Page-specific styles only. Extends the existing token/base/component
   system (tokens.css, base.css, components.css) — never overrides them.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * PAGE HERO (text-only — no photography, per page scope)
 * ---------------------------------------------------------------------- */
.cat-hero {
  padding: calc(var(--space-2xl) + 70px) 0 var(--space-2xl);
  text-align: center;
  background: var(--graphite-950);
  color: var(--ink-on-dark);
}
.cat-hero__inner { max-width: 760px; margin-inline: auto; }
.cat-hero h1 { font-size: var(--step-5); text-wrap: balance; }
.cat-hero__sub {
  margin-top: var(--space-md);
  font-size: var(--step-1);
  color: var(--ink-on-dark-muted);
  max-width: 58ch;
  margin-inline: auto;
}
.cat-hero__free-note {
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--gold);
}
.cat-hero .btn-row { justify-content: center; margin-top: var(--space-lg); }

/* ---------------------------------------------------------------------- *
 * HOW TO READ THE CATEGORIES
 * ---------------------------------------------------------------------- */
.cat-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.cat-legend__item {
  border: 1px solid rgba(23, 23, 26, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
}
.cat-legend__item h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin-bottom: 0.4em;
}
.cat-legend__item p { font-size: var(--step--1); color: var(--text-secondary-muted); }
.cat-legend__note {
  margin-top: var(--space-md);
  font-size: var(--step--1);
  color: var(--text-secondary-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------- *
 * ELIGIBILITY BADGES (shared across sections)
 * ---------------------------------------------------------------------- */
.elig-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.22em 0.65em;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* dark-section (default) badge coloring */
.elig-badge--individual { color: var(--gold); border-color: var(--border-gold); }
.elig-badge--business { color: var(--ink-on-dark-faint); border-color: var(--border-dark); }
.elig-badge--dual { color: var(--gold); border-color: var(--border-gold); background: var(--gold-soft); }

/* ---------------------------------------------------------------------- *
 * THEMATIC VERTICALS
 * ---------------------------------------------------------------------- */
.cat-verticals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.cat-vertical {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.cat-vertical__label {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.cat-vertical__count {
  font-size: var(--step--1);
  color: var(--ink-on-dark-faint);
}
.cat-vertical__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin-top: 0.25em;
  margin-bottom: var(--space-sm);
}
.cat-vertical__list { display: grid; gap: 0.6em; }
.cat-vertical__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--step-0);
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border-dark);
}
.cat-vertical__list li:last-child { border-bottom: none; padding-bottom: 0; }
.cat-vertical__list li span:first-child { min-width: 0; }

@media (max-width: 860px) {
  .cat-verticals { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- *
 * PREMIER HONORS (closing, premium treatment)
 * ---------------------------------------------------------------------- */
.cat-premier {
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--gold-soft), transparent 60%);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.cat-premier__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  max-width: 780px;
  margin-inline: auto;
}
.cat-premier__item {
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.cat-premier__item h3 { font-family: var(--font-display); font-size: var(--step-1); }
.cat-premier__note {
  margin-top: var(--space-lg);
  font-size: var(--step--1);
  color: var(--ink-on-dark-muted);
  max-width: 60ch;
  margin-inline: auto;
}
@media (max-width: 640px) {
  .cat-premier__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- *
 * SECTION-LEVEL CTA (used between major sections, and mid-page)
 * ---------------------------------------------------------------------- */
.cat-inline-cta {
  margin-top: var(--space-xl);
  text-align: center;
}
.cat-inline-cta .btn-row { justify-content: center; margin-top: var(--space-sm); }

@media (max-width: 640px) {
  .cat-legend { grid-template-columns: 1fr; }
}