/* ==================== NEWS PAGE ====================== */
h1 {
  text-align: center;
}
.news-hero-section {
  margin-top: var(--space-12);
  margin-bottom: var(--space-16);
}
.lead {
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
  max-width: 45ch;
  margin-bottom: var(--space-6);
}
.news-search-form {
  display: flex;
  gap: var(--space-2);
  max-width: 440px;
  margin: 0 auto;
}
.news-search-form .input {
  flex: 1;
}
.news-search-form button {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.news-topics-nav {
  margin-bottom: var(--space-8);
}
.news-topics-list {
  flex-wrap: wrap;
  gap: var(--space-2) !important;
}
.news-topic-chip {
  background: var(--color-gray-50);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: var(--space-2);
  transition: background var(--transition), color var(--transition), border var(--transition);
}
.news-topic-chip.active,
.news-topic-chip:focus-visible,
.news-topic-chip:hover {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary-light);
  outline: none;
}

.news-sections,
.news-videos-local,
.news-opinion-interview {
  margin-bottom: var(--space-16);
}
.news-headlines-section,
.news-featured-section,
.news-video-section,
.news-local-section,
.news-opinion-section,
.news-interviews-section {
  margin-bottom: var(--space-8);
}
.news-headlines-list,
.news-local-list,
.news-briefs-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-4);
}
.news-headline-link,
.news-local-link,
.news-feature-link,
.news-opinion-link,
.news-interview-link {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: var(--space-2) 0;
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.news-headline-link:hover,
.news-headline-link:focus-visible,
.news-local-link:hover,
.news-local-link:focus-visible {
  background: var(--color-gray-50);
}
.news-headline h3,
.news-local-item h3 {
  font-size: 1.075rem;
  color: var(--color-primary);
}
.news-summary {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  margin-bottom: 0.5em;
}
.news-date {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-1);
  display: block;
}
.news-headline-cta,
.news-local-cta {
  margin: var(--space-2) 0 0 0;
}

.news-feature {
  margin-bottom: var(--space-6);
}
.news-feature-link {
  padding: 0;
}
.news-feature h3 {
  color: var(--color-primary);
  font-size: 1.18rem;
}

.news-video-list {
  gap: var(--space-4);
}
.news-video img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-sm);
}
.news-video h3 {
  font-size: var(--font-size-md);
  margin-top: var(--space-2);
}

.news-opinion-section .news-opinion,
.news-interviews-section .news-interview {
  margin-bottom: var(--space-4);
}

.news-briefs-section {
  margin-bottom: var(--space-8);
}
.news-briefs-list {
  list-style: none;
  padding: 0;
  margin: 32px auto;
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}
.news-briefs-list li {
  margin-bottom: var(--space-1);
}

.news-popular-topics-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  min-width: 240px;
}
.news-popular-topics-list {
  list-style: none;
  margin: 25px auto;
  padding: 0;
}
.news-popular-topics-list li + li {
  margin-top: var(--space-1);
}
.news-popular-topics-list a {
  color: var(--color-primary);
  font-weight: 600;
}
.news-topic-cta {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.news-newsletter-section {
  margin: var(--space-16) auto var(--space-12) auto;
  text-align: center;
  max-width: 460px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-4);
}
.subscribe-form {
  margin: var(--space-2) 0;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.newsletter-note {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
}

@media (max-width: 900px) {
  .news-sections,
  .news-videos-local,
  .news-opinion-interview {
    grid-template-columns: 1fr !important;
  }
  .news-video-list {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 700px) {
  .news-hero-section {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .news-newsletter-section {
    margin: var(--space-8) auto var(--space-8) auto;
    padding: var(--space-4) var(--space-2);
  }
}