/* Articles page specific styles (kept minimal; leverages base.css) */
.articles-hero {
  background: linear-gradient(135deg, rgba(26, 47, 79, 0.9), rgba(44, 74, 124, 0.85)), url('/assets/images/ck-articles-hero.webp') center/cover no-repeat;
  color: var(--color-text-inverse);
}

.articles-hero .hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
  min-height: 520px;
  padding: var(--space-8) 0;
}

.articles-hero .hero-copy h1 { color: var(--color-text-inverse); }
.articles-hero .hero-tagline { color: var(--color-text-inverse); max-width: 60ch; opacity: 0.95; }

.breadcrumbs { display:inline-flex; gap: var(--space-2); align-items:center; margin-bottom: var(--space-4); }
.breadcrumbs li { color: var(--color-text-inverse); font-size: var(--font-size-sm); }
.breadcrumbs li+li::before { content: '\203A'; margin: 0 var(--space-2); opacity: 0.7; }
.breadcrumbs a { color: var(--color-secondary-light); }

.hero-search { margin: var(--space-5) 0 var(--space-4); max-width: 640px; }

.filters-bar { display:flex; flex-wrap:wrap; gap: var(--space-2); }
.chip {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-full);
  background: rgba(201, 169, 97, 0.12);
  color: var(--color-text-inverse);
  transition: all var(--transition-fast);
}
.chip:hover { background: rgba(201, 169, 97, 0.22); transform: translateY(-1px); }
.chip:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }
.chip-active { background: var(--color-secondary); color: var(--color-primary-dark); }

.sort-row { display:flex; align-items:center; gap: var(--space-3); margin-top: var(--space-4); }

.hero-media { display: none; }
@media (min-width: 992px) {
  .hero-media { display:block; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-xl); }
  .hero-media img { display:block; width:100%; height:auto; object-fit: cover; }
}

.meta-row { display:flex; align-items:center; gap: var(--space-3); margin-top: var(--space-3); color: var(--color-text-muted); }
.meta-date { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.card-figure { aspect-ratio: 16 / 10; overflow:hidden; }
.card-figure img { width:100%; height:100%; object-fit: cover; }

.callout-more .card { border-left: 4px solid var(--color-secondary); }

/* Grid responsiveness uses base utilities; ensure comfortable spacing */
@media (max-width: 1024px) {
  .articles-hero .hero-inner { grid-template-columns: 1fr; min-height: auto; }
}