/* =====================================================================
   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%); }
/* When a campus photo backs the directory masthead, the shared .07 lattice on
   top reads busy (photo + circles + glow competing). Sink the lattice far down
   so the photo leads and the pattern is barely a whisper. Photo-less inner
   heroes keep the base .07; the detail hero (.inst-dhero) is excluded because
   its ::before carries the contrast scrim at full opacity. */
.page-hero:has(.inst-hero-bg):not(.inst-dhero)::before { opacity: .022; }

/* =====================================================================
   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; }
/* the section label doubles as the directory's h2 (fills the h1 -> h3 gap); reset
   the heading's UA margins so it still aligns with the live count on the end side */
.inst-dir-head h2.kicker { margin: 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: shared filter tabs + 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 { flex: 0 1 auto; inline-size: fit-content; max-inline-size: 100%; }
.inst-filter { min-inline-size: max-content; }

.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: visual institution cards with source-backed campus
   imagery, corner-anchored official logos, and equal-weight stats.
   ===================================================================== */
.inst-dir .sec-head { margin-bottom: clamp(32px, 4vw, 52px); }
/* Three equal columns on desktop (the client's explicit ask). The cards model the
   home news/service cards: a full-bleed photo head, then a flex body whose figure
   strip and CTA pin to the foot so every card in a row shares one clean baseline. */
.inst-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 1.8vw, 28px);
  align-items: stretch;
  --inst-logo-slot: clamp(54px, 4.2vw, 66px);
  --inst-logo-crest: clamp(64px, 5vw, 76px);
  --inst-logo-landscape-inner: clamp(84px, 6.8vw, 98px);
  --inst-logo-wide-w: clamp(120px, 9.8vw, 152px);
  --inst-logo-wide-h: clamp(46px, 3.8vw, 54px);
  --inst-logo-xwide-w: clamp(140px, 11.5vw, 172px);
  --inst-logo-xwide-h: clamp(40px, 3.2vw, 48px);
  --inst-logo-tall-w: clamp(48px, 3.9vw, 58px);
  --inst-logo-tall-h: clamp(64px, 5vw, 76px);
}
.inst-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  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),
              transform var(--duration-base) var(--ease-standard); }
.inst-card:hover { border-color: var(--aegold-300); transform: translateY(-4px); }
.inst-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Media: photo in a clipped frame; logo sits beside it so overflow never crops marks */
.inst-media { position: relative; display: block; aspect-ratio: 16 / 10; min-block-size: 0;
  overflow: visible; background: transparent; }
.inst-media-frame { position: absolute; inset: 0; overflow: hidden; background: var(--bg-muted); }
.inst-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .7s var(--ease-standard), filter var(--duration-base) var(--ease-standard); }
.inst-card:hover .inst-photo { transform: scale(1.05); filter: saturate(1.04); }
/* scrim on the photo frame only */
.inst-media-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(21,20,15,.44), rgba(21,20,15,0) 54%); }
/* official logo: white plaque in the photo corner; slot size varies by mark aspect */
.inst-logo { position: absolute; z-index: 2; inset-block-end: clamp(12px, 1vw, 16px); inset-inline-start: clamp(12px, 1vw, 16px);
  box-sizing: border-box; overflow: visible;
  display: grid; place-items: center; inline-size: var(--inst-logo-slot); block-size: var(--inst-logo-slot);
  padding: clamp(7px, 0.65vw, 9px); border-radius: var(--radius-md); background: #fff;
  border: 1px solid var(--aegold-200); box-shadow: var(--shadow-sm); }
.inst-logo img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center; }
/* square crest seals */
.inst-logo--crest {
  inline-size: var(--inst-logo-crest);
  block-size: var(--inst-logo-crest);
  padding: clamp(7px, 0.7vw, 9px);
}
/* landscape wordmarks (UoS 612:440, SEA 577:440): content-box keeps exact mark ratio */
.inst-logo--landscape {
  box-sizing: content-box;
  inline-size: var(--inst-logo-landscape-inner);
  block-size: calc(var(--inst-logo-landscape-inner) * 440 / 612);
  padding: clamp(5px, 0.45vw, 7px);
}
/* ultra-wide wordmarks (~4:1, SMA, GSU) */
.inst-logo--wide {
  inline-size: var(--inst-logo-wide-w);
  block-size: var(--inst-logo-wide-h);
  padding: clamp(6px, 0.55vw, 8px);
}
/* SPSA wordmark (1136:440) */
.inst-logo--spsa {
  box-sizing: content-box;
  inline-size: clamp(104px, 8.2vw, 128px);
  block-size: calc(clamp(104px, 8.2vw, 128px) * 440 / 1136);
  padding: clamp(5px, 0.5vw, 7px);
  overflow: hidden;
}
.inst-logo--spsa img {
  inline-size: 112%;
  block-size: 112%;
}
/* extra-wide wordmarks (~9:1, AUS) */
.inst-logo--xwide {
  inline-size: var(--inst-logo-xwide-w);
  block-size: var(--inst-logo-xwide-h);
  padding: clamp(5px, 0.45vw, 7px);
}
/* portrait marks (SOU) */
.inst-logo--tall {
  inline-size: var(--inst-logo-tall-w);
  block-size: var(--inst-logo-tall-h);
  padding: clamp(7px, 0.7vw, 9px);
}

.inst-card-body { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: var(--space-8);
  padding: clamp(20px, 1.7vw, 26px); }
.inst-card-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.inst-card h3 { font-family: var(--font-heading-ar); font-weight: 800; font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.34; color: var(--ink); margin: 0; min-block-size: 2.68em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* meta row under the name: type tag (the kind word from the name) + year pill */
.inst-meta { min-block-size: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.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; }

/* Metrics: a three-up figure strip (number over label), echoing the detail-page
   .inst-figs language. This replaces the old stacked ledger rows (label on one
   side, number on the other), which read as a government spreadsheet. Thin
   inline dividers separate the cells without the row-by-row table feel. */
.inst-card-metrics { display: grid; grid-template-columns: repeat(3, 1fr);
  border-block-start: 1px solid var(--border-subtle); padding-block-start: var(--space-8); }
.inst-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding-inline: var(--space-6); min-width: 0; }
.inst-metric:first-child { padding-inline-start: 0; }
.inst-metric + .inst-metric { border-inline-start: 1px solid var(--border-subtle); }
.inst-metric .m-num { order: 0; font-family: var(--font-heading-ar); font-weight: 800; font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.05; color: var(--ink); direction: ltr; }
.inst-metric .m-lbl { order: 1; font-size: 12.5px; color: var(--aeblack-600); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

/* the card-foot CTA (verbatim "استكشف المزيد"): a gold text link with a sliding
   arrow, the same call-to-action language as the home service (.svc-go) and news
   (.news-cta) cards. This ties the card back to the home page and replaces the
   off-system full-width pill that read as an alien button. */
.inst-card-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-block-start: var(--space-2); font-weight: var(--weight-semibold); font-size: 15px; color: var(--aegold-700); }
.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; }
/* clear, warm campus photo (the modern .ph-bg treatment), dimmed just enough
   that the full-width identity row, founding badge and contact chips all hold
   contrast over it. Overrides the shared .ph-bg img by specificity. */
.inst-dhero .ph-bg img { object-position: center 30%; filter: saturate(.92) sepia(.18) brightness(.6); }
/* even warm veil (no lattice): leans toward the start, deepens toward the foot
   where the chips sit, over a faint flat floor so every overlaid element reads.
   :has(.ph-bg) matches the shared veil's specificity and wins by load order. */
.inst-dhero:has(.ph-bg)::before { background:
  linear-gradient(to left, rgba(20,14,6,.6) 0%, rgba(20,14,6,.4) 65%, rgba(20,14,6,.3) 100%),
  linear-gradient(180deg, rgba(44,32,14,.1) 0%, rgba(18,13,5,.34) 58%, rgba(10,7,2,.56) 100%),
  rgba(16,11,4,.3); opacity: 1; z-index: 1; }
[dir="ltr"] .inst-dhero:has(.ph-bg)::before { background:
  linear-gradient(to right, rgba(20,14,6,.6) 0%, rgba(20,14,6,.4) 65%, rgba(20,14,6,.3) 100%),
  linear-gradient(180deg, rgba(44,32,14,.1) 0%, rgba(18,13,5,.34) 58%, rgba(10,7,2,.56) 100%),
  rgba(16,11,4,.3); }
.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; }
/* the institution's real logo on a white plaque so the artwork reads over the
   dark photo (mirrors the directory card's .inst-logo frame). */
.inst-dhero-crest { flex-shrink: 0; width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px);
  border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--aegold-200);
  padding: 10px; display: grid; place-items: center; }
.inst-dhero-crest img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
/* wide SVG crests on the detail hero: white plaque for contrast over the photo */
.inst-dhero-crest--wide {
  inline-size: clamp(104px, 11vw, 140px);
  block-size: clamp(74px, 7.5vw, 98px);
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 14px);
  background: var(--bg-surface);
  border: 1px solid var(--aegold-200);
  border-radius: var(--radius-lg);
}
.inst-dhero-crest--wide img { filter: none; }
.inst-dhero-crest .ic { width: 52%; height: 52%; color: var(--aegold-700); }
.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: #F3E8C9;
  padding: 7px 16px; background: rgba(124, 94, 36, .64); border: 1px solid rgba(229, 217, 160, .42);
  border-radius: var(--radius-full); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-button-inset); }
.inst-dhero-badge .ic { color: #E5D9A0; }
/* 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), 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: #fff; border-color: #fff; color: var(--ink); transform: translateY(-2px); }
.inst-chip:hover .ic { color: var(--aegold-700); }
.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: 1180px) {
  .inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@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; }
  .inst-tools { flex-direction: column; align-items: stretch; }
  .inst-filters { inline-size: 100%; }
  .inst-search { flex: 1 1 auto; inline-size: 100%; }
}
@media (max-width: 620px) {
  .inst-filter { flex: 1 1 0; min-inline-size: 0; padding-inline: var(--space-5); font-size: var(--text-sm); gap: var(--space-3); }
  .inst-filter .n { min-inline-size: var(--space-10); min-block-size: var(--space-10); padding-inline: var(--space-3); }
}
@media (max-width: 480px) {
  .inst-card-metrics { grid-template-columns: 1fr; }
  .inst-metric { padding-inline: 0; }
  .inst-metric + .inst-metric {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border-subtle);
    padding-block-start: var(--space-6);
  }
}
@media (max-width: 340px) {
  .inst-filter { flex: 1 1 0; min-inline-size: 0; }
}
@media (max-width: 720px) {
  .inst-figs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .inst-grid {
    --inst-logo-slot: 54px;
    --inst-logo-crest: 62px;
    --inst-logo-landscape-inner: 78px;
    --inst-logo-wide-w: 108px;
    --inst-logo-wide-h: 42px;
    --inst-logo-xwide-w: 128px;
    --inst-logo-xwide-h: 38px;
    --inst-logo-tall-w: 46px;
    --inst-logo-tall-h: 60px;
  }
  .inst-card h3 { font-size: 21px; }
  .inst-figs { grid-template-columns: 1fr; }
}

/* DETAIL HERO on phones: keep the logo plaque beside a smaller title so the
   identity row never wraps into a detached badge, and stack the contact chips
   full-width so the ragged multi-row wrap becomes a clean, thumb-safe list. */
@media (max-width: 560px) {
  .inst-dhero-id { gap: 14px; }
  .inst-dhero-crest { width: 60px; height: 60px; padding: 8px; }
  .inst-dhero-crest--wide { inline-size: 92px; block-size: 66px; padding: 8px 10px; }
  .inst-dhero h1 { font-size: clamp(28px, 8vw, 36px); }
  .inst-chips { gap: 10px; }
  .inst-chip { width: 100%; justify-content: center; }
}