/* Articles Page Styles - PortalPL */

.articles-hero {
  padding: var(--space-16) 0 var(--space-12);
  background: radial-gradient(80rem 40rem at 10% -10%, rgba(74,158,255,0.12), transparent 60%),
              radial-gradient(60rem 30rem at 100% 10%, rgba(0,217,255,0.10), transparent 50%);
  border-bottom: 1px solid var(--color-neutral-800);
}

.articles-hero .hero-copy .kicker { margin-bottom: var(--space-3); }
.articles-hero .hero-actions .btn + .btn { margin-left: var(--space-3); }

.hero-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.articles-controls { padding: var(--space-10) 0 var(--space-6); }
.controls-form { width: 100%; }
.controls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .controls-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.articles-list { padding: var(--space-8) 0 var(--space-16); }

/* Article Card */
.article-card { display: block; height: 100%; }
.article-card .article-link { display: block; color: inherit; }
.article-media { margin: 0 0 var(--space-4) 0; }
.article-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.article-title { margin-bottom: var(--space-3); }
.article-excerpt { margin-bottom: var(--space-4); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.more-actions { margin-top: var(--space-10); }

/* Utility overrides for small screens */
@media (max-width: 767px) {
  .articles-hero { padding: var(--space-12) 0 var(--space-8); }
}