/* =====================================================================
   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: var(--bg-page); }

/* The featured lead joins the same hover family as the news cards below: a
   resting line border on a surface, the border going gold and the framed
   image zooming on hover (mirrors cards.css .news-card + .framed:hover), so
   the whole section reads as one unified, interactive experience. */
.nf-card { display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 88px); align-items: center;
  background: var(--bg-surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 44px);
  transition: border-color var(--duration-base) var(--ease-standard); }
.nf-card:hover { border-color: var(--aegold-300); }
.nf-card:hover .shot img { transform: scale(1.045); }
.nf-card:hover .framed::after { transform: translate(14px, 14px); }

.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.
   Capped at the --text-h3 tier (30px): still the page's largest heading and
   above the 18px secondary cards, but a calmer, more proportionate lead than
   the former 40px, which overwhelmed the long verbatim decree title. */
.nf-title { font-family: var(--font-heading-ar); font-weight: 800;
  font-size: clamp(21px, 2.3vw, 30px); 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. */
/* Extra breathing room above and below the cards section. */
.news-more { background: var(--bg-page);
  padding-block: clamp(80px, 9vw, 140px); }
.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; }

/* ---------- STATIC CARDS (news page only) ----------
   The auto-rotating spotlight + hover grow reflowed the verbatim titles
   between 2 and 3 lines, distorting the row. On this page the cards stay
   completely still: no grow, no image zoom, no timer tick. The gold hover
   border is kept as a non-moving affordance (the cards are links). The JS
   rotator skips .is-static, so no .active state is ever applied here. */
.news-grid.is-static .news-card,
.news-grid.is-static .news-card:hover { flex-grow: 1; }
.news-grid.is-static .news-card:hover .shot img { transform: none; }
.news-grid.is-static .news-card .n-tick { display: none; }

/* =====================================================================
   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 */
}
@media (max-width: 640px) {
  .nf-card { gap: var(--space-10); padding: var(--space-8); }
  .nf-title { font-size: clamp(19px, 5.5vw, 24px); }
}