/* Infographics page styles - tailored, minimal, leveraging base.css */

.infographics-hero {
  background: linear-gradient(135deg, rgba(26,47,79,0.85), rgba(44,74,124,0.75)), url('/assets/images/infog-overview.webp') center/cover no-repeat;
  color: var(--color-text-inverse);
  padding: var(--space-8) 0 var(--space-8);
}

.infographics-hero .hero-content { max-width: 960px; }
.infographics-hero h1 { color: var(--color-text-inverse); margin-bottom: var(--space-3); }
.infographics-hero p { color: var(--color-text-inverse); opacity: 0.95; }

.hero-search { margin-top: var(--space-5); }
.hero-search .input { border-color: transparent; box-shadow: var(--shadow-md); }

.filter-chips { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip[aria-pressed="true"], .chip.active {
  background-color: var(--color-secondary);
  color: var(--color-primary-dark);
  border-color: var(--color-secondary);
}

.breadcrumb { margin-bottom: var(--space-4); color: var(--color-text-inverse); opacity: 0.9; }
.breadcrumb ol { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-text-inverse); text-decoration: underline; }
.breadcrumb li+li::before { content: '/'; margin: 0 var(--space-2); opacity: 0.8; }

.infog-points { margin: var(--space-3) 0; padding-left: var(--space-4); }
.infog-points li { list-style: disc; margin-bottom: var(--space-2); color: var(--color-text-secondary); }

/* Cards image aspect for consistency */
.card-image { aspect-ratio: 16/9; object-fit: cover; }

/* CTA card */
.cta-more .card { border-left: 4px solid var(--color-secondary); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .infographics-hero { padding: var(--space-6) 0; }
}