/* =====================================================================
   HOME PAGE sections: hero, statistics, explore, mandate
   Page-specific layout. Loaded only where these sections appear.
   ===================================================================== */

/* ---------- HERO (full-bleed image, search, glass quick-link chips) ---------- */
/* The hero is the one section that opts back into full viewport height (the
   content sections are now content-height). Top padding clears the fixed header. */
.hero { overflow: hidden; color: #fff; min-height: 100svh; display: flex; align-items: center;
  padding-block: calc(var(--hdr) + var(--space-9)) var(--space-16); }
/* full-bleed background video (poster + still fallback for reduced motion) */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg video,
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.9) sepia(.22) brightness(.98); }
/* .hero-bg-fallback { display: none; } */
/* warm scrim: directional (darker behind the copy on the start side) plus a golden
   top-to-bottom wash, so the photo stays clear, the sky reads gold, and white text holds AA */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to left, rgba(34,26,12,.70) 0%, rgba(34,26,12,.26) 58%, rgba(34,26,12,.10) 100%),
    linear-gradient(180deg, rgba(70,52,22,.45) 0%, rgba(40,30,14,.20) 40%, rgba(20,15,6,.55) 100%); }
/* LTR (EN toggle): the copy moves to the start (left), so the dark side follows it */
[dir="ltr"] .hero::before {
  background:
    linear-gradient(to right, rgba(34,26,12,.70) 0%, rgba(34,26,12,.26) 58%, rgba(34,26,12,.10) 100%),
    linear-gradient(180deg, rgba(70,52,22,.45) 0%, rgba(40,30,14,.20) 40%, rgba(20,15,6,.55) 100%); }
/* single column now: the quick links live as chips under the search, so the copy
   spans the hero and lets the dome imagery breathe. */
.hero .wrap { display: grid; grid-template-columns: 1fr; align-items: center; }
/* min-width:0 lets this grid item shrink below the search field's intrinsic
   width on narrow screens, instead of forcing the cell (and the clipped hero)
   wider than the viewport and triggering horizontal scroll. */
.hero-copy { max-width: 780px; min-width: 0; }
/* roomier line-height: the big Arabic heading was too cramped line-to-line. */
.hero h1 { font-family: var(--font-heading-ar); font-weight: 800; color: #fff; font-size: clamp(28px, 3.2vw, 50px); line-height: var(--leading-tight); letter-spacing: 0; margin: 0 0 22px; text-shadow: 0 2px 28px rgba(0,0,0,.4); text-wrap: balance; }
.hero-title-line { display: block; }
.hero h1 .gold { color: var(--aegold-300); }
.hero .lede { font-size: 18px; line-height: 1.85; color: #ECE7DC; max-width: 46ch; margin: 0 0 30px; text-shadow: 0 1px 12px rgba(20,15,6,.55); }

/* glass search bar */
.hero-search { display: flex; align-items: center; gap: 10px; max-width: 560px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-radius: var(--radius-full); padding: 8px; }
.hero-search-btn { flex-shrink: 0; width: 52px; height: 52px; border: 0; cursor: pointer; border-radius: var(--radius-full); background: var(--grad-gold); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: filter var(--duration-base) var(--ease-standard); }
.hero-search-btn:hover { filter: brightness(1.08); }
.hero-search-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 16px; color: #fff; padding-inline: 6px; }
.hero-search-input::placeholder { color: rgba(255,255,255,.72); }

/* Category quick links under the search: glassy pills matching the hero search bar. */
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 18px; max-width: 560px; }
.hero-tag { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 18px;
  border-radius: var(--radius-full); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  color: #fff; font-size: 14px; font-weight: var(--weight-semibold); text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard); }
.hero-tag:hover { background: rgba(255,255,255,.18); border-color: var(--aegold-300); color: var(--aegold-200); }
.hero-tag:focus-visible { outline: 2px solid var(--aegold-300); outline-offset: 2px; }

/* Featured category: the scholarship programs are new and the row's primary
   call to register, so this pill drops the glass look for a filled gold fill
   with a slow shine sweep and a pulsing "new" chip to pull the eye. */
.hero-tag-featured { position: relative; isolation: isolate; padding-inline-end: 8px;
  background: var(--grad-gold); border-color: transparent; color: #fff; }
.hero-tag-featured:hover { filter: brightness(1.06); }
.hero-tag-label { position: relative; z-index: 1; font-weight: var(--weight-bold); text-shadow: 0 1px 2px rgba(20,15,6,.28); }
/* diagonal sheen: clipped to the rounded box by background-clip, swept on a loop with a pause. */
.hero-tag-featured::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  background-size: 220% 100%; background-position: 200% 0;
  animation: heroTagShine 4s var(--ease-standard) infinite; }
.hero-tag-new { position: relative; z-index: 1; display: inline-flex; align-items: center;
  margin-inline-start: 8px; padding: 2px 9px; border-radius: var(--radius-full);
  background: #fff; color: var(--aegold-700); font-size: 11px; font-weight: var(--weight-bold);
  line-height: var(--leading-normal); animation: heroTagNewPulse 2.4s var(--ease-standard) infinite; }
@keyframes heroTagShine { 0%, 100% { background-position: 200% 0; } 45%, 55% { background-position: -160% 0; } }
@keyframes heroTagNewPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- SERVICES TEASER ----------
   Mirrors the full catalog taxonomy while keeping the homepage compact. */
.services {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.services .svc-tabswrap {
  align-items: center;
  gap: var(--space-6);
}

.services .svc-tabs {
  flex: 0 1 auto;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-height: 56px;
  align-items: center;
}

.services .svc-tab {
  min-height: 46px;
  padding-block: var(--space-4);
  padding-inline: var(--space-7);
  line-height: var(--leading-snug);
}

.services .svc-card {
  gap: var(--space-6);
}

.services .svc-card p {
  max-inline-size: 36ch;
}

.services .svc-card .svc-go {
  margin-block-start: auto;
}

.services .svc-tag {
  align-self: start;
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--aegold-100);
  color: var(--aegold-700);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* The category badge shows only in the "All" view; inside a single-category
   panel the active tab already names the category, so hide the repeat. */
.services .svc-grid[data-panel]:not([data-panel="all"]) .svc-tag { display: none; }

/* Full service descriptions (same as the services catalog page). */
.services .svc-grid .svc-card p {
  display: block;
  max-inline-size: none;
  min-height: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.services .svc-grid .svc-card .svc-go { margin-block-start: auto; }

/* Show-more toggle: folds the longer service lists on phones so the teaser is
   a short scroll. It is injected as the last child of its .svc-grid (so it
   hides together with its tab panel) and only paints on narrow screens. */
.services .svc-more {
  display: none;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding-inline: var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--aegold-700);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.services .svc-more:hover {
  background: var(--aegold-50);
  border-color: var(--aegold-300);
}
.services .svc-more::after {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-emphasis);
}
.services .svc-more[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Phone layout for the teaser: a single column where the order is section head,
   tabs (scrollable), cards, then the All Services CTA last. The CTA lives inside
   .svc-tabswrap (a sibling of the panels), so the wrapper is flattened with
   display:contents and `order` drops the CTA below the panels. */
@media (max-width: 640px) {
  .services .wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .services .sec-head { order: 0; }
  .services .svc-tabswrap { display: contents; }
  .services .svc-tabs {
    order: 1;
    align-self: stretch;
    inline-size: 100%;
    margin-block-end: var(--space-7);
  }
  .services .svc-panels { order: 2; }
  .services .svc-tabswrap > .btnx {
    order: 3;
    align-self: stretch;
    justify-content: center;
    margin-block-start: var(--space-8);
  }

  /* Fold each list past the third card until the grid is expanded. The toggle
     is not a .svc-card, so the nth-child rule never hides it. */
  .services .svc-grid { gap: var(--space-6); }
  .services .svc-grid:not(.expanded) > .svc-card:nth-child(n+4) { display: none; }
  .services .svc-more { display: inline-flex; }

  /* One CTA at a time on phones: while the active panel is folded only
     "عرض المزيد" shows; once it is expanded (all its services revealed) the
     toggle gives way to the "كل الخدمات" link. Panels with <=3 services carry
     no toggle, so the link shows for them straight away. */
  .services:has(.svc-grid:not([hidden]):not(.expanded) .svc-more) .svc-tabswrap > .btnx { display: none; }
  .services .svc-grid.expanded > .svc-more { display: none; }
}

/* ---------- STATISTICS ----------
   Featured spotlight tile + editorial two-column matrix (reference layout). */
#stats { overflow: hidden; background: var(--bg-page); }
#stats .wrap { position: relative; z-index: 1; }
#stats::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; z-index: 0; pointer-events: none;
  background: var(--grad-gold-rule); opacity: .55; }
.stats-intro { max-width: none; margin-block-end: clamp(32px, 4vw, 56px); }
#stats .stats-intro .h-sec { max-width: none; font-size: clamp(27px, 2.6vw, 42px); line-height: var(--leading-snug); color: var(--ink); text-shadow: none; }

.stats-showcase { display: flex; flex-direction: column; gap: clamp(var(--space-10), 2.4vw, var(--space-14)); }

/* featured hero figure */
.stats-feature {
  padding: clamp(var(--space-9), 2.2vw, var(--space-12)) clamp(var(--space-10), 2.8vw, var(--space-14));
  background: var(--aegold-50);
  border: 1px solid var(--aegold-100);
  border-radius: var(--radius-2xl);
}
.stats-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  text-align: start;
  min-inline-size: 0;
}
.stats-feature-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(48px, 4.2vw, 56px);
  block-size: clamp(48px, 4.2vw, 56px);
  border-radius: var(--radius-md);
  background: var(--aegold-600);
  color: var(--fg-on-gold);
  border: 1px solid var(--aegold-700);
}
.stats-feature-num {
  margin: 0;
  direction: ltr;
  font-family: var(--font-heading-ar);
  font-weight: 800;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1;
  color: var(--aegold-700);
}
.stats-feature-lbl {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

/* supporting matrix */
.stats-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--bg-surface);
}
.stats-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(var(--space-6), 2vw, var(--space-10));
  padding-block: clamp(var(--space-10), 2.8vw, var(--space-14));
  padding-inline: clamp(var(--space-8), 2.4vw, var(--space-12));
  text-align: start;
  border-block-end: 1px solid var(--border-subtle);
  transition: background var(--duration-base) var(--ease-standard);
}
.stats-cell:nth-child(even) { border-inline-start: 1px solid var(--border-subtle); }
.stats-cell:nth-last-child(-n+2) { border-block-end: 0; }
.stats-cell:hover { background: var(--aegold-50); }
.stats-cell-copy { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }
.stats-cell-num {
  direction: ltr;
  font-family: var(--font-heading-ar);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1;
  color: var(--aegold-700);
  white-space: nowrap;
}
.stats-cell-lbl {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-secondary);
}
.stats-cell-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: clamp(44px, 4vw, 52px);
  block-size: clamp(44px, 4vw, 52px);
  border-radius: var(--radius-md);
  background: var(--aegold-50);
  border: 1px solid var(--aegold-200);
  color: var(--aegold-600);
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.stats-cell:hover .stats-cell-ic {
  background: var(--aegold-600);
  border-color: var(--aegold-700);
  color: var(--fg-on-gold);
}
.stats-cell:hover .stats-cell-num { color: var(--aegold-800); }

/* ---------- EXPLORE ----------
   Contained warm bronze-gold band (no longer full-screen). White copy rides on
   the gradient; the dome photo and the CTA are recolored to coordinate with it.
   A faint gold lattice watermarks the band, echoing the geometry of the crest. */
/* This band stays at its natural content height (not forced to full viewport):
   it is a contained band, so stretching it to 100svh leaves dead bronze space. */
.explore { position: relative; overflow: hidden; color: #fff; min-height: auto;
  background: var(--grad-explore); border-block: 1px solid var(--aegold-950); }
.explore::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--pattern) center / cover; opacity: .07; }
.explore .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
/* stack the copy with clear, even breathing room between heading, lede and CTA */
.explore-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
.explore .h-sec { color: #fff; }
.explore .sub { color: #ECE7DC; margin: 0; max-width: 42ch; }
.explore-media { justify-self: center; width: 100%; }
.explore-photo { width: 100%; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.explore-photo img { display: block; width: 100%; max-height: 460px; object-fit: contain; filter: saturate(.92) sepia(.42) brightness(1.0); }

/* ---------- MANDATE ----------
   Copy leads (start side), the dome decree photo sits on the end side, mirroring
   the Explore section so both share one image-frame language. The copy is a flex
   column with one gap token, so the eyebrow, heading, body and CTA hold a single
   consistent rhythm: there are no per-element margins to drift out of sync. */
.mandate .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mandate-copy { display: flex; flex-direction: column; gap: var(--space-10); }
.mandate-copy > * { margin: 0; }
.mandate-copy .btnx { align-self: flex-start; }
.mandate-media { justify-self: center; width: 100%; position: relative; }
.mandate-portrait { width: 100%; min-height: 520px; display: flex; align-items: end; justify-content: center; }
.mandate-portrait img { display: block; width: 100%; max-height: 560px; object-fit: contain; object-position: center bottom; }
.mandate p { font-size: 16.5px; line-height: 1.95; color: var(--aeblack-700); margin: 0; }

/* =====================================================================
   GRAND MODE (home sections): monumental hero backdrop, geometry texture,
   gold-cast stat numbers. Refinement layer on top of the rules above.
   ===================================================================== */
/* HERO: keep the wrap above the scrim. No texture overlay: the photo stays clear. */
.hero .wrap { position: relative; z-index: 2; }

/* MANDATE: the near-white gray band, so it reads as a distinct section. */
#mandate { background: var(--bg-page); }

/* STATISTICS: light card band matching the approved card reference. */
#stats { background: var(--bg-page); }
#stats .h-sec { text-shadow: none; }

/* NEWS: on desktop the latest-updates block fills the viewport (min 100vh) so it
   reads as a substantial, dignified section rather than a short band. The content
   centers vertically and the cards take taller imagery to fill the height with
   presence. Below 1080px the cards stack, so it reverts to natural height and
   there is no forced-viewport void (responsive). */
@media (min-width: 1081px) {
  #news { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  #news .sec-head { margin-bottom: clamp(40px, 5vh, 72px); }
  #news .news-card .shot { height: clamp(260px, 32vh, 380px); }
}

/* =====================================================================
   RESPONSIVE: home sections
   ===================================================================== */
@media (max-width: 1080px) {
  /* stacked hero is tall and top-aligns: clear the fixed header so the copy is not tucked under it */
  .hero { padding-block-start: calc(var(--hdr) + 24px); }
  .explore .wrap, .mandate .wrap { grid-template-columns: 1fr; gap: 40px; }
  .explore-media, .mandate-media { max-width: 460px; order: -1; }
  .hero-search { max-width: none; }
  .hero-tags { max-width: none; }
  #stats .stats-intro .h-sec { white-space: normal; }
  .stats-cell-num { white-space: normal; }
}
@media (max-width: 1080px) {
  .stats-feature { padding: var(--space-9) clamp(var(--space-8), 4vw, var(--space-12)); }
}
@media (max-width: 720px) {
  .stats-matrix { grid-template-columns: 1fr; }
  .stats-cell:nth-child(even) { border-inline-start: 0; }
  .stats-cell:not(:last-child) { border-block-end: 1px solid var(--border-subtle); }
  .stats-cell:last-child { border-block-end: 0; }
}
@media (max-width: 640px) {
  .services {
    min-height: auto;
    align-items: stretch;
  }

  .hero h1 { font-size: clamp(21px, 6vw, 24px); }
  /* On phones, open a clearer gap between the intro copy and the search bar
     so the two read as distinct blocks (UX request). */
  .hero .lede { font-size: 16px; margin-block-end: 48px; }
  .hero-search-btn { width: 46px; height: 46px; }
  .explore-photo { min-height: 280px; }
  .mandate-portrait { min-height: 320px; }
}
@media (max-width: 560px) {
  .stats-feature-num { font-size: clamp(36px, 11vw, 52px); }
  .stats-cell-num { font-size: clamp(26px, 8.5vw, 36px); }
}

/* reduced motion: keep decorative homepage loops still */
@media (prefers-reduced-motion: reduce) {
  .hero-tag-featured::after { animation: none; }
  .hero-tag-new { animation: none; }
  .hero-bg-video { display: none; }
  .hero-bg-fallback { display: block; }
}