/* =========================================================================
   UMAS — public site stylesheet
   Lean, dependency-free CSS. Brand colors are injected as CSS variables
   (see includes/header.php) so Admin → Тохиргоо can retheme without
   touching this file. Inherited from the KHENICS codebase this site was
   built from — --gold is kept as an alias of --accent for backward
   compatibility with the original component classes (.btn-gold etc.);
   new UMAS components use --accent directly.
   ========================================================================= */

:root{
  --navy: #0A0078;
  --navy-dark: #07004E;
  --gold: #1F9A6C;
  --accent: #1F9A6C;
  --ink: #16233a;
  --muted: #5c6b82;
  --bg-alt: #f5f7fb;
  --border: #e6eaf1;
  --white: #ffffff;
  --radius-lg: 16px;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(16,51,102,.08), 0 1px 2px rgba(16,51,102,.06);
  --shadow-md: 0 8px 24px rgba(16,51,102,.12);
  --container: 1200px;
  --font-nav: 'Fester', 'Golos Text', Arial, sans-serif;
}

/* Fester — client-supplied brand typeface, used for the main navigation
   (see .main-nav a / .nav-item-label below). Only the 3 weights the nav
   actually uses are loaded (Regular/SemiBold/Bold) — no synthetic
   browser-bolding, each maps to its real drawn weight. */
@font-face{
  font-family:'Fester';
  src:url('../fonts/Fester-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Fester';
  src:url('../fonts/Fester-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Fester';
  src:url('../fonts/Fester-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Fester';
  src:url('../fonts/Fester-Heavy.ttf') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.icon{width:22px;height:22px;flex:none}
section{padding:76px 0}
@media (max-width:720px){section{padding:52px 0}}

/* Skip link for keyboard/screen-reader users */
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip-link:focus{left:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:8px;font-weight:600;font-size:15px;border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:var(--navy-dark)}
.btn-gold:hover{background:#e6a222;box-shadow:0 8px 20px rgba(245,175,53,.35)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-dark);box-shadow:0 8px 20px rgba(16,51,102,.3)}
.btn-outline-white{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline-navy{border-color:var(--navy);color:var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:#fff}
.btn-sm{padding:9px 18px;font-size:14px}

/* Facebook/X/LinkedIn/copy-link share row — appears on every page (see the
   block just before </main> in includes/footer.php). 2026-09 punch list:
   redesigned from 2 colored text pills (brand-colored, Facebook/Twitter
   only) into a "ХУВААЛЦАХ:" label + 4 neutral gray circles, one plain icon
   each — the reference design uses the same flat gray circle for every
   network instead of per-brand colors, so unlike the old .btn-share-fb/
   .btn-share-tw rules there is deliberately no per-platform background here.
   The copy-link button holds both a default (link) and a "copied"
   (checkmark) icon and toggles between them with the .copied class —
   see #shareCopyBtn in assets/js/main.js — rather than swapping SVG
   markup from JS. */
.share-buttons{padding:28px 0;border-top:1px solid var(--border)}
.share-buttons-inner{display:flex;align-items:center;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.share-label{font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--navy-dark)}
.btn-share{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;padding:0;border:none;border-radius:50%;background:#eef0f3;color:var(--navy-dark);cursor:pointer;transition:background-color .15s ease}
.btn-share:hover{background:#dfe3ea;text-decoration:none}
.btn-share .icon{width:16px;height:16px}
.btn-share-copy{position:relative}
.btn-share-copy .icon-copied{display:none}
.btn-share-copy.copied{background:#dcf3e3;color:#1c8a44}
.btn-share-copy.copied .icon-default{display:none}
.btn-share-copy.copied .icon-copied{display:inline-block}

/* Interactive aimag (province) filter on the "Гүйцэтгэсэн ажлууд" page —
   see includes/completed-works-map.php + assets/js/completed-works-map.js.
   The map is a real (simplified) SVG boundary map of Mongolia's 21 aimags —
   see includes/mongolia-aimag-paths.php for the geometry + its provenance.
   Each <path class="cw-region"> carries a data-aimag attribute the JS reads;
   the Ulaanbaatar shape (.cw-region-ub) is rendered for geographic context
   only and is intentionally not clickable (it is not one of aimag_options()). */
.cw-map-section{padding:28px 0 56px}
/* Eyebrow+intro sit to the left, the color legend to the right, on one row
   that wraps on narrow screens. */
.cw-map-heading{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px 28px;margin-bottom:28px}
.cw-map-intro{color:var(--muted,#5b6778);max-width:640px;margin:0;line-height:1.6}
.cw-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:6px 0 0;padding:0}
.cw-legend li{display:flex;align-items:center;gap:8px;font-size:13px;color:#5b6778;white-space:nowrap}
.cw-legend-swatch{width:14px;height:14px;border-radius:4px;background:rgba(16,51,102,.12);border:1px solid var(--border);flex:none}
.cw-legend-swatch.has-data{background:rgba(16,51,102,.38);border-color:rgba(16,51,102,.38)}
/* Map sits full-width on top, results panel full-width below it (not a
   side-by-side split) — the map is meant to read at the same width as the
   rest of the site's content, per the client's explicit sizing request. */
.cw-map-layout{display:flex;flex-direction:column;gap:28px}
.cw-map-svg{display:block;width:100%;height:auto;background:var(--bg-alt);border-radius:var(--radius-lg)}
.cw-region{fill:rgba(16,51,102,.12);stroke:#fff;stroke-width:1.2;cursor:pointer;transition:fill .15s ease}
.cw-region:hover{fill:rgba(16,51,102,.28)}
.cw-region.has-data{fill:rgba(16,51,102,.38)}
.cw-region.has-data:hover{fill:rgba(16,51,102,.55)}
.cw-region.active{fill:var(--navy)}
.cw-region-ub{fill:#fbecd2;stroke:var(--gold);cursor:default;pointer-events:none}

/* Aimag name labels drawn on top of every region (own foreach pass in the
   PHP, after all path fills) so a small aimag's label never gets painted
   over by the next region. White fill matches the client's request; the
   soft dark stroke behind it (paint-order:stroke) keeps it legible on both
   the pale "no data" fill and the darker "has data" fill. */
.cw-region-label{fill:#fff;font-family:inherit;font-size:8.5px;font-weight:600;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(11,36,71,.6);stroke-width:2px;stroke-linejoin:round;pointer-events:none;user-select:none}
.cw-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px}
.cw-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.cw-panel-eyebrow{color:var(--gold);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.cw-panel-header h3{font-size:19px;color:var(--navy-dark);margin:0}
.cw-reset-btn{flex:none;background:none;border:none;color:var(--navy);font-weight:700;font-size:13px;cursor:pointer;padding:4px 0;font-family:inherit}
.cw-reset-btn:hover{text-decoration:underline}
.cw-cat-heading{font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 10px}
.cw-cat-heading:first-child{margin-top:0}
/* Selected aimag's (or "Бүгд") works render as a 4-across card grid under
   the map, narrowing at the same breakpoints used elsewhere on this page. */
.cw-card-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cw-card{background:var(--bg-alt);border-radius:8px;padding:12px 14px;border-left:3px solid var(--gold)}
.cw-card-cat{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.cw-card-client{font-weight:700;color:var(--navy-dark);font-size:14.5px}
.cw-card-type{font-size:13px;color:#4a5568;margin-top:2px}
.cw-card-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:12px;color:#93a0b3}
.cw-empty{color:#93a0b3;font-size:14px;padding:8px 0}
@media (max-width:900px){
  .cw-card-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cw-card-list{grid-template-columns:1fr}
}

/* ---------- Top utility bar ---------- */
.topbar-strip{background:var(--navy-dark);color:#fff}
.topbar-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;font-size:13px}
.topbar-contacts{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.topbar-contacts a,.topbar-contacts span{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.85)}
.topbar-contacts a:hover{color:var(--gold);text-decoration:none}
.topbar-contacts .icon{width:15px;height:15px;color:var(--gold);flex:none}
.topbar-right{display:flex;align-items:center;gap:16px;flex:none}
.topbar-social{display:flex;align-items:center;gap:12px}
.topbar-social a{display:flex;color:rgba(255,255,255,.75)}
.topbar-social a:hover{color:var(--gold)}
.topbar-social .icon{width:15px;height:15px}
.topbar-lang-switch{display:flex;gap:2px;background:rgba(255,255,255,.1);border-radius:99px;padding:3px;font-size:12.5px;font-weight:700;flex:none}
.topbar-lang-switch a{padding:4px 10px;border-radius:99px;color:rgba(255,255,255,.75)}
.topbar-lang-switch a.active{background:var(--gold);color:#fff}
.topbar-lang-switch a:hover{text-decoration:none}
@media (max-width:720px){.topbar-contacts,.topbar-social{display:none}}

/* ---------- Header ---------- */
/* .topbar-strip (contact info / social / MN-EN switch) sits in normal flow
   BEFORE .site-header, which is the only piece that sticks (see below) — so
   without this wrapper, scrolling even a little makes .topbar-strip scroll
   away and takes the language switch with it, with no way back to it short
   of scrolling all the way to the top.
   Making .header-stack itself the sticky element (rather than making
   .topbar-strip sticky too) means .site-header's own position:sticky;top:0
   below never actually has to engage: once .header-stack is pinned at the
   top of the viewport, .site-header's normal in-flow position (right after
   .topbar-strip, further down than 0) never crosses its own top:0 threshold,
   so it just sits there — no two independent sticky elements fighting over
   top:0, no hardcoded pixel offset to keep in sync with .topbar-strip's
   height. */
.header-stack{position:sticky;top:0;z-index:100}

/* The frosted-glass background lives on ::before rather than directly on
   .site-header. A `backdrop-filter` (like `filter`/`transform`) on an
   element makes that element the containing block for any `position:fixed`
   descendant — and .main-nav's mobile slide-in drawer (see the 960px
   breakpoint below) is exactly such a descendant. With the filter on
   .site-header itself, the "viewport-height" drawer was being sized
   against the ~79px-tall header box instead of the real viewport, so it
   rendered as a tiny clipped sliver on mobile. Moving the filter to a
   ::before layer keeps the same visible effect while leaving .site-header
   filter-free, so fixed-position descendants size against the viewport
   again. z-index:-1 keeps the layer behind .header-inner's own content
   (both sit inside .site-header's stacking context, itself z-index:100
   relative to the rest of the page, so the blur still shows above content
   scrolling underneath). */
.site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border)}
.site-header::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px);z-index:-1}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.logo{flex:none}
.logo img{height:56px;width:auto}
/* Full-width bar below the logo/button row — see the comment in
   includes/header.php on why .main-nav lives here instead of inside
   .header-inner. Collapses to nothing at the mobile breakpoint below,
   where .main-nav becomes a fixed off-canvas drawer instead. */
.nav-bar{background:var(--navy);border-top:1px solid var(--navy);border-bottom:1px solid var(--navy)}
/* Link padding (20px, matching .container's own side padding) pushes the
   first/last item's text in from the bar's edge — the -20px margin here
   cancels that so "UMAS ТУХАЙ" lines up flush under the logo on the left,
   and the last item lines up flush with the container's right edge. */
.main-nav{display:flex;align-items:center;justify-content:space-between;gap:2px;margin:0 -20px}
.main-nav a{padding:12px 20px;border-radius:8px;font-weight:700;font-size:13.5px;font-family:var(--font-nav);color:#fff;white-space:nowrap;text-transform:uppercase}
.main-nav a:hover,.main-nav a.active{color:var(--navy);background:#fff;text-decoration:none;border-radius:0}

/* Main menu items (Admin -> Үндсэн цэс). A top-level item with submenu
   children gets .has-children — its dropdown flows down on hover (desktop)
   or tap-to-expand (mobile, see the 960px breakpoint below). */
.nav-item{position:relative;display:flex;align-items:center;flex-wrap:wrap}
.nav-item-label{padding:12px 20px;font-weight:700;font-size:13.5px;font-family:var(--font-nav);color:#fff;cursor:default;white-space:nowrap;text-transform:uppercase}
/* Chevron toggle is hidden on desktop — with 8 top-level items the arrows
   were pushing labels onto two lines and cramping the bar; the dropdown
   still opens on desktop via :hover/:focus-within on .has-children below,
   so no function is lost. Restored for mobile (960px breakpoint) where
   there's no hover and the tap target is the only way to open a submenu. */
.nav-submenu-toggle{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:6px;margin-left:-6px;color:inherit}
.nav-submenu-toggle .icon{width:16px;height:16px;transition:transform .2s ease}
.nav-item.submenu-open .nav-submenu-toggle .icon,
.nav-item.has-children:hover .nav-submenu-toggle .icon,
.nav-item.has-children:focus-within .nav-submenu-toggle .icon{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-md);padding:8px;margin:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:110}
.submenu a{display:block;padding:9px 12px;border-radius:6px;font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}
.submenu a:hover,.submenu a.active{background:var(--bg-alt);color:var(--navy);text-decoration:none}
.nav-item.has-children:hover .submenu,
.nav-item.has-children:focus-within .submenu,
.nav-item.submenu-open .submenu{opacity:1;visibility:visible;transform:translateY(0)}

.header-right{display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;gap:2px;background:var(--bg-alt);border-radius:99px;padding:3px;font-size:13px;font-weight:700}
.lang-switch a{padding:5px 11px;border-radius:99px;color:var(--muted)}
.lang-switch a.active{background:var(--navy);color:#fff}
.lang-switch a:hover{text-decoration:none}
.nav-cta{white-space:nowrap}
.nav-cta .icon{width:15px;height:15px}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--navy)}
.menu-toggle .icon{width:26px;height:26px}

@media (max-width:960px){
  /* .main-nav becomes a fixed off-canvas drawer below (out of normal
     flow), so its wrapper bar has nothing left to size around — drop its
     background/border rather than showing an empty gray sliver. */
  .nav-bar{background:none;border:none}
  .nav-bar .container{padding:0}
  /* z-index:95 is required, not decorative: .nav-backdrop below sits at
     z-index:90, and CSS stacks a positioned element with an explicit
     z-index ABOVE any sibling left at the default z-index:auto regardless
     of DOM order. Without this, .nav-backdrop painted on top of the open
     .main-nav panel — invisible-looking (both are semi-transparent-ish at
     a glance) but it silently ate every tap, so links and the submenu
     chevron looked "dead" and any tap just closed the menu again. */
  .main-nav{position:fixed;inset:0 0 0 30%;z-index:95;background:#fff;flex-direction:column;align-items:stretch;padding:90px 24px 24px;margin:0;transform:translateX(100%);transition:transform .25s ease;box-shadow:-10px 0 30px rgba(0,0,0,.15);overflow-y:auto}
  .main-nav.open{transform:translateX(0)}
  /* .header-right (the "Холбоо барих"-style CTA button + the hamburger)
     was overflowing .header-inner on narrow phones: the CTA's label is
     admin-edited (Админ -> Үндсэн цэс) and had white-space:nowrap, so at
     mobile widths the logo + full-width button + #menuToggle no longer
     fit on one line, and the row simply overflowed to the right with
     nothing to shrink — pushing the hamburger button itself off the edge
     of the screen entirely (reachable only by scrolling the page
     sideways, which is the "цэс харагдахгүй, зүүн тийш түлхвэл гарч ирнэ"
     bug). Shrinking the logo/button here reclaims enough width that both
     normally sit on one row again; flex-wrap on .header-right is a safety
     net so if a future/longer admin-entered label still doesn't fit (or
     on a very narrow device), the button simply wraps to its own line
     ABOVE the hamburger instead of ever pushing it outside the viewport. */
  .header-inner{gap:10px}
  .header-right{flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .logo img{height:40px}
  .nav-cta{white-space:normal;text-align:center;padding:8px 14px;font-size:13px}
  /* Off-canvas panel is a white sheet, not the navy desktop bar — reset the
     desktop bar's white/bold nav-link styling back to dark text here so
     links stay legible against this white background. */
  .main-nav a{padding:14px 10px;border-bottom:1px solid var(--border);font-size:16px;font-weight:600;color:var(--ink)}
  .menu-toggle{display:inline-flex}
  /* nav-cta ("Холбоо барих" button) stays visible on mobile too — it's the
     only way to reach Contact from the header now that the menu list no
     longer repeats it (see includes/header.php). */
  .nav-backdrop{display:none;position:fixed;inset:0;background:rgba(11,36,71,.4);z-index:90}
  .nav-backdrop.open{display:block}

  /* Submenu dropdowns: hover doesn't exist on touch, so on mobile the
     chevron button becomes the tap-to-expand control (JS toggles
     .submenu-open on .nav-item — see assets/js/main.js) and the submenu
     itself lays out inline (indented) under its parent instead of
     floating, since .main-nav is now a vertical slide-in panel. */
  .nav-item{flex-wrap:wrap;border-bottom:1px solid var(--border)}
  .nav-item>a,.nav-item-label{flex:1;border-bottom:none;padding:14px 10px;font-weight:600;color:var(--ink)}
  .nav-item.has-children>a,.nav-item.has-children>.nav-item-label{padding-right:0}
  .nav-submenu-toggle{display:flex;padding:14px 10px}
  .nav-submenu-toggle .icon{width:20px;height:20px}
  .submenu{position:static;flex-basis:100%;opacity:1;visibility:visible;transform:none;min-width:0;background:var(--bg-alt);border:none;box-shadow:none;border-radius:8px;margin:0 0 10px;padding:2px;max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease}
  .nav-item.submenu-open .submenu{max-height:600px}
  .submenu a{border-bottom:none;padding:12px 14px}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(155deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff;overflow:hidden;padding:110px 0 130px}
.hero::before,.hero::after{content:"";position:absolute;opacity:.5}
.hero::before{right:-6%;top:-10%;width:56%;height:140%;background:rgba(255,255,255,.035);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
.hero::after{right:6%;bottom:-18%;width:34%;height:80%;background:rgba(245,175,53,.12);clip-path:polygon(40% 0,100% 0,60% 100%,0% 100%)}
.hero.has-slides{background:var(--navy-dark)}
.hero.has-slides::before,.hero.has-slides::after{display:none}
.hero-slideshow{position:absolute;inset:0;z-index:0}
/* Gradient fallback for a slide with no real photo yet (see the
   conditional inline style in index.php) — Admin can add a photo later
   without any further CSS/template changes; until then this reads as an
   intentional flat-color hero rather than a broken image. */
.hero-slide{position:absolute;inset:0;overflow:hidden;background-size:cover;background-position:center;background-image:linear-gradient(155deg,var(--navy) 0%,var(--navy-dark) 100%);opacity:0;transition:opacity 1.8s ease}
.hero-slide.active{opacity:1}
/* A slide's YouTube video (assets/js/main.js embedSlideVideo — only the
   active slide ever has one) — the classic oversized-iframe-then-crop trick
   since an iframe can't use background-size/object-fit like an <img>: sized
   to always be at least 100% in both dimensions at a fixed 16:9, centered,
   then .hero-slide's own overflow:hidden crops it to the slide's box. */
.hero-slide-video{position:absolute;top:50%;left:50%;width:177.78vh;height:100vh;min-width:100%;min-height:56.25vw;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(155deg,rgba(16,51,102,.5) 0%,rgba(11,36,71,.62) 100%)}
/* Prev/next slide arrows — only rendered (index.php) when there's more than
   one slide to move between. */
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,36,71,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.hero-nav:hover{background:rgba(11,36,71,.6);border-color:rgba(255,255,255,.6)}
.hero-nav .icon{width:22px;height:22px}
.hero-nav-prev{left:20px}
.hero-nav-next{right:20px}
@media (max-width:720px){.hero-nav{width:36px;height:36px}.hero-nav .icon{width:18px;height:18px}.hero-nav-prev{left:8px}.hero-nav-next{right:8px}}
.hero-inner{position:relative;z-index:2;max-width:680px;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero h1{font-size:clamp(32px,5vw,54px);margin-bottom:20px;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.hero p{font-size:18px;color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 34px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
#heroHeading,#heroSubtitle,#heroActions{transition:opacity .4s ease}

/* ---------- Section headings ---------- */
.section-head{max-width:680px;margin:0 auto 48px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.eyebrow{display:inline-block;color:var(--gold);background:rgba(245,175,53,.12);padding:5px 14px;border-radius:99px;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.section-head h2{font-size:clamp(26px,3.4vw,38px);color:var(--navy-dark)}
.section-head p{color:var(--muted);font-size:16.5px}
.bg-alt{background:var(--bg-alt)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy .section-head h2{color:#fff}
.bg-navy .section-head p{color:rgba(255,255,255,.75)}

/* ---------- Grids ---------- */
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Cards: services ---------- */
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 26px;box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease;height:100%}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.service-icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(155deg,var(--navy),var(--navy-dark));display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.service-icon .icon{color:var(--gold);width:26px;height:26px}
.service-card h3{font-size:19px;color:var(--navy-dark)}
.service-card p{color:var(--muted);font-size:15px;margin-bottom:16px}
.service-card .more{font-weight:700;font-size:14px;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
.service-card .more .icon{width:16px;height:16px;transition:transform .15s ease}
.service-card:hover .more .icon{transform:translateX(4px)}

/* Photo-tile service cards (homepage, /services listing, "other services") */
.service-tile{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--bg-alt);aspect-ratio:2/3;transition:box-shadow .18s ease}
.service-tile:hover{box-shadow:var(--shadow-md)}
.service-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.service-tile:hover img{transform:scale(1.06)}
.service-tile-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(155deg,var(--navy),var(--navy-dark))}
.service-tile-noimg .icon{width:54px;height:54px;color:rgba(255,255,255,.35)}
.service-tile .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,36,71,.94) 0%,rgba(11,36,71,.55) 48%,rgba(11,36,71,.05) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;transition:background .25s ease}
.service-tile:hover .overlay{background:linear-gradient(0deg,rgba(11,36,71,.97) 0%,rgba(11,36,71,.68) 52%,rgba(11,36,71,.12) 100%)}
.service-tile h3{font-size:19px;margin:0 0 8px;color:#fff}
.service-tile p{color:rgba(255,255,255,.85);font-size:14.5px;margin-bottom:14px}
.service-tile .more{font-weight:700;font-size:14px;color:#fff;display:inline-flex;align-items:center;gap:6px}
.service-tile .more .icon{width:16px;height:16px;transition:transform .15s ease;color:var(--gold)}
.service-tile:hover .more .icon{transform:translateX(4px)}

/* ---------- Stats band ---------- */
.stats-band-wrap{position:relative;z-index:3;padding-bottom:56px}
.stats-band-wrap.overlap{margin-top:-64px}
.stats-band{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:36px 24px}
.stats-band .grid{text-align:center}
.stat-num{font-size:clamp(28px,3.6vw,42px);font-weight:800;color:var(--navy);font-family:var(--font-nav)}
.stats-band .grid>div:nth-child(even) .stat-num{color:var(--gold)}
.stat-lbl{color:var(--muted);font-size:13px;font-weight:700;margin-top:8px}
@media (min-width:641px){.stats-band .grid>div{border-left:1px solid var(--border)}.stats-band .grid>div:first-child{border-left:none}}
@media (max-width:720px){.stats-band-wrap.overlap{margin-top:-40px}.stats-band{padding:26px 16px}}

/* ---------- Projects ---------- */
.project-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--bg-alt);aspect-ratio:4/3}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.project-card:hover img{transform:scale(1.06)}
.project-card .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,36,71,.92) 0%,rgba(11,36,71,.15) 55%,rgba(11,36,71,0) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff}
.project-card .tag{color:var(--gold);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.project-card h3{font-size:18px;margin:0}
.project-card-noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--navy),var(--navy-dark))}
.project-card-noimg .icon{width:54px;height:54px;color:rgba(255,255,255,.35)}

/* ---------- News ---------- */
.news-card{display:flex;gap:22px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.news-card .news-thumb{width:230px;flex:none;background:var(--bg-alt);position:relative}
.news-card .news-thumb img{width:100%;height:100%;object-fit:cover;min-height:160px}
.news-card .news-thumb-empty{width:100%;height:100%;min-height:160px;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--navy),var(--navy-dark))}
.news-card .news-thumb-empty .icon{color:rgba(255,255,255,.35);width:40px;height:40px}
.news-body{padding:24px 24px 24px 0;display:flex;flex-direction:column}
.news-date{color:var(--gold);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.news-card h3{font-size:19px;color:var(--navy-dark)}
.news-card p{color:var(--muted);font-size:15px;margin-bottom:14px}
@media (max-width:720px){.news-card{flex-direction:column}.news-card .news-thumb{width:100%;height:180px}.news-body{padding:20px}}

/* ---------- Testimonials ---------- */
.testimonial-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column}
.testimonial-card .icon{color:var(--gold);width:30px;height:30px;margin-bottom:14px}
.testimonial-card p{color:var(--ink);font-size:15.5px;flex:1}
.testimonial-person{display:flex;align-items:center;gap:12px;margin-top:16px}
.testimonial-person img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.testimonial-person .avatar-fallback{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.testimonial-person .name{font-weight:700;font-size:14.5px}
.testimonial-person .role{color:var(--muted);font-size:13px}

/* ---------- Team ---------- */
.team-card{text-align:left;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.team-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin:0;border:0;border-radius:0;display:block}
.team-photo-fallback{width:100%;aspect-ratio:1/1;margin:0;border-radius:0;background:linear-gradient(155deg,var(--navy),var(--navy-dark));display:flex;align-items:center;justify-content:center;color:var(--gold)}
.team-photo-fallback .icon{width:52px;height:52px}
.team-body{padding:18px 20px 22px}
.team-card h3{font-size:17px;margin-bottom:2px}
.team-card .role{color:var(--muted);font-size:14px}

/* Wrapper around the Байгууллагын бүтэц org-chart <img> that hosts the
   16 institute hotspot overlays below - width:fit-content shrinks the
   wrapper to the image's own rendered size (instead of the full
   .container width) so it can be centred with margin:0 auto same as the
   img was on its own, while position:relative gives the percentage-based
   .org-chart-hotspot children something sized exactly like the image to
   position against at every viewport width. 2026-09 punch list. */
.org-chart-wrap{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto}

/* Invisible click targets over the 16 institute rows baked into the chart
   picture itself (see the $orgChartHotspotsMn/_en arrays in page.php) -
   percentages of .org-chart-wrap's own box, which is exactly the image's
   rendered size, so they stay aligned with the picture as it scales down
   on narrower screens. No visible chrome by default so the chart's own
   design isn't altered; the hover/focus tint is just an affordance that
   this area is clickable, not something meant to match each row's exact
   shape. */
.org-chart-hotspot{position:absolute;display:block}
.org-chart-hotspot:hover,.org-chart-hotspot:focus-visible{background:rgba(255,255,255,.22);outline:2px solid var(--gold);outline-offset:-2px;border-radius:8px}

/* .org-council-links (the old button row under the org-chart image, one
   per council) was removed 2026-09-13 - those three council names are now
   .org-chart-hotspot overlays too, see page.php. Left this note since the
   class name may still turn up in old notes/backups referencing it. */

/* Council roster (council.php): a plain, photo-free list of name+position
   rows - the school specifically asked for these NOT to be a photo grid
   like .team-card above (2026-09 punch list: "... зурагтай оруулахгүйгээр
   ... зөвлөл листээр гардаг болгох"). The 1px gap + var(--border) fill
   behind it draws a hairline divider between rows without a border on
   every single item. */
.council-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.council-list-item{background:#fff;padding:18px 24px}
.council-list-item h3{font-size:17px;margin:0}
.council-list-item .role{color:var(--muted);font-size:14px;margin-top:2px}

/* ---------- CTA band ---------- */
/* Same has-image treatment as .page-hero: a navy gradient laid over the
   photo (instead of a separate overlay element) keeps the white heading/text
   readable, and the plain-gradient version's decorative corner shape is
   hidden since it would clash with a real photo. Both the image and the
   gradient's darkness are admin-configurable (Админ → Блок тохиргоо →
   Ерөнхий "Холбогдох" зурвас) via the --cta-bg-image/--cta-overlay-opacity
   custom properties set once in includes/header.php's root <style> block
   (same place --navy/--gold etc. come from), rather than per-page here —
   .cta-band is copy-pasted inline into every page that uses it, so this is
   the one place a change reaches all of them at once. The two gradient
   stops keep their own base colors (a subtle navy-to-navy-dark diagonal)
   but share one alpha channel, so "opacity" stays a single number to reason
   about instead of two independently-tunable stops.
   min-height is the same admin-configurable-in-one-place story, driven by
   --cta-band-height (2026-09 punch list: an explicit px height option,
   defaulting to 0 - i.e. no-op, same as before this existed - until an
   admin sets one). display:flex + align-items:center centers the .inner
   content in whatever extra height that adds, instead of leaving it stuck
   at the top with empty space below; with the default 0 there's no extra
   height to center within, so unset behaves exactly as it did before. */
.cta-band{display:flex;align-items:center;min-height:var(--cta-band-height,0);background:linear-gradient(155deg,rgba(10,0,120,var(--cta-overlay-opacity,.65)),rgba(7,0,78,var(--cta-overlay-opacity,.65))),var(--cta-bg-image,url('/assets/img/cta-bg.jpg')) center/cover no-repeat;color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:none}
.cta-band .inner{position:relative;z-index:1;width:100%}
.cta-band h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.8);margin-bottom:28px;font-size:16.5px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-info-item{display:flex;gap:14px;margin-bottom:22px}
.contact-info-item .ic{width:44px;height:44px;border-radius:10px;background:var(--bg-alt);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.contact-info-item h4{font-size:14.5px;margin-bottom:3px;color:var(--navy-dark)}
.contact-info-item p{color:var(--muted);font-size:14.5px;margin:0}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:24px;border:1px solid var(--border)}
.map-wrap iframe{width:100%;height:280px;border:0;display:block}
.social-row{display:flex;gap:10px;margin-top:22px}
.social-row a{width:40px;height:40px;border-radius:50%;background:var(--bg-alt);color:var(--navy);display:flex;align-items:center;justify-content:center;transition:.15s}
.social-row a:hover{background:var(--navy);color:#fff}

.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:13.5px;margin-bottom:7px;color:var(--navy-dark)}
.field .req{color:#c0392b}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:15px;font-family:inherit;background:#fbfcfe;color:var(--ink)
}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(16,51,102,.1)}
.field-error{color:#c0392b;font-size:12.5px;margin-top:5px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-row-2{grid-template-columns:1fr}}

.radio-list{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--border);border-radius:8px;padding:6px;background:#fbfcfe}
.radio-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;font-size:14.5px;color:var(--ink);cursor:pointer}
.radio-option:hover{background:#fff}
.radio-option input[type=radio]{width:17px;height:17px;flex:none;accent-color:var(--navy)}

/* ---------- Alerts ---------- */
.alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:14.5px;border:1px solid transparent}
.alert-success{background:#e4f5ec;color:#175c3f;border-color:#bfe6d2}
.alert-error{background:#fbeaea;color:#9b2c2c;border-color:#f3c8c8}

/* ---------- Breadcrumb / page header (inner pages) ---------- */
.page-hero{background:linear-gradient(155deg,var(--navy),var(--navy-dark));background-size:cover;background-position:center;color:#fff;padding:64px 0;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-4%;top:-30%;width:30%;height:160%;background:rgba(245,175,53,.1);clip-path:polygon(40% 0,100% 0,60% 100%,0 100%)}
.page-hero.has-image::after{display:none}
.page-hero-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(155deg,rgba(16,51,102,.5) 0%,rgba(11,36,71,.62) 100%)}
.page-hero .inner{position:relative;z-index:1}
.breadcrumb{font-size:13.5px;color:rgba(255,255,255,.65);margin-bottom:12px}
.breadcrumb a{color:rgba(255,255,255,.85)}
.page-hero h1{font-size:clamp(26px,4vw,40px);margin:0}

/* ---------- Detail pages ---------- */
.detail-cover{width:100%;height:auto;border-radius:var(--radius-lg);margin-bottom:36px;box-shadow:var(--shadow-sm)}
/* No max-height/object-fit here on purpose: a fixed-height crop-to-fill
   hides content that sits near the top/bottom edge of infographics and
   diagrams (callout labels, chart edges) - see .detail-cover-portrait's
   comment above for the same lesson applied to tall images. Plain
   width:100%+height:auto never crops or distorts, whatever the image's
   own aspect ratio. */
/* A portrait cover (news-post.php only, see $coverIsPortrait there) skips
   .detail-cover's crop entirely — width:100%+object-fit:cover on a tall
   image would still hide most of it. Instead it floats at a fixed width
   with height:auto so nothing is cropped, and opens the existing
   gallery/#lightbox (reused via the gallery-thumb class) for the full view.
   display:flow-root on the wrapper contains the float so it doesn't bleed
   into whatever section follows .prose.
   NOTE: the thumbnail carries BOTH .gallery-thumb and .detail-cover-portrait
   (see news-post.php) so it plugs into the existing lightbox JS. But
   .gallery-thumb's own rules force aspect-ratio:4/3 + img object-fit:cover —
   exactly the crop this treatment exists to avoid — and since it's a single
   class selector too, source order alone would decide which wins. Every rule
   below uses the compound .gallery-thumb.detail-cover-portrait selector so it
   outranks .gallery-thumb regardless of where either block sits in the file. */
.detail-body-flow{display:flow-root}
.gallery-thumb.detail-cover-portrait{float:left;width:220px;margin:0 28px 20px 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:zoom-in;aspect-ratio:auto}
.gallery-thumb.detail-cover-portrait img{display:block;width:100%;height:auto;object-fit:unset;transition:transform .35s ease}
.gallery-thumb.detail-cover-portrait:hover img{transform:scale(1.06)}
@media (max-width:640px){.gallery-thumb.detail-cover-portrait{float:none;width:100%;max-width:280px;margin:0 auto 24px}}
.detail-meta{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:30px;padding:20px 24px;background:var(--bg-alt);border-radius:var(--radius)}
.detail-meta div span{display:block}
.detail-meta .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.detail-meta .val{font-weight:700;color:var(--navy-dark)}
.prose{font-size:16.5px;color:#26344c;max-width:780px}
.prose p{margin-bottom:1.3em;text-align:justify}
.prose h2{font-size:24px;margin:1.3em 0 .55em;color:var(--navy-dark);line-height:1.3}
.prose h3{font-size:19px;margin:1.2em 0 .5em;color:var(--navy-dark);line-height:1.3}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.4em}
.prose a{color:var(--navy);text-decoration:underline}
.prose a:hover{color:var(--gold)}
/* A .btn (a page.php template button, or a link an admin styles as a button
   from inside the rich-text editor - e.g. a PDF-download link) sometimes
   ends up nested inside .prose. Plain ".prose a" above is one class plus one
   element (specificity 0,0,1,1), which OUTRANKS a single class like
   ".btn-navy" (0,0,1,0) regardless of which rule comes later in this file -
   so without this, .prose silently wins and every .btn inside it renders
   with .prose's own link colour and underline instead of its own, real bug
   found 2026-09: navy text on a navy background is invisible, not just
   "looks like a plain link". Re-declaring each variant at class+class
   specificity (0,0,2,1) here restores its own colours and drops the
   underline, without needing a one-off inline style on every button placed
   inside a page's content (the older surgaltiin-juram PDF link used exactly
   that workaround; it still works fine and doesn't need to change, this
   just means future ones no longer have to).
*/
.prose a.btn{text-decoration:none}
.prose a.btn-navy,.prose a.btn-accent,.prose a.btn-outline-white{color:#fff}
.prose a.btn-gold{color:var(--navy-dark)}
.prose a.btn-outline-navy{color:var(--navy)}
.prose img{border-radius:var(--radius);margin:1.3em 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:14.5px;display:block;overflow-x:auto}
.prose th,.prose td{padding:10px 14px;text-align:left;border:1px solid var(--border);vertical-align:top}
.prose thead th{background:var(--navy-dark);color:#fff;font-weight:600;white-space:nowrap}

/* ---------- Ерөнхийлөгчийн мэндчилгээ / President's greeting (page.php) ----------
   pages.slug='prezident-mendchilgee' is another special-cased page.php slug
   (see baiguullagyn-butets/tugeemel-asuult below and in page.php) - instead
   of the generic template's stacked "banner image on top, full-width text
   below", this one pins the president's portrait in a left column with the
   bilingual greeting text running down a right column beside it. align-
   items:start (the same choice .contact-grid makes, not the grid default of
   stretch) is what lets the text column run past the bottom of the photo
   instead of stretching the photo taller to match a much longer column of
   text - the text is expected to be the taller of the two.
   The hero band above this section also stops using cover_image as its own
   background for this one slug (see page.php) - a tall personal portrait
   letterboxed and cropped into a wide banner strip looks wrong in a way a
   landscape photo doesn't, so the hero falls back to the plain navy-gradient
   background every image-less page already gets, and the portrait is shown
   here instead, at its own natural shape. */
.president-greeting{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;max-width:1100px;margin:0 auto}
/* No aspect-ratio/object-fit crop here on purpose, same reasoning as
   .detail-cover/.detail-cover-portrait above: this is a deliberately-framed
   portrait, not a decorative banner, so width:100%+height:auto shows all of
   it instead of risking cropping the top of the head or the shoulders. */
.pg-photo img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.pg-photo-fallback{width:100%;aspect-ratio:3/4;border-radius:var(--radius-lg);background:linear-gradient(155deg,var(--navy),var(--navy-dark));display:flex;align-items:center;justify-content:center;color:var(--gold)}
.pg-photo-fallback .icon{width:64px;height:64px}
/* Reuses .prose for the body copy (same paragraph/heading/list styling as
   every other page.php page) but the 780px reading-width cap doesn't apply
   here - the column width is already set by the grid track above, and
   letting both constraints apply at once just misaligns the text from its
   own column at in-between viewport widths. */
.president-greeting .prose{max-width:none}
/* The admin's own opening line ("Эрхэм хүндэт..." / "Dear...") is simply
   content's first <p>, styled up here to read as the greeting's headline -
   matching the reference layout's own bold opening line - without needing a
   separate admin field just for it. Left-aligned rather than the
   justify every other .prose paragraph gets, since justify reads dense on a
   short, emphasized opening line. */
.president-greeting .prose>p:first-child{font-size:19px;font-weight:600;color:var(--navy-dark);line-height:1.5;text-align:left}
@media (max-width:900px){
  .president-greeting{grid-template-columns:1fr}
  .pg-photo{max-width:260px;margin:0 auto 24px}
}

/* ---------- Он цагийн товчоо / timeline (page.php content) ----------
   Authored from the admin rich-text editor's HTML-source mode as a plain
   <ul class="timeline"><li><span class="timeline-card">...</span></li></ul>
   list — ul/li/span are the only structural tags render_content() allows,
   so no new tag needed to be whitelisted for this. Selectors are prefixed
   with .prose so they outrank the default .prose ul/.prose li rules above
   regardless of source order. Desktop: centered line, cards alternate
   left/right via :nth-child. Mobile: collapses to one column, line on
   the left. */
.prose ul.timeline{list-style:none;margin:2.6em 0;padding:0;position:relative}
.prose ul.timeline::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:2px;background:var(--border);transform:translateX(-50%)}
.prose ul.timeline>li{position:relative;width:50%;margin:0;padding:0 0 2.4em;box-sizing:border-box;list-style:none}
.prose ul.timeline>li:nth-child(odd){padding-right:44px;text-align:right}
.prose ul.timeline>li:nth-child(even){margin-left:50%;padding-left:44px;text-align:left}
.prose ul.timeline>li::before{content:"";position:absolute;top:5px;width:13px;height:13px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 2px var(--gold);z-index:1;transition:transform .25s ease,box-shadow .25s ease}
.prose ul.timeline>li:nth-child(odd)::before{right:-7.5px}
.prose ul.timeline>li:nth-child(even)::before{left:-7.5px}
.prose ul.timeline .timeline-card{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.prose ul.timeline>li:hover::before{transform:scale(1.4);box-shadow:0 0 0 4px rgba(31,154,108,.22)}
.prose ul.timeline>li:hover .timeline-card{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.prose ul.timeline .timeline-date{display:block;font-weight:700;color:var(--navy);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3em}
.prose ul.timeline .timeline-text{display:block;color:#26344c;line-height:1.6}
@media (max-width:720px){
  .prose ul.timeline::before{left:6px}
  .prose ul.timeline>li{width:100%;margin-left:0;padding:0 0 1.8em 30px;text-align:left}
  .prose ul.timeline>li::before{left:0;right:auto}
  /* The 3 rules above only ever reset the plain (non-:nth-child) .../li and
     .../li::before selectors - but the odd/even alternating layout above is
     entirely set BY :nth-child(odd)/(even) rules, which carry one extra
     specificity point (the pseudo-class) that these plain mobile selectors
     can never outrank, media query or not. In practice that meant only
     `width` (contested by two rules of EQUAL specificity, where this one
     wins on being later in the file) was actually collapsing to one column;
     margin-left:50% (even items), text-align (both), the leftover
     padding-right/padding-left, and the marker's left/right positioning
     all kept their desktop values regardless of screen width - odd cards
     stayed right-aligned in place, even cards kept starting at the 50%
     mark and ran off the right edge of the screen entirely. Re-targeting
     the same :nth-child selectors here (equal specificity, later in the
     file) is what actually lets the collapse win on mobile. */
  .prose ul.timeline>li:nth-child(odd),
  .prose ul.timeline>li:nth-child(even){margin-left:0;padding:0 0 1.8em 30px;text-align:left}
  .prose ul.timeline>li:nth-child(odd)::before,
  .prose ul.timeline>li:nth-child(even)::before{left:0;right:auto}
}

/* ---------- FAQ accordion (page.php, slug=tugeemel-asuult) ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;overflow:hidden}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:18px 22px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:16px;font-weight:700;color:var(--navy-dark);transition:background-color .15s ease}
.faq-question:hover{background:var(--bg-alt)}
.faq-question .icon{flex:none;width:20px;height:20px;color:var(--gold);transition:transform .25s ease}
.faq-item.open .faq-question .icon{transform:rotate(180deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-answer>div{overflow:hidden}
.faq-answer p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.7}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.prose tbody tr:nth-child(even){background:#f7f8fa}
.prose tr.group-row td{background:var(--navy);color:#fff;font-weight:700}
.prose tbody tr:not(.group-row){transition:background-color .15s ease}
.prose tbody tr:not(.group-row):hover{background:rgba(10,0,120,.07)}

/* ---------- Photo gallery grid + lightbox (project.php, news-post.php) ---------- */
.gallery-heading{font-size:22px;color:var(--navy-dark);margin:48px 0 20px}
.project-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* A gallery with only 1-2 photos looks sparse/awkward in the fixed 3-column
   grid above — a lone photo sits pinned to the left at a third of the width
   with two empty slots trailing it. :has() lets the grid react to its own
   child count without page.php/project.php/news-post.php (whichever page
   rendered this <div>) needing to know or care how many images there are:
   exactly 1 image fills the full row width, exactly 2 share it 50/50, and
   3+ still fall through to the repeat(3,1fr) rule above. Specificity here
   (.project-gallery + :has()) already outranks the plain-class media-query
   rules below at every breakpoint, so this doesn't need its own @media. */
.project-gallery:has(> :only-child){grid-template-columns:1fr}
.project-gallery:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}
.gallery-thumb{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-sm);cursor:zoom-in}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gallery-thumb:hover img{transform:scale(1.06)}
@media (max-width:720px){.project-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.project-gallery{grid-template-columns:1fr}}

/* Modifier: force exactly 2 columns (bigger thumbnails) instead of the
   default 3, for a gallery that reads better wider -- e.g. about.php's
   photo album. Wrapped in min-width:481px rather than left unconditional:
   its 2-class specificity would otherwise outrank the <=480px 1-column
   rule above and force 2 cramped columns on small phones. */
@media (min-width:481px){.project-gallery.project-gallery--cols-2{grid-template-columns:repeat(2,1fr)}}

/* ---------- Lightbox (used by the photo galleries above) ---------- */
.lightbox{position:fixed;inset:0;background:rgba(11,14,20,.94);display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;visibility:hidden;transition:opacity .2s ease}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:88vw;max-height:86vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:99px;border:none;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.24)}
.lightbox-close .icon{width:20px;height:20px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:99px;border:none;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox-nav:hover{background:rgba(255,255,255,.24)}
.lightbox-nav .icon{width:22px;height:22px}
.lightbox-prev{left:20px}
.lightbox-prev .icon{transform:scaleX(-1)}
.lightbox-next{right:20px}
@media (max-width:640px){
  .lightbox-nav{width:42px;height:42px}
  .lightbox-close{top:12px;right:12px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
}

/* ---------- Quick-link modal (admissions.php -> #admissionsQuickLinks).
   Opens a tile's target page in place instead of navigating away, so the
   visitor lands back on /admissions, not on a separate page, once done
   reading. Same open/close mechanics as the lightbox above. ---------- */
.quick-link-modal{position:fixed;inset:0;background:rgba(11,14,20,.6);display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;visibility:hidden;transition:opacity .2s ease;padding:24px}
.quick-link-modal.open{opacity:1;visibility:visible}
.quick-link-modal-dialog{position:relative;background:#fff;border-radius:var(--radius-lg);max-width:760px;width:100%;max-height:86vh;overflow-y:auto;padding:48px 36px 36px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.quick-link-modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;flex:none;border-radius:99px;border:none;background:var(--bg-alt);color:var(--navy-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease}
.quick-link-modal-close:hover{background:var(--border)}
.quick-link-modal-close .icon{width:18px;height:18px}
@media (max-width:640px){
  .quick-link-modal{padding:12px}
  .quick-link-modal-dialog{padding:44px 18px 22px}
}

/* ---------- Partner / client logos strip ---------- */
.partners-strip{background:#fff;padding:36px 0;overflow:hidden;border-top:1px solid var(--border)}
.partners-track{display:flex;align-items:center;gap:64px;width:max-content;animation:partners-scroll 28s linear infinite}
.partners-track:hover{animation-play-state:paused}
.partner-logo{display:flex;align-items:center;justify-content:center;flex:none;height:88px}
.partner-logo img{height:100%;width:auto;max-width:220px;object-fit:contain;filter:grayscale(100%);opacity:.5;transition:filter .25s ease,opacity .25s ease}
.partner-logo:hover img{filter:grayscale(0%);opacity:1}
@keyframes partners-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.partners-track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-dark);color:rgba(255,255,255,.82)}
/* .footer-top/.footer-bottom carry the shared .container class (for the
   same centered max-width as every other section) AND their own padding
   rule below - but padding:64px 0 40px / padding:20px 0 are the 3-/2-value
   shorthand, which sets padding-LEFT/RIGHT to 0 as part of the same
   declaration. Same specificity as .container, later in the file, so
   those zeros silently won the cascade for padding-left/right and cancelled
   .container's 20px side gutters completely - invisible on a wide desktop
   window (huge empty margin outside .container hides a missing 20px) but
   glaring on mobile, where .container already spans the full screen width:
   every footer heading/link/line sat flush against the screen edge instead
   of lining up with the rest of the page's text above it. Setting only
   padding-top/bottom here leaves padding-left/right alone entirely, so
   .container's own 20px goes back to applying normally at every width. */
.footer-top{padding-top:64px;padding-bottom:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{color:#fff;font-size:15px;margin-bottom:18px}
.footer-grid ul li{margin-bottom:10px}
.footer-grid a{color:rgba(255,255,255,.72);font-size:14.5px}
.footer-grid a:hover{color:var(--gold)}
.footer-logo img{height:58px;margin-bottom:18px}
.footer-grid p{color:rgba(255,255,255,.65);font-size:14.5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;padding-bottom:20px;font-size:13.5px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.55)}
.footer-bottom-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
.footer-social a:hover{background:var(--gold);color:var(--navy-dark)}
.scroll-top-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s ease;flex:none}
.scroll-top-btn:hover{background:var(--gold);color:var(--navy-dark);border-color:var(--gold)}
.scroll-top-btn .icon{width:18px;height:18px}

.icon-fallback-xl{width:64px;height:64px;color:rgba(255,255,255,.3)}

/* ---------- Maintenance mode page ---------- */
.maint-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--navy),var(--navy-dark));padding:24px}
.maint-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:460px;width:100%;padding:44px 36px;text-align:center}
.maint-logo{height:36px;margin:0 auto 28px}
.maint-icon{width:64px;height:64px;border-radius:50%;background:var(--bg-alt);color:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.maint-icon .icon{width:30px;height:30px}
.maint-card h1{font-size:22px;color:var(--navy-dark)}
.maint-card p{color:var(--muted);font-size:15px}
.maint-contact{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.maint-contact a{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--navy);font-weight:600;font-size:14.5px}
.maint-contact .icon{width:18px;height:18px}

/* ---------- Admin maintenance-bypass banner (public site, admin session only) ---------- */
.admin-bypass-banner{background:var(--gold);color:var(--navy-dark);font-size:13.5px;font-weight:600;text-align:center;padding:9px 16px}
.admin-bypass-banner a{color:var(--navy-dark);text-decoration:underline}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.empty-note{text-align:center;color:var(--muted);padding:40px 20px}
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.fade-in.visible{opacity:1;transform:none}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:44px}
.pagination a,.pagination span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);font-weight:600;font-size:14px;color:var(--ink)}
.pagination a:hover{border-color:var(--navy);color:var(--navy);text-decoration:none}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* =========================================================================
   UMAS homepage components (index.php) + footer contact column
   Everything below is new for the UMAS redesign — it styles the sections
   that replaced KHENICS' generic services/testimonials/team homepage with
   UMAS' own hero-stats, quick-links, why-us stats, scholar search,
   network/impact and programs/news/partners layout. A small fixed "tone"
   palette (navy/green/indigo/amber, and a matching tile-* set for program
   cards) gives these icon-based cards visual variety in place of the real
   photography the client's mockup uses — deliberately: several of these
   cards represent specific programs/fields we have no real photos for, so
   icons + color are used instead of stock or fabricated images.
   ========================================================================= */

/* ---------- Top utility bar: the approved homepage mockup uses a light
   bar (not the solid navy strip inherited from KHENICS) — only the colors
   change here, the original rules above still set size/layout/spacing. ---------- */
.topbar-strip{background:#f5f7fb;color:var(--ink);border-bottom:1px solid var(--border)}
.topbar-contacts a,.topbar-contacts span{color:#4a5568}
.topbar-contacts a:hover{color:var(--navy)}
.topbar-contacts .icon{color:var(--navy)}
.topbar-social a{color:#8592a8}
.topbar-social a:hover{color:var(--navy)}
.topbar-lang-switch{background:var(--bg-alt)}
.topbar-lang-switch a{color:#8592a8}

/* ---------- Shared bits used by several sections below ---------- */
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#178a5f;box-shadow:0 8px 20px rgba(31,154,108,.35)}
.lede{color:var(--muted);font-size:16px;margin-bottom:20px}
.link-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--navy);white-space:nowrap}
.link-more .icon{width:16px;height:16px;transition:transform .15s ease}
.link-more:hover{text-decoration:none;color:var(--navy-dark)}
.link-more:hover .icon{transform:translateX(4px)}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.section-head-row h2{margin:0;font-size:clamp(24px,3vw,32px);color:var(--navy-dark)}
/* Generic light-on-dark eyebrow pill, for reuse outside the network box
   below (which overrides this further — see ".network-box .eyebrow"). */
.eyebrow-light{color:#fff;background:rgba(255,255,255,.16)}

/* ---------- Hero: 70/30 split-stat row between the subtitle and buttons ---------- */
.hero-split-stats{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:30px;font-size:17px;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-split-stats strong{font-size:23px;font-weight:800;margin-right:6px}
.hero-split-stats .divider{color:rgba(255,255,255,.35);font-weight:300}
.hero-split-stats .accent strong{color:#7fd9b4}

/* ---------- Quick-links strip: 4-cell white bar overlapping the bottom of
   the hero (same overlap technique as .stats-band-wrap.overlap above) ---------- */
.quick-links-wrap{position:relative;z-index:3;margin-top:-58px}
.quick-links{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:grid;grid-template-columns:repeat(4,1fr)}
.quick-link-card{display:flex;align-items:center;gap:16px;padding:26px 24px;color:var(--ink);border-left:1px solid var(--border)}
.quick-link-card:first-child{border-left:none}
.quick-link-card:hover{text-decoration:none;background:var(--bg-alt)}
.quick-link-icon{flex:none;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.quick-link-icon .icon{width:24px;height:24px}
.quick-link-icon.tone-navy{background:rgba(11,45,122,.1);color:var(--navy)}
.quick-link-icon.tone-green{background:rgba(31,154,108,.12);color:var(--accent)}
.quick-link-icon.tone-indigo{background:rgba(76,95,209,.12);color:#3e4ec7}
.quick-link-icon.tone-amber{background:rgba(224,145,46,.14);color:#c9740f}
.quick-link-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.quick-link-body strong{font-size:14.5px;color:var(--navy-dark);line-height:1.3}
.quick-link-body span{font-size:13px;color:var(--muted);line-height:1.4}
.quick-link-arrow{flex:none;width:18px;height:18px;color:var(--muted);transition:transform .15s ease}
.quick-link-card:hover .quick-link-arrow{transform:translateX(4px);color:var(--navy)}
@media (max-width:960px){
  .quick-links{grid-template-columns:repeat(2,1fr)}
  .quick-link-card:nth-child(3){border-left:none}
}
@media (max-width:640px){
  .quick-links-wrap{margin-top:-24px}
  .quick-links{grid-template-columns:1fr}
  .quick-link-card{border-left:none !important;border-top:1px solid var(--border)}
  .quick-link-card:first-child{border-top:none}
}

/* ---------- "Why UMAS" 7-stat band: plain (no card, no divider lines,
   all-navy numbers) — unlike .stats-band above this doesn't alternate an
   accent color on even items. ---------- */
.grid-7{grid-template-columns:repeat(7,1fr);gap:20px 24px}
.why-stats{text-align:center}
.why-stat{display:flex;flex-direction:column;align-items:center;position:relative}
/* Thin vertical divider between columns instead of a card/border look —
   suppressed on whichever item starts a new row at each column count below
   (7 cols base, 4 cols, then 2 cols) so it never shows up as a stray mark
   at the left edge of a wrapped row. */
.why-stat:not(:first-child)::before{content:'';position:absolute;left:-12px;top:2px;bottom:2px;width:1px;background:rgba(92,107,130,.45)}
.why-stat-icon{color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.why-stat-icon .icon{width:34px;height:34px}
/* Requested fixed size for this row specifically — .stat-num's own
   clamp(28px,3.6vw,42px) is shared with about.php's .stats-band, which
   should keep scaling with viewport width, so this overrides it only
   inside .why-stats rather than changing the shared base rule. */
.why-stats .stat-num{font-size:32px}
@media (max-width:900px){.grid-7{grid-template-columns:repeat(4,1fr);row-gap:32px}.why-stat:nth-child(4n+1)::before{display:none}}
@media (max-width:480px){.grid-7{grid-template-columns:repeat(2,1fr)}.why-stat:nth-child(2n+1)::before{display:none}}

/* ---------- Scholar search + supervisor cards ---------- */
.grid-scholars-search{grid-template-columns:.85fr 1.6fr;gap:44px;align-items:start}
@media (max-width:900px){.grid-scholars-search{grid-template-columns:1fr}}
.scholar-search-intro h2{font-size:clamp(22px,2.8vw,30px);color:var(--navy-dark)}
.scholar-search-box{display:flex;margin-bottom:18px;box-shadow:var(--shadow-sm);border-radius:8px}
.scholar-search-box input{flex:1;min-width:0;border:1.5px solid var(--border);border-right:none;border-radius:8px 0 0 8px;padding:13px 16px;font-size:14.5px;font-family:inherit;background:#fff;color:var(--ink)}
.scholar-search-box input:focus{outline:none;border-color:var(--navy)}
.scholar-search-box button{flex:none;width:48px;border:none;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:0 8px 8px 0;cursor:pointer}
.scholar-search-box button:hover{background:var(--navy-dark)}
.scholar-search-box button .icon{width:18px;height:18px}
.field-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.field-tag{display:inline-block;padding:7px 14px;border-radius:99px;background:#fff;border:1.5px solid var(--border);color:var(--muted);font-size:13px;font-weight:600}
.field-tag:hover{border-color:var(--navy);color:var(--navy);text-decoration:none}

.scholar-cards-col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* No edge mask-image here (there was one): faded the scholar cards' navy
   photo-less background out to transparent at both ends as a "scroll for
   more" hint, but that read as a washed-out edge rather than a hint - cards
   should look fully solid/vivid right up to the edge of the carousel. */
.scholar-cards-scroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.scholar-cards-scroll::-webkit-scrollbar{display:none}
.scholar-carousel-nav{display:flex;justify-content:center;gap:10px}
.carousel-arrow{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.carousel-arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.carousel-arrow .icon{width:18px;height:18px}
.carousel-arrow[hidden]{display:none}
.scholar-card{flex:0 0 220px;scroll-snap-align:start;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease}
.scholar-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
/* 4/5 (not 1/1) to match the studio batch of scholar/professor photos
   actually being uploaded (admin -> Эрдэмтэн, профессор): those come in as
   a taller portrait shot, not square, and object-fit:cover on a 1/1 target
   was cropping a slice off both the top (hair/top of head) and bottom of
   every one of them to force it into a square it was never shot for.
   Matching the target ratio to the source ratio makes object-fit:cover a
   no-op for these photos (shows the whole shot, just scaled) while still
   covering the box sanely for any future photo that isn't exactly 4/5. */
.scholar-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.scholar-card-noimg{width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--navy),var(--navy-dark))}
.scholar-card-noimg .icon{width:44px;height:44px;color:rgba(255,255,255,.35)}
.scholar-card-body{padding:16px}
.scholar-card-body strong{display:block;font-size:15px;color:var(--navy-dark);margin-bottom:4px}
.scholar-degree{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.scholar-field{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--accent);font-weight:600;margin-bottom:10px}
.scholar-field .icon{width:13px;height:13px;flex:none}
@media (max-width:560px){.scholar-card{flex-basis:180px}}

/* scholar.php's own profile photo/detail two-column layout - this used to
   be a plain style="grid-template-columns:280px 1fr" written directly on
   the element. Being an inline style, it permanently outranked .grid-2's
   own already-correct mobile collapse (see max-width:640px above) at every
   viewport width, so this one page's two-column layout never collapsed on
   a phone - the fixed 280px photo column plus the 44px gap left the Цол/
   зэрэг badges and bio text squeezed into a track only ~130px wide, forcing
   the whole page to scroll sideways. A dedicated class gets its own mobile
   rule instead, the same way .contact-grid and .president-greeting do. */
.scholar-profile-grid{display:grid;grid-template-columns:280px 1fr;align-items:flex-start;gap:44px}
@media (max-width:640px){
  .scholar-profile-grid{grid-template-columns:1fr}
  .scholar-profile-grid>div:first-child{max-width:260px;margin:0 auto 8px}
}

/* ---------- Network / Research-to-Impact two-box section ---------- */
.network-impact-grid{align-items:stretch}
/* This section's two boxes are text/stat-heavy (network stats row, the
   4-step impact row) so they need more breathing room than a generic
   .grid-2 gets before stacking — override the shared 640px breakpoint with
   an earlier one just for this grid. */
@media (max-width:900px){.network-impact-grid{grid-template-columns:1fr}}
.network-box,.impact-box{border-radius:var(--radius-lg);padding:36px 34px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.network-box{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff}
.impact-box{background:var(--bg-alt);color:var(--ink)}
/* Both boxes use the .eyebrow span as their only heading (no separate h2),
   so here it needs to read as a real heading rather than the small pill
   badge .eyebrow is elsewhere on the site. */
.network-box .eyebrow,.impact-box .eyebrow{display:block;background:none;padding:0;border-radius:0;font-size:21px;letter-spacing:0;margin-bottom:14px}
.network-box .eyebrow{color:#fff}
.impact-box .eyebrow{color:var(--navy-dark)}
.network-box p{color:rgba(255,255,255,.78);max-width:420px;position:relative;z-index:1}
.impact-box p{color:var(--muted);position:relative;z-index:1}
.network-stats{display:grid;grid-template-columns:repeat(4,auto);gap:24px;margin:22px 0 28px;position:relative;z-index:1}
.network-stats div{display:flex;flex-direction:column;text-align:center}
.network-stats strong{font-size:26px;font-weight:800;color:#fff}
.network-stats span{font-size:12px;color:rgba(255,255,255,.62);margin-top:4px;line-height:1.3}
.network-box .btn{position:relative;z-index:1;align-self:flex-start}
.network-decor{position:absolute;right:-10px;bottom:-10px;width:180px;height:180px;opacity:.14;z-index:0}
@media (max-width:960px){.network-stats{grid-template-columns:repeat(2,auto)}}

.impact-steps{display:flex;align-items:flex-start;justify-content:center;gap:4px;margin:24px 0 28px;flex-wrap:nowrap}
.impact-step{display:flex;flex-direction:column;align-items:center;text-align:center;width:88px;flex:none}
.impact-step-icon{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:8px;box-shadow:var(--shadow-sm);flex:none}
.impact-step-icon .icon{width:20px;height:20px}
.impact-step strong{font-size:12.5px;color:var(--navy-dark)}
.impact-step span{font-size:11px;color:var(--muted)}
.impact-arrow{flex:none;color:var(--border);margin-top:12px}
.impact-arrow .icon{width:16px;height:16px}
.impact-box .btn{align-self:flex-start}
/* Below ~1100px the 2-column network/impact grid squeezes .impact-box enough
   that even the shrunk row above needs a second trim to keep all 4 steps on
   one line (see .network-impact-grid stack override below for the point
   where this stops being needed at all). */
@media (max-width:1100px){
  .impact-steps{gap:2px}
  .impact-step{width:72px}
  .impact-step-icon{width:34px;height:34px}
  .impact-step-icon .icon{width:16px;height:16px}
  .impact-step strong{font-size:11.5px}
  .impact-step span{font-size:10px}
  .impact-arrow{margin-top:10px}
  .impact-arrow .icon{width:13px;height:13px}
}
@media (max-width:560px){.impact-steps{gap:0}.impact-step{width:80px}.impact-arrow{display:none}}

/* ---------- Programs strip: icon tiles, optionally with an admin-uploaded
   cover photo (admin/programs.php) dimmed in behind them - see $accentIcon
   comment in index.php - in a horizontal-scroll row ---------- */
.programs-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.program-tile{border-radius:var(--radius-lg);padding:26px 22px;color:#fff;display:flex;flex-direction:column;min-height:190px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.program-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);text-decoration:none}
.program-tile-icon{width:34px;height:34px;color:rgba(255,255,255,.85);margin-bottom:22px}
.program-tile-degree{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,255,255,.18);padding:4px 10px;border-radius:99px;margin-bottom:14px}
.program-tile strong{margin-top:auto;font-size:16px;line-height:1.3}
.tile-navy{background:linear-gradient(155deg,var(--navy),var(--navy-dark))}
.tile-green{background:linear-gradient(155deg,var(--accent),#136045)}
.tile-indigo{background:linear-gradient(155deg,#4c5fd1,#2c3789)}
.tile-teal{background:linear-gradient(155deg,#17a2a2,#0d5f5f)}
.tile-slate{background:linear-gradient(155deg,#5b6b85,#333f52)}
/* has-photo: index.php sets --tile-photo inline (same convention as
   page_hero_open()'s per-page background-image). The same two colours as
   the plain gradient above are reused here, just with alpha added, so the
   photo reads as dimmed/faint behind the icon+title rather than a bright
   photo fighting the white text - and the tile still visually belongs to
   its accent colour family whether or not a photo is set. */
.program-tile.has-photo{background-size:cover;background-position:center;background-repeat:no-repeat}
.tile-navy.has-photo{background-image:linear-gradient(155deg,rgba(10,0,120,.78),rgba(7,0,78,.82)),var(--tile-photo)}
.tile-green.has-photo{background-image:linear-gradient(155deg,rgba(31,154,108,.78),rgba(19,96,69,.82)),var(--tile-photo)}
.tile-indigo.has-photo{background-image:linear-gradient(155deg,rgba(76,95,209,.78),rgba(44,55,137,.82)),var(--tile-photo)}
.tile-teal.has-photo{background-image:linear-gradient(155deg,rgba(23,162,162,.78),rgba(13,95,95,.82)),var(--tile-photo)}
.tile-slate.has-photo{background-image:linear-gradient(155deg,rgba(91,107,133,.78),rgba(51,63,82,.82)),var(--tile-photo)}
@media (max-width:560px){.programs-scroll{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.program-tile{min-height:170px}}

/* ---------- News tiles (homepage only — .news-card in news.php is a
   different, unrelated horizontal layout; renamed here to avoid a clash) ---------- */
.news-tile{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column;transition:box-shadow .18s ease}
.news-tile:hover{box-shadow:var(--shadow-md)}
/* overflow:hidden matters here, not just for the rounded corners further up
   the card: it's what makes aspect-ratio:4/3 actually hold. .news-tile-thumb
   is a flex container, and flex items default to min-height:auto — meaning
   a portrait cover image (tall intrinsic ratio) could otherwise force this
   box taller than 4/3 once it decoded, growing past the other cards in the
   row instead of just getting cropped by object-fit:cover below. Per the
   flexbox spec that automatic minimum only resets to 0 when overflow isn't
   visible, so this single property is what keeps every card the same height
   regardless of the source image's own proportions. */
.news-tile-thumb{position:relative;display:flex;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(155deg,var(--navy),var(--navy-dark));align-items:center;justify-content:center}
.news-tile-thumb img{width:100%;height:100%;object-fit:cover}
.news-tile-thumb .icon{width:36px;height:36px;color:rgba(255,255,255,.35)}
.news-badge{position:absolute;left:12px;top:12px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;padding:5px 11px;border-radius:99px}
/* Static variant for contexts with no image to overlay a badge onto —
   news-post.php's hero uses this inline next to the date. Shares the
   badge-* colour modifiers below, which only set background. */
.news-badge-inline{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;padding:5px 11px;border-radius:99px}
.badge-news{background:var(--navy)}
.badge-event{background:var(--accent)}
.badge-cooperation{background:#4c5fd1}
.badge-announcement{background:#c2410c}
.news-tile-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
/* Clamped to 3 lines so wildly different title lengths don't leave some
   cards in a grid row mostly-empty and others nearly full — every card
   gives its title the same amount of space and a long one just ellipsizes. */
.news-tile-body h3{font-size:16px;margin:0 0 12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-tile-body h3 a{color:var(--navy-dark)}
.news-tile-body h3 a:hover{color:var(--navy);text-decoration:none}
.news-tile-body .link-more{margin-top:auto}

/* ---------- Partner logos row (homepage only, arrow-scrolled — the
   .partners-strip/.partners-track auto-marquee above is now unused but
   left in place in case an inner page wants the old always-on strip). ---------- */
.partners-section .section-head{margin-bottom:36px}
.partners-row-wrap{display:flex;align-items:center;gap:14px}
.partners-row{flex:1;display:flex;align-items:center;gap:56px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px}
.partners-row::-webkit-scrollbar{display:none}
/* Added by main.js only once a group's logos are confirmed to fit without
   overflowing .partners-row — see the comment there. Left-aligned-by-default
   is still correct while a group DOES overflow (centering a scrollable flex
   row can start it scrolled to a confusing mid-point), so this only ever
   applies once there's nothing left to scroll to. */
.partners-row-fit{justify-content:center}
.partners-arrow{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s ease}
.partners-arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.rotate-90{transform:rotate(90deg)}
.rotate-neg90{transform:rotate(-90deg)}
@media (max-width:640px){.partners-row{gap:36px}}

/* Domestic/international sub-groups within the partners section (each with
   its own centered name + logo row) — title reuses the .eyebrow look (gold,
   uppercase, letter-spaced) the way .network-box/.impact-box already do for
   a standalone heading with no separate h2. */
.partners-group{margin-top:40px}
.partners-group:first-child{margin-top:0}
.partners-group-title{display:block;text-align:center;color:var(--gold);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}

/* ---------- Footer: address/phone/email rows with a leading icon, and the
   "Website by UMAS" credit line ---------- */
.footer-grid .footer-address,
.footer-grid a[href^="tel:"],
.footer-grid a[href^="mailto:"]{display:flex;align-items:flex-start;gap:10px}
.footer-address .icon,
.footer-grid a[href^="tel:"] .icon,
.footer-grid a[href^="mailto:"] .icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--gold)}
.footer-credit{color:rgba(255,255,255,.5)}

/* ---------- Section "hub" pages (admissions/research/cooperation/impact):
   a simple link-out grid built from that menu item's own submenu children
   (see menu_children_by_url() in functions.php), so it always matches
   Admin -> Үндсэн цэс without a second hardcoded copy of the same links. ---------- */
.hub-link-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 26px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);font-weight:700;font-size:15.5px;color:var(--navy-dark);transition:transform .18s ease,box-shadow .18s ease}
.hub-link-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none;color:var(--navy-dark)}
.hub-link-card .icon{flex:none;width:18px;height:18px;color:var(--muted);transition:transform .15s ease}
.hub-link-card:hover .icon{transform:translateX(4px);color:var(--navy)}

/* ---------- Scholars directory filter bar (scholars.php) — the homepage's
   .scholar-search-box/.field-tags are reused as-is; this adds the active
   pill state, the type dropdown and a text intro count strip. ---------- */
.field-tag.active{background:var(--navy);border-color:var(--navy);color:#fff}
.scholars-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:28px}
.scholars-toolbar select{padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff}
.scholars-count{color:var(--muted);font-size:14px;margin-bottom:24px}
.scholars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:960px){.scholars-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.scholars-grid{grid-template-columns:1fr}}

/* ---------- Full partners grid (partners.php) — bigger than the homepage
   strip's .partner-logo, since here the logo is the whole point of the page. ---------- */
.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:900px){.partners-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.partners-grid{grid-template-columns:1fr}}
.partner-card{display:flex;align-items:center;justify-content:center;height:120px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px}
.partner-card img{max-height:56px;max-width:80%;width:auto;object-fit:contain;filter:grayscale(100%);opacity:.65;transition:filter .2s ease,opacity .2s ease}
.partner-card:hover img{filter:grayscale(0%);opacity:1}

/* ---------- Research field chips (research.php) — links into the scholar
   directory pre-filtered to that field, echoing .field-tag but sized to
   stand alone as the page's main content rather than a search aid. ---------- */
.field-chip-grid{display:flex;flex-wrap:wrap;gap:12px}
.field-chip{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:99px;background:#fff;border:1.5px solid var(--border);color:var(--navy-dark);font-weight:600;font-size:14.5px;transition:.15s ease}
.field-chip:hover{border-color:var(--navy);background:var(--navy);color:#fff;text-decoration:none}
.field-chip .icon{width:16px;height:16px;color:var(--accent)}
.field-chip:hover .icon{color:#fff}

/* ---------- Research-based education flow diagram (page.php .prose content,
   slug=sudalgaand-suurilsan-surgalt) — render_content() only allows a fixed
   tag set (no <div>/<style>), so the "cards in a row" layout below is built
   from <p>/<span>/<h3> and styled entirely through these classes. ---------- */
.flow-philosophy{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff;border-radius:var(--radius-lg);padding:26px 30px;margin:0 0 30px;box-shadow:var(--shadow-md);text-align:left}
.flow-philosophy .eyebrow{display:block;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);margin-bottom:8px}
.flow-philosophy .lead{display:block;font-size:18px;line-height:1.55}
.prose h3.flow-heading{text-align:center;margin:0 0 22px}
.flow-row{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:0;margin:0 0 34px;text-align:left}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 16px 20px;flex:1 1 150px;max-width:190px;cursor:default;position:relative;z-index:0;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
/* Diagonal gradient hover wipe, styled after the reference (sica.mn "Баримтлах
   зарчим" cards) the user asked to match: a gradient panel sits behind the
   card (z-index:-1, needs .flow-step's own z-index:0 to create a stacking
   context so it doesn't fall behind the page), pinned to the right edge at
   width:0, and grows to full width on hover — same navy/green pair as the
   rest of the site (var(--navy-dark)/var(--accent)) rather than the
   reference's own colors, so the effect matches without borrowing its palette. */
.flow-step::before{content:'';position:absolute;top:0;right:0;bottom:0;width:0;z-index:-1;background:linear-gradient(-45deg,var(--navy-dark),var(--accent));transition:width .45s ease}
.flow-step .num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font-weight:700;font-size:15px;margin-bottom:12px;transition:color .3s ease,border-color .3s ease}
.flow-step .label{display:block;font-weight:700;color:var(--accent);font-size:14.5px;line-height:1.3;transition:color .3s ease}
.flow-step .desc{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:8px;transition:color .3s ease}
.flow-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.flow-step:hover::before{width:100%}
.flow-step:hover .num{border-color:#fff;color:#fff}
.flow-step:hover .label{color:#fff}
.flow-step:hover .desc{color:rgba(255,255,255,.82)}
.flow-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 30px;color:#c3cbdb;font-size:20px}
@media (max-width:680px){
  .flow-row{flex-direction:column;align-items:stretch}
  .flow-step{max-width:none}
  .flow-arrow{transform:rotate(90deg);flex:0 0 26px}
}