:root{
  --red: #ed1f25;
  --blue: #253570;
  --blue-mid:#1b2a59;
  --blue-dark:#0a1f3f;
  --red-dark:#6c0e12;
  --gold:#f9ec17;
  --gold-light:#fff36a;
  --ink:#0b1220;
  --muted:#8ea0c5;
  --glass: rgba(255,255,255,0.7);
  --shadow: 0 12px 30px rgba(0,0,0,.25);
}

html,body{ padding-top: 4vh; }
a { color: inherit; }

/* Containers */
.wrap{ width:min(1100px, 92%); margin-inline:auto; }

/* Hero headers */
.news-hero{
  background: linear-gradient(120deg, var(--blue-dark), var(--blue-mid));
  color:#fff;
  padding: 28px 0 22px;
  box-shadow: var(--shadow);
}
.news-hero h1{ margin:0; font-size: clamp(28px, 4vw, 44px); letter-spacing:.2px; }
.news-filters{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.news-filters input{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:10px 12px; min-width:160px;
}
.news-filters .btn{
  background: linear-gradient(180deg, var(--red), var(--red-dark) 85%);
  border:2px solid color-mix(in oklab, var(--gold) 35%, black);
  color:#1a1400; font-weight:900; border-radius:12px; padding:10px 16px; cursor:pointer;
}

/* Cards grid */
.news-grid{
  margin: 18px 0 36px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){ .news-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .news-grid{ grid-template-columns: 1fr; } }

.news-card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:18px; box-shadow: 0 10px 26px rgba(0,0,0,.12);
  overflow:hidden; transform: translateZ(0);
  transition: transform .2s ease, box-shadow .25s ease;
}
.news-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,.18); }
.news-card .title {color: #0a1f3f;}
.news-card .card-link{ display:grid; text-decoration:none; color:inherit; grid-template-rows:auto 1fr; height:100%; }
.news-card .thumb{ aspect-ratio: 4 / 3; background: #0a1f3f; overflow:hidden; }
.news-card .thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.news-card .meta{ padding:14px; display:grid; align-content:start; gap:8px; }
.news-card .title{ margin:0; font-size: clamp(16px, 2vw, 20px); font-weight:900; line-height:1.2; }
.news-card .summary{ margin:0; color:#47608f; font-size:14px; }
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.pill{ padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid rgba(0,0,0,.08); background:#f0f4ff; color:#24355f; }
.pill.date{ background: #e9e9ff; color:#4a3a00; border-color:#25357070; }
.pill.tag { background: #e9e9ff; color:#253570; }

/* Pager */
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin: 8px 0 40px; }
.pager .btn.ghost{
  background: rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.1); border-radius:999px; padding:8px 14px; text-decoration:none;
}
.pager [aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.page-indicator{ font-size:14px; color:#47608f; }

/* Article page */
.article-hero{
  background: linear-gradient(120deg, var(--blue-dark), var(--blue-mid));
  color:#fff; padding: 18px 0 0;
}
.crumbs{ font-size:13px; opacity:.85; display:flex; gap:6px; align-items:center; }
.crumbs a{ text-decoration:none; color:#fff; opacity:.9; }
.article-hero h1{ margin:8px 0 10px; font-size: clamp(26px, 4.6vw, 44px); }
.article-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.hero-media{ margin:16px auto 0; max-width: 700px; }
.hero-media img{ display:block; width:100%; height:auto; }

.article-body{ padding: 16px 0 40px;}

.lead{ color:#ffffff; font-weight:600; }
.prose p{ line-height:1.7; color:#fff; }
.prose img{ max-width:100%; height:auto; border-radius:12px; }
.prose h2, .prose h3{ color:#fff; margin-top:1.2em; }

.article-actions{ display:flex; gap:10px; margin-top:18px; }
.btn{ background: linear-gradient(180deg, var(--gold), var(--gold-light) 85%); border:2px solid color-mix(in oklab, var(--gold) 35%, black); color:#1a1400; font-weight:900; border-radius:999px; padding:10px 16px; cursor:pointer; }
.btn.ghost{ background:#fff; border:1px solid rgba(0,0,0,.1); color: #0a1f3f !important;}

.article-nav{ display:flex; justify-content:space-between; margin: 26px 0 0; }
.article-nav a{ text-decoration:none; color: var(--blue); font-weight:800; }

/* Small helpers */
.muted{ color:#6f82ad; }


.article-nav.thumbs{
  display:flex; justify-content:space-between; gap:14px;
  margin-top: 28px;
}

.article-nav.thumbs a{
  flex:1 1 0;
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
  padding:10px 12px; border-radius:14px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  min-width: 0; /* allow text ellipsis */
}

.article-nav.thumbs a:hover{
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.article-nav.thumbs a.prev { justify-content:flex-start; }
.article-nav.thumbs a.next { justify-content:flex-end; }

.article-nav.thumbs .arrow{
  font-weight:900; font-size:20px; line-height:1;
  opacity:.7; flex: 0 0 auto;
}

/* Thumbnail */
.article-nav.thumbs .thumb{
  width: 92px; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow:hidden; flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  background: #f2f4f8;
}
.article-nav.thumbs .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Text */
.article-nav.thumbs .meta{
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.article-nav.thumbs .meta em{
  font-style:normal; font-size:12px; opacity:.7; letter-spacing:.04em;
  text-transform:uppercase;
}
.article-nav.thumbs .meta strong{
  font-size:14px; font-weight:800; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Theme polish */
.article-nav.thumbs a:hover .meta em{ color: var(--red); }
.article-nav.thumbs a:hover .arrow{ color: var(--red); }

/* Mobile: stack */
@media (max-width: 640px){
  .article-nav.thumbs{ flex-direction:column; }
  .article-nav.thumbs a{ justify-content:flex-start; }
  .article-nav.thumbs a.next{ justify-content:flex-start; }
  .article-nav.thumbs .thumb{ width: 110px; }
}


/* ========================
   Dark header legibility
   ======================== */
.news-hero,
.article-hero{
  color:#eef3ff; /* brighter body text on dark */
}

.news-hero h1,
.article-hero h1{ color:#fff; }

.news-hero .crumbs,
.article-hero .crumbs{ opacity:.95; }

.news-hero .lead,
.article-hero .lead{ color:#cfd8f7; } /* softer, readable on dark */

.news-hero a,
.article-hero a{ color:#fff; }

/* Pills on dark backgrounds */
.news-hero .pill,
.article-hero .pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color:#fff;
}

/* Filters on dark backgrounds */
.news-hero .news-filters input{
  background: rgba(255,255,255,.96);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.18);
}
.news-hero .news-filters input::placeholder{ color:#53658e; }

/* ========================
   Buttons – enforce text color
   ======================== */
/* Primary (gold) already dark text */
.btn{
  background: linear-gradient(180deg, var(--gold), var(--gold-light) 85%);
  border: 2px solid color-mix(in oklab, var(--gold) 35%, black);
  color: #1a1400;            /* <-- readable on gold */
  font-weight: 900;
}

/* Ghost: white background must have dark text */
.btn.ghost{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: var(--ink);         /* <-- fixes white-on-white issue */
}

/* If you use link-style buttons inside dark sections */
.news-hero .btn.link,
.article-hero .btn.link{
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
}

/* Any button inside the dark headers that ends up with a light bg should still be dark text */
.news-hero .btn.ghost,
.article-hero .btn.ghost{ color: var(--ink); }

/* Pager ghost buttons (white bg) must be dark text too */
.pager .btn.ghost{ color: var(--ink); }

/* Focus ring for accessibility on dark/light */
.btn:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ========================
   Misc readability polish
   ======================== */
.muted{ color:#9fb1da; }           /* better on dark */
.news-card .summary{ color:#3a4f82; }

.article-nav a{ color: var(--blue); } /* article body is light, keep dark link */