/* =====================================================================
   HIGHER INSTITUTIONS: directory (list) + single-institution detail.
   Page-specific layout, loaded only on pages/higher-institutions.html
   and pages/higher-institutions-sharjah.html.

   Built entirely on the shared tokens + motifs (dome crest, gold echo,
   lattice watermark, kicker/h-sec, page-hero, framed imagery). No new
   hues, no raw values, RTL-first logical properties throughout.
   ===================================================================== */

/* =====================================================================
   1. DIRECTORY MASTHEAD: the shared ink .page-hero with a faded campus
   photo sunk behind the lattice, so the band reads aspirational without
   labelling any single building.
   ===================================================================== */
.inst-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.inst-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  /* warm + sink the photo so the white title keeps AA contrast over it */
  filter: saturate(.85) sepia(.18) brightness(.42); opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 92%); }

/* =====================================================================
   2. DIRECTORY TOOLS: the search + type-filter toolbar above the registry.
   A pill filter group (same language as the service-catalog tabs) on the
   start side, a rounded search field on the end. The result count is an
   aria-live status so assistive tech hears the list narrow as you filter.
   ===================================================================== */
/* founding-year pill (gold tint), shared by every registry card */
.inst-year { display: inline-flex; align-items: center; font-family: var(--font-heading-ar); font-weight: 700;
  font-size: 13.5px; color: var(--aegold-800); padding: 6px 14px; background: var(--aegold-50);
  border: 1px solid var(--aegold-200); border-radius: var(--radius-full); letter-spacing: 0; line-height: var(--leading-snug); }

/* directory head: section kicker on the start side, live result count on the end */
.inst-dir-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-9);
  flex-wrap: wrap; margin-bottom: clamp(20px, 2.2vw, 30px); }
.inst-dir-head .sec-head { margin-bottom: 0; }
.inst-count { margin: 0; display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px;
  color: var(--aeblack-600); font-weight: var(--weight-semibold); }
.inst-count [data-inst-count] { font-family: var(--font-heading-ar); font-weight: 800; font-size: 16px; color: var(--aegold-700); }

/* toolbar: filter pills + search, wraps to stack on narrow screens */
.inst-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-9);
  flex-wrap: wrap; margin-bottom: clamp(26px, 3vw, 40px); }
.inst-filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full); }
.inst-filter { position: relative; border: 0; background: transparent; cursor: pointer; font-family: var(--font-body);
  font-weight: var(--weight-semibold); font-size: 15px; color: var(--aeblack-600); padding: 10px 20px;
  border-radius: var(--radius-full); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.inst-filter:hover { color: var(--aegold-700); }
/* count badge inside each chip (derived from the list, never invented copy) */
.inst-filter .n { font-size: 12.5px; font-weight: var(--weight-bold); color: var(--aeblack-500);
  background: var(--whitely-300); padding: 1px 8px; border-radius: var(--radius-full);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.inst-filter.active { color: #fff; background: var(--grad-gold); }
.inst-filter.active .n { color: #fff; background: rgba(255,255,255,.22); }
.inst-filter:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.inst-search { flex: 0 1 260px; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-5);
  min-height: 52px; padding-inline: var(--space-8); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); background: var(--bg-surface); color: var(--aegold-700); }
.inst-search .ic { width: 19px; height: 19px; flex-shrink: 0; }
.inst-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--fg-primary); font: inherit; }
.inst-search input::placeholder { color: var(--fg-tertiary); }
.inst-search:focus-within { border-color: var(--focus-ring); box-shadow: var(--shadow-ring); }

/* visually-hidden label, kept so the search field carries an accessible name */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* =====================================================================
   3. THE REGISTRY: the remaining institutions as horizontal directory
   rows (crest plate + identity + figure strip + action), two to a line.
   A stately list, deliberately NOT the home's vertical service-card grid.
   ===================================================================== */
.inst-dir .sec-head { margin-bottom: clamp(32px, 4vw, 52px); }
.inst-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 1.6vw, 26px); }
.inst-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 1.8vw, 26px);
  padding: clamp(22px, 2vw, 30px); background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); color: inherit; text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard); }
.inst-card:hover { border-color: var(--aegold-300); background: var(--aegold-50); transform: translateY(-3px); }
.inst-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* crest plate: the dome emblem on a gold-tinted lattice ground, the
   brand stand-in where we hold no verified institution photo */
.inst-crest { position: relative; overflow: hidden; flex-shrink: 0; width: clamp(72px, 7vw, 92px); height: clamp(72px, 7vw, 92px);
  border-radius: var(--radius-lg); background: var(--aegold-50); border: 1px solid var(--aegold-200);
  color: var(--aegold-700); display: grid; place-items: center;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.inst-crest::before { content: ""; position: absolute; inset: 0; background: var(--pattern-lattice) center / 64px; opacity: .12; }
.inst-crest .ic { width: 46%; height: 46%; position: relative; }
.inst-card:hover .inst-crest { background: var(--grad-gold); border-color: transparent; color: var(--fg-on-gold); }

.inst-card-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-7); }
.inst-card-id { display: flex; flex-direction: column; gap: var(--space-5); }
.inst-card h3 { font-family: var(--font-heading-ar); font-weight: 700; font-size: clamp(18px, 1.5vw, 22px);
  line-height: var(--leading-snug); color: var(--ink); margin: 0; }
/* meta row under the name: type tag (the kind word from the name) + year pill */
.inst-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5) var(--space-7); }
.inst-type { display: inline-flex; align-items: center; font-family: var(--font-heading-ar); font-weight: 700;
  font-size: 12.5px; color: var(--aegold-700); }
.inst-type::before { content: ""; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%;
  background: var(--aegold-400); flex-shrink: 0; }
/* dropped from layout when the toolbar excludes it */
.inst-card.is-filtered { display: none; }

/* figure strip: three metrics divided by hairlines, never boxed */
.inst-card-metrics { display: flex; align-items: stretch; gap: clamp(12px, 1.4vw, 20px); margin-block-start: auto;
  padding-block-start: var(--space-7); border-block-start: 1px solid var(--border-subtle); }
.inst-metric { display: flex; flex-direction: column; gap: 2px; padding-inline-end: clamp(12px, 1.4vw, 20px); }
.inst-metric + .inst-metric { border-inline-start: 1px solid var(--border-subtle); padding-inline-start: clamp(12px, 1.4vw, 20px); padding-inline-end: 0; }
.inst-metric .m-num { font-family: var(--font-heading-ar); font-weight: 800; font-size: clamp(17px, 1.5vw, 21px);
  line-height: var(--leading-tight); color: var(--aegold-700); }
.inst-metric .m-lbl { font-size: 12.5px; color: var(--aeblack-600); font-weight: var(--weight-medium); }

/* the card-foot CTA (verbatim "استكشف المزيد") nudges its arrow on hover */
.inst-card-cta { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-weight: var(--weight-semibold); font-size: 14.5px; color: var(--aegold-700);
  transition: color var(--duration-base) var(--ease-standard); }
.inst-card-cta .ic { width: 17px; height: 17px; transition: transform var(--duration-base) var(--ease-emphasis); }
.inst-card:hover .inst-card-cta { color: var(--aegold-800); }
.inst-card:hover .inst-card-cta .ic { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] .inst-card-cta .ic { transform: scaleX(-1); }
[dir="rtl"] .inst-card:hover .inst-card-cta .ic { transform: scaleX(-1) translateX(-4px); }

/* empty state: shown only when search + filter exclude every institution */
.inst-empty { margin: clamp(24px, 3vw, 40px) 0 0; padding: clamp(28px, 3vw, 44px);
  border: 1px dashed var(--border-default); border-radius: var(--radius-xl); background: var(--bg-surface);
  color: var(--fg-secondary); text-align: center; font-size: 16px; line-height: var(--leading-normal); }

/* =====================================================================
   4. DETAIL HERO: a monumental photo hero (real University of Sharjah
   campus) under a warm ink scrim. Replaces the live pale-blue card.
   Extends the shared .page-hero (breadcrumb, lattice, glow).
   ===================================================================== */
.inst-dhero { overflow: hidden; }
.inst-dhero .inst-hero-bg img { object-position: center 30%; filter: saturate(.9) sepia(.16) brightness(.5); opacity: .62;
  -webkit-mask-image: none; mask-image: none; }
/* directional warm scrim: darker on the reading-forward (start) side so the
   white identity holds AA, mirroring the home hero treatment */
.inst-dhero::before { background:
  linear-gradient(to left, rgba(20,15,6,.82) 0%, rgba(20,15,6,.5) 56%, rgba(20,15,6,.32) 100%),
  var(--pattern-lattice) center / 240px; opacity: 1; z-index: 1; }
[dir="ltr"] .inst-dhero::before { background:
  linear-gradient(to right, rgba(20,15,6,.82) 0%, rgba(20,15,6,.5) 56%, rgba(20,15,6,.32) 100%),
  var(--pattern-lattice) center / 240px; }
.inst-dhero .wrap { position: relative; z-index: 2; }
/* identity row: crest + name + founding badge */
.inst-dhero-id { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); flex-wrap: wrap; }
.inst-dhero-crest { flex-shrink: 0; width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px);
  border-radius: var(--radius-lg); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
  color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.inst-dhero-crest .ic { width: 52%; height: 52%; }
.inst-dhero-headings { display: flex; flex-direction: column; gap: var(--space-5); }
.inst-dhero h1 { text-shadow: 0 2px 28px rgba(0,0,0,.55); }
.inst-dhero-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px;
  font-family: var(--font-heading-ar); font-weight: 700; font-size: 14px; color: var(--ink);
  padding: 7px 16px; background: var(--grad-gold); border-radius: var(--radius-full);
  box-shadow: var(--shadow-button-inset); }
/* action chips: outline pills on the dark ground (phone, site, email, geo, portal) */
.inst-chips { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-block-start: clamp(26px, 3vw, 40px); }
.inst-chip { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding-inline: 20px;
  border-radius: var(--radius-full); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.34);
  color: #fff; font-weight: var(--weight-semibold); font-size: 15px; text-decoration: none; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.inst-chip .ic { width: 18px; height: 18px; color: var(--aegold-200); transition: color var(--duration-base) var(--ease-standard); }
.inst-chip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); transform: translateY(-2px); }
.inst-chip:hover .ic { color: #fff; }
.inst-chip[dir="ltr"] { direction: ltr; }

/* =====================================================================
   5. OVERVIEW (نبذة إجمالية): animated headline figures, then the rankings as
   credential cards, then the qualitative facts as editorial callouts. The
   content splits by type (numeric / credential / narrative) so each block can
   render or drop independently as a given institution's content allows.
   ===================================================================== */
.inst-overview .sec-head { margin-bottom: clamp(30px, 3.4vw, 46px); }

/* 5a. figure strip: the five numeric facts, count-up, with their unit nouns
   kept as static siblings so the count animation never drops them */
.inst-figs { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.3vw, 20px);
  margin-block-end: clamp(40px, 4.5vw, 68px); }
.inst-fig { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
  padding: clamp(20px, 1.9vw, 28px); background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.inst-fig:hover { border-color: var(--aegold-300); background: var(--aegold-50); }
.inst-fig-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--aegold-50); border: 1px solid var(--aegold-200); color: var(--aegold-700);
  display: grid; place-items: center; }
.inst-fig-ic .ic { width: 24px; height: 24px; }
.inst-fig-num { font-family: var(--font-heading-ar); font-weight: 800; font-size: clamp(22px, 2vw, 30px);
  line-height: var(--leading-tight); color: var(--ink); letter-spacing: 0; }
.inst-fig-num .f-unit { font-size: .55em; font-weight: 700; color: var(--aegold-700); margin-inline-start: 4px; }
.inst-fig-lbl { font-size: 14px; line-height: 1.45; color: var(--aeblack-600); font-weight: var(--weight-semibold); }

/* 5b. standing: the rankings as a pair of credential cards. This is the prestige
   beat, but kept secondary to the figures (most institutions hold no ranking, so
   the whole block is simply omitted for them rather than left as empty rows). */
.inst-standing { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 22px);
  margin-block-end: clamp(28px, 3.2vw, 44px); }
.inst-cred { display: flex; align-items: center; gap: var(--space-9); padding: clamp(20px, 2vw, 28px);
  background: var(--aegold-50); border: 1px solid var(--aegold-200); border-radius: var(--radius-xl); }
.inst-cred-ic { flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-md);
  background: var(--grad-gold); color: var(--fg-on-gold); display: grid; place-items: center;
  box-shadow: var(--shadow-button-inset); }
.inst-cred-ic .ic { width: 26px; height: 26px; }
.inst-cred-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.inst-cred-lbl { font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--aegold-800); }
.inst-cred-val { font-family: var(--font-heading-ar); font-weight: 700; font-size: clamp(16px, 1.4vw, 19px);
  line-height: var(--leading-snug); color: var(--ink); }

/* 5c. qualitative facts: research + partnerships as editorial callouts, never
   the old flat table rows (that ledger was the "government" feel). Each is an
   icon-led card; absent facts drop out, so a sparse institution shows none. */
.inst-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.inst-fact { display: flex; gap: var(--space-9); padding: clamp(22px, 2.2vw, 30px);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); }
.inst-fact-ic { flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--radius-md);
  background: var(--aegold-50); border: 1px solid var(--aegold-200); color: var(--aegold-700);
  display: grid; place-items: center; }
.inst-fact-ic .ic { width: 25px; height: 25px; }
.inst-fact-body { min-width: 0; }
.inst-fact-key { font-family: var(--font-heading-ar); font-weight: 700; font-size: clamp(16px, 1.4vw, 19px);
  line-height: var(--leading-snug); color: var(--aegold-800); margin: 0 0 var(--space-5); }
.inst-fact-val { font-size: clamp(15px, 1.3vw, 16.5px); line-height: var(--leading-loose);
  color: var(--aeblack-800); margin: 0; }

/* closing back-link to the directory */
.inst-back { display: inline-flex; align-items: center; gap: 9px; margin-block-start: clamp(34px, 4vw, 52px);
  font-weight: var(--weight-semibold); font-size: 16px; color: var(--aegold-700); }
.inst-back .ic { width: 19px; height: 19px; transition: transform var(--duration-base) var(--ease-emphasis); }
.inst-back:hover { color: var(--aegold-800); }
[dir="rtl"] .inst-back .ic { transform: scaleX(-1); }
.inst-back:hover .ic { transform: translateX(-4px); }
[dir="rtl"] .inst-back:hover .ic { transform: scaleX(-1) translateX(-4px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
  .inst-figs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .inst-grid { grid-template-columns: 1fr; }
  .inst-standing, .inst-facts { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .inst-tools { align-items: stretch; }
  .inst-filters { justify-content: center; }
  .inst-search { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  .inst-figs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .inst-card { grid-template-columns: 1fr; }
  .inst-crest { width: 64px; height: 64px; }
  .inst-figs { grid-template-columns: 1fr; max-width: 320px; }
  .inst-card-metrics { flex-wrap: wrap; }
}