/* ============================================================
   Jatiya Vidyalaya, Kachua Tiniali — Shared Stylesheet
   Static site • HTML + CSS + vanilla JS • no frameworks
   ============================================================ */

/* ---- Self-hosted Assamese font: Banikanta (Assam Publication Board) ----
   Not available on Google Fonts, so served from assets/fonts/.
   See assets/fonts/README.md for the required files. Falls back to
   Noto Sans Bengali (Google Fonts) until the files are added. */
@font-face {
  font-family: "Banikanta";
  src: url("../assets/fonts/Banikanta-Regular.woff2") format("woff2"),
       url("../assets/fonts/Banikanta-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Banikanta";
  src: url("../assets/fonts/Banikanta-Bold.woff2") format("woff2"),
       url("../assets/fonts/Banikanta-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* Colours — read from the school logo & mockup (royal blue + gold).
     If the designer provides exact brand hex codes, update these four values. */
  --color-primary: #1e3a8a;        /* royal blue (logo ring / header) */
  --color-primary-dark: #152b66;   /* deeper blue (footer, hover) */
  --color-secondary: #f5a623;      /* logo lamp gold (buttons, accents) */
  --color-secondary-dark: #d98e0b;
  --color-text: #1a1a1a;
  --color-text-soft: #4a4a4a;
  --color-bg: #ffffff;
  --color-bg-soft: #f5f5f5;
  --color-border: #e2e2e2;

  /* Typography — academic pairing
     • Headings / titles → Merriweather (serif) for an institutional, trustworthy tone
     • Body / UI / nav / buttons → Poppins (modern, clean base)
     • Captions / meta / small labels → Open Sans (neutral secondary sans)
     • Assamese script → Banikanta (self-hosted), Noto Sans Bengali as fallback */
  --font-as: "Banikanta", "Noto Sans Bengali", "Noto Serif Bengali", sans-serif;
  --font-en: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-heading: "Merriweather", Georgia, "Times New Roman", serif;
  --font-meta: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* Shape & depth */
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.12);

  /* Spacing */
  --gap: 1rem;
  --gap-lg: 2rem;
  --container: 1140px;
  --header-h: 76px;

  /* Assamese glyphs (Banikanta / Noto Sans Bengali) have a smaller x-height
     than the Latin font, so they look smaller at the same font-size.
     This factor nudges Assamese text up so it visually matches English.
     Tune this one number if it looks slightly off. */
  --as-scale: 1.24;
}

/* ---- Reset / base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Assamese text uses the Assamese font (Banikanta / Eastern Nagari script) */
:lang(as),
.as { font-family: var(--font-as); }
/* Match the visual size of Assamese to English (see --as-scale above).
   Applies to the leaf .as spans; elements that set their own explicit
   Assamese size (e.g. the header brand name) are unaffected. */
.as { font-size: calc(1em * var(--as-scale)); }

img { max-width: 100%; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
/* Merriweather sets a heavier tone; large display headings get extra weight */
h1 { font-weight: 900; }
/* Assamese-script headings keep the Assamese font (Merriweather has no Assamese glyphs) */
h1:lang(as), h2:lang(as), h3:lang(as), h4:lang(as), h5:lang(as), h6:lang(as),
h1 .as, h2 .as, h3 .as, h4 .as, h5 .as, h6 .as { font-family: var(--font-as); }

/* Captions / meta / small labels → neutral secondary sans (Open Sans) */
figcaption,
.section-head .sub,
.stat__label,
.faculty-card .role,
.faculty-card .qual,
.medium-card .running,
.notice .date .m,
.notice .tag,
.coming-soon .badge,
.info-table,
.footer-bottom {
  font-family: var(--font-meta);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  transform: translateY(-160%);
  background: #fff;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font-en);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--color-secondary); color: var(--color-text); }
.btn-primary:hover { background: var(--color-secondary-dark); }
.btn-outline { border-color: #ffffff; color: #ffffff; }
.btn-outline:hover { background: #ffffff; color: var(--color-primary); }

/* ============================================================
   HEADER  (shared on every page)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
}

/* ---- Tier 1: brand banner (logo + name + motto) ---- */
/* Banner background illustration (decision #50) — local compressed copy
   of the client's Cloudinary art. The navy veil keeps the lettering
   readable over the bright sunrise; if the image is ever missing the
   .site-header solid navy shows instead, i.e. today's look. */
.header-banner {
  background:
    linear-gradient(rgba(21, 43, 102, .72), rgba(21, 43, 102, .72)),
    url("../assets/header-bg.jpg") center / cover no-repeat;
}
.header-banner__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem;
}
.brand__logo-link { display: inline-flex; justify-self: start; }

/* Centered name block */
.brand__name-link {
  justify-self: center;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.brand__name-link:hover { text-decoration: none; }

/* Motto on the right, always bilingual */
.brand__motto {
  justify-self: end;
  text-align: right;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  line-height: 1.3;
}
.brand__motto .as { font-family: var(--font-as); font-size: 1.6rem; font-weight: 700; display: block; }
.brand__motto .en { font-size: 1.15rem; font-style: italic; color: #e8eefc; display: block; }

/* Letterhead details under the name (address, estd, regd, DISE, email) */
.brand__details {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #dbe4f7;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.brand__details span { display: block; }

/* Affiliation badge under the name */
.brand__badge {
  background: var(--color-secondary);
  color: #3a2a00;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  white-space: nowrap;
}

.brand__logo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-as);
  font-weight: 700;
  font-size: 2.7rem;
  color: var(--color-primary);
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.brand__logo img { width: 100%; height: 100%; object-fit: cover; }
.brand__logo.has-img .brand__logo-txt { display: none; }
.brand__logo.has-img { cursor: zoom-in; }

/* Logo lightbox (click logo to enlarge) */
.logo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}
.logo-lightbox.open { display: flex; }
.logo-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: logo-pop 0.2s ease-out;
}
@keyframes logo-pop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.brand__name { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name .as { font-family: var(--font-as); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--color-secondary); }
.brand__name .en { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; color: #e8eefc; letter-spacing: 0.01em; }
/* Name + motto always show BOTH languages, regardless of the page toggle.
   (The affiliation badge still follows the toggle to avoid duplication.) */
.brand__name .as, .brand__name .en,
.brand__motto .as, .brand__motto .en { display: block !important; }

/* Language toggle button */
.lang-toggle {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.lang-toggle:hover { background: rgba(255, 255, 255, 0.3); }

/* ---- Language visibility: Assamese is default, English shown when body.lang-en ---- */
.en { display: none; }
body.lang-en .as { display: none; }
body.lang-en .en { display: revert; }

/* ---- Tier 2: navigation bar (under the brand banner) ---- */
.header-nav {
  position: relative;
  background: var(--color-primary-dark);
  border-top: 2px solid var(--color-secondary);
}
.header-nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 46px;
}
.header-nav .main-nav { flex: 1 1 auto; }

/* Navigation */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 26px;
  margin-inline: auto;
  background: #fff;
  border-radius: 3px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: block;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav a:hover { background: rgba(255, 255, 255, 0.14); text-decoration: none; }
/* Current page highlight */
.main-nav a[aria-current="page"] {
  background: var(--color-secondary);
  color: var(--color-text);
  font-weight: 600;
}

/* ---- Hover dropdown menus (Academics, About) ---- */
.main-nav .has-sub { position: relative; }
.main-nav .has-sub > a::after {
  content: "\25BE";                 /* ▾ caret */
  font-size: 0.7em;
  margin-left: 0.3rem;
  vertical-align: middle;
  opacity: 0.85;
}
.main-nav .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;                   /* override .main-nav ul flex */
  min-width: 230px;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--color-primary-dark);
  border-top: 3px solid var(--color-secondary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 120;
}
.main-nav .has-sub:hover > .submenu,
.main-nav .has-sub:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .submenu li { display: block; }
.main-nav .submenu a {
  border-radius: 0;
  padding: 0.6rem 1rem;
  font-weight: 500;
}
.main-nav .submenu a:hover { background: rgba(255, 255, 255, 0.16); }

/* ---- Section sub-navigation (tab bar under main header, e.g. Academics) ---- */
.subnav {
  background: var(--color-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--color-secondary-dark);
}
.subnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem 0;
}
.subnav a {
  display: block;
  color: var(--color-primary);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.subnav a:hover { background: rgba(0, 0, 0, 0.08); color: var(--color-primary-dark); text-decoration: none; }
/* Active tab: navy pill so it stands out on the gold bar */
.subnav a[aria-current="page"] {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.subnav a[aria-current="page"]:hover { background: var(--color-primary-dark); color: #fff; }
@media (max-width: 860px) {
  .subnav ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   PAGE BODY HELPERS
   ============================================================ */
main { min-height: 60vh; }

.page-hero {
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)), var(--color-primary);
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}
.page-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 0.25rem; }

.section { padding: 3rem 0; }
.section--soft { background: var(--color-bg-soft); }

.placeholder {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-soft);
  background: var(--color-bg-soft);
}
.placeholder .as { font-family: var(--font-as); font-size: 1.25rem; color: var(--color-text); display: block; margin-bottom: 0.25rem; }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
/* Cards that are themselves links (e.g. Academics overview) */
a.card {
  color: inherit;
  display: block;
  transition: box-shadow 0.2s, transform 0.2s;
}
a.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }
a.card h3 { color: var(--color-primary); }

/* ============================================================
   FOOTER  (shared on every page)
   ============================================================ */
.site-footer {
  background: var(--color-primary-dark);
  color: #e6ebf5;
  padding: 2.5rem 0 1.25rem;
  margin-top: 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gap-lg);
}
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 0.75rem; }
.site-footer .as { font-family: var(--font-as); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer a { color: #e6ebf5; }
.site-footer a:hover { color: var(--color-secondary); }
.footer-contact p { margin: 0 0 0.4rem; font-size: 0.95rem; }
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: #aebbd9;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section-head { text-align: center; margin-bottom: 2rem; }
.section-head h2 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin-bottom: 0.35rem;
}
.section-head h2 .en { color: var(--color-primary); }
.section-head .sub { color: var(--color-text-soft); margin: 0; }
.section-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--color-secondary);
  margin: 0.9rem auto 0;
}
.section-head--left { text-align: left; }
.section-head--left::after { margin-inline: 0; }

.lead { font-size: 1.12rem; color: var(--color-text-soft); max-width: 60ch; }

/* ============================================================
   HOME HERO  (split: message + photo)
   ============================================================ */
.home-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
}
.home-hero .container {
  padding-block: 3rem;
}
.home-hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.home-hero .hero-text { max-width: 60ch; margin-bottom: 2rem; }
.home-hero p { font-size: 1.15rem; color: #dbe3f7; margin-bottom: 1.5rem; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Headline (left) + Leadership gallery (right) — same columns as the showcase
   below, so the gallery lines up directly above the News & Notifications panel */
.hero-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap-lg);
  align-items: center;
  margin-bottom: var(--gap-lg);
}
.hero-top .hero-text { margin-bottom: 0; }

/* ---- Leadership gallery (principal) ---- */
.hero-gallery {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 0.9rem;
}
.hero-gallery__head h2 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  color: var(--color-secondary);
  letter-spacing: 0.02em;
  text-align: center;
}
.hero-gallery__head h2 .en { color: var(--color-secondary); }
.hero-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.leader-card {
  /* capped so the portrait photo stays a headshot card, not a full-column poster */
  width: min(100%, 250px);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
}
.leader-card__photo {
  /* portrait frame — matches the 606x768 studio headshot, so nothing is cropped away */
  aspect-ratio: 4 / 5;
  background: #eef1f6;
  display: grid;
  place-items: center;
}
.leader-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.leader-card__ph { font-size: 2.6rem; line-height: 1; color: #9aa6bd; }
.leader-card figcaption { padding: 0.5rem 0.4rem 0.65rem; }
.leader-card__name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.leader-card__role {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 0.2rem;
}

/* Photo (left) + News panel (right) */
.hero-showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}
.hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10;
  background: rgba(255,255,255,0.08);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .img-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #dbe3f7; text-align: center; padding: 1rem;
  font-size: 0.95rem;
  border: 2px dashed rgba(255,255,255,0.35);
}

/* ---- News & Notifications panel (auto-scrolling) ---- */
.news-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--color-text);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.news-panel__head {
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  padding: 0.7rem 1rem;
}
.news-panel__head h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #3a2a00;
  letter-spacing: 0.02em;
}
.news-panel__head h2 .en { color: #3a2a00; }
.news-panel__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  overflow: hidden;
}
/* fade top/bottom so items appear to glide in and out */
.news-panel__viewport::before,
.news-panel__viewport::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 28px;
  z-index: 2;
  pointer-events: none;
}
.news-panel__viewport::before { top: 0; background: linear-gradient(180deg, #fff, rgba(255,255,255,0)); }
.news-panel__viewport::after  { bottom: 0; background: linear-gradient(0deg, #fff, rgba(255,255,255,0)); }

.news-ticker {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0; left: 0; right: 0;
  animation: news-scroll var(--news-duration, 30s) linear infinite;
  will-change: transform;
}
/* pause so a visitor can read a notice */
.news-panel__viewport:hover .news-ticker { animation-play-state: paused; }

.news-ticker li { border-bottom: 1px solid #eef1f6; }
.news-ticker a,
.news-ticker .news-item {
  display: block;
  padding: 0.7rem 1rem;
  color: inherit;
  text-decoration: none;
}
.news-ticker a:hover { background: #f6f8fc; text-decoration: none; }
.news-ticker .news-date {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(28, 63, 148, 0.08);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-bottom: 0.35rem;
}
.news-ticker .news-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.news-panel__empty {
  padding: 1.25rem 1rem;
  color: var(--color-muted, #667);
  text-align: center;
}
.news-panel__foot {
  padding: 0.6rem 1rem;
  border-top: 1px solid #eef1f6;
  text-align: right;
  background: #fafbfd;
}
.news-panel__foot a { font-size: 0.88rem; font-weight: 600; }

@keyframes news-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* Respect users who prefer no motion: no crawl, just a normal scroll list */
@media (prefers-reduced-motion: reduce) {
  .news-ticker { position: static; animation: none; }
  .news-panel__viewport { overflow-y: auto; }
}

/* ============================================================
   VALUE STRIP  (Knowledge / Discipline / ...)
   ============================================================ */
.value-strip { background: var(--color-secondary); }
.value-strip .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  padding-block: 1.75rem;
}
.value {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--color-text);
}
.value .value__icon { font-size: 1.9rem; line-height: 1; }
.value strong { display: block; font-size: 1.05rem; }
.value span.txt { font-size: 0.9rem; color: #4a3a06; }
.value.as-block .as { display: block; }

/* ============================================================
   FEATURE / INFO CARD GRID
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap-lg);
}
.feature { text-align: left; }
.feature .feature__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(30, 58, 138, 0.08);
  color: var(--color-primary);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
}
.feature h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.feature p { margin: 0; color: var(--color-text-soft); }

/* ============================================================
   STATS ROW
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  text-align: center;
}
.stat .stat__num {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}
.stat .stat__label { color: var(--color-text-soft); font-size: 0.95rem; margin-top: 0.35rem; }

/* ============================================================
   ACADEMICS  — medium cards + class tables
   ============================================================ */
.medium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-lg);
}
.medium-card { border-top: 5px solid var(--color-primary); }
.medium-card h3 { color: var(--color-primary); font-size: 1.3rem; }
.medium-card .running {
  display: inline-block;
  background: rgba(245, 166, 35, 0.18);
  color: #7a5400;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.info-table th { background: var(--color-bg-soft); font-weight: 600; }

/* ============================================================
   FACULTY GRID
   ============================================================ */
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--gap-lg);
}
/* Principal + Vice Principal — two wider cards, centred above the medium sections */
.faculty-grid--lead {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
  margin-inline: auto;
}
/* The photo runs full-bleed to the card edge, so the padding lives on the body */
.faculty-card { text-align: center; padding: 0; overflow: hidden; }
.faculty-card .photo {
  /* portrait frame — the staff photos are roughly 3:4, so the crop stays gentle */
  aspect-ratio: 3 / 4;
  width: 100%;
  background: var(--color-bg-soft);
  border-bottom: 3px solid var(--color-secondary);
  display: grid; place-items: center;
  color: var(--color-text-soft);
  font-size: 2.4rem;
  overflow: hidden;
}
/* top-anchored so a tall photo loses feet, never the face */
.faculty-card .photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
}
.faculty-card__body { padding: 0.85rem 0.7rem 1rem; }
.faculty-card h3 { font-size: 1rem; margin-bottom: 0.15rem; line-height: 1.25; }
.faculty-card .role { color: var(--color-primary); font-weight: 600; font-size: 0.88rem; }
.faculty-card .qual { color: var(--color-text-soft); font-size: 0.88rem; margin-top: 0.2rem; }
.faculty-card--lead h3 { font-size: 1.15rem; }
.faculty-card--lead .role { font-size: 0.95rem; }

@media (max-width: 480px) {
  /* two per row on a phone rather than one giant card per screen */
  .faculty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .faculty-card h3 { font-size: 0.9rem; }
  .faculty-card .role { font-size: 0.78rem; }
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
.gallery-grid {
  /* dense so a double-width panorama never leaves a hole in the row above it */
  grid-auto-flow: dense;
}
.gallery-grid .tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-soft);
  display: grid; place-items: center;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  text-align: center;
}
/* The dashed frame and padding belong to the empty "Add photo" boxes only —
   on a filled tile they would inset the photo and leave a border showing. */
.gallery-grid .tile--ph { border: 1px dashed var(--color-border); padding: 0.75rem; }
.gallery-grid .tile img,
.gallery-grid .tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Panoramas (roughly 2:1 and wider) take two columns instead of being
   guillotined into a 4:3 box. */
.gallery-grid .tile--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
/* Covers and documents are letterboxed, never cropped — a magazine cover
   trimmed to 4:3 loses its title. */
.gallery-grid .tile--contain { background: var(--color-bg-soft); }
.gallery-grid .tile--contain img { object-fit: contain; }
.gallery-grid .tile--video video { object-fit: contain; background: #000; }
@media (max-width: 520px) {
  /* one column on a phone — a 2-column span would overflow the row */
  .gallery-grid .tile--wide { grid-column: span 1; aspect-ratio: 16 / 9; }
}

/* ============================================================
   CERTIFICATES (achievements.html)
   Award documents are portrait and text-heavy, so they are shown whole —
   never cropped to a tile — and open full size in the gallery lightbox.
   The grid centres its columns and caps them, so one certificate sits at a
   readable width instead of stretching the full container.
   ============================================================ */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 300px));
  justify-content: center;
  gap: var(--gap-lg);
}
.cert {
  margin: 0;
  cursor: zoom-in;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-secondary);
  border-radius: var(--radius);
  padding: 0.9rem 0.9rem 0;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cert:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cert:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
.cert img {
  display: block;
  width: 100%;
  height: auto;              /* the certificate keeps its own aspect ratio */
  border-radius: var(--radius-sm);
}
.cert figcaption {
  padding: 0.75rem 0.15rem 0.9rem;
  font-family: var(--font-meta);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-soft);
  text-align: center;
}

/* ---- Gallery lightbox: click a photo to see it uncropped ---- */
.gallery-grid .tile--zoom { cursor: zoom-in; }
.gallery-grid .tile--zoom:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}
/* the page behind must not scroll while the overlay is up */
body.lightbox-open { overflow: hidden; }

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, 0.9);
}
.gallery-lightbox.open { display: flex; }
.glb__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 92vw;
}
.glb__img {
  max-width: 92vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  /* contain, not cover — showing the whole frame is the entire point here */
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: logo-pop 0.2s ease-out;
}
.glb__cap {
  color: #f3f5f9;
  font-size: 0.92rem;
  text-align: center;
  max-width: 70ch;
}
.glb__cap:empty { display: none; }
.glb__btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 46px; height: 46px;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
}
.glb__btn:hover, .glb__btn:focus-visible { background: rgba(255, 255, 255, 0.3); }
/* `display: grid` above outranks the [hidden] attribute's default display:none,
   so a single-image set (e.g. one certificate) would still show the arrows. */
.glb__btn[hidden], .glb__count[hidden] { display: none; }
.glb__close { top: 2.5vmin; right: 2.5vmin; font-size: 1.6rem; }
.glb__prev, .glb__next { top: 50%; transform: translateY(-50%); }
.glb__prev { left: 2.5vmin; }
.glb__next { right: 2.5vmin; }
.glb__count {
  position: absolute;
  bottom: 2.5vmin; left: 50%;
  transform: translateX(-50%);
  color: #cfd6e4;
  font-size: 0.85rem;
  font-family: var(--font-meta);
}
@media (max-width: 520px) {
  .glb__btn { width: 40px; height: 40px; }
  .glb__prev { left: 1vmin; }
  .glb__next { right: 1vmin; }
  .glb__img { max-height: 78vh; }
}
@media (prefers-reduced-motion: reduce) {
  .glb__img { animation: none; }
}
.gallery-grid .tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.55rem 0.7rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.72));
  text-align: left;
}

/* ============================================================
   NOTICES
   ============================================================ */
.notice-list { display: flex; flex-direction: column; gap: var(--gap); }
.notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-left: 4px solid var(--color-primary);
}
.notice .date {
  flex: 0 0 auto;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  min-width: 64px;
}
.notice .date .d { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.notice .date .m { font-size: 0.78rem; text-transform: uppercase; }
.notice .body h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.notice .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.2);
  color: #7a5400;
  margin-top: 0.4rem;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: flex-start; }
.contact-list .ico { font-size: 1.3rem; color: var(--color-primary); flex: 0 0 auto; }
.map-embed { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); }
.map-placeholder {
  width: 100%; aspect-ratio: 4 / 3;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--color-text-soft); background: var(--color-bg-soft);
  text-align: center; padding: 1rem;
}

/* ============================================================
   "COMING SOON"  (admissions placeholder)
   ============================================================ */
.coming-soon {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.coming-soon .badge {
  display: inline-block;
  background: rgba(245, 166, 35, 0.2);
  color: #7a5400;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ============================================================
   FACILITIES
   ============================================================ */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.facility {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.facility__mark {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.facility__text { display: flex; flex-direction: column; gap: 0.25rem; }
.facility__name { font-weight: 600; line-height: 1.3; }
/* Planned, not present: a hollow dashed ring and an amber badge, so a
   "coming soon" entry can never be mistaken for a ticked one. */
.facility--soon { border-left-color: #d9a406; }
.facility--soon .facility__mark {
  background: transparent;
  border: 2px dashed #d9a406;
}
.facility--soon .facility__name { color: var(--color-text-soft); }
.facility__badge {
  align-self: flex-start;
  background: rgba(245, 166, 35, 0.2);
  color: #7a5400;
  font-family: var(--font-meta);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

/* Utility */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
/* Available to screen readers, invisible on screen — carries the meaning of the
   tick, which is decorative markup on its own. */
.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;
}
.centered-lead { margin-inline: auto; }
.inline-note { display: inline-block; margin-top: 0.4rem; }
.heading-primary { color: var(--color-primary); }
.pending-contact { color: inherit; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
.note {
  background: #fff8e6;
  border: 1px solid #f3d27a;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  color: #6b4e00;
}

/* ============================================================
   RESPONSIVE  — mobile-first collapse
   ============================================================ */
@media (max-width: 860px) {
  /* ---- Mobile header: the banner scrolls away, the slim bar stays ----
     On a phone the brand banner (logo + name + address + badge + motto) ate
     most of the first screen and then followed the reader down the page. Now
     it scrolls up out of the way like normal content, and only the navy nav
     strip — language toggle and the ☰ menu — pins to the top.

     CSS only, no JavaScript: .site-header stops being the sticky element and
     .header-nav becomes it. .header-nav was already `position: relative` for
     the dropdown, and sticky is also a positioned context, so the open menu
     (.main-nav, absolute at top:100%) still hangs off the strip correctly.
     The shadow has to move too — .site-header's own shadow scrolls away with
     it, leaving the pinned strip with no separation from the page. */
  .site-header { position: static; }
  .header-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(21, 48, 110, 0.25);
  }

  /* Banner: logo + name only; motto moves below, centered */
  .header-banner__inner {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    text-align: left;
  }
  .brand__name-link { justify-self: start; text-align: left; align-items: flex-start; }
  .brand__name .as { font-size: 1.25rem; }
  .brand__name .en { font-size: 1.25rem; }
  .brand__details { font-size: 0.7rem; }
  .brand__logo { width: 84px; height: 84px; font-size: 1.7rem; }
  .brand__motto {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
  .brand__motto .en { font-size: 0.82rem; }

  .home-hero .container { padding-block: 2.5rem; }
  .hero-top { grid-template-columns: 1fr; align-items: stretch; }
  .hero-top .hero-text { margin-bottom: 0; }
  .hero-showcase { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  .nav-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: var(--shadow);
    z-index: 90;
  }
  .main-nav.open { max-height: 80vh; overflow-y: auto; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 1.25rem 1rem; }
  .main-nav a { padding: 0.85rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }

  /* No hover on touch: show submenus inline (indented) when the menu is open */
  .main-nav .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border-top: 0;
    border-radius: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.18);
  }
  .main-nav .submenu a { padding-left: 1.75rem; font-size: 0.9rem; }
  .main-nav .has-sub > a::after { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--gap); }
}

/* ============================================================
   DEPTH THEME  — subtle gradients + soft 3D (scoped to body.depth)
   Lightweight by design: only CSS gradients + shadows, no images
   and no backdrop blur, so it stays smooth on low-end phones.
   Currently previewed on the Home page; to roll out, add
   class="depth" to <body> on the other pages.
   ============================================================ */

/* Header: gentle top-to-bottom gradient + soft separation shadow */
body.depth .site-header {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 2px 10px rgba(21, 48, 110, 0.25);
}
body.depth .subnav {
  background: linear-gradient(180deg, #f7b733 0%, var(--color-secondary) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Primary button: 2-tone gold, light top edge, soft lift */
body.depth .btn-primary {
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 12px rgba(207, 141, 12, 0.35);
}
body.depth .btn-primary:hover {
  background: linear-gradient(180deg, #f6b53f 0%, var(--color-secondary-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(207, 141, 12, 0.45);
}

/* Cards: faint sheen gradient, 1px light top edge, layered shadow */
body.depth .card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 1px 2px rgba(16, 32, 80, 0.04),
              0 8px 20px rgba(16, 32, 80, 0.07);
}
body.depth .card:hover,
body.depth a.card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 12px 28px rgba(16, 32, 80, 0.12);
}

/* Feature icon tiles: soft raised chip */
body.depth .feature__icon {
  background: linear-gradient(180deg, rgba(28, 63, 148, 0.13) 0%, rgba(28, 63, 148, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Value strip: subtle gold gradient + inner highlight */
body.depth .value-strip {
  background: linear-gradient(180deg, #f7b733 0%, var(--color-secondary) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Soft sections: faint top-down gradient instead of flat grey */
body.depth .section--soft {
  background: linear-gradient(180deg, #fbfcfe 0%, var(--color-bg-soft) 100%);
}

/* Home hero: a soft radial light over the existing diagonal gradient */
body.depth .home-hero {
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* Stat numbers: subtle gradient-text accent (falls back to solid colour) */
body.depth .stat__num {
  color: var(--color-primary);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Extra responsive polish (small phones) ---- */
@media (max-width: 480px) {
  body.depth .container { padding-inline: 1rem; }

  /* Home */
  body.depth .home-hero .container { padding-block: 2.25rem; }
  body.depth .home-hero p { font-size: 1.05rem; }
  body.depth .hero-actions { gap: 0.6rem; }
  body.depth .hero-actions .btn { flex: 1 1 100%; text-align: center; }
  body.depth .value-strip .container { grid-template-columns: 1fr; }

  /* All pages: tighter vertical rhythm + comfortable tap targets */
  body.depth .section { padding: 2.25rem 0; }
  body.depth .page-hero { padding: 2.25rem 0; }
  body.depth .feature-grid,
  body.depth .medium-grid,
  body.depth .stats { gap: var(--gap); }
  body.depth .card { padding: 1.25rem; }
  body.depth .subnav a { padding: 0.6rem 0.8rem; } /* keeps tabs >=44px tall */
}

/* Very small phones (<=360px): prevent cramped two-column footer links */
@media (max-width: 360px) {
  body.depth .stats { grid-template-columns: 1fr 1fr; }
}