/* ═══════════════════════════════════════════════════════════════════
   category.css — Category landing page styles
   Unlayered (page-scope overrides, same as other pages/*.css)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Category Header Banner Image ───────────────────────────────── */
.category-hero__banner {
  margin: 0;
  line-height: 0;
  overflow: hidden;
}

.category-hero__banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center;
}

/* Reduce top padding when banner is present */
.category-hero__banner + .category-hero {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* ── Category Hero ─────────────────────────────────────────────── */
.category-hero {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.category-hero__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

.category-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--text-emphasis);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-headline);
  margin-bottom: var(--space-3);
}

.category-hero__description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-body);
  max-width: var(--prose-width);
  margin-inline: auto;
}

/* ── Category accent colors ────────────────────────────────────── */
.category-hero--empire-resistance    .category-hero__title { color: #C0392B; }
.category-hero--us-politics          .category-hero__title { color: #2E86C1; }
.category-hero--borders-migration    .category-hero__title { color: #D35400; }
.category-hero--class-labor          .category-hero__title { color: #8E44AD; }
.category-hero--animal-liberation    .category-hero__title { color: #196F3D; }
.category-hero--ecology-capital      .category-hero__title { color: #1ABC9C; }
.category-hero--culture-commodity    .category-hero__title { color: #F39C12; }
.category-hero--theory-method        .category-hero__title { color: #7F8C8D; }

/* ── Divider ───────────────────────────────────────────────────── */
.category-divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: var(--space-4) auto;
  max-width: var(--prose-width);
}

/* ── Placeholder / coming soon ─────────────────────────────────── */
.category-placeholder {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
}

.category-placeholder__icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
  opacity: 0.4;
}

.category-placeholder__text {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-faint);
  letter-spacing: var(--tracking-ui);
}

.category-placeholder__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--red-primary);
  border: 1px solid var(--red-dimmed);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.category-placeholder__link:hover {
  background: var(--red-primary);
  color: var(--bg-main);
}

/* ── Article count ─────────────────────────────────────────────── */
.category-article-count {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.category-article-count__number {
  color: var(--red-primary);
  font-weight: var(--weight-semibold);
}

/* ── Article grid (reuse articles.css grid pattern) ───────────── */
.category-articles {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.category-articles .article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .category-articles .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .category-articles .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}