/* Articles page styles - scoped with .articles- prefix to avoid conflicts */
:root {
  --articles-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  --articles-card-bg: #0f1a12; /* deep greenish to match earthy palette */
  --articles-card-bd: #2b472f;
  --articles-accent: #5bbd66;
  --articles-accent-2: #8bd18f;
  --articles-text: #e9f3ea;
  --articles-muted: #a9c0ad;
}

.articles-hero {
  padding: clamp(1rem, 4vw, 3rem) 0;
  background: linear-gradient(180deg, #132217 0%, #0b150e 100%);
  border-bottom: 4px solid #1f3524;
}
.articles-hero__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--articles-gap);
  align-items: center;
  width: min(1200px, 92%);
  margin: 0 auto;
}
.articles-hero__text h1 { margin: 0 0 .5rem; color: var(--articles-text); }
.articles-hero__text p { margin: 0; color: var(--articles-muted); max-width: 60ch; }
.articles-hero__media img { width: 100%; height: auto; border-radius: 6px; image-rendering: pixelated; border: 3px solid #1f3524; }

/* Filters */
.articles-controls { padding: 1rem 0; background: #0b150e; border-bottom: 1px solid #1a2a1e; }
.articles-filters { width: min(1200px, 92%); margin: 0 auto; display: grid; gap: var(--articles-gap); }
.articles-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.articles-filters__label { color: var(--articles-text); font-weight: 600; }
.articles-filters__hint { color: var(--articles-muted); font-size: .9rem; }
.articles-filters input[type="search"] {
  flex: 1 1 320px;
  background: #0f1a12; color: var(--articles-text);
  border: 2px solid #1f3524; border-radius: 6px; padding: .65rem .75rem;
}
.articles-chip {
  background: #0f1a12; color: var(--articles-text);
  border: 2px solid #1f3524; padding: .4rem .7rem; border-radius: 6px;
  cursor: pointer; transition: background .2s ease, transform .06s ease;
}
.articles-chip:hover { background: #122417; }
.articles-chip.is-active, .articles-chip[aria-pressed="true"] { border-color: var(--articles-accent); box-shadow: 0 0 0 2px rgba(91,189,102,.15) inset; }
.articles-chip--clear { color: #ffd1a6; border-color: #6b3b1b; background: #1b120b; }
.articles-chip--clear:hover { background: #23170e; }
.articles-results { width: 100%; margin: 0; color: var(--articles-muted); }

/* Grid */
.articles-list { padding: clamp(1rem, 2.5vw, 2rem) 0 3rem; background: #0b150e; }
.articles-grid { width: min(1200px, 92%); margin: 0 auto; display: grid; gap: var(--articles-gap); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Cards */
.articles-card { display: grid; grid-template-rows: auto 1fr; background: var(--articles-card-bg); border: 3px solid var(--articles-card-bd); border-radius: 8px; overflow: hidden; }
.articles-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; image-rendering: pixelated; }
.articles-card__body { display: grid; gap: .5rem; padding: .85rem .9rem 1rem; color: var(--articles-text); }
.articles-card__body.no-media { padding-top: 1.1rem; }
.articles-card__title { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.articles-card__title a { color: var(--articles-text); text-decoration: none; }
.articles-card__title a:hover { text-decoration: underline; }
.articles-card__excerpt { color: var(--articles-muted); margin: 0; }
.articles-card__meta { display: flex; align-items: center; gap: .5rem; color: var(--articles-muted); font-size: .95rem; }
.articles-meta__dot { opacity: .6; }
.articles-tag { background: #133b1b; color: var(--articles-accent-2); border: 1px solid #1e6a30; padding: .15rem .45rem; border-radius: 5px; font-size: .85rem; }
.articles-card__cta { justify-self: start; margin-top: .25rem; background: var(--articles-accent); color: #08130b; border: 2px solid #2c6f38; padding: .45rem .7rem; border-radius: 6px; text-decoration: none; font-weight: 700; box-shadow: 0 2px 0 #23572c; }
.articles-card__cta:hover { filter: brightness(1.05); }
.articles-card__cta:active { transform: translateY(1px); box-shadow: 0 1px 0 #23572c; }

.articles-empty { width: min(1200px, 92%); margin: 1rem auto 0; color: var(--articles-muted); text-align: center; }

/* Pagination placeholder */
.articles-pagination { width: min(1200px, 92%); margin: 1rem auto; display: flex; gap: .5rem; }
.articles-pagination a { color: var(--articles-text); text-decoration: none; border: 1px solid #1f3524; border-radius: 6px; padding: .4rem .7rem; }
.articles-pagination a[aria-current="page"] { background: #133b1b; border-color: var(--articles-accent); }

/* Responsive */
@media (max-width: 880px) {
  .articles-hero__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}