@charset "UTF-8";
/* ==========================================================================
   news.html — page-specific styles
   Loaded after styles.css. Reuses tokens only; no new raw colours except
   with light+dark pairs declared here.
   NOTE: Arabic never receives letter-spacing — see SPEC rule 2. Every rule
   below either omits it or sets it explicitly to `normal`.
   ========================================================================== */

/* ---------- page-local tokens ---------- */
:root {
  --chip-bg:      var(--surface);
  --chip-line:    var(--line-2);
  --chip-ink:     var(--ink-2);
  --chip-bg-on:   var(--navy);
  --chip-ink-on:  #fff;
}
:root[data-theme="dark"] {
  --chip-bg-on:   var(--gold);
  --chip-ink-on:  #12203B;
}

/* ==========================================================================
   compact page hero
   ========================================================================== */
.pg-hero {
  padding: 150px var(--s5) var(--s7);
  background: var(--hero-sky);
  border-bottom: 1px solid var(--line);
}

.crumb {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 13.5px; color: var(--muted); margin-bottom: var(--s5);
  letter-spacing: normal;
}
.crumb a { color: var(--muted); transition: color .25s var(--ease); }
.crumb a:hover { color: var(--gold-ink); }
:root[data-theme="dark"] .crumb a:hover { color: var(--gold); }
.crumb-sep { opacity: .55; }
.crumb [aria-current] { color: var(--ink-2); }

.pg-hero h1 {
  font-size: clamp(32px, 5.2vw, 54px);
  margin-bottom: var(--s3);
}

.pg-standfirst {
  font-size: 17px; line-height: 1.75; color: var(--ink-2); max-width: 62ch;
}
.lnk-inline {
  color: var(--navy); font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-2);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.lnk-inline:hover { color: var(--gold-ink); text-decoration-color: currentColor; }
:root[data-theme="dark"] .lnk-inline { color: var(--gold); }

.pg-sec-top { padding-block-start: clamp(var(--s7), 8vw, var(--s8)); }

/* ==========================================================================
   lead story
   ========================================================================== */
.lead-story {
  display: grid; grid-template-columns: .95fr 1.15fr;
  gap: clamp(var(--s6), 6vw, var(--s8)); align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(var(--s5), 3vw, var(--s6)); box-shadow: var(--shadow-m);
}

.lead-media { margin: 0; position: relative; }
.lead-media img {
  width: 100%; height: 100%; max-height: 560px; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2);
}
.lead-media figcaption {
  margin-top: var(--s2); font-size: 12px; color: var(--muted); line-height: 1.6;
}

.lead-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: normal;
  color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 14%, transparent);
  padding: 5px 13px; border-radius: 999px; margin-bottom: var(--s4);
}
:root[data-theme="dark"] .lead-tag { color: var(--gold); }
.lead-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.lead-body h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: var(--s4); }
.lead-body .prose { margin-bottom: var(--s5); }
.lead-body .prose p { max-width: none; }

.lead-sub-img { margin: 0; border-top: 1px solid var(--line); padding-top: var(--s5); }
.lead-sub-img img {
  width: 100%; height: auto; max-height: 260px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2);
}
.lead-sub-img figcaption {
  margin-top: var(--s2); font-size: 12px; color: var(--muted); line-height: 1.65; max-width: 60ch;
}

/* ==========================================================================
   filter + sort toolbar
   ========================================================================== */
.nf-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s4);
}

.nf-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  font-family: var(--ar-body); font-size: 14px; font-weight: 500; letter-spacing: normal;
  color: var(--chip-ink); background: var(--chip-bg); border: 1px solid var(--chip-line);
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.chip:hover { border-color: var(--navy); color: var(--ink); transform: translateY(-1px); }
:root[data-theme="dark"] .chip:hover { border-color: var(--gold); }
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--chip-bg-on); color: var(--chip-ink-on); border-color: transparent;
}
.chip.is-active:hover, .chip[aria-pressed="true"]:hover { transform: none; }

.nf-sort { display: flex; align-items: center; gap: var(--s2); }
.nf-sort label { font-size: 13.5px; color: var(--muted); letter-spacing: normal; }
.nf-sort select {
  font-family: var(--ar-body); font-size: 14px; letter-spacing: normal;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 9px 14px; cursor: pointer;
  transition: border-color .25s var(--ease);
}
.nf-sort select:hover { border-color: var(--navy); }
:root[data-theme="dark"] .nf-sort select:hover { border-color: var(--gold); }

.nf-status {
  font-size: 13.5px; color: var(--muted); margin-bottom: var(--s5);
  font-variant-numeric: tabular-nums; letter-spacing: normal;
}

/* ==========================================================================
   news grid
   ========================================================================== */
.nf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

.nf-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--s5); border-top: 3px solid var(--gold);
  transition: transform .35s var(--ease-o), box-shadow .35s var(--ease-o);
}
.nf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.nf-card[hidden] { display: none; }

.nf-card h3 { font-size: 19.5px; line-height: 1.45; margin: var(--s2) 0 var(--s3); }
.nf-x { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.nf-x a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .nf-x a { color: var(--gold); }

.nf-empty {
  text-align: center; padding: var(--s7) var(--s4); color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: 14px; font-size: 15px;
}

/* ==========================================================================
   honest scope note
   ========================================================================== */
.nf-note {
  border: 1px dashed var(--line-2); border-radius: 16px;
  padding: var(--s6) var(--s5); text-align: center; max-width: 68ch; margin-inline: auto;
}
.nf-note h3 {
  font-size: 18px; color: var(--gold-ink); margin-bottom: var(--s2); letter-spacing: normal;
}
:root[data-theme="dark"] .nf-note h3 { color: var(--gold); }
.nf-note p { font-size: 14.5px; color: var(--muted); line-height: 1.75; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1040px) {
  .nf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .pg-hero { padding-top: 130px; }
  .lead-story { grid-template-columns: 1fr; }
  .lead-media img { max-height: 380px; }
}

@media (max-width: 620px) {
  .pg-hero { padding-top: 118px; }
  .nf-grid { grid-template-columns: 1fr; }
  .nf-toolbar { flex-direction: column; align-items: stretch; }
  .nf-sort { justify-content: space-between; }
  .nf-chips { justify-content: flex-start; }
}

@media (max-width: 400px) {
  .chip { padding: 8px 15px; font-size: 13.5px; }
  .lead-story { padding: var(--s4); }
}