/* =====================================================================
   NEWS PAGE (آخر التحديثات والأخبار): masthead, a featured lead story,
   and a secondary grid of the remaining items.
   Page-specific layout. Loaded only on pages/news.html.
   Built entirely on shared tokens + components (.page-hero, .framed,
   .news-card, .btnx, .n-date). No new hues, no raw values, no side-stripe
   accents, no gradient text. Selectors namespaced under .news-feature /
   .news-more / .nf-*.
   ===================================================================== */

/* ---------- 1. MASTHEAD ----------
   Reuses the shared `.page-hero` component (assets/css/base.css). No
   page-specific rules required. */

/* ---------- 2. FEATURED LEAD STORY (cream-warm band) ----------
   The founding-decree item is lifted out of the list and shown as a
   two-column split: a dome-framed portrait of the signing on the start
   side, the date + full title + CTA on the end side. This is the page's
   strongest image beat, it keeps the published order (this is the first
   item), and the unclamped frame is what lets the long decree title render
   in full, where the clamped card below would have to clip it. */
.news-feature { background: linear-gradient(180deg, var(--aegold-50), var(--bg-surface) 72%); }
.nf-card { display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 88px); align-items: center; }

.nf-media .framed { display: block; width: 100%; }
.nf-media .shot { aspect-ratio: 4 / 3; }

/* date: the shared news-card meta treatment (plain gold mono + calendar),
   a touch larger for the featured tier */
.nf-copy .n-date { 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); }
.nf-copy .n-date .ic { width: 16px; height: 16px; }

/* title: runs full, no line-clamp, so the verbatim decree title is complete */
.nf-title { font-family: var(--font-heading-ar); font-weight: 800;
  font-size: clamp(25px, 2.9vw, 40px); line-height: var(--leading-snug);
  letter-spacing: 0; color: var(--ink); margin: 0 0 var(--space-14); }

/* ---------- 3. SECONDARY STORIES (canvas, reuse .news-grid + .news-card) ----------
   The two remaining items use the shared news cards, centered in a tighter
   column so they keep home-page card proportions beside the full-width
   featured block above. */
.news-more { background: var(--bg-page); }
.news-more .news-grid { max-width: 1040px; margin-inline: auto; }

/* Full verbatim titles: drop the home card's 3-line clamp and width cap so
   neither title is truncated (truncation would silently drop content).
   Flexbox still stretches both cards to equal height, so the foot CTAs stay
   aligned even when one title runs longer than the other. */
.news-more .news-card h3 { display: block; -webkit-line-clamp: none;
  max-width: none; height: auto; overflow: visible; }

/* =====================================================================
   RESPONSIVE: news sections
   ===================================================================== */
@media (max-width: 1080px) {
  /* featured folds to one column: the image leads, copy follows */
  .nf-card { grid-template-columns: 1fr; gap: 44px; }
  .nf-media { order: -1; justify-self: center; width: 100%; max-width: 520px; }
  /* the secondary grid already stacks via cards.css at this width */
}