/* =====================================================================
   NEWS-DETAILS PAGE: a single news article (تفاصيل الخبر).
   Loaded on pages/news-details-*.html. Built on the shared tokens + motifs.
   Editorial layout that reads start -> end (no centered sections): the meta
   and prose hug the start edge, the dome-framed hero leads, and the page
   closes with prev/next navigation across the other stories.
   Every selector is namespaced under .nd-* so other pages are never touched.
   ===================================================================== */

/* ---------- MASTHEAD TITLE ----------
   The shared .page-hero h1 is monumental (up to 76px), tuned for short page
   titles. A news headline is a full sentence, so it is sized down here to an
   article-headline scale. Loaded only on the detail pages. */
.nd-masthead h1 { font-size: clamp(25px, 2.6vw, 40px);
  line-height: var(--leading-snug); }

/* ---------- PHOTO MASTHEAD (news-detail variant) ----------
   A news headline is a full sentence that covers the whole band, so the
   shared directional veil (dark start, bright end) would leave the end of
   the headline over a bright building. Here the building is a quiet textured
   backdrop, not a feature: dim the photo and lay an even warm veil over it
   (a touch deeper at the foot) so the long breadcrumb and multi-line headline
   hold contrast across the full width. */
.nd-masthead .ph-bg img { filter: saturate(.9) sepia(.18) brightness(.5); }
.nd-masthead:has(.ph-bg)::before {
  background:
    linear-gradient(180deg, rgba(46,34,16,.34) 0%, rgba(26,19,8,.30) 45%, rgba(14,10,4,.5) 100%),
    rgba(20,14,6,.5); }

/* ---------- ARTICLE BAND ---------- */
.nd-article { background: var(--bg-page); }
.nd-article .wrap { position: relative; }

/* ---------- META (date) ---------- */
.nd-meta { display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 14px; color: var(--aegold-700);
  margin-block-end: var(--space-8); }
.nd-meta .ic { width: 16px; height: 16px; }

/* ---------- HERO IMAGE / GALLERY ----------
   Detail photos keep one fixed visual height across all stories. Single-image
   articles use .nd-hero; multi-image articles use .nd-gallery with the same
   image sizing plus carousel controls. */
.nd-hero,
.nd-gallery { margin: 0 0 clamp(32px, 4vw, 56px); }
.nd-hero { overflow: hidden; border-radius: var(--radius-md);
  background: var(--bg-surface); border: 1px solid var(--line); }
.nd-hero img,
.nd-slide img { display: block; width: 100%; height: clamp(320px, 46vw, 560px);
  object-fit: cover; object-position: center; }
.nd-gallery { position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: var(--bg-surface); border: 1px solid var(--line); }
.nd-gallery-track { direction: ltr; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nd-gallery-track::-webkit-scrollbar { display: none; }
.nd-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.nd-gallery-ctrl { position: absolute; inset-block: 0; inset-inline: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-6); pointer-events: none; }
.nd-gallery-btn { pointer-events: auto; width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.44);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard),
  border-color var(--duration-fast) var(--ease-standard); }
.nd-gallery-btn:hover { background: rgba(0,0,0,.62); border-color: #fff; }
.nd-gallery-btn .ic { width: 20px; height: 20px; }
.nd-gallery-next .ic { transform: scaleX(-1); }
.nd-gallery-count { position: absolute; inset-block-end: var(--space-6);
  inset-inline-start: 50%; transform: translateX(-50%); min-width: 54px;
  height: 30px; padding-inline: 12px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); color: #fff; font-family: var(--font-mono);
  font-size: 13px; pointer-events: none; }

/* ---------- BODY PROSE ----------
   Full content width (no narrow reading cap), aligned start -> end. */
.nd-body { max-width: none; }
.nd-body > p { font-family: var(--font-body); font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.95; color: var(--aeblack-700); margin: 0 0 1.35em; }
.nd-body > p:last-child { margin-block-end: 0; }

/* Lead paragraph: the opening line reads a touch larger and darker. */
.nd-body > p.nd-lead { font-size: clamp(18px, 1.3vw, 21px); color: var(--ink);
  line-height: 1.85; }

/* A line that introduces a list (e.g. an objectives preamble). */
.nd-body > p.nd-list-intro { margin-block-end: var(--space-7); }

/* ---------- NUMBERED LISTS (objectives / mandate / members) ----------
   Gold counter chips, start-aligned. Keeps the long legal lists inside the
   gold identity without introducing new hues. */
.nd-list { list-style: none; counter-reset: nd; margin: 0 0 1.6em;
  padding: 0; }
.nd-list > li { counter-increment: nd; position: relative;
  padding-inline-start: calc(var(--space-9) + var(--space-4));
  margin-block-end: var(--space-6);
  font-family: var(--font-body); font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.85; color: var(--aeblack-700); }
.nd-list > li:last-child { margin-block-end: 0; }
.nd-list > li::before { content: counter(nd); position: absolute;
  inset-inline-start: 0; inset-block-start: 0.1em;
  width: var(--space-9); height: var(--space-9);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--aegold-700); background: var(--aegold-50);
  border: 1px solid var(--aegold-200); border-radius: var(--radius-full); }

/* ---------- FOOTER NAV (prev / next across the stories) ---------- */
.nd-nav { margin-block-start: clamp(48px, 6vw, 88px);
  border-block-start: 1px solid var(--border-subtle);
  padding-block-start: clamp(28px, 3vw, 44px);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.nd-nav-item { display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none; border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); padding: var(--space-7) var(--space-8);
  background: var(--bg-surface);
  transition: border-color .25s var(--ease-standard), background .25s var(--ease-standard); }
.nd-nav-item:hover { border-color: var(--aegold-300); background: var(--aegold-50); }
.nd-nav-item.is-empty { visibility: hidden; }
.nd-nav-dir { display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: 13px; font-weight: var(--weight-semibold); color: var(--aegold-700); }
.nd-nav-dir .ic { width: 16px; height: 16px; }
.nd-nav-next { text-align: start; }
.nd-nav-prev { text-align: end; align-items: flex-end; }
.nd-nav-prev .nd-nav-dir { flex-direction: row-reverse; }
.nd-nav-title { font-family: var(--font-heading-ar); font-weight: 700;
  font-size: clamp(15px, 1.1vw, 17px); line-height: var(--leading-snug);
  color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  .nd-hero img,
  .nd-slide img { height: clamp(240px, 66vw, 360px); }
  .nd-gallery-ctrl { padding: var(--space-4); }
  .nd-gallery-btn { width: 44px; height: 44px; }
  .nd-nav { grid-template-columns: 1fr; }
  .nd-nav-item.is-empty { display: none; }
  .nd-nav-prev { text-align: start; align-items: flex-start; }
  .nd-nav-prev .nd-nav-dir { flex-direction: row; }
}