/* Homepage-specific styles only.
   All shared layout lives in layout.css and components.css. */

/* ============================================================
   TOPIC FILTER ROW
   Sits between hero and news strip.
   ============================================================ */

.topic-filter {
  padding: var(--space-6) 0;
  border-bottom: var(--border);
}

.topic-filter-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}

.topic-filter-inner::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   SPONSOR STRIP
   ============================================================ */

.sponsor-strip {
  background-color: var(--color-locked-bg);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: var(--space-4) 0;
}

.sponsor-strip-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sponsor-strip-label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.sponsor-strip-body {
  font-size: var(--text-13);
  color: var(--color-ink-2);
  line-height: var(--leading-normal);
}

.sponsor-strip-body strong {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

.sponsor-strip-link {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.sponsor-strip-link:hover {
  opacity: 0.75;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .sponsor-strip-body { display: none; }
  .masthead { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-lead-title { font-size: var(--text-24); }
  .layout-body { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .topic-strip-inner { overflow-x: auto; white-space: nowrap; }
}