/* =====================================================================
   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 photo */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
/* warm the photo so the daylight sky reads golden, not blue (AEGOV: no blue hue) */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.9) sepia(.22) brightness(.98); }
/* 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: 720px; 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(32px, 3.6vw, 52px); line-height: var(--leading-snug); letter-spacing: 0; margin: 0 0 22px; text-shadow: 0 2px 28px rgba(0,0,0,.4); }
.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); }
.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 { background: var(--grad-gold); border-color: transparent; color: #fff; 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 .svc-tabswrap {
  align-items: center;
  gap: var(--space-6);
}

.services .svc-tabs {
  flex: 0 1 auto;
  flex-wrap: wrap;
  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-tab.active {
  background: var(--aegold-600);
}

.services .svc-card {
  gap: var(--space-5);
  padding: var(--space-8);
}

.services .svc-card h3,
.services .svc-card p {
  min-height: 0;
}

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

.services .svc-card .svc-go {
  margin-block-start: var(--space-2);
}

.services .svc-tag {
  align-self: start;
  display: inline-flex;
  padding-block: 0;
  padding-inline: var(--space-4) 0;
  border-inline-start: 2px solid var(--aegold-500);
  color: var(--fg-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* ---------- STATISTICS ----------
   A featured spotlight tile mirrors whichever figure is active in the strip
   beside it; the tour auto-advances and re-counts on each change (see
   initStatsShowcase in ui.js). No box-shadows (project rule): depth comes from
   gold borders, gradient fills, and transforms only. */
.stats-intro { max-width: none; margin-block-end: clamp(28px, 3.5vw, 48px); }
#stats .stats-intro .h-sec { max-width: none; font-size: clamp(27px, 2.6vw, 38px); line-height: var(--leading-snug); text-shadow: none; }

.stats-showcase { display: grid; grid-template-columns: clamp(300px, 34%, 420px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }

/* Featured spotlight: the enlarged, animated mirror of the active figure */
.stats-feature { position: relative; overflow: hidden; min-block-size: 320px; padding: clamp(28px, 3vw, 48px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(165deg, var(--aegold-50) 0%, var(--bg-surface) 72%);
  border: 1px solid var(--aegold-200); border-radius: var(--radius-xl); }
.stats-feature::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--pattern-lattice) center / 200px; opacity: .05; }
.sf-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-7); }
.sf-ico { display: inline-flex; align-items: center; justify-content: center;
  inline-size: clamp(64px, 7vw, 84px); block-size: clamp(64px, 7vw, 84px); border-radius: var(--radius-full);
  background: var(--bg-surface); border: 1px solid var(--aegold-300); color: var(--aegold-700); }
.sf-ico .ic { inline-size: clamp(30px, 3.4vw, 40px); block-size: clamp(30px, 3.4vw, 40px); }
.sf-num { font-family: var(--font-heading-ar); font-weight: 800; font-size: clamp(44px, 6vw, 76px); line-height: 1.05; color: var(--aegold-700); white-space: nowrap; }
.sf-lbl { font-size: clamp(15px, 1.4vw, 19px); font-weight: var(--weight-semibold); color: var(--aeblack-700); }
.sf-tick { position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 2; block-size: 3px; width: 0; background: var(--grad-gold); }

/* Strip: the canonical, always-readable list of every figure */
.stats-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.sl-item { position: relative; inline-size: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-7);
  min-block-size: 56px; padding-block: var(--space-5); padding-inline: var(--space-8) var(--space-7);
  text-align: start; background: transparent; border: 0; border-block-end: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  color: inherit; cursor: pointer; font: inherit;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.sl-item::before { content: ""; position: absolute; inset-block: var(--space-4); inset-inline-start: 0; inline-size: 3px; border-radius: var(--radius-full);
  background: var(--grad-gold); transform: scaleY(0); transform-origin: center; transition: transform var(--duration-base) var(--ease-emphasis); }
.stats-list li:last-child .sl-item { border-block-end-color: transparent; }
.sl-ico { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-full);
  background: var(--aegold-50); border: 1px solid var(--aegold-200); color: var(--aegold-700);
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.sl-ico .ic { inline-size: 22px; block-size: 22px; }
.sl-lbl { font-size: clamp(13px, 1vw, 15px); font-weight: var(--weight-semibold); color: var(--aeblack-600); line-height: var(--leading-snug); }
.sl-num { justify-self: end; font-family: var(--font-heading-ar); font-weight: 800; font-size: clamp(18px, 1.5vw, 24px); color: var(--aeblack-900); white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard); }

.sl-item:hover { background: var(--aegold-50); }
.sl-item.is-active { background: var(--aegold-50); border-block-end-color: var(--aegold-200); }
.sl-item.is-active::before { transform: scaleY(1); }
.sl-item.is-active .sl-ico { background: var(--grad-gold); border-color: transparent; color: var(--fg-on-gold); }
.sl-item.is-active .sl-num { color: var(--aegold-700); }
.sl-item.is-active .sl-lbl { 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-lattice) center / 220px; 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-media .shot { height: 420px; }
/* warm the dome photo a touch more so it sits in the bronze family of the band */
.explore-media .shot img { 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-media .framed { width: 100%; display: block; }
/* The decree image needs the same owned gold frame language as the other dome
   imagery, with a direct hairline plus the offset echo behind it. */
.mandate-media .framed::after { display: block; border-color: var(--aegold-400); opacity: .72; }
.mandate-media .shot { height: 520px; border: 1px solid var(--aegold-200); }
.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; }

/* STATISTICS: a near-white gray band so the white stat cards read as a
   distinct section without competing with service cards. */
#stats { background: var(--whitely-200); }
#stats .h-sec { text-shadow: none; }

/* =====================================================================
   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; }
}
@media (max-width: 1080px) {
  /* stack: the feature tile on top, the figure strip below as a two-column grid */
  .stats-showcase { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); }
  .stats-feature { min-block-size: 232px; }
  .stats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-10); }
  .stats-list li:last-child .sl-item { border-block-end-color: var(--border-subtle); }
}
@media (max-width: 640px) {
  .hero .lede { font-size: 16px; }
  .hero-search-btn { width: 46px; height: 46px; }
}
@media (max-width: 560px) {
  .stats-list { grid-template-columns: 1fr; }
  .sf-num { font-size: clamp(40px, 12vw, 58px); }
  .sl-num { font-size: clamp(20px, 6vw, 24px); }
}

/* reduced motion: the stats tour stays off (JS); the dwell bar never paints */
@media (prefers-reduced-motion: reduce) {
  .sf-tick { display: none; }
  .hero-tag-featured::after { animation: none; }
  .hero-tag-new { animation: none; }
}