/* News page styles — scoped to .news-page to avoid conflicts with base.css */

.news-page { color-scheme: light dark; }

/* Hero */
.news-hero { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 3vw, 3rem) 0; }
.news-hero__content { padding-inline: var(--container-padding, 1rem); max-width: var(--container-max, 1200px); margin-inline: auto; }
.news-hero__subtitle { margin-top: .5rem; color: var(--text-muted, #6b7280); }
.news-controls { margin-top: 1rem; display: grid; gap: .75rem; }
.news-controls__search { width: 100%; max-width: 720px; padding: .75rem 1rem; border: 2px solid var(--border, #d1d5db); border-radius: 8px; background: var(--surface, #fff); color: inherit; }
.news-controls__search:focus { outline: 3px solid #22c55e; outline-offset: 2px; }
.news-controls__hint { font-size: .9rem; color: var(--text-muted, #6b7280); }
.news-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.news-filter { padding: .5rem .75rem; border: 2px solid #16a34a; background: #16a34a; color: #fff; border-radius: 10px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 2px 0 #14532d; transition: transform .06s ease, box-shadow .06s ease, background .2s ease; }
.news-filter:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #14532d; }
.news-filter[aria-pressed="false"] { background: #0ea5e9; border-color: #0ea5e9; box-shadow: 0 2px 0 #075985; }
.news-filter.is-active { background: #16a34a; border-color: #16a34a; }
.news-results { margin-top: .25rem; font-size: .95rem; color: var(--text-muted, #6b7280); }

.news-hero__figure { overflow: clip; border-radius: 12px; max-width: var(--container-max, 1200px); margin-inline: auto; width: calc(100% - 2rem); }
.news-hero__figure img { width: 100%; height: auto; display: block; image-rendering: pixelated; }

/* Sections */
.news-section { padding: clamp(1.5rem, 3vw, 3rem) 0; border-top: 1px dashed rgba(0,0,0,.08); }
.news-section__header { padding-inline: var(--container-padding, 1rem); max-width: var(--container-max, 1200px); margin-inline: auto; margin-bottom: 1rem; }
.news-section__desc { color: var(--text-muted, #6b7280); }

/* Grid */
.news-grid { --col: minmax(260px, 1fr); display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, var(--col)); padding-inline: var(--container-padding, 1rem); max-width: var(--container-max, 1200px); margin-inline: auto; }

/* Card */
.news-card { display: grid; background: var(--surface, #ffffff); border: 2px solid #e5e7eb; border-radius: 12px; overflow: clip; box-shadow: 0 6px 0 #d1d5db; transition: transform .12s ease, box-shadow .12s ease; }
.news-card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #cbd5e1; }
.news-card__image-link { display: block; aspect-ratio: 16 / 9; background: #0b5; }
.news-card__image-link img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.news-card__body { padding: 1rem; display: grid; gap: .5rem; }
.news-card__title { font-size: 1.1rem; line-height: 1.3; }
.news-card__meta { font-size: .875rem; color: var(--text-muted, #6b7280); }
.news-card__excerpt { color: var(--text, inherit); }

/* CTA buttons — rely on existing .btn styles if provided; add fallback */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 700; border: 2px solid transparent; }
.btn--primary { background: #16a34a; color: #fff; border-color: #16a34a; box-shadow: 0 3px 0 #14532d; }
.btn--secondary { background: #0ea5e9; color: #082f49; border-color: #0ea5e9; box-shadow: 0 3px 0 #075985; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn:focus { outline: 3px solid #22c55e; outline-offset: 2px; }

/* More info text */
.news-more-info { padding-inline: var(--container-padding, 1rem); max-width: var(--container-max, 1200px); margin: 1rem auto 0; color: var(--text-muted, #6b7280); }
.news-more-info a { color: #16a34a; text-decoration: underline; }

/* Utilities */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }

@media (min-width: 960px) {
  .news-hero { grid-template-columns: 1.1fr .9fr; padding-bottom: 0; }
  .news-hero__figure { width: 100%; }
}