/* Articles Page Styles - PLCivilization */
.articles-hero {
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}
.articles-hero .lead {
  color: var(--color-text-secondary);
  max-width: var(--content-max-width);
}

.article-tools {
  margin-top: var(--space-6);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.filters .btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}
.results-count {
  margin-top: var(--space-3);
}

/* Articles grid and cards */
.articles-grid .article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.article-thumb {
  aspect-ratio: 16/9;
  margin-bottom: var(--space-4);
  background: var(--color-bg-elevated);
}
.article-card .card-footer {
  margin-top: auto;
}

/* Responsiveness */
@media (max-width: 768px) {
  .articles-hero { padding-top: var(--space-12); }
  .filters { gap: var(--space-2); }
}