/* ==========================================================================
   RTM Al-Kabir Technical University (RTM-AKTU) - Homepage Styles
   ========================================================================== */

:root {
  /* Brand colors */
  --color-navy: #0C2350;
  --color-navy-light: #16305F;
  --color-gold: #C9A227;
  --color-red: #A32D2D;
  --color-footer-accent: #E8622A;
  --color-white: #FFFFFF;
  --color-bg-light: #F5F7FA;
  --color-text: #333333;
  --color-text-muted: #6B7280;

  /* Typography */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Poppins', sans-serif;

  /* Layout */
  --utility-bar-height: 40px;
  --header-height: 84px;
  --max-width: 1240px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 10px 30px rgba(12, 35, 80, 0.08);
}

/* === Advertisement Banner Background Config ===
   Change these two values to switch the "Scholarship Programs" banner
   (Home, About Us, Academics, Admissions, Leadership & Management,
   International Applicants) between its default gradient and a
   background image. Edited here once, it updates all pages at once.
   --ad-banner-bg-color is a plain solid color (CSS background-color
   cannot hold a gradient) — it shows through as a fallback/backdrop.
   --ad-banner-bg-image holds the actual gradient or photo; set it to
   url('images/ads/scholarship-banner-bg.jpg') to switch to an image.
   TODO: wire this to the admin panel once it's built. */
:root {
  --ad-banner-bg-color: #0a2e30;
  --ad-banner-bg-image: linear-gradient(120deg, #0d3b3f 0%, #0a2e30 100%);
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--utility-bar-height) + var(--header-height) + 10px);
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.65;
  background-color: var(--color-white);
  padding-top: calc(var(--utility-bar-height) + var(--header-height));
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.section-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.section-heading {
  max-width: 640px;
  margin-bottom: 3rem;
}

.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading__title {
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  margin-top: 0.75rem;
}

.section-heading__title--light {
  color: var(--color-white);
}

/* ==========================================================================
   Utility Classes: Pills & Buttons
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: rgba(201, 162, 39, 0.12);
  color: var(--color-gold);
  border: 1px solid rgba(201, 162, 39, 0.35);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 999px;
}

.pill__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

.pill--light {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-gold);
}

.pill--outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  text-transform: none;
  font-size: 0.85rem;
  letter-spacing: normal;
  font-weight: 500;
}

.text-gold {
  color: var(--color-gold);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, #b8901f 100%);
  color: var(--color-navy);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(201, 162, 39, 0.35);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-outline:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-outline--light {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-outline--light:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   1. Top Utility Bar
   ========================================================================== */

.utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--utility-bar-height);
  background-color: var(--color-navy);
  z-index: 1001;
}

.utility-bar__inner {
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.utility-bar__contact,
.utility-bar__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.utility-bar__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.utility-bar__item .icon {
  width: 14px;
  height: 14px;
  color: var(--color-gold);
}

.utility-bar__item:hover {
  color: var(--color-white);
}

/* Admission ticker: kept invisible until script.js has applied the Site Settings
   (so a ticker switched off in the admin never flashes while the page loads).
   script.js adds html.ticker-ready; if it never runs, the ticker shows after 25 s (slow connections can need several seconds). */
html:not(.ticker-ready) .utility-bar__ticker {
  visibility: hidden;
  animation: ticker-fallback-show 0s linear 25s forwards;
}
@keyframes ticker-fallback-show { to { visibility: visible; } }

.utility-bar__ticker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.utility-bar__ticker-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gold);
  animation: pulse-dot-core 1.4s ease-in-out infinite;
}

.utility-bar__ticker-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--color-gold);
  animation: pulse-dot-ring 1.4s ease-out infinite;
}

@keyframes pulse-dot-core {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes pulse-dot-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

@media (max-width: 860px) {
  .utility-bar__contact {
    display: none;
  }

  .utility-bar__inner {
    justify-content: space-between;
  }
}

@media (max-width: 540px) {
  .utility-bar__links a span:not(.icon) {
    display: none;
  }
}

/* ==========================================================================
   2. Main Navigation
   ========================================================================== */

.site-header {
  position: fixed;
  top: var(--utility-bar-height);
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--color-white);
  box-shadow: 0 2px 12px rgba(12, 35, 80, 0.08);
  z-index: 1000;
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(12, 35, 80, 0.14);
}

.site-header__inner {
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.site-header__logo {
  width: 47px;
  height: 47px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-header__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  color: var(--color-navy);
  line-height: 1.15;
  flex-shrink: 0;
}

.site-header__name-line1 {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.site-header__name-line2 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}

.site-header__name-line3 {
  font-size: 9px;
  font-weight: 600;
  color: rgba(12, 35, 80, 0.55);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  letter-spacing: 0.01em;
  margin-top: 4px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1002;
  flex-shrink: 0;
}

.nav-toggle__bar {
  width: 100%;
  height: 2px;
  background-color: var(--color-navy);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.site-nav__link {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  position: relative;
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--color-gold);
  transition: width 0.2s ease;
}

.site-nav__link:hover {
  color: var(--color-navy);
}

.site-nav__link:hover::after {
  width: 100%;
}

.site-nav__link.is-active {
  color: var(--color-navy);
  font-weight: 600;
}

.site-nav__link.is-active::after {
  width: 100%;
}

.site-nav__cta {
  flex-shrink: 0;
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
}

@media (max-width: 1199px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: calc(var(--utility-bar-height) + var(--header-height));
    left: 0;
    width: 100%;
    height: calc(100vh - var(--utility-bar-height) - var(--header-height));
    background-color: var(--color-white);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2rem 1.5rem;
    gap: 2rem;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: 0 12px 20px rgba(12, 35, 80, 0.1);
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
  }

  .site-nav__link {
    font-size: 1.05rem;
  }

  .site-nav__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   3. Hero Section
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__slides {
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  pointer-events: none;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.hero__overlay {
  /* Minimal safety net only — the dark navy tone now lives baked into the
     slide images themselves, so this no longer carries the darkening. */
  position: absolute;
  inset: 0;
  background: rgba(12, 35, 80, 0.14);
}

/* For a slide whose background is an actual photo (not a solid navy
   background like slide-1/3) - darkens the text side left-to-right while
   keeping the photo's own brightness/detail visible further right, instead
   of darkening the image file itself. Same brand navy as .hero__overlay,
   .page-hero__overlay and .quote-banner__overlay, just shaped as a
   directional scrim instead of a flat/diagonal wash. */
.hero__overlay--scrim-left,
.hero__slide[data-overlay="scrim-left"] .hero__overlay {
  background: linear-gradient(
    90deg,
    rgba(12, 35, 80, 0.82) 0%,
    rgba(12, 35, 80, 0.6) 35%,
    rgba(12, 35, 80, 0.25) 65%,
    rgba(12, 35, 80, 0) 100%
  );
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.6rem;
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero__dot.is-active {
  background-color: var(--color-gold);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

.hero__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6rem 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hero__content {
  max-width: 720px;
}

.hero__content--top,
.hero__slide[data-pos="top"] .hero__content {
  align-self: flex-start;
}

.hero__content--center,
.hero__slide[data-pos="center"] .hero__content {
  align-self: center;
}

.hero__content--bottom,
.hero__slide[data-pos="bottom"] .hero__content {
  align-self: flex-end;
}

.hero__title {
  color: var(--color-white);
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin: 1.25rem 0 1.25rem;
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  max-width: 560px;
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__seal {
  position: relative;
  width: 210px;
  height: 210px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__seal-rotate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: seal-spin 18s linear infinite;
}

@keyframes seal-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero__seal-logo {
  position: relative;
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@media (max-width: 992px) {
  .hero__inner {
    flex-direction: column;
    text-align: center;
  }

  /* In column layout, align-self controls the horizontal axis, so
     top/bottom positioning has to move to the main (vertical) axis
     via auto margins instead. */
  .hero__content--top,
  .hero__content--center,
  .hero__content--bottom,
  .hero__slide[data-pos] .hero__content {
    align-self: center;
  }

  .hero__content--top,
  .hero__slide[data-pos="top"] .hero__content {
    margin-bottom: auto;
  }

  .hero__content--bottom,
  .hero__slide[data-pos="bottom"] .hero__content {
    margin-top: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__seal {
    width: 140px;
    height: 140px;
    align-self: center;
  }

  .hero__seal-logo {
    width: 94px;
    height: 94px;
  }
}

/* --- Hero slides as a Live Edit list (v1.0.53, slide menu v1.0.54) -------
   Per slide: data-overlay (dark layer), data-seal (seal style), data-pos
   (text position) - set from the Live Edit slide menu. */
.hero__slide[data-overlay="dark"] .hero__overlay { background: rgba(12, 35, 80, 0.55); }
.hero__slide[data-overlay="none"] .hero__overlay { background: none; }

/* Seal styles: rotate = the ring turns (as designed); the others keep the ring still. */
.hero__slide[data-seal]:not([data-seal="rotate"]) .hero__seal-rotate { animation: none; }
.hero__slide[data-seal="none"] .hero__seal { display: none; }
.hero__slide[data-seal="pulse"] .hero__seal { animation: seal-pulse 3.2s ease-in-out infinite; }
.hero__slide[data-seal="float"] .hero__seal { animation: seal-float 4s ease-in-out infinite; }
.hero__slide[data-seal="glow"] .hero__seal-logo { animation: seal-glow 2.6s ease-in-out infinite; }

@keyframes seal-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes seal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes seal-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(201, 162, 39, 0); }
  50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 26px 8px rgba(201, 162, 39, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__seal,
  .hero__seal-rotate,
  .hero__seal-logo { animation: none !important; }
}

/* Website: empty texts and a button row with no live button are left out. */
.hero__empty { display: none !important; }
.hero__actions:not(:has(> a:not(.is-deadlink-hidden):not(.cms-hidden))) { display: none; }

/* v1.0.55 Animation hero: letters (and buttons) fly in from random directions
   (script.js heroAnimateIn sets --ha-x / --ha-y / --ha-r / --ha-d per piece). */
.ha-w { display: inline-block; white-space: nowrap; }
.ha-c { display: inline-block; }
.ha-fly {
  animation: hero-fly 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--ha-d, 0ms);
}
.ha-box { animation: hero-fade 0.6s ease backwards; }
@keyframes hero-fly {
  from {
    opacity: 0;
    transform: translate(var(--ha-x, 0), var(--ha-y, 0)) rotate(var(--ha-r, 0deg)) scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ha-fly, .ha-box { animation: none !important; }
}

/* The setting elements are never shown (set from the Live Edit slide menu);
   the "Slides" button only shows in Live Edit. */
.hero__tools,
.hero__manage { display: none; }

.hero--edit .hero__manage {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--color-gold);
  background: rgba(12, 35, 80, 0.9);
  color: #fff;
  font: 700 13px/1.2 Inter, Arial, sans-serif;
  cursor: pointer;
}
.hero--edit .hero__content [data-cms]:empty::before {
  content: attr(data-cms-new);
  opacity: 0.5;
  font-style: italic;
}
.hero--edit .hero__content .pill:has(> span:empty) { opacity: 0.6; }

/* ==========================================================================
   Announcement Marquee
   ========================================================================== */

.announcement-marquee {
  background-color: var(--color-navy);
  overflow: hidden;
  padding: 0.95rem 0;
}

.announcement-marquee__track {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  animation: announcement-marquee-scroll 22s linear infinite;
}

.announcement-marquee__text {
  white-space: nowrap;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-white);
}

@keyframes announcement-marquee-scroll {
  from { transform: translate(0, 0); }
  to { transform: translate(-100%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-marquee__track {
    animation: none;
  }
}

/* ==========================================================================
   4. Leadership Messages
   ========================================================================== */

.leadership {
  background-color: var(--color-white);
}

.leadership__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

@media (max-width: 860px) {
  .leadership__grid {
    grid-template-columns: 1fr;
  }
}

.leader-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 2.25rem 1.75rem;
  border-radius: var(--radius-md);
  border: 1px solid #eef0f3;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.leader-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px rgba(12, 35, 80, 0.12);
}

.leader-card__photo {
  width: 200px;
  height: 190px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--color-gold);
}

.leader-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-card__name {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.leader-card__title {
  color: var(--color-gold);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.leader-card__quote {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-style: italic;
  margin-bottom: 1.25rem;
}

.leader-card__link {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.leader-card__link:hover {
  color: var(--color-red);
}

/* Whole-card link variant (Chancellor card): reset anchor defaults so the
   <a> picks up the exact same box styling/hover lift as .leader-card. */
.leader-card--link {
  text-decoration: none;
  color: inherit;
}

.leader-card--link:hover .leader-card__link {
  color: var(--color-red);
}

/* ==========================================================================
   5. About The University
   ========================================================================== */

.about {
  background-color: var(--color-bg-light);
}

.about--white {
  background-color: var(--color-white);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.about__media {
  margin-top: 0;
}

@media (max-width: 860px) {
  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__media {
    margin-top: 0;
  }
}

.about__image {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.about__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.about__social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.about__social-icon:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-3px);
}

.about__text {
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}

.about__content .pill {
  margin-bottom: 0.75rem;
}

.about__content .section-heading__title {
  margin-top: 0;
  margin-bottom: 1.1rem;
}

/* ==========================================================================
   6. Quick Access
   ========================================================================== */

.quick-access {
  background-color: var(--color-white);
}

.quick-access .section-heading__title {
  margin-top: 0;
}

.quick-access__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

@media (max-width: 992px) {
  .quick-access__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .quick-access__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quick-access__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.75rem 1rem;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  text-align: center;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.quick-access__card:hover {
  transform: translateY(-4px);
  background-color: var(--color-navy);
}

.quick-access__card:hover .quick-access__icon {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.quick-access__card:hover .quick-access__label {
  color: var(--color-white);
}

.quick-access__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.quick-access__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-navy);
  transition: color 0.25s ease;
}

/* ==========================================================================
   7. Our Faculties
   ========================================================================== */

.faculties {
  background-color: var(--color-navy);
  background-image: linear-gradient(160deg, rgba(12, 35, 80, 0.97), rgba(22, 48, 95, 0.9));
}

.faculties__intro-text {
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.75rem;
}

.faculties__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 0.75rem;
}

@media (max-width: 860px) {
  .faculties__grid {
    grid-template-columns: 1fr;
  }
}

.faculty-card {
  border-radius: var(--radius-md);
  background-color: var(--color-navy-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.faculty-card:hover {
  transform: translateY(-6px);
}

.faculty-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
}

.faculty-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.faculty-card__name {
  color: var(--color-white);
  font-size: 1.1rem;
  padding: 1.25rem 1.75rem;
}

/* ==========================================================================
   8. Featured Programs
   ========================================================================== */

.programs {
  background-color: var(--color-white);
}

.programs__carousel {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.programs__track {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  width: max-content;
  animation: programs-scroll 32s linear infinite;
}

.programs__carousel:hover .programs__track,
.programs__track:focus-within {
  animation-play-state: paused;
}

@keyframes programs-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .programs__track {
    animation: none;
  }

  .programs__carousel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .programs__track > .program-card[aria-hidden="true"] {
    display: none;
  }
}

/* Compact program card: the outer <a> (the whole card is clickable) supplies
   a light-background "frame" padding; .program-card__inner is the white
   bordered card sitting inside it, holding the icon badge, title,
   description, and View Details button. Shared between this auto-scrolling
   carousel and the Featured Programs page's .program-card-grid, so sizing/
   hover behavior lives once. Roughly 344x429px per the reference design. */
.program-card {
  display: block;
  flex: 0 0 344px;
  width: 100%;
  max-width: 344px;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.program-card__inner {
  height: 100%;
  min-height: 340px;
  padding: 2rem 1.5rem;
  border-radius: calc(var(--radius-md) - 4px);
  border: 1px solid #eef0f3;
  background-color: var(--color-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.program-card__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
}

.program-card__icon svg {
  width: 64px;
  height: 64px;
}

/* Each badge holds a shared program icon (images/programs/icons/*, reused
   identically here and in the homepage carousel) via the site's standard
   .img-ph placeholder mechanism. The icon fills the full 64px badge space
   with no background shape behind it. The descendant-selector scoping
   below (rather than a dedicated modifier class) is why plain .img-ph
   markup works here unchanged; there's no room for the fallback's usual
   "Image Coming Soon" label at this size, so that markup is simply omitted
   rather than hidden. The fallback svg needs its own explicit size here
   (.img-ph__fallback svg's base 40px and .program-card__icon svg's 64px
   above tie on specificity, so this can't rely on either winning). */
.program-card__icon .img-ph {
  width: 64px;
  height: 64px;
  background-color: transparent;
}

.program-card__icon .img-ph img {
  object-fit: contain;
}

.program-card__icon .img-ph__fallback {
  padding: 0;
}

.program-card__icon .img-ph__fallback svg {
  width: 48px;
  height: 48px;
}

.program-card__title {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.program-card__desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.program-card__inner .btn {
  margin-top: auto;
  padding: 0.6rem 1.4rem;
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .program-card {
    flex-basis: 280px;
    max-width: 280px;
  }

  .program-card__inner {
    min-height: 0;
    padding: 1.5rem 1.25rem;
  }
}

.programs__cta {
  text-align: center;
  margin-top: 3rem;
}

/* ==========================================================================
   9. Scholarship Programs
   ========================================================================== */

.scholarship {
  background-color: var(--ad-banner-bg-color);
  background-image: var(--ad-banner-bg-image);
  background-size: cover;
  background-position: center;
}

.scholarship__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.scholarship__title {
  color: var(--color-white);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.75rem;
}

.scholarship__text {
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
}

.scholarship__content {
  flex: 1;
  min-width: 260px;
}

/* ==========================================================================
   10. Why Choose Us
   ========================================================================== */

.why-choose-us {
  background: linear-gradient(135deg, #3b1f5c 0%, var(--color-navy) 85%);
}

.why-choose-us__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 860px) {
  .why-choose-us__grid {
    grid-template-columns: 1fr;
  }
}

.why-choose-us__text {
  color: rgba(255, 255, 255, 0.82);
  margin: 1.1rem 0 1.75rem;
}

.why-choose-us__content .section-heading__title {
  margin-bottom: 0;
}

.why-choose-us__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.why-choose-us__badges .pill--outline {
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.why-choose-us__badges .pill--outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Same 1.75rem gap the paragraph above leaves before the pills. */
.why-choose-us__cta {
  margin-top: 1.75rem;
}

.why-choose-us__media {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: -130px;
  margin-bottom: -80px;
}

.why-choose-us__media img {
  height: 480px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 860px) {
  .why-choose-us__media {
    margin-top: 0;
    margin-bottom: 0;
    justify-content: center;
  }
}

/* ==========================================================================
   11. News & Notice
   ========================================================================== */

.news-notice {
  background-color: var(--color-bg-light);
}

.news-notice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

@media (max-width: 860px) {
  .news-notice__grid {
    grid-template-columns: 1fr;
  }
}

.news-notice__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.news-notice__col-title {
  font-size: 1.15rem;
}

.news-notice__view-all {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.news-notice__view-all:hover {
  color: var(--color-red);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.news-list__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background-color: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Same subtle gold tint + border convention as .cm-sidebar__link:hover */
.news-list__item:hover {
  background-color: rgba(201, 162, 39, 0.08);
  border-color: var(--color-gold);
}

.news-list__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-gold);
  flex-shrink: 0;
}

.news-list__headline {
  color: var(--color-navy);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

/* --- Date + weekday meta row: reused by both the Current News cards and
   the Notice Board items below (same muted-gray icon+label convention as
   .utility-bar__item / .site-footer__contact-item). The weekday text is
   filled in by initDateWeekdays() in script.js from each .js-weekday's
   data-date, never hardcoded, so it can't drift from the date. --- */
.date-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.date-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.date-meta__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-gold);
}

.notice-box {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0.5rem 1.25rem;
  box-shadow: var(--shadow-card);
}

.notice-box__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid #eef0f3;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.notice-box__item:last-child {
  border-bottom: none;
}

/* Same subtle gold tint as .news-list__item:hover / .cm-sidebar__link:hover */
.notice-box__item:hover {
  background-color: rgba(201, 162, 39, 0.08);
}

.notice-box__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(163, 45, 45, 0.1);
  color: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notice-box__title {
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

/* ==========================================================================
   12. Photo Gallery
   ========================================================================== */

.gallery {
  background-color: var(--color-navy);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
    linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
}

.gallery .section-heading__title {
  color: var(--color-white);
}

.gallery__slider-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gallery__viewport {
  overflow: hidden;
  flex: 1;
}

.gallery__track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.4s ease;
}

.gallery__item {
  flex: 0 0 calc(33.333% - 0.85rem);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

@media (max-width: 860px) {
  .gallery__item {
    flex: 0 0 calc(50% - 0.65rem);
  }
}

@media (max-width: 560px) {
  .gallery__item {
    flex: 0 0 100%;
  }
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery__arrow,
.testimonials__arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.gallery__arrow:hover,
.testimonials__arrow:hover {
  background-color: var(--color-gold);
  color: var(--color-navy);
  transform: scale(1.06);
}

.testimonials__arrow {
  background-color: var(--color-bg-light);
  border-color: #eef0f3;
  color: var(--color-navy);
}

/* ==========================================================================
   13. Discover Campus Life
   ========================================================================== */

.campus-life {
  background-color: var(--color-white);
}

.campus-life__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 860px) {
  .campus-life__grid {
    grid-template-columns: 1fr;
  }
}

.campus-life__text {
  color: var(--color-text-muted);
  margin: 1.1rem 0 1.75rem;
}

.campus-life__frame {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 14px;
  border: 2px solid var(--color-gold);
}

.campus-life__video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius-lg) - 8px);
  overflow: hidden;
  background-color: var(--color-navy);
}

.campus-life__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.campus-life__play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: rgba(12, 35, 80, 0.55);
  border: 3px solid var(--color-gold);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.campus-life__play-btn:hover {
  transform: scale(1.08);
  background-color: rgba(12, 35, 80, 0.75);
}

.campus-life__play-btn .icon {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.campus-life__play-btn.is-hidden {
  display: none;
}

/* ==========================================================================
   14. Students Feedback
   ========================================================================== */

.testimonials {
  background-color: var(--color-bg-light);
}

.testimonials__slider-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonials__viewport {
  overflow: hidden;
  flex: 1;
  padding: 20px 0;
}

.testimonials__track {
  display: flex;
  transition: transform 0.4s ease;
  margin: -20px 0;
}

.testimonial-card {
  flex: 0 0 calc(33.333% - 0.85rem);
  margin-right: 1.25rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2.25rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: background-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card.is-active {
  background-color: var(--color-navy);
  transform: translateY(-6px);
}

.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(12, 35, 80, 0.18);
}

.testimonial-card.is-active:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(12, 35, 80, 0.18);
}

.testimonial-card.is-active .testimonial-card__quote,
.testimonial-card.is-active .testimonial-card__dept {
  color: rgba(255, 255, 255, 0.8);
}

.testimonial-card.is-active .testimonial-card__name {
  color: var(--color-white);
}

@media (max-width: 860px) {
  .testimonial-card {
    flex: 0 0 calc(50% - 0.65rem);
  }
}

@media (max-width: 560px) {
  .testimonial-card {
    flex: 0 0 100%;
    margin-right: 1rem;
  }
}

.testimonial-card__photo {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.1rem;
  border: 4px solid var(--color-gold);
}

.testimonial-card__stars {
  color: var(--color-gold);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.testimonial-card__quote {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
  transition: color 0.3s ease;
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-navy);
  transition: color 0.3s ease;
}

.testimonial-card__dept {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  transition: color 0.3s ease;
}

.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.testimonials__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #d7dbe3;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.testimonials__dot.is-active {
  background-color: var(--color-gold);
  transform: scale(1.3);
}

/* ==========================================================================
   15. Location Map
   ========================================================================== */

.location-map {
  position: relative;
}

.location-map__frame {
  position: relative;
  height: 420px;
}

.location-map__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(15%);
}

.location-map__card {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 16px 36px rgba(12, 35, 80, 0.2);
  max-width: 280px;
}

.location-map__name {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.location-map__detail {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .location-map__card {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

/* --- Compact, bottom-left (shifted 200px right), clickable variant for the
   homepage's info card (opens the location in Google Maps). Scoped to this
   modifier so the Contact page's own top-right, non-clickable card is
   unaffected. --- */
.location-map__card--compact {
  top: auto;
  bottom: 0.75rem;
  left: calc(0.75rem + 200px);
  padding: 0.75rem 0.9rem;
  max-width: 200px;
  box-shadow: 0 8px 20px rgba(12, 35, 80, 0.18);
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.location-map__card--compact:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(12, 35, 80, 0.28);
}

.location-map__card--compact .location-map__name {
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.location-map__card--compact .location-map__detail {
  font-size: 0.7rem;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .location-map__card--compact {
    left: 0.75rem;
    right: auto;
    max-width: 180px;
  }
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-navy);
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 1.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.6rem;
}

@media (max-width: 560px) {
  .site-footer__brand {
    margin-top: 0;
  }
}

.site-footer__logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.site-footer__brand-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.site-footer__brand-line1 {
  color: var(--color-white);
  font-size: 1.15rem;
}

.site-footer__brand-line2 {
  color: var(--color-footer-accent);
  font-size: 1.02rem;
}

.newsletter-form {
  width: min(380px, 100%);
  margin-top: 0.9rem;
}

@media (max-width: 560px) {
  .newsletter-form {
    margin-top: 0;
  }
}

.newsletter-form__label {
  display: block;
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.newsletter-form__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-white);
  border-radius: 999px;
  padding: 0.3rem 0.3rem 0.3rem 1.25rem;
  transition: box-shadow 0.2s ease;
}

.newsletter-form__row:focus-within {
  box-shadow: 0 0 0 2px var(--color-footer-accent);
}

.newsletter-form__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.6rem 0;
  color: var(--color-text);
  font-size: 0.88rem;
}

.newsletter-form__input::placeholder {
  color: #9AA0AC;
}

.newsletter-form__submit {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background-color: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.newsletter-form__submit:hover {
  background-color: var(--color-footer-accent);
  transform: translateY(-2px);
}

.newsletter-form__status {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-footer-accent);
  min-height: 1.2em;
}

@media (max-width: 560px) {
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr 1fr;
  gap: 2.5rem 5rem;
}

@media (max-width: 992px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

.site-footer__about-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.site-footer__contact-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-footer-accent);
}

.site-footer__contact-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__contact-text--phone {
  white-space: nowrap;
}

.site-footer__hotline {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.site-footer__hotline-label {
  font-weight: 700;
  color: var(--color-footer-accent);
  font-size: 1.15rem;
}

.site-footer__hotline-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-white);
  transition: color 0.2s ease;
}

.site-footer__hotline-number:hover {
  color: var(--color-footer-accent);
}

.site-footer__heading {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  position: relative;
}

.site-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-footer-accent);
}

.site-footer__heading--platform {
  margin-top: 2.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.88rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer__links a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}

.site-footer__links a:hover {
  color: var(--color-footer-accent);
}

.site-footer__social {
  display: flex;
  gap: 0.75rem;
}

.site-footer__platform-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--color-footer-accent);
  background-color: transparent;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-footer__platform-icon:hover {
  background-color: var(--color-footer-accent);
  transform: translateY(-3px);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  padding: 1.25rem 1.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer__brand-name {
  color: var(--color-footer-accent);
  font-weight: 600;
}

.site-footer__bottom a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}

.site-footer__bottom a:hover {
  color: var(--color-footer-accent);
}

/* ==========================================================================
   17. About Us Page
   ========================================================================== */

/* --- Compact Page Hero --- */
.page-hero {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(12, 35, 80, 0.84) 0%, rgba(22, 48, 95, 0.76) 55%, rgba(12, 35, 80, 0.6) 100%);
}

.page-hero__inner {
  position: relative;
  text-align: center;
  padding: 2rem 1.5rem;
}

.page-hero__title {
  color: var(--color-white);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  margin-bottom: 0.85rem;
}

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.page-hero__breadcrumb a {
  color: var(--color-gold);
  transition: color 0.2s ease;
}

.page-hero__breadcrumb a:hover {
  color: var(--color-white);
}

.page-hero__breadcrumb-sep {
  color: rgba(255, 255, 255, 0.5);
}

.page-hero__breadcrumb-current {
  color: var(--color-white);
}

/* One-off: Institutes & Centers Courses breadcrumb groups "Home / Academics"
   as a single gold block (per Figma), unlike every other page's uniformly
   dim separators - so only this specific separator gets the gold override. */
.page-hero__breadcrumb-sep--accent {
  color: var(--color-gold);
}

/* --- About University collage (Section 2 media) --- */
.about-us__collage-main {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
}

.about-us__collage-main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-us__collage-main::before {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 84px;
  height: 84px;
  border-top: 4px solid var(--color-gold);
  border-right: 4px solid var(--color-gold);
  border-radius: 0 10px 0 0;
  pointer-events: none;
}

.about-us__collage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.about-us__collage-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

@media (max-width: 560px) {
  .about-us__collage-row {
    grid-template-columns: 1fr;
  }
}

/* --- Vision, Mission & Core Value --- */
.foundation {
  background-color: var(--color-bg-light);
}

.foundation__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
  margin-top: 3rem;
}

@media (max-width: 860px) {
  .foundation__grid {
    grid-template-columns: 1fr;
  }
}

.foundation__illustration {
  position: relative;
  width: min(340px, 100%);
  margin: 0 auto;
}

.foundation__illustration-ring {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--color-white);
  box-shadow: var(--shadow-card);
}

.foundation__illustration-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foundation__badge {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  box-shadow: var(--shadow-card);
  border: 3px solid var(--color-white);
}

.foundation__badge--vision {
  top: -8px;
  left: 8%;
  background-color: var(--color-navy);
}

.foundation__badge--mission {
  top: 32%;
  right: -16px;
  background-color: var(--color-gold);
}

.foundation__badge--core {
  bottom: -8px;
  left: 24%;
  background-color: var(--color-red);
}

.foundation__badge .icon {
  width: 24px;
  height: 24px;
}

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  position: relative;
  padding: 0 0 2.25rem 2.25rem;
  border-left: 2px solid #e3e7ee;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item__dot {
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px currentColor;
}

.timeline-item__dot--navy {
  background-color: var(--color-navy);
  color: var(--color-navy);
}

.timeline-item__dot--gold {
  background-color: var(--color-gold);
  color: var(--color-gold);
}

.timeline-item__dot--red {
  background-color: var(--color-red);
  color: var(--color-red);
}

.timeline-item__title {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.timeline-item__text {
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.timeline-item__list {
  color: var(--color-text-muted);
  margin: 0 0 0.75rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.timeline-item__list li {
  list-style: disc;
}

.timeline-item__link {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.timeline-item__link:hover {
  color: var(--color-red);
}

/* --- Vision, Mission & Core Value detail page: timeline left, graphic
   right (mirror of .foundation__grid's column order, which puts the
   illustration first) --- */
.foundation-detail__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
  margin-top: 3rem;
}

@media (max-width: 860px) {
  .foundation-detail__grid {
    grid-template-columns: 1fr;
  }

  .foundation-detail__media {
    order: -1;
  }
}

.foundation-detail__media {
  display: flex;
  justify-content: center;
}

.foundation-detail__image {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 657 / 677;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* --- FAQ + Contact --- */
.faq-contact__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .faq-contact__grid {
    grid-template-columns: 1fr;
  }
}

.faq-contact__text {
  color: var(--color-text-muted);
  margin: 1.1rem 0 1.75rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.faq-item {
  border: 1px solid #eef0f3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-navy);
  cursor: pointer;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(201, 162, 39, 0.12);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.is-open .faq-item__answer {
  max-height: 320px;
}

.faq-item__answer p {
  padding: 0 1.4rem 1.25rem calc(1.4rem + 20px);
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* --- FAQ & Contact page accordion: native <details>/<summary>, no JS
   (same dependency-free approach as the Code of Conduct page's
   .conduct-more). Distinct from .faq-item above (which is a JS-driven
   accordion used on About Us) - shaded rows with a rotating caret,
   matching this page's own mockup rather than reusing that component. */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 2rem 0;
}

.faq-accordion__item {
  border: 1px solid #eef0f3;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-navy);
  cursor: pointer;
}

.faq-accordion__question::-webkit-details-marker {
  display: none;
}

/* Round +/- icon, matching about-us.html's .faq-item__icon exactly
   (same size/colors) so both pages' accordions look consistent. A
   clean glyph swap rather than that icon's rotate(45deg) + / x
   trick, since this is a dedicated FAQ page with its own accordion
   rather than a compact teaser. */
.faq-accordion__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(201, 162, 39, 0.12);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-accordion__icon-minus {
  display: none;
}

.faq-accordion__item[open] .faq-accordion__icon {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.faq-accordion__item[open] .faq-accordion__icon-plus {
  display: none;
}

.faq-accordion__item[open] .faq-accordion__icon-minus {
  display: inline;
}

/* Left inset matches About Us's .faq-item__answer p exactly (measured:
   0 22.4px 20px 42.4px) - the extra 20px beyond the question's own
   1.4rem padding is what visually indents the answer under the
   question text instead of sitting flush with the card edge. Right
   padding is a deliberate departure from that reference (72.4px vs
   its 22.4px) for extra breathing room before the round icon on this
   page's own accordion. */
.faq-accordion__answer {
  padding: 0 72.4px 1.25rem calc(1.4rem + 20px);
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* Standalone centered placement for .contact-card (FAQ & Contact page),
   vs. its original narrower column width inside .faq-contact__grid on
   About Us - width/centering only, the card and form beneath stay the
   shared component untouched. */
.contact-card--wide {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.contact-card {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  margin-top: calc(2.9rem + 5px);
}

.contact-card__title {
  color: var(--color-white);
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.contact-card__subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  margin-bottom: 1.75rem;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  padding: 0.85rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  outline: none;
  transition: box-shadow 0.2s ease;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.45);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-text);
  opacity: 0.5;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 110px;
}

.contact-form__submit {
  align-self: center;
  background: linear-gradient(135deg, var(--color-red) 0%, #7f2323 100%);
  color: var(--color-white);
  border-color: transparent;
}

.contact-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(163, 45, 45, 0.4);
}

.contact-form__status {
  color: var(--color-gold);
  font-size: 0.85rem;
  min-height: 1.2em;
}

/* --- Quote Banner --- */
.quote-banner {
  position: relative;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.quote-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(12, 35, 80, 0.67) 0%, rgba(8, 12, 22, 0.63) 100%);
}

.quote-banner__inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  text-align: center;
}

.quote-banner__text {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.4;
}

.quote-banner__text--gold {
  color: var(--color-gold);
}

/* --- Shared quote banner variant: left-aligned, shifted left (Academics & Admissions pages) --- */
.quote-banner__inner--left {
  margin: 0 auto 0 8%;
  text-align: left;
}

/* Wider box for the Admissions page's longer 2-line Bengali quote, so it doesn't
   wrap onto a 3rd line before reaching the manual <br> */
.quote-banner__inner--wide {
  max-width: 1000px;
}

/* Overlay lightened to 25% of the original darkness */
.quote-banner__overlay--light {
  background: linear-gradient(120deg, rgba(12, 35, 80, 0.1675) 0%, rgba(8, 12, 22, 0.1575) 100%);
}

.quote-banner__text--shadow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  padding-left: 146px;
}

/* Same text-shadow as above, without the 146px padding-left hack that
   exists only to align the Academics page's left-shifted quote under a
   specific word. Use this for centered quote banners instead (currently
   Leadership & Management). */
.quote-banner__text--shadow-center {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* The 146px padding-left above aligns the Academics page's English quote under a
   specific word — that has no equivalent meaning for this Bengali quote. Use a
   smaller inset instead: enough that the text isn't flush against the container's
   own edge, but tested safe (up to 768px width) to keep the phrase on one line
   before the manual <br>. */
.quote-banner__text--admissions {
  padding-left: 80px;
  line-height: 1.8;
}

/* Chancellor/Chairman/VC message pages: this quote's second line is long
   enough that the shared clamp() above still wraps it onto a 3rd line from
   tablet width up. Override font-size only for this quote (not the shared
   base, which other pages' quote banners rely on) so it fits in one line
   from 768px up. No legible size fits it on phone-width screens, so below
   768px it's left to wrap naturally onto 3 lines instead of 1. */
@media (min-width: 768px) {
  .quote-banner__text--pledge {
    font-size: clamp(1.25rem, calc((100vw - 48px) * 0.0285), 1.75rem);
  }
}

/* Below 768px the shared clamp()'s 1.5rem floor is still too large for this
   quote's long second line — it wraps onto 5 lines instead of 3. Scale it
   down (tested at 320-767px) so phones land on the same 3-line wrap the
   tablet/desktop rule's un-overridden fallback was meant to give. */
@media (max-width: 767px) {
  .quote-banner__text--pledge {
    font-size: clamp(0.75rem, calc((100vw - 48px) * 0.046), 1.25rem);
  }
}

/* ==========================================================================
   18. Academics Page
   ========================================================================== */

/* --- Reusable image placeholder (shows when a photo hasn't been supplied yet) --- */
.img-ph {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #E5E9F0;
}

/* Transparent text color hides the alt text a browser paints inside the
   frame while a photo is still loading, so .img-ph's grey fill shows
   instead (sitewide - every page using this placeholder). */
.img-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  color: transparent;
}

.img-ph__fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #9AA5B8;
  padding: 1rem;
  text-align: center;
}

.img-ph__fallback svg {
  width: 40px;
  height: 40px;
}

.img-ph__fallback span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.img-ph--broken img {
  display: none;
}

.img-ph--broken .img-ph__fallback {
  display: flex;
}

/* --- Background utilities (alternate section rhythm down the page) --- */
.bg-white {
  background-color: var(--color-white);
}

.bg-light {
  background-color: var(--color-bg-light);
}

/* --- Text-only sections (Academic System / Academic Policy) --- */
.text-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* Wider variant for sections whose paragraphs read as too narrow at the
   default 1000px (matches the 1100px column already used by the Academics
   page's Our Faculties/Faculty Members intro text, .section-heading--wide).
   Currently used by the International Applicants page's Welcome Intro only. */
.text-section__inner--wide {
  max-width: 1100px;
}

.text-section--left {
  text-align: left;
  max-width: var(--max-width);
}

.text-section__inner .pill {
  margin-bottom: 0.75rem;
}

.text-section__inner .section-heading__title {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.text-section__text {
  color: var(--color-text-muted);
  text-align: left;
  margin-bottom: 1.1rem;
}

.text-section__text--center {
  text-align: center;
}

.text-section__subheading {
  font-size: 1.2rem;
  margin: 0.5rem 0 0.9rem;
}

.text-section__list {
  color: var(--color-text-muted);
  margin: 0 0 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.text-section__list li {
  list-style: disc;
}

.text-section__inner .btn {
  margin-top: 0.5rem;
}

/* Inline bold+underline cross-link inside body copy (e.g. BISD page's
   "...please CLICK on this LINK" pointer to the CRTM page). Underline is
   set explicitly since the sitewide `a` reset strips it. */
.text-section__link {
  color: var(--color-navy);
  text-decoration: underline;
}

.text-section__link:hover {
  color: var(--color-gold);
}

/* --- "Read More" reveal over long policy text (Code of Conduct page):
   native <details>/<summary>, no JS. One-way reveal, not a collapsible
   accordion - once opened the control itself disappears entirely (the
   [open] rule below), since a fresh page load already resets it. --- */
.conduct-more {
  text-align: center;
}

.conduct-more__toggle {
  display: inline-block;
  list-style: none;
  margin-top: 0.5rem;
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.conduct-more__toggle:hover {
  text-decoration: underline;
}

.conduct-more__toggle::-webkit-details-marker {
  display: none;
}

.conduct-more[open] > summary {
  display: none;
}

.conduct-more__body {
  text-align: left;
  margin-top: 2rem;
}

/* --- Academic Policy page: progressive "Read More" reading pattern
   (pages/academic-policy.js). Same gold link look as .conduct-more__toggle
   above, reused directly on a <button> since this needs multi-step JS
   disclosure rather than one native <details> toggle. --- */
.policy-readmore {
  text-align: center;
  margin-top: 1.5rem;
}

.policy-readmore-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.95rem;
}

/* --- Split sections: text + image, either order (Featured/Postgraduate/Undergraduate/Institutes/Deans) --- */
.split-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 860px) {
  .split-section__grid {
    grid-template-columns: 1fr;
  }
}

.split-section__content .pill {
  margin-bottom: 0.75rem;
}

.split-section__content .section-heading__title {
  margin-top: 0;
  margin-bottom: 1.1rem;
}

.split-section__text {
  color: var(--color-text-muted);
  margin-bottom: 1.4rem;
}

.split-section__image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* --- Our Faculties (Academics page card variant, distinct from homepage carousel) --- */
.section-heading--wide {
  max-width: 1100px;
  margin: 0 auto;
}

.af-intro-text {
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

.af-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 0.75rem;
}

@media (max-width: 860px) {
  .af-grid {
    grid-template-columns: 1fr;
  }
}

.af-card {
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  border: 1px solid #eef0f3;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.af-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px rgba(12, 35, 80, 0.12);
}

.af-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.af-card__name {
  font-size: 1.1rem;
  padding: 1.5rem 1.5rem 0.5rem;
}

.af-card__link {
  margin: 1rem 0 1.75rem;
}

/* --- Faculty Members: intro text, card styles shared by the Academics-page
   carousel and the full pages/faculty-members.html listing grid --- */
.fm-intro-text {
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

/* Auto-scrolling carousel (Academics page section) */
.fm-carousel {
  overflow: hidden;
  width: 100%;
  margin-top: 0.75rem;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.fm-track {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  width: max-content;
  animation: fm-scroll 30s linear infinite;
}

.fm-carousel:hover .fm-track,
.fm-track:focus-within {
  animation-play-state: paused;
}

@keyframes fm-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fm-track {
    animation: none;
  }

  .fm-carousel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fm-track > .fm-card:nth-child(n + 7) {
    display: none;
  }
}

/* Full listing grid (pages/faculty-members.html) */
.fm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 0.75rem;
}

@media (max-width: 992px) {
  .fm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .fm-grid {
    grid-template-columns: 1fr;
  }
}

/* Shared card (used inside both .fm-track and .fm-grid) */
.fm-card {
  flex: 0 0 240px;
  text-align: center;
}

.fm-card__link {
  display: block;
}

.fm-card__link:hover .fm-card__name {
  color: var(--color-gold);
}

.fm-card__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--color-gold);
  transition: border-color 0.2s ease;
}

.fm-card__link:hover .fm-card__photo {
  border-color: var(--color-navy);
}
.fm-card__name {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}

.fm-card__role {
  color: var(--color-gold);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.fm-card__dept {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Board of Trustee page (v1.0.43): the member cards sit in the narrower
   column next to the sidebar - 3 per row (v1.0.44, Reja: 4 looked too
   crowded), slightly smaller photos. */
.fm-grid--bot {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* v1.0.45 (Reja): the space from a photo to the photo BELOW it equals the space
     from a photo to the photo beside it (~109px on desktop). All rows get the
     same height (the tallest card, a 2-line name), so every row lines up the same;
     row gap 17px + card text (~92px) = ~109px. */
  grid-auto-rows: 1fr;
  gap: 17px 1.75rem;
  margin-top: 1.5rem;
}

.fm-grid--bot .fm-card__photo {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Leadership & Management page, Board of Trustee part (v1.0.45, Reja): 10pt more
   space between the intro text and the photos (padding, so no margin collapse). */
.fm-grid[data-trustees="cards"] {
  padding-top: 10pt;
}

@media (max-width: 992px) {
  .fm-grid--bot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .fm-grid--bot {
    grid-template-columns: 1fr;
  }
}

/* --- Individual faculty detail pages (pages/faculty/*.html) --- */
.fm-profile__role {
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.fm-profile__dept {
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   19. Admissions Page
   ========================================================================== */

.adm-intro-text {
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

/* Red accent button, mirrors .btn-primary's structure with the brand red */
.btn-accent {
  background: linear-gradient(135deg, var(--color-red) 0%, #7f2323 100%);
  color: var(--color-white);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(163, 45, 45, 0.35);
}

/* --- 4-column intro cards (Admission / Instructions / Form / Apply Now) --- */
.adm-intro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}

@media (max-width: 992px) {
  .adm-intro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .adm-intro-grid {
    grid-template-columns: 1fr;
  }
}

.adm-card {
  padding: 2.25rem 1.75rem;
  border-radius: var(--radius-md);
  border: 1px solid #eef0f3;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.adm-card:hover {
  transform: translateY(-6px);
}

.adm-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.adm-card__icon--navy {
  background-color: rgba(12, 35, 80, 0.1);
  color: var(--color-navy);
}

.adm-card__icon--gold {
  background-color: rgba(201, 162, 39, 0.14);
  color: var(--color-gold);
}

.adm-card__icon--red {
  background-color: rgba(163, 45, 45, 0.1);
  color: var(--color-red);
}

.adm-card__icon--white {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-navy);
}

/* Bigger circle for the Admission/Instructions/Form cards, icon at exactly
   50% of the circle's diameter (Apply Now card is untouched). */
.adm-card__icon--lg {
  width: 88px;
  height: 88px;
}

.adm-card__icon--lg svg {
  width: 44px;
  height: 44px;
}

/* Contact page's 4 info cards only (#contact-info-cards): both the circle
   and the glyph at exactly 80% of the shared .adm-card__icon--lg size
   (88px/44px), same ratio so the icon stays centered as before. Scoped
   here rather than changing --lg itself, which other pages (e.g.
   admissions.html) also use at the full size. */
#contact-info-cards .adm-card__icon--lg {
  width: 70.4px;
  height: 70.4px;
}

#contact-info-cards .adm-card__icon--lg svg {
  width: 35.2px;
  height: 35.2px;
}

/* Left-align the icon with the heading/text below it (UG/PG panel cards) instead
   of the default horizontally-centered position. */
.adm-card__icon--left {
  margin-left: 0;
  margin-right: 0;
}

.adm-card__title {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.adm-card__desc {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

/* Contact page "Call Us" card: keeps a phone number and its "(role)" label
   from wrapping mid-entry (e.g. "...1711983427 (Deputy" / "Registrar)") at
   narrow card widths. */
.adm-phone-entry {
  white-space: nowrap;
}

.adm-card__link {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.adm-card__link:hover {
  color: var(--color-red);
}

/* Standout CTA variant for the "Apply Now" card */
.adm-card--accent {
  background: linear-gradient(135deg, var(--color-gold) 0%, #b8901f 100%);
  border-color: transparent;
}

.adm-card--accent .adm-card__desc {
  color: rgba(12, 35, 80, 0.75);
}

.adm-card--accent .adm-card__link {
  color: var(--color-navy);
}

.adm-card--accent .adm-card__link:hover {
  color: #5c1414;
}

/* --- 2-column panel cards (UG/PG Admissions, BISD/CRTM) --- */
.adm-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.adm-2col-grid--spaced {
  margin-top: 3rem;
}

.adm-2col-grid--spaced .adm-panel-card {
  text-align: center;
}

@media (max-width: 860px) {
  .adm-2col-grid {
    grid-template-columns: 1fr;
  }
}

.adm-panel-card {
  padding: 2.5rem;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  border: 1px solid #eef0f3;
}

.adm-panel-card__title {
  font-size: 1.3rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.adm-panel-card__subtitle {
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.adm-panel-card__desc {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* --- Academic Calendar --- */
.adm-calendar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 860px) {
  .adm-calendar-grid {
    grid-template-columns: 1fr;
  }
}

.adm-calendar-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.adm-calendar-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.adm-calendar-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.adm-calendar-item__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  background-color: var(--color-navy);
}

.adm-calendar-item__day {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--color-white);
}

.adm-calendar-item__month {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.adm-calendar-item__event {
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.95rem;
}

.adm-calendar-content .pill {
  margin-bottom: 0.75rem;
}

.adm-calendar-content .section-heading__title {
  margin-top: 0;
  margin-bottom: 1.1rem;
}

.adm-calendar-content .btn {
  margin-top: 1.1rem;
}

/* --- News & Events --- */
.adm-news-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.adm-news-header__title {
  font-size: 1.15rem;
  color: var(--color-navy);
  font-weight: 700;
}

.adm-news-header__link {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.adm-news-header__link:hover {
  color: var(--color-red);
}

.adm-news-card {
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: 1.75rem;
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.75rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Same subtle gold tint + border convention as .cm-sidebar__link:hover */
.adm-news-card:hover {
  background-color: rgba(201, 162, 39, 0.08);
  border-color: var(--color-gold);
}

.adm-news-card--with-nav {
  grid-template-columns: auto 1fr 360px auto;
}

.adm-news-card--reverse {
  grid-template-columns: auto 360px 1fr auto;
}

@media (max-width: 700px) {
  .adm-news-card,
  .adm-news-card--with-nav,
  .adm-news-card--reverse {
    grid-template-columns: 1fr;
  }

  .adm-news-card__nav {
    display: none;
  }
}

.adm-news-card__image {
  height: 245px;
  border-radius: var(--radius-sm);
}

.adm-news-card__nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #eef0f3;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.adm-news-card__nav:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Anchor now (headline is one of the Current News card's two clickable
   elements, see #newsCard below) - display:block keeps its margin-bottom
   working the way it did as a <p>, since inline elements ignore vertical
   margins. */
.adm-news-card__headline {
  display: block;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.adm-news-card__excerpt {
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

/* Still used by the filter tabs card's date span (#filterDate) below;
   the Current News card's date+weekday now use .date-meta instead. */
.adm-news-card__date {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
}

/* #newsCard: only the headline (.adm-news-card__headline) and the photo
   (.adm-news-card__image, now an <a>) are links - the "Read More" link
   was removed and the rest of the card (excerpt, date/weekday, and the
   card itself) is intentionally not clickable. */
#newsCard {
  position: relative;
}

/* Current Events card (#filterCard, pages/admissions.html): no button inside
   any more (2026-09-29) - the date is the last line, so drop its bottom
   margin to keep the text block truly centred beside the photo. */
#filterCard .adm-news-card__date {
  margin-bottom: 0;
}

.adm-news-card__quote-img {
  position: absolute;
  /* Default landing spot is flush with the content column's right edge
     (right: 480px) and the card's bottom padding (bottom: 24px); shifted
     50px left / 10px up from that default per design request. */
  right: 530px;
  bottom: 34px;
  width: 93px;
  height: 53px;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 700px) {
  .adm-news-card__quote-img {
    display: none;
  }
}

.adm-filter-tabs {
  display: flex;
  gap: 0.75rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.adm-filter-tab {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--color-navy);
  background-color: transparent;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.adm-filter-tab.is-active,
.adm-filter-tab:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Red accent line for quote banners (mirrors the existing --gold variant) */
.quote-banner__text--red {
  color: #FF6B4A;
}

/* Job Circular section standard (job-circular.html, job-circular-details.html
   and every future Job-related page): line 1 in Figma's #fbff00 yellow
   (pixel-measured from node 2141:383), line 2 white, on two separate lines. */
.quote-banner__text--yellow {
  color: #fbff00;
}

/* Wider container + smaller type so each of the two lines stays on a
   single line at desktop width, as in Figma. */
.quote-banner__inner--job {
  max-width: 1240px;
}

.quote-banner__text--job {
  font-size: clamp(0.8rem, 2.35vw, 1.875rem);
}

/* ==========================================================================
   20. Leadership & Management Page
   ========================================================================== */

/* Chancellor section only: .section-heading--wide's "margin: 0 auto" zeroes
   out .section-heading's own margin-bottom, and align-items:center on the
   grid then centers the shorter content column, so the image (the taller
   column) sat flush against the heading while the text had an accidental
   gap. Switch to align-items:flex-start and restore that same gap as an
   explicit top margin so both columns start an equal distance below the
   heading. */
.lm-chancellor-grid {
  align-items: center;
  margin-top: 1.56rem;
}

.lm-bio__name {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.lm-bio__subtitle {
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.lm-bio__role {
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.lm-photo-caption {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 1rem;
}

/* Scholarship banner is shared across pages (homepage, About Us, Academics,
   Admissions); this widens only the Leadership & Management page's instance,
   leaving the shared .scholarship__text max-width untouched everywhere else. */
.lm-scholarship--wide .scholarship__text {
  max-width: 620px;
}

/* Widens the About Us page's instance so the copy wraps to 2 lines by
   default (3 for longer copy) instead of wrapping early at 520px. */
.au-scholarship--wide .scholarship__text {
  max-width: 680px;
}

/* --- Contact Us icon row --- */
.lm-contact-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 3rem 0 2.5rem;
}

.lm-contact-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 150px;
  text-decoration: none;
  cursor: pointer;
}

.lm-contact-icons__item .adm-card__icon {
  transition: transform 0.25s ease;
}

.lm-contact-icons__item:hover .adm-card__icon {
  transform: scale(1.1);
}

.lm-contact-icons__label {
  font-weight: 600;
  color: var(--color-navy);
  font-size: 0.92rem;
  transition: color 0.25s ease;
}

.lm-contact-icons__item:hover .lm-contact-icons__label {
  color: var(--color-gold);
}

/* Shrink just the icon glyph to half its former size while leaving the
   56x56 .adm-card__icon circle itself untouched; scoped to these 5
   Contact Us icons only, since .adm-card__icon's base (non --lg) size is
   also used unscaled elsewhere (e.g. the Admissions "Apply Now" card). */
.lm-contact-icons__item .adm-card__icon svg {
  width: 28px;
  height: 28px;
}

/* --- The Chancellor detail page (pages/chancellor.html): name/role/contact
   block sits centered above the left-aligned bio copy inside the shared
   .cm-content template, so it needs its own centered wrapper. --- */
.chancellor-bio {
  text-align: center;
  margin-bottom: 2rem;
}

.chancellor-bio__contact {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.chancellor-source {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: right;
  margin-top: 1rem;
}

/* ==========================================================================
   20. International Applicants Page
   ========================================================================== */

/* International Applicants page: "Plan Your Stay" / "Tuition & Fees" /
   "Living in Sylhet" group headings - a distinct tier above the page-scoped
   20px semi-bold .ia-item-heading (used for Accommodation/Food/Transport
   Cost). font-family/weight set explicitly rather than relying on the
   h1-h4 base rule, so this stays correct even if the base rule changes. */
.ia-subheading {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
}

/* "Explore Our Programs" intro paragraph: exactly 100px of space before the
   Featured Programs image/card below it. Zeroes out .text-section__text's
   own margin-bottom so it can't stack on top of the padding - this is the
   only paragraph in its block, so it needs no inter-paragraph spacing. */
.ia-explore-intro {
  padding-bottom: 100px;
  margin-bottom: 0;
}

/* The intro text above and the Featured Programs card below both sit in one
   <section>, but each lives in its own .section-inner, whose 80px top/bottom
   padding would otherwise stack on both sides of the gap on top of
   .ia-explore-intro's 100px, reading as two separated blocks instead of one
   cohesive section. */
.ia-programs-text {
  padding-bottom: 0;
}

/* .split-section__grid's sitewide align-items: center would vertically
   center this shorter photo against the taller text column beside it,
   pushing its top well past the intended 100px gap. Top-align just this
   instance so the image starts exactly 100px below the intro paragraph. */
.ia-programs-grid {
  padding-top: 0;
  align-items: start;
}

/* Section 1's body copy must stay left-aligned per Figma while keeping
   .text-section__inner--wide's 1100px column - .text-section--left (the
   sitewide left-align modifier) also carries its own 1240px max-width via
   var(--max-width), which would silently widen this column, so this
   overrides just the alignment instead of swapping in that class. The
   .section-heading--center wrapper around the main heading still wins
   there since it sets text-align on itself directly. */
.ia-content-left {
  text-align: left;
}

/* ==========================================================================
   21. Contact Page
   ========================================================================== */

/* Intro text block above the 4 info cards: measured gap from the end of the
   second paragraph to the top of the card row was 145.6px (17.6px
   .text-section__text margin-bottom + 80px .section-inner padding-bottom +
   48px shared .adm-intro-grid margin-top, same kind of stacking as
   international-applicants.html). Zero the first two here and set the
   card row's margin-top scoped to this page only (#contact-info-cards),
   so the shared .adm-intro-grid used elsewhere (e.g. admission.html) isn't
   affected, landing the total at exactly half: 72.8px. */
.cp-intro {
  padding-bottom: 0;
}

.cp-intro-last {
  margin-bottom: 0;
}

#contact-info-cards .adm-intro-grid {
  margin-top: 72.8px;
}

/* --- Section heading with a short gold underline accent (Send Us a Message / Find Us Here) --- */
.cp-heading {
  position: relative;
  padding-bottom: 0.9rem;
  margin-bottom: 1.75rem;
}

.cp-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--color-gold);
}

/* --- Send Us a Message / Find Us Here two-column split --- */
.cp-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .cp-split-grid {
    grid-template-columns: 1fr;
  }
}

.cp-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Wrapper script.js fills from Site Settings' contactFormFields -
   display: contents keeps its fields direct flex items of .cp-form, so
   the 1.25rem gap between them is unchanged. */
#contactFieldsContainer {
  display: contents;
}

.cp-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cp-field__label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-navy);
}

.cp-field__input,
.cp-field__textarea {
  width: 100%;
  border: 1px solid #e2e5ea;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  padding: 0.85rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cp-field__input:focus,
.cp-field__textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

.cp-field__textarea {
  resize: vertical;
  min-height: 130px;
}

.cp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 560px) {
  .cp-field-row {
    grid-template-columns: 1fr;
  }
}

.cp-form__submit {
  align-self: flex-start;
}

.cp-form__status {
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* --- Find Us Here map card (reuses the homepage's .location-map__* elements
   inside a rounded, shadowed card instead of the homepage's full-bleed section) --- */
.cp-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Compact, top-right info card for the Contact page's map only — the homepage's
   Location Map section keeps its original larger, bottom-left card. */
.cp-map .location-map__card {
  top: 0.75rem;
  bottom: auto;
  left: auto;
  right: 0.75rem;
  padding: 0.75rem 0.9rem;
  max-width: 200px;
  box-shadow: 0 8px 20px rgba(12, 35, 80, 0.18);
}

.cp-map .location-map__name {
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.cp-map .location-map__detail {
  font-size: 0.7rem;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .cp-map .location-map__card {
    right: 0.75rem;
    left: auto;
    max-width: 180px;
  }
}

/* ==========================================================================
   22. Leadership Message Pages (shared "cm-" template)
   Standing template for every homepage-linked detail page in this family
   (Chancellor's Message, Chairman's Message, and future pages like VC's
   Message) — compact hero, sidebar quick-links card, capped photo/bio
   column, quote banner. Reused verbatim across pages; only content differs.
   ========================================================================== */

/* --- Sidebar + photo/bio two-column layout --- */
.cm-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 860px) {
  .cm-layout {
    grid-template-columns: 1fr;
  }
}

/* Cap the photo/bio column at ~2.8x the sidebar's 300px width (reference
   design measurement) instead of letting the 1fr track stretch it edge to
   edge. justify-self keeps it pinned left so the leftover track space reads
   as genuine whitespace rather than being filled. Below 860px the layout
   drops to a single 1fr column (see above), where this cap has no effect. */
.cm-content {
  max-width: 840px;
  justify-self: start;
}

/* Sitewide convention: a heading paired directly with its own body
   paragraph (not a standalone section title) is sized at paragraph
   text size (16px) + 8px, not the large sitewide heading size. First
   used for the faculty pages' in-body headings ("Academic Programs",
   "Our Commitment") inside .cm-content, and reused as-is anywhere
   else the same pairing occurs (e.g. the Code of Conduct page's
   policy sub-headings, combined with .text-section__subheading for
   its margin rhythm). Scoped to this modifier class rather than
   changing .section-heading__title itself, since that class is
   shared with unrelated standalone titles elsewhere (hero headings,
   centered section titles like "Vision, Mission & Core Value"). */
.cm-content__heading {
  font-size: 24px;
}

/* Page-specific spacing tweaks for pages/admission.html only.
   Padding (not margin) so the added space stacks on top of the existing
   margin-collapsed gap instead of being swallowed by it. */
.admission-heading--programs {
  padding-bottom: 10px;
}

.admission-heading--fee-waiver {
  padding-top: 5px;
  padding-bottom: 10px;
}

.admission-heading--requirements {
  padding-top: 5px;
  padding-bottom: 5px;
}

.admission-heading--process {
  padding-top: 5px;
  padding-bottom: 5px;
}

.admission-heading--tuition-fees {
  padding-top: 5px;
  padding-bottom: 5px;
}

.admission-heading--contact {
  padding-top: 5px;
  padding-bottom: 10px;
}

/* Page-specific document preview image for pages/instruction.html only. */
.instruction-doc-image {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin: 0.5rem 0 1.5rem;
}

/* Page-specific heading spacing tweaks for pages/instruction.html only. */
.instruction-heading--process {
  padding-top: 5px;
  padding-bottom: 5px;
}

.instruction-heading--contact {
  padding-top: 5px;
  padding-bottom: 10px;
}

/* Page-specific heading spacing tweaks for pages/undergraduate-admission.html only. */
.ug-admission-heading--fee-waiver {
  padding-top: 5px;
  padding-bottom: 10px;
}

.ug-admission-heading--requirements {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ug-admission-heading--process {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ug-admission-heading--tuition-fees {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ug-admission-heading--contact {
  padding-top: 5px;
  padding-bottom: 10px;
}

/* Page-specific heading spacing tweaks for pages/postgraduate-admission.html only. */
.pg-admission-heading--fee-waiver {
  padding-top: 5px;
  padding-bottom: 10px;
}

.pg-admission-heading--requirements {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pg-admission-heading--process {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pg-admission-heading--tuition-fees {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pg-admission-heading--contact {
  padding-top: 5px;
  padding-bottom: 10px;
}

/* Downloadable forms table for pages/form.html only. */
.form-table {
  padding-top: 5px;
}

.form-table__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #bebebe;
  margin-bottom: 1.1rem;
}

.form-table__table th,
.form-table__table td {
  border: 1px solid #bebebe;
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: middle;
}

.form-table__table thead th {
  background-color: var(--color-navy);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
}

.form-table__table th:first-child,
.form-table__table td:first-child {
  text-align: center;
  width: 90px;
}

.form-table__download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

.form-table__download:hover {
  color: var(--color-gold);
}

.form-table__download svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Page-specific heading spacing tweaks for pages/fees-payments.html only. */
.fees-heading--basic-fee-structure {
  padding-top: 5px;
  padding-bottom: 10px;
}

.fees-heading--fee-waiver {
  padding-top: 5px;
  padding-bottom: 10px;
}

.fees-heading--payment-options {
  padding-top: 5px;
  padding-bottom: 5px;
}

.fees-heading--important-notes {
  padding-top: 5px;
  padding-bottom: 5px;
}

.fees-heading--process {
  padding-top: 5px;
  padding-bottom: 5px;
}

.fees-heading--contact {
  padding-top: 5px;
  padding-bottom: 10px;
}

/* Fee-structure table images for pages/fees-payments.html only; stacked
   with a bit less bottom margin than .instruction-doc-image's default
   so the second image doesn't read as a separate, unrelated block. */
.fees-doc-image {
  margin-bottom: 0.75rem;
}

/* --- "University Inside" quick-links card --- */
.cm-sidebar {
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
}

.cm-sidebar__heading {
  position: relative;
  font-size: 1.15rem;
  padding-bottom: 18.6px;
  margin-bottom: 1.5rem;
}

/* Two-part underline, fully content-driven (no widths hardcoded to the
   current wording) so it keeps working if this heading's text is ever
   edited (e.g. from a future admin panel):
   - The bold segment is a border-bottom on the first word's own <span> —
     borders on inline elements always hug the exact rendered width of
     their content, so it automatically matches whatever the first word is.
   - The thin segment is a full-width ::after on the heading. The heading
     is a block-level child of .cm-sidebar with no width of its own, so it
     already spans exactly the sidebar's inner (padded) content width — the
     same right boundary as the .cm-sidebar__link rows below it. width:100%
     matches that boundary; it intentionally does NOT add extra width
     beyond it (that would overshoot past the link rows to the sidebar
     box's outer edge). Both segments sit at the same "bottom: 0" of the
     heading box as the span's border, so they read as one continuous line
     that tapers in thickness rather than two disconnected bars. */
.cm-sidebar__heading-word1 {
  padding-bottom: 0.85rem;
  border-bottom: 4px solid var(--color-gold);
}

.cm-sidebar__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
}

.cm-sidebar__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cm-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(12, 35, 80, 0.14);
  background-color: var(--color-white);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cm-sidebar__link-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-gold);
  transition: transform 0.2s ease;
}

.cm-sidebar__link:hover {
  background-color: rgba(201, 162, 39, 0.1);
  border-color: var(--color-gold);
  transform: translateX(3px);
}

.cm-sidebar__link:hover .cm-sidebar__link-arrow {
  transform: translate(2px, -2px);
}

/* --- Chancellor photo (reuses .img-ph / .split-section__image, just needs
   spacing since it stacks above the bio text instead of sitting beside it,
   plus a flatter 3:2 aspect ratio instead of .split-section__image's default
   4:3, and a smaller radius than that class's --radius-lg — same source-order
   specificity as that shared class, so these win).
   .img-ph img already sets object-fit: cover, so the photo fills the shorter
   frame without distortion. --- */
.cm-photo {
  aspect-ratio: 840 / 435;
  border-radius: 10px;
  margin-bottom: 3rem;
}

/* About the University page: the embedded map (reusing Contact page's
   .cp-map treatment) sits directly under the social icons with no heading
   above it to supply spacing, so give it its own top margin here. */
.cm-content__map {
  margin-top: 2rem;
}

/* --- Institutes & Centers Courses page: BISD/CRTM info cards below the
   body text. No existing card component matches this shape (centered
   title, bold-lead-in body copy, arrow link) so this is a small
   page-specific pair, built from shared tokens (--shadow-card,
   --color-gold) to stay visually consistent with the rest of the site. */
.ic-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 1rem;
  margin-bottom: 3rem;
}

@media (max-width: 720px) {
  .ic-card-grid {
    grid-template-columns: 1fr;
  }
}

.ic-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 2.25rem 2rem;
  text-align: center;
}

/* Matches the sitewide .cm-content__heading convention (a heading paired
   directly with its own body copy, not a standalone section title) rather
   than the Figma spec's 44px, which read oversized next to the card body
   text. */
.ic-card__title {
  font-size: 24px;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.ic-card__text {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* margin-top: auto pins this to the card's bottom edge regardless of how
   long the body text above it runs, so both cards' links line up even
   when .ic-card-grid's grid stretch already equalizes card height. */
.ic-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: auto;
  font-weight: 500;
  color: rgba(34, 34, 34, 0.77);
}

.ic-card__link-arrow {
  width: 18px;
  height: 18px;
  color: var(--color-gold);
  transition: transform 0.2s ease;
}

.ic-card__link:hover .ic-card__link-arrow {
  transform: translate(2px, -2px);
}

/* --- Institutes & Centers Courses page: 8-item course image gallery.
   Each card's title/category text is baked into its image asset, so the
   card itself only frames the image and carries a "Read More" link. --- */
.course-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 900px) {
  .course-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .course-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.course-gallery-card {
  background-color: rgba(232, 232, 232, 0.3);
  border-radius: var(--radius-md);
  padding: 0.9rem;
}

.course-gallery-card__frame {
  display: block;
  border: 1px solid #d7d7d7;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.course-gallery-card__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.course-gallery-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-left: 0.4rem;
  color: #407CFF;
  font-weight: 500;
}

.course-gallery-card__link-arrow {
  width: 16px;
  height: 16px;
  color: #407CFF;
  transition: transform 0.2s ease;
}

.course-gallery-card__link:hover .course-gallery-card__link-arrow {
  transform: translate(2px, -2px);
}

/* --- Why Choice Us page: intro text + student photo, and the 4 stacked
   feature rows (Modern Campus / Expert Faculty / Research Facility /
   Career Support) below it, all inside .cm-content --- */
.advantage-intro {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3rem;
}

@media (max-width: 860px) {
  .advantage-intro {
    grid-template-columns: 1fr;
  }
}

.advantage-intro__text {
  margin-bottom: 0;
}

/* Approximates the Figma design's soft backlight glow behind the student
   photo with a blurred radial gradient sitting behind the frame (z-index
   -1), rather than a real blur/lighting effect. */
.advantage-intro__photo {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-self: start;
  /* Pulls the photo up to align its top with the "Why Choose RTM-AKTU?"
     heading above (measured ~93px at desktop widths - the heading's own
     margin-bottom plus title line box), since the heading lives outside
     this grid and CSS alone can't read its rendered height. */
  margin-top: -93px;
}

.advantage-intro__photo::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle, rgba(255, 106, 37, 0.35), rgba(64, 124, 255, 0.22) 55%, transparent 75%);
  filter: blur(48px);
  z-index: -1;
}

/* Photo is now a transparent-background cutout (body + its own drop
   shadow) instead of a boxy JPG, so the old card treatment (bounding
   background, rounded mask, shadow) is gone. Sized past its grid
   column and right-anchored via the parent's flex justify-end, so it
   can render bigger than the old JPG without disturbing the text
   column's width. */
.advantage-intro__photo-frame {
  width: 113%;
  flex-shrink: 0;
  aspect-ratio: 583.2146 / 965;
  background-color: transparent;
}

.advantage-feature {
  margin-bottom: 2.5rem;
}

.advantage-feature:last-child {
  margin-bottom: 0;
}

.advantage-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #17629D;
  font-weight: 600;
  font-size: 0.95rem;
}

.advantage-feature__link-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.advantage-feature__link:hover {
  color: var(--color-navy);
}

.advantage-feature__link:hover .advantage-feature__link-arrow {
  transform: translate(2px, -2px);
}

/* --- University News page: numbered news list. Item 01 is the dark
   "featured" row (--featured modifier); 02-04 are the light gray
   bordered rows. Each row reuses .date-meta/.date-meta__item/
   .date-meta__icon for its date+weekday text (built for the homepage's
   News & Notice section) and .img-ph for its thumbnail's broken-image
   fallback (the sitewide convention used throughout the site). --- */
.uni-news-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.uni-news-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--color-bg-light);
  border: 1px solid #ebebeb;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Always-dark treatment: used explicitly (not as any row's default state)
   for the single-item summary bar on the News Details page, matching the
   Figma spec's static "current item" display. Listing rows never carry
   this class - see .uni-news-item:hover below for their interactive
   feedback instead. */
.uni-news-item--dark {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

.uni-news-item__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: rgba(34, 34, 34, 0.6);
  padding-right: 1.5rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.uni-news-item--dark .uni-news-item__number {
  color: var(--color-white);
  border-right-color: rgba(255, 255, 255, 0.2);
}

.uni-news-item__headline {
  color: var(--color-navy);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.uni-news-item--dark .uni-news-item__headline {
  color: var(--color-white);
}

.uni-news-item__thumb {
  width: 130px;
  aspect-ratio: 179 / 143;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.date-meta--on-dark {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 760px) {
  .uni-news-item {
    grid-template-columns: auto 1fr;
  }

  .uni-news-item__thumb {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* Hover for these full-width rows: a soft gold tint (not a solid fill -
   that read as too bold/jarring against the light resting state) so every
   row still gets visible feedback without turning into a bold color block.
   Text/icons switch to navy, which stays comfortably readable against
   this lighter background too. Scoped to `a.uni-news-item` - only the
   listing rows are real links; the News Details page's static summary bar
   (.uni-news-item--dark, not an <a>) never matches this. */
a.uni-news-item:hover {
  background-color: rgba(201, 162, 39, 0.12);
  border-color: rgba(201, 162, 39, 0.5);
}

a.uni-news-item:hover .uni-news-item__number {
  color: var(--color-navy);
  border-right-color: rgba(12, 35, 80, 0.2);
}

a.uni-news-item:hover .uni-news-item__headline {
  color: var(--color-navy);
}

a.uni-news-item:hover .date-meta,
a.uni-news-item:hover .date-meta--on-dark {
  color: var(--color-navy);
}

a.uni-news-item:hover .date-meta__icon {
  color: var(--color-navy);
}

/* News Details page (pages/news-details.html): summary bar reuses
   .uni-news-item--dark but without a third (thumbnail) grid column - the
   photo sits separately, beside the body text below. */
.news-detail-summary {
  grid-template-columns: auto 1fr;
}

/* Real text-wrap (not a fixed two-column split): .news-detail-photo
   floats right and .news-detail-text's paragraphs flow around it as
   plain block content, narrowing beside the image and returning to full
   width once they clear its bottom - standard float-wrap, so a short
   first paragraph doesn't leave an empty gap under the photo the way a
   flex column split would. The photo must come before the text in the
   markup for this to work: floats only affect content that follows them. */
.news-detail-body {
  margin-top: 1.75rem;
}

.news-detail-body::after {
  content: "";
  display: table;
  clear: both;
}

.news-detail-photo {
  float: right;
  width: 380px;
  max-width: 100%;
  aspect-ratio: 476 / 328;
  border-radius: var(--radius-md);
  margin-left: 2.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 760px) {
  .news-detail-photo {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

/* Photos placed inside a news body with the admin panel's editor
   (sanitizeNewsHtml() in pages/news/news-data.js adds these classes).
   Same float-wrap technique as .news-detail-photo / .library-photo--*:
   the photo sits in the text flow before the paragraphs it should sit
   beside, floats out, and .news-detail-body::after clears it. No fixed
   aspect-ratio (unlike the page-specific photos) since editors upload
   photos of any shape - height follows the image. `clear` on the same
   side stops a photo near the top from stacking beside the right-floated
   .news-detail-photo (or an earlier inline photo) and squeezing the text
   into a sliver between them - it drops below instead. */
.news-inline-img {
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
}

.news-inline-img--right {
  float: right;
  clear: right;
  width: 38%;
  margin-left: 2rem;
}

.news-inline-img--left {
  float: left;
  clear: left;
  width: 38%;
  margin-right: 2rem;
}

.news-inline-img--center {
  clear: both;
  width: 100%;
}

/* Smaller float variant, useful beside a data table or dense text where the
   38% default would crowd the columns. */
.news-inline-img--right-sm {
  float: right;
  clear: right;
  width: 22%;
  margin-left: 1.25rem;
}

.news-inline-img--left-sm {
  float: left;
  clear: left;
  width: 22%;
  margin-right: 1.25rem;
}

/* "Wrap around the shape": same float as --right / --left, but the text follows the
   transparent outline of a PNG cut-out (shape-outside is filled in by script.js
   initShapeWrap with the picture's own URL), keeping a margin all around the body. */
.news-inline-img--right-shape,
.news-inline-img--left-shape {
  width: 38%;
  shape-margin: 18px;
  shape-image-threshold: 0.3;
}

.news-inline-img--right-shape {
  float: right;
  clear: right;
  margin-left: 1rem;
}

.news-inline-img--left-shape {
  float: left;
  clear: left;
  margin-right: 1rem;
}

@media (max-width: 760px) {
  .news-inline-img--right,
  .news-inline-img--left,
  .news-inline-img--right-sm,
  .news-inline-img--left-sm,
  .news-inline-img--right-shape,
  .news-inline-img--left-shape {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Notice & Updates page (pages/notice-updates.html): each notice is a
   bordered white card - a circular numbered badge beside its text and
   .date-meta row. The badge is solid navy/white rather than the flat
   grey placeholder in the Figma mockup, to match the site's navy/gold
   palette used for numbered/dark treatments elsewhere (e.g.
   .uni-news-item--dark). */
.notice-card-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.notice-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--color-white);
  border: 1px solid #d4d4d4;
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Listing rows (pages/notice-updates.html) are links to their Notice
   Details page; the summary bar reused on pages/notice-details.html
   itself (.notice-card--static) isn't, so it's excluded from this
   selector by only matching the <a> tag. */
a.notice-card:hover {
  border-color: var(--color-navy);
  box-shadow: var(--shadow-card);
}

.notice-card__badge {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notice-card__text {
  color: var(--color-navy);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

@media (max-width: 560px) {
  .notice-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Admissions page (pages/admissions.html) "Notices" filter tab: one
   .notice-card at a time between the shared .adm-news-card__nav arrows,
   swapped in for #filterCard by initFilterCarousel() in admissions.js.
   Declared after .notice-card so __inner's overrides win on source
   order. The [hidden] rules are needed because both cards set their own
   display value, which would otherwise override the hidden attribute. */
.adm-news-card[hidden],
.adm-notice-card[hidden],
#filterCardEventsFooter[hidden],
.adm-notice-card__footer[hidden] {
  display: none;
}

/* margin-bottom matches #filterCard's (.adm-news-card), so switching tabs
   doesn't shift the section's bottom edge now that the "View All Notice"
   row sits above the card instead of below it. */
.adm-notice-card {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}

/* 15px more badge-to-text gap than the shared .notice-card (1.5rem) -
   Admissions Notices card only. */
.adm-notice-card__inner {
  flex: 1;
  min-width: 0;
  gap: calc(1.5rem + 15px);
}

.adm-notice-card__details-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

a.adm-notice-card__inner:hover .adm-notice-card__details-link {
  color: var(--color-red);
}

/* "View All Notice" row: right-aligned above the card, styled as a plain
   .adm-news-header__link like "View All News". */
.adm-notice-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

/* Notice Details page (pages/notice-details.html), News Details page
   (pages/news-details.html), and Event Details page
   (pages/event-details.html): the "View All Notices"/"View Latest News &
   Updates"/"View All Events" link sits in its own right-aligned row
   directly above the detail card, with a small 5px gap - same
   color/weight/hover convention as .adm-news-header__link. */
.notice-details-link-row,
.news-details-link-row,
.event-details-link-row {
  text-align: right;
  /* Pull up 10px into .section-heading's 3rem bottom margin (title-to-link
     gap), and push down 5px more than before (link-to-card gap: 5px -> 10px). */
  margin-top: -10px;
  margin-bottom: 10px;
}

.notice-details-heading__link,
.news-details-link-row__link,
.event-details-link-row__link {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.notice-details-heading__link:hover,
.news-details-link-row__link:hover,
.event-details-link-row__link:hover {
  color: var(--color-red);
}

.notice-detail-intro {
  margin-top: 1.75rem;
}

.notice-detail-document {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 794 / 1122;
  margin: 1.5rem auto 0;
  border-radius: var(--radius-md);
}

/* About RTM-AKTU page intro heading: the intro block now sits directly in
   plain .section-inner (matching the 9 feature rows' container below it,
   so their left/right edges line up), rather than the narrower centered
   .text-section__inner. That container itself is left-aligned by default,
   so this centers just the heading text explicitly. It also skips the
   margin-bottom that the "Welcome International Students" heading gets
   from its .text-section__inner .section-heading__title rule, leaving the
   paragraph text touching the heading (measured at 0px) - so it's added
   back here directly, matching that section's measured 24px (1.5rem) gap. */
.rtm-intro-heading {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Halves the visible gap between the intro paragraph and the Computer
   Laboratory row below it (measured at 74.39px, sitewide .section-inner's
   default 5rem/80px bottom padding being the biggest contributor) by
   trimming just this section's own bottom padding to 42.8px - a 37.2px
   cut, landing the total gap at ~37.2px (50% of the original). Scoped to
   this section only, so the 22.2px rhythm between the 9 feature rows
   below is untouched. */
.rtm-intro-section .section-inner {
  padding-bottom: 42.8px;
}

/* About RTM-AKTU page: the 9 alternating feature rows are full-width
   (no sidebar on this page), so .section-inner alone (sitewide max-width)
   is enough - no cm-layout/column-offset trick needed here. They should
   read as one continuous column rather than separate cards, so no
   background-color is set and vertical padding is tightened from the
   sitewide 5rem down to 22.2px top and bottom (two adjacent sections sum
   to a 44.4px gap, matching the rhythm used elsewhere on the old
   About the University page for the same continuous-flow effect). */
.rtm-feature-section .section-inner {
  padding-top: 22.2px;
  padding-bottom: 22.2px;
}

/* Uniform heading size across all 9 feature rows: half of the base
   .section-heading__title's desktop-width computed value (36px, from its
   sitewide clamp(1.7rem, 3vw, 2.25rem)) - fixed rather than clamped, since
   these headings read oversized next to the shrunk ~360px photos. */
.rtm-feature-section .section-heading__title {
  font-size: 18px;
}

/* Computer Laboratory row only: .split-section__grid's sitewide
   align-items:center centers this row's text block against its taller
   360x270px image, leaving a 37.78px top-offset between them (measured
   after the font-size shrink above). Because align-items:center re-splits
   any margin-top change evenly above/below, a plain -22.7px nudge only
   moves the visible gap by half that (measured); doubling it to -45.4px
   is what actually lands the gap at ~15.1px (40% of original - a 60%
   reduction), closer to top-aligned without fully flattening it. Scoped
   to this row only; the other 8 rows keep the sitewide centered
   alignment untouched. */
.rtm-cl-content {
  margin-top: -45.4px;
}

/* Student Development is the last of the 9 feature rows, so its bottom
   padding also sets the gap before the quote banner that follows. Adds
   80px on top of the shared 22.2px from .rtm-feature-section .section-inner
   above, pushing the quote banner further down - scoped to this row only. */
.rtm-feature-section--last .section-inner {
  padding-bottom: calc(22.2px + 80px);
}

/* Placeholder sizing pending the reference screenshot: caps each feature
   photo well below the .split-section__image default (which stretches to
   fill its whole grid column) and centers it within that column so left-
   and right-side rows still line up symmetrically. Revisit once the
   actual reference image is available to match exact proportions. */
.rtm-feature-image {
  max-width: 360px;
  margin: 0 auto;
}

/* --- Bold centered italic pull-quote, directly under the photo on
   letter-style message pages (e.g. Chairman's Message) --- */
.cm-pull-quote {
  font-weight: 700;
  font-style: italic;
  text-align: center;
  color: var(--color-navy);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

/* --- Closing signature block on letter-style message pages: bold name,
   then plain title/org lines --- */
.cm-signature__name {
  font-weight: 700;
  color: var(--color-navy);
}

/* ==========================================================================
   23. Faculty Detail Pages (shared "cm-" template)
   ========================================================================== */

/* In-column section headings (e.g. "Academic Programs", "Our Commitment")
   sitting between paragraphs inside .cm-content - the base
   .section-heading__title assumes it opens a full section, so drop its
   top margin here and add spacing on both sides instead. */
.cm-content .section-heading__title {
  margin-top: 2rem;
  margin-bottom: 1.1rem;
}

/* Academic System page: its heading opens the .cm-content column (the
   other cm- pages open with a photo instead, sitting flush with the
   .cm-sidebar box's top edge), so the in-column top margin above doesn't
   apply here - it would push the heading below where the sidebar starts. */
.cm-content > .section-heading:first-child .section-heading__title {
  margin-top: 0;
}

/* --- Department card: reusable across faculty pages (CSE/EEE here, other
   departments on future faculty pages) --- */
.dept-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* 20px more than the base 2rem (32px) - the requested extra gap before
     the next department section. */
  margin-bottom: calc(2rem + 20px);
}

.dept-card__header {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  padding: 1rem 1.5rem;
}

/* Holds one program card per department today, but is a real 2-column
   grid so a second program can sit alongside the first later without
   restructuring. A lone child is placed in column 1 by default grid
   auto-placement (it is never auto-spanned across both tracks); adding
   justify-items: start on top makes sure that child also doesn't stretch
   to fill its own column when it has no explicit width - it renders at
   its natural card width, left-aligned, with column 2 left empty.
   Top padding is 15px more than the other three sides - the requested
   extra gap between the header bar above and this grid. */
.dept-programs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  justify-items: start;
  padding: 1.5rem;
  padding-top: calc(1.5rem + 15px);
}

@media (max-width: 640px) {
  .dept-programs-grid {
    grid-template-columns: 1fr;
  }
}

/* Bordered box around the whole card (image + text) - light gray border
   matching the site's existing card-border color, image sits flush
   against it (no padding) and .dept-program-card__body insets the text
   from the same border instead. */
.dept-program-card {
  width: 100%;
  border: 1px solid #eef0f3;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dept-program-card__image {
  aspect-ratio: 16 / 9;
  margin-bottom: 0;
}

.dept-program-card__body {
  padding: 1.25rem 1.5rem;
}

.dept-program-card__title {
  font-size: 1.1rem;
  /* 15px more than the base 0.75rem (12px) - mirrors the header bar's
     +15px gap to the content below it, one level down (title -> desc). */
  margin-bottom: calc(0.75rem + 15px);
}

.dept-program-card__title a {
  color: var(--color-navy);
  text-decoration: none;
}

.dept-program-card__title a:hover {
  text-decoration: underline;
}

.dept-program-card__desc {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.dept-program-card__link {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

.dept-program-card__link:hover {
  color: var(--color-gold);
}

/* Whole-card link variant (homepage "Our Faculties" card): reset anchor
   defaults so the <a> picks up the exact same box styling/hover lift as
   .faculty-card, same pattern as .leader-card--link. */
.faculty-card--link {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   24. Featured Programs Page
   ========================================================================== */

/* Department heading above each .program-card-grid. Reuses the same
   thick+thin two-segment gold underline as "Univet Inside"
   (.cm-sidebar__heading) but with different proportions: there the thick
   segment covers only the first word; here it covers the FULL heading text
   via a wrapping inline span (borders on inline elements hug their content's
   exact rendered width, so this keeps working if the wording changes), and
   the thin segment - a content-width ::after on the heading itself - picks
   up right after it and continues to the end of the .cm-content column. */
.fp-dept-heading {
  position: relative;
  font-size: 1.35rem;
  padding-bottom: 1.05rem;
  margin: 3rem 0 1.75rem;
}

.fp-dept-heading:first-of-type {
  margin-top: 2rem;
}

.fp-dept-heading__text {
  padding-bottom: 0.85rem;
  border-bottom: 4px solid var(--color-gold);
}

.fp-dept-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
}

/* Same left-aligned wrap principle as .dept-programs-grid (an odd card out
   sits in column 1 at its own natural width, never centered or stretched)
   but sized for the smaller .program-card component instead. */
.program-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  justify-items: start;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .program-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   25. Deans & Heads Page
   ========================================================================== */

/* Bordered data table: new component, no existing page has a table like
   this. Real <table> markup since the content is genuinely tabular
   (Sl. No / Name & Info / Persona), with a department banner row
   (colspan 3) breaking up the Heads table between departments. */
.dh-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 3rem;
  table-layout: fixed;
}

.dh-table th,
.dh-table td {
  border: 1px solid #bebebe;
  padding: 1rem 1.5rem;
  text-align: left;
  vertical-align: middle;
}

.dh-table__head th {
  background-color: rgba(34, 34, 34, 0.4);
  color: var(--color-navy);
  font-weight: 500;
  font-size: 1.1rem;
}

.dh-table__num,
.dh-table__head th:first-child {
  text-align: center;
}

.dh-table__dept td {
  background-color: rgba(34, 34, 34, 0.2);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 24px;
}

.dh-table__name {
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.dh-table__info p {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
}

.dh-table__info p:last-child {
  margin-bottom: 0;
}

.dh-table__photo {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   26. Faculty Members Page
   ========================================================================== */

/* The shared .section-heading's 3rem bottom margin left a visibly bigger
   gap above .fmp-search (48px, collapsed against .fmp-search's own 24px
   top margin) than the gap below it (32px, collapsed between
   .fmp-search's 32px bottom margin and .fmp-grid's 16px top margin).
   Scoped here rather than changing .section-heading itself, which other
   pages also rely on. Trims the top gap down to match. */
.fmp-heading {
  margin-bottom: 2rem;
}

/* New card grid: not a reuse of .fm-grid/.fm-card (the Academics page
   carousel and leadership-management.html share those, with a different
   card shape - gold-ringed 200px photo, no border box). This page's design
   calls for a bordered box with a plain 183px circular photo, so it gets
   its own component instead of bending the shared one.
   3 equal columns, matching the design's "3 per row, last row 1" grid -
   card width follows from the column track rather than a fixed px, since
   the site's content column (~840px) can't fit three literal 315px cards
   side by side the way the (much wider) Figma canvas does. */
.fmp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .fmp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .fmp-grid {
    grid-template-columns: 1fr;
  }
}

.fmp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Lightened from the Figma spec's #8e8e8e, which read as a hard outline
     at this size - reuses the same faint-border tint as .cm-sidebar__link
     so it sits as a boundary hint rather than a stroke. */
  border: 1px solid rgba(12, 35, 80, 0.14);
  border-radius: var(--radius-sm);
  /* Trimmed from the Figma spec's 1.25rem side padding - at this page's
     narrower (site max-width-constrained) card width, that padding made
     long names (e.g. "Fahmid Ahmed Chowdhury") wrap awkwardly. */
  padding: 2rem 0.75rem;
}

.fmp-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.fmp-card__photo {
  width: 183px;
  height: 183px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.5rem;
}

.fmp-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.4rem;
  transition: color 0.2s ease;
}

.fmp-card__link:hover .fmp-card__name {
  color: var(--color-gold);
}

.fmp-card__role {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.fmp-card__dept {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Search/filter bar: same input padding/font/focus-glow as
   .contact-form__input, but with a visible border since this sits
   directly on the page's white background instead of a colored form
   panel - reuses .fmp-card's same faint sidebar-link border tint. */
.fmp-search {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.fmp-search__input,
.fmp-search__select {
  flex: 1 1 200px;
  min-width: 0;
  border: 1px solid rgba(12, 35, 80, 0.14);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  padding: 0.85rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.fmp-search__input:focus,
.fmp-search__select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.45);
}

.fmp-search__input::placeholder {
  color: var(--color-text);
  opacity: 0.5;
}

.fmp-search__submit {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .fmp-search__input,
  .fmp-search__select,
  .fmp-search__submit {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   27. Faculty Profile Template (pages/faculty/*.html)
   ========================================================================== */

/* First page built on this template is Adiba Sabiha's; the same markup/CSS
   is meant to be copied for the other 24 faculty members (and any future
   ones) once an admin panel exists - keep additions here generic to the
   template, not specific to one person. */

/* No sidebar on this template (see .fpr-page below) - the page uses the
   full section-inner width instead of the shared .cm-layout grid. */
.fpr-page {
  max-width: 100%;
}

/* #F2F2F9 (same tint as .fpr-tabs__panels below) - chosen after
   comparing it side by side against the site's brand gold
   (--color-gold), which this banner used previously. */
.fpr-banner {
  background-color: #F2F2F9;
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
}

.fpr-banner__title {
  font-size: 25px;
  font-weight: 600;
  color: var(--color-navy);
  text-align: center;
}

.fpr-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Same faint border tint as .fmp-card/.dh-table, not the Figma spec's
   heavy #8e8e8e. */
.fpr-card {
  flex: 0 0 348px;
  max-width: 100%;
  border: 1px solid rgba(12, 35, 80, 0.14);
  border-radius: var(--radius-sm);
  padding: 2rem 1.5rem;
  text-align: center;
}

/* Transparent text color hides the alt text a browser paints inside the
   box while the photo is still loading; the grey fill stands in instead. */
.fpr-card__photo {
  width: 183px;
  height: 183px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  background-color: #e6e6ec;
  color: transparent;
}

.fpr-card__role {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 0.25rem;
}

.fpr-card__dept {
  font-size: 14px;
  margin-bottom: 1.5rem;
}

.fpr-card__heading {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  text-align: left;
  margin-bottom: 1rem;
}

/* Address, mobile number, and email all share this one explicit size
   rather than each inheriting the base body size independently, so they
   can never drift apart from one another. */
.fpr-card__address,
.fpr-card__contact,
.fpr-card__contact a {
  font-size: 13px;
}

.fpr-card__address {
  text-align: left;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.fpr-card__contact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  margin-bottom: 0.75rem;
}

.fpr-card__contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-gold);
}

.fpr-card__contact a {
  color: var(--color-text);
}

.fpr-card__contact a:hover {
  color: var(--color-gold);
}

.fpr-bio {
  flex: 1 1 400px;
  min-width: 0;
}

/* Bio paragraphs saved from the admin panel's editor arrive as bare <p>
   tags; same values as .text-section__text. */
#fprBio p {
  color: var(--color-text-muted);
  text-align: left;
  margin-bottom: 1.1rem;
}

.fpr-bio__heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Tab bar + panels: buttons are generated by profile-tabs.js from a
   per-page data object (see the inline script at the bottom of each
   profile page) - only fields with content render as a tab.
   All tabs stay on one row (nowrap) - each button is an equal flex
   share of the row (min-width: 0 lets it shrink below its label's
   natural width) so a long label wraps its own TEXT onto a second
   line inside the button, rather than the row itself wrapping. */
.fpr-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  background-color: #F2F2F9;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.fpr-tabs__btn {
  flex: 1 1 0;
  min-width: 0;
  background-color: rgba(217, 217, 217, 0.4);
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 1rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text);
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fpr-tabs__btn.is-active {
  background-color: #d9d9d9;
  font-weight: 600;
}

/* Exact Figma tab-content background (#F2F2F9), not the sidebar's
   lighter --color-bg-light tint tried first - that read too flat. */
.fpr-tabs__panels {
  background-color: #F2F2F9;
  border: 1px solid #d9d9d9;
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  padding: 2rem;
}

.fpr-tabs__panel {
  display: none;
}

.fpr-tabs__panel.is-active {
  display: block;
}

.fpr-tabs__panel-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-navy);
  text-align: center;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.fpr-tabs__panel-text {
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Rich-text tab bodies saved from the admin panel's TinyMCE editor arrive
   as bare tags (no site classes), so they're styled here to match the
   classed markup the array-based tabs render: headings copy
   .text-section__subheading + .cm-content__heading, lists copy
   .text-section__list / --ordered. */
.fpr-tabs__panel-text p {
  margin-bottom: 0.9rem;
}

.fpr-tabs__panel-text h2,
.fpr-tabs__panel-text h3,
.fpr-tabs__panel-text h4 {
  font-size: 24px;
  margin: 0.5rem 0 0.9rem;
}

.fpr-tabs__panel-text ul,
.fpr-tabs__panel-text ol {
  margin: 0 0 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fpr-tabs__panel-text ol {
  margin-left: 1.8rem;
}

.fpr-tabs__panel-text ul li {
  list-style: disc;
}

.fpr-tabs__panel-text ol li {
  list-style: decimal;
}

.fpr-tabs__panel-text > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   28. Listing Controls: Search + Rows-Per-Page + Pagination
   ========================================================================== */

/* Shared by every listing page built on the "cm-" template that uses
   pages/listing-controls.js (pages/notice-updates.html,
   pages/university-news.html, pages/current-events.html): a search +
   rows-per-page row above the list, and page-number controls below it.
   Search input styling matches .fmp-search__input (Faculty Members
   directory's own search bar) for a consistent look across the site's
   two client-side search/filter UIs. */
.listing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.listing-controls__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 360px;
}

.listing-controls__search-icon {
  position: absolute;
  top: 50%;
  left: 1.1rem;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.listing-controls__search-input {
  width: 100%;
  border: 1px solid rgba(12, 35, 80, 0.14);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  padding: 0.85rem 1.1rem 0.85rem 2.6rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-controls__search-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.45);
}

.listing-controls__search-input::placeholder {
  color: var(--color-text);
  opacity: 0.5;
}

.listing-controls__page-size {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.listing-controls__page-size-select {
  border: 1px solid rgba(12, 35, 80, 0.14);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-navy);
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-controls__page-size-select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.45);
}

.listing-empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--color-text-muted);
}

/* v1.0.77 (Reja): the Home News / Notice "nothing yet" line sits on the left,
   one sentence only (the View All link is already there). */
.listing-empty--left {
  text-align: left;
}

/* v1.0.79: Live Edit only - the labelled, editable copy of an empty-list
   message (script.js cmsEmptyEditor). Never on the public site. */
.cms-empty-editor {
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--color-gold);
  border-radius: 6px;
  text-align: left;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.cms-empty-editor__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-navy);
}

.cms-empty-editor [data-cms] {
  display: inline-block;
  min-width: 12rem;
  min-height: 1.2em;
}

/* Page: <prev> 1 2 3 ... N <next> - centered below the list. Active
   page uses the brand navy fill (matches .btn-primary's navy text and
   .fmp-search__input's gold focus, so gold stays reserved for focus
   states, not a second "current page" signal). */
.listing-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.listing-pagination__pages {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.listing-pagination__btn,
.listing-pagination__nav {
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: 1px solid rgba(12, 35, 80, 0.14);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.listing-pagination__btn:hover:not(.is-active):not(:disabled),
.listing-pagination__nav:hover:not(:disabled) {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.listing-pagination__btn.is-active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
  cursor: default;
}

.listing-pagination__btn:disabled,
.listing-pagination__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.listing-pagination__ellipsis {
  color: var(--color-text-muted);
  padding: 0 0.25rem;
}

@media (max-width: 560px) {
  .listing-controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* In a column layout the desktop `flex: 1 1 260px` becomes a 260px-tall box
     (the search icon then floats far below the input) - size to content. */
  .listing-controls__search {
    flex: none;
    max-width: none;
  }

  .listing-controls__page-size {
    justify-content: space-between;
  }
}

/* ==========================================================================
   29. University Advertisement Page (pages/university-advertisement.html)
   ========================================================================== */

/* Edited-in-place page - no data file, no ?id= pattern, just this one
   heading/paragraph/date/document. 50px/SemiBold/#222 per the Figma spec,
   layered onto .section-heading__title (Poppins already inherited from
   the sitewide h1-h4 rule) rather than its default 700-weight navy. */
.ua-heading {
  font-size: 50px;
  font-weight: 600;
  color: #222;
}

/* .text-section__text already gives the muted color/bottom-margin;
   --center already gives text-align:center. Width is the Figma spec's own
   1349px - wider than .section-inner ever renders, so in practice this
   paragraph is only ever bounded by that outer container, not this rule. */
.ua-text {
  font-size: 18px;
  max-width: 1349px;
  margin-left: auto;
  margin-right: auto;
}

/* .date-meta is a block-level flex row (fills its container, left-aligned
   by default) everywhere else it's used - switched to inline-flex here so
   this wrapper's text-align:center can actually center it. */
.ua-meta-row {
  text-align: center;
  margin: 1.5rem 0 2.5rem;
}

.ua-meta-row .date-meta {
  display: inline-flex;
}

/* Reuses notice-details.html's .notice-detail-document treatment
   (width/max-width/margin/border-radius) as-is; only the aspect-ratio is
   overridden, since this page's own document is a slightly different
   855x1175 portrait per the Figma spec (vs. that page's 794x1122). */
.ua-document {
  aspect-ratio: 855 / 1175;
}

/* ==========================================================================
   30. Photo Gallery Page (pages/photo-gallery.html)
   ========================================================================== */

/* Same 3/2/1 responsive breakpoints as .fmp-grid (Faculty Members
   directory), the site's other 3-per-row search+grid page. */
.gallery-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .gallery-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gallery-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Extra-wide tiers on top of the 3-column baseline above: the 3-column
   layout is deliberate at normal desktop widths (keeps photos reasonably
   large, paginated rather than dumping everything at once), but on very
   wide monitors that leaves the section's fixed max-width mostly empty.
   Widen .gallery-grid-section's max-width in step with the extra columns
   so card width stays close to the baseline (~380px) instead of shrinking. */
@media (min-width: 1700px) {
  .gallery-grid-section {
    max-width: 1680px;
  }

  .gallery-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 2200px) {
  .gallery-grid-section {
    max-width: 2000px;
  }

  .gallery-card-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Same overflow:hidden + border-radius + box-shadow "photo caps the
   card" treatment as .dept-card, so the cover photo's top corners round
   off automatically with no separate top-only radius needed on it. */
.gallery-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #ebebeb;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.gallery-card__cover {
  aspect-ratio: 4 / 3;
  /* Was always a <div> before; now also used as an <a> (cover-photo
     link) on both gallery pages, and <a> defaults to inline - keep it
     block so the aspect-ratio/width:100% sizing above stays identical. */
  display: block;
}

.gallery-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.gallery-card__heading {
  color: var(--color-navy);
  font-size: 1.05rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
}

.gallery-card__footer .date-meta {
  font-size: inherit;
}

/* Small text link + arrow, same convention as .course-gallery-card__link -
   not a bordered/filled .btn, per the Figma reference for this card. */
.gallery-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: inherit;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.gallery-card__link-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.gallery-card__link:hover .gallery-card__link-arrow {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   Photo Gallery - Album Detail (pages/photo-gallery-details.html)
   ========================================================================== */

.pgd-intro {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  color: var(--color-text);
  line-height: 1.9;
  text-align: center;
}

.pgd-date-row {
  display: flex;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.pgd-viewer {
  max-width: 765px;
  margin: 0 auto 2rem;
  text-align: center;
}

#vgdContent .pgd-viewer {
  max-width: 925px;
}

#vgdContent .pgd-date-row {
  margin-bottom: 3.6rem;
}

.pgd-viewer__photo {
  aspect-ratio: 765 / 450;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.vgd-laptop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3573 / 1892;
}

.vgd-laptop-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.vgd-laptop-frame .pgd-viewer__photo {
  position: absolute;
  left: 12.762%;
  top: 5.919%;
  width: 73.126%;
  height: 77.960%;
  z-index: 1;
  border-radius: 0;
}

.pgd-viewer__caption {
  text-align: center;
  color: var(--color-navy);
  font-weight: 500;
  margin-top: 1.25rem;
}

.pgd-thumb-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 2.5rem;
}

.pgd-thumb-arrow {
  margin: 0;
}

.pgd-thumb-viewport {
  flex: 1;
  overflow: hidden;
}

.pgd-thumb-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.4s ease;
}

.pgd-thumb {
  flex: 0 0 calc(33.333% - 0.85rem);
  aspect-ratio: 310 / 180;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background-color: var(--color-white);
  transition: border-color 0.2s ease;
}

.pgd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pgd-thumb.is-active {
  border-color: var(--color-gold);
}

@media (max-width: 860px) {
  .pgd-thumb {
    flex: 0 0 calc(50% - 0.65rem);
  }
}

@media (max-width: 560px) {
  .pgd-thumb {
    flex: 0 0 100%;
  }
}

/* Translucent grey pill, distinct from .btn/.pill - matches the Figma
   "View All Pictures" control, which is neither a filled/outline .btn
   nor the gold .pill used for section eyebrows elsewhere on the site. */
.pgd-view-all {
  display: inline-flex;
  align-items: center;
  background-color: rgba(105, 105, 105, 0.15);
  border: 1px solid rgba(34, 34, 34, 0.15);
  color: var(--color-text);
  font-weight: 500;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.pgd-view-all:hover {
  background-color: rgba(105, 105, 105, 0.28);
}

/* ==========================================================================
   Campus Reels / Video Gallery (pages/video-gallery.html + video-details.html)
   ------------------------------------------------------------------------
   Mirrors the Photo Gallery architecture above (.gallery-card-grid/
   .gallery-card, .pgd-* viewer/thumb-strip) - only what's specific to
   video playback lives here: the card's corner shape, the play-icon
   overlay, and the detail page's "coming soon" state.
   ========================================================================== */

.vg-subheading {
  text-align: center;
  color: var(--color-text);
  font-weight: 500;
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
}

/* Figma's six cards come in with two slightly different corner radii
   (59.486px / 45px) - normalized to one consistent value here rather
   than reproducing both. Per Figma, this dramatic shape belongs only
   to the cover photo - the card body below (heading/date/link) stays
   a normal near-square panel at .gallery-card's own subtle radius. */
.gallery-card--video .gallery-card__cover {
  border-radius: 50px 50px 0 50px;
}

/* Figma spec: plain black, regular-weight caption - not the bold navy
   heading style shared with Photo Gallery's .gallery-card__heading. */
.gallery-card--video .gallery-card__heading {
  color: #000;
  font-weight: 400;
}

/* Figma's "Explore All Videos" arrow points diagonally (~45deg), unlike
   Photo Gallery's shared straight .gallery-card__link-arrow. Rotate only
   here so the base rule (and Photo Gallery's use of it) stays untouched. */
.gallery-card--video .gallery-card__link-arrow {
  transform: rotate(-45deg);
}

.gallery-card--video .gallery-card__link:hover .gallery-card__link-arrow {
  transform: rotate(-45deg) translate(2px, -2px);
}

/* Grid-card play icon: small, decorative (the whole card already
   links to the detail page, so this isn't its own click target). */
.vg-play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(12, 35, 80, 0.55);
  border: 3px solid var(--color-gold);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.vg-play-icon .icon {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

/* Grid-card variant: smaller and more translucent than the detail
   page's viewer button - just enough to signal "this is a video",
   not a clickable affordance of its own (the whole card already
   links out). */
.vg-play-icon--grid {
  width: 40px;
  height: 40px;
  border-width: 2px;
  background-color: rgba(12, 35, 80, 0.35);
}

.vg-play-icon--grid .icon {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

/* Figma specifies 45px 3-corner rounding for this page's thumbnail
   strip specifically - different from the listing grid's 50px and
   from Photo Gallery's own #pgdThumbTrack .pgd-thumb (untouched, own
   ID keeps this scoped to video-details.html only). */
#vgdThumbTrack .pgd-thumb {
  border-radius: 45px 45px 0 45px;
}

/* Detail-page "now playing" button: bigger and actually clickable,
   same visual language as the homepage's .campus-life__play-btn. */
.vg-play-icon--viewer {
  width: 76px;
  height: 76px;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.vg-play-icon--viewer .icon {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.vg-play-icon--viewer:hover {
  transform: scale(1.08);
  background-color: rgba(12, 35, 80, 0.75);
}

/* No youtubeId yet for this video - button reads as inactive and does
   nothing on click, paired with the .vgd-coming-soon pill below. */
.vg-play-icon--viewer.is-disabled {
  cursor: not-allowed;
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  background-color: rgba(12, 35, 80, 0.35);
}

.vg-play-icon--viewer.is-disabled:hover {
  transform: none;
  background-color: rgba(12, 35, 80, 0.35);
}

/* Thumbnail-strip play icon: smaller still, purely informational. */
.vg-play-icon--thumb {
  width: 34px;
  height: 34px;
  border-width: 2px;
}

.vg-play-icon--thumb .icon {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

/* [hidden] and .vgd-coming-soon are equal specificity (0,1,0) each, and
   author styles beat the UA stylesheet on a tie - so without this,
   toggling the `hidden` attribute from JS would do nothing. */
.vgd-coming-soon[hidden] {
  display: none;
}

.vgd-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem auto 0;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background-color: rgba(105, 105, 105, 0.15);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.vgd-coming-soon .icon {
  width: 16px;
  height: 16px;
}

/* Click-to-load YouTube iframe (or, pre-admin-panel, a local test <video> -
   see testVideoFile in video-gallery-details-data.js) fills the same
   aspect-ratio box the thumbnail/play-button state uses
   (.img-ph.pgd-viewer__photo already supplies position:relative +
   overflow:hidden + the rounded frame). */
.pgd-viewer__photo iframe,
.pgd-viewer__photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pgd-viewer__photo video {
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   24. Academic Calendar Pages (pages/academic-calendar.html,
       pages/academic-calendar-spring.html, and future Summer / All-calendar
       pages) - shared tab-bar component.

       On term pages (Spring now; Summer / All-calendar later), each tab
       links to its own page and whichever page is open renders its own
       tab with .ac-tab--active, sitting on a shared dark baseline
       (.ac-tabbar--has-active) - per Figma, inactive tabs are pale,
       fully-rounded chips that float above that baseline while the active
       tab is a solid, square-bottomed chip whose dark border sits flush
       on it, reading as "attached" to the content below.

       The hub page (academic-calendar.html) is the parent, not a term
       page - per its Figma node (1837:219) it has no active tab and no
       baseline at all, so it omits .ac-tabbar--has-active and its three
       cards are plain independent links with only a hover lift, matching
       the sitewide .adm-card:hover treatment. --- */

.ac-tabbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 760px) {
  .ac-tabbar {
    grid-template-columns: 1fr;
  }
}

.ac-tabbar--has-active {
  border-bottom: 2px solid #161616;
}

@media (max-width: 760px) {
  .ac-tabbar--has-active {
    border-bottom: none;
  }
}

.ac-tab {
  display: block;
  background-color: rgba(212, 212, 212, 0.3);
  border: 1px solid rgba(212, 212, 212, 0.6);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* Stronger than the sitewide .adm-card:hover lift (-6px / var(--shadow-card))
   because .ac-tab starts from a pale, low-contrast translucent fill instead
   of a solid white card on a white page - the subtler shared values read as
   almost invisible here, so the lift, shadow, and fill are all boosted to
   keep the hovered card clearly distinguishable from its neighbors. */
.ac-tab:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(12, 35, 80, 0.18);
  background-color: rgba(212, 212, 212, 0.6);
  border-color: rgba(22, 22, 22, 0.35);
}

.ac-tab__title {
  display: block;
  color: #222;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}

.ac-tab__sub {
  display: block;
  color: #222;
  font-size: 1rem;
}

.ac-tab--active {
  background-color: #d4d4d4;
  border-color: #161616;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.ac-tab--active .ac-tab__title {
  font-weight: 600;
}

/* The active tab already reads as "selected" via its solid fill and flush
   baseline, so on hover it keeps that exact fill/border (re-asserted here
   since .ac-tab:hover's higher specificity would otherwise override them
   with the inactive-tab hover treatment) and skips the lift entirely -
   floating it up would pull it off the shared baseline it's meant to sit
   flush against. */
.ac-tab--active:hover {
  transform: none;
  background-color: #d4d4d4;
  border-color: #161616;
}

/* v1.0.71: tab box colour (Live Edit > click the "Box colour" chip inside a tab). Site-wide: same on every Academic Calendar page.
   Original = the pale grey look above. Other colours: inactive tab = soft tint, open tab = solid colour. */
.ac-tab__tool { display: none; }
.cms-edit-mode .ac-tab__tool {
  display: inline-block; margin-top: 0.6rem; padding: 0.2rem 0.6rem; border: 2px dashed #C9A227; border-radius: 999px;
  background: #fff; color: #0C2350; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.ac-tab[data-tone="navy"] { --tone: #0C2350; --tone-ink: #ffffff; --tone-tint: rgba(12,35,80, 0.14); --tone-tint-hover: rgba(12,35,80, 0.26); --tone-line: rgba(12,35,80, 0.55); }
.ac-tab[data-tone="gold"] { --tone: #C9A227; --tone-ink: #0C2350; --tone-tint: rgba(201,162,39, 0.14); --tone-tint-hover: rgba(201,162,39, 0.26); --tone-line: rgba(201,162,39, 0.55); }
.ac-tab[data-tone="green"] { --tone: #1F7A4D; --tone-ink: #ffffff; --tone-tint: rgba(31,122,77, 0.14); --tone-tint-hover: rgba(31,122,77, 0.26); --tone-line: rgba(31,122,77, 0.55); }
.ac-tab[data-tone="maroon"] { --tone: #8B1E3F; --tone-ink: #ffffff; --tone-tint: rgba(139,30,63, 0.14); --tone-tint-hover: rgba(139,30,63, 0.26); --tone-line: rgba(139,30,63, 0.55); }
.ac-tab[data-tone="teal"] { --tone: #0F7C8A; --tone-ink: #ffffff; --tone-tint: rgba(15,124,138, 0.14); --tone-tint-hover: rgba(15,124,138, 0.26); --tone-line: rgba(15,124,138, 0.55); }
.ac-tab[data-tone]:not([data-tone="default"]) { background-color: var(--tone-tint); border-color: var(--tone-line); }
.ac-tab[data-tone]:not([data-tone="default"]):hover { background-color: var(--tone-tint-hover); border-color: var(--tone); }
.ac-tab--active[data-tone]:not([data-tone="default"]),
.ac-tab--active[data-tone]:not([data-tone="default"]):hover { background-color: var(--tone); border-color: #161616; }
.ac-tab--active[data-tone]:not([data-tone="default"]) .ac-tab__title,
.ac-tab--active[data-tone]:not([data-tone="default"]) .ac-tab__sub { color: var(--tone-ink); }

/* Term calendar document image (e.g. the Spring 2026 table) - reuses the
   sitewide .instruction-doc-image treatment (radius + shadow) but centered
   and sized for a full portrait document instead of a left-aligned
   thumbnail-style embed. */
.ac-calendar-image {
  max-width: 700px;
  margin: 1.5rem auto 0;
}

/* All Academic Calendars page (pages/academic-calendar-all.html): one
   continuous bordered table with "Year-YYYY" group-header rows in between -
   Figma has zero gap between year groups, so this is a single <table>
   rather than separate blocks with margins between them. */
.ac-year-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.ac-year-table td {
  border: 1px solid #9a9a9a;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #222;
  vertical-align: middle;
}

.ac-year-table__year-row td {
  background-color: rgba(217, 217, 217, 0.5);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  padding: 1.25rem;
}

.ac-year-table__num {
  width: 70px;
  text-align: center;
}

.ac-year-table__desc a {
  color: inherit;
  text-decoration: none;
}

.ac-year-table__desc a:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

.ac-year-table__download {
  width: 70px;
  text-align: center;
}

.ac-year-table__download a {
  display: inline-flex;
  color: #222;
  transition: color 0.2s ease;
}

.ac-year-table__download a:hover {
  color: var(--color-red);
}

.ac-year-table__download svg {
  width: 18px;
  height: 21px;
}

@media (max-width: 640px) {
  .ac-year-table {
    display: block;
    overflow-x: auto;
  }
}

/* Vice Chancellor detail page: the caption sits directly under the portrait
   with no bio name/role block between them (unlike the Chancellor page), so
   .cm-photo's 3rem bottom margin (tuned for that bio block) and
   .lm-photo-caption's 1rem top margin leave the caption looking disconnected
   from the photo. Tighten that gap to 10px and open up a deliberate 50px
   gap to the biography paragraph that follows instead. */
.vc-bio-photo {
  margin-bottom: 10px;
}

.vc-bio-caption {
  margin-top: 0;
  margin-bottom: 50px;
}

/* Treasurer detail page: Figma's design has no portrait for Professor
   Momtaz Shamim at all, just a flat placeholder box (no icon, no "Image
   Coming Soon" text) - unlike every other cm-photo usage on the site,
   which always shows the .img-ph fallback. Kept as its own plain div
   rather than reusing .img-ph, since that component always renders the
   fallback icon/label markup. */
.treasurer-photo-placeholder {
  aspect-ratio: 1098 / 500;
  background-color: #ededed;
  border-radius: 10px;
  margin-bottom: 3rem;
}

/* Registrar detail page: same flat placeholder-box treatment as
   .treasurer-photo-placeholder above - Figma has no portrait for the
   Registrar either, just a plain light-grey box. */
.registrar-photo-placeholder {
  aspect-ratio: 1098 / 500;
  background-color: #ededed;
  border-radius: 10px;
  margin-bottom: 3rem;
}

/* IQAC detail page: reuses .img-ph / .split-section__image for the rounded
   frame and broken-image fallback (same mechanism as .cm-photo on the
   Chancellor page), just with its own aspect ratio matching the real
   1079x611 committee-meeting photo instead of .split-section__image's 4:3
   default. */
.iqac-meeting-photo {
  aspect-ratio: 1079 / 611;
  border-radius: 10px;
  margin-bottom: 3rem;
}

/* IQAC organogram: the structure diagram is shown at its own width and
   centered, rather than stretched to fill the content column like every
   other .img-ph usage on the site - object-fit: contain keeps its labels
   legible instead of cropping the diagram. */
.iqac-organogram {
  max-width: 480px;
  margin: 0 auto 1.1rem;
  aspect-ratio: 965 / 969;
}

.iqac-organogram img {
  object-fit: contain;
}

/* Page-specific heading spacing tweaks for pages/iqac.html only. */
.iqac-heading--vision {
  padding-bottom: 10px;
}

.iqac-heading--mission {
  padding-top: 5px;
  padding-bottom: 5px;
}

.iqac-heading--general-objective {
  padding-top: 5px;
  padding-bottom: 5px;
}

.iqac-heading--specific-objectives {
  padding-top: 5px;
  padding-bottom: 5px;
}

.iqac-heading--strategy {
  padding-top: 5px;
  padding-bottom: 5px;
}

.iqac-heading--structure {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Smaller than the sitewide .cm-content__heading 24px: 1.1em against the
   16px base font-size in effect at this point in the page (.cm-content
   inherits body's 16px), resolving to 17.6px - stays bold via the sitewide
   h1-h4 rule, but overrides font-family so it inherits the surrounding
   paragraph's body font instead of the sitewide heading font. */
.iqac-heading--organogram {
  font-size: 1.1em;
  font-family: inherit;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 20px;
}

.iqac-heading--functions {
  padding-top: 5px;
  padding-bottom: 10px;
}

/* International Applicants page only: Accommodation/Food/Transport Cost
   need to read smaller and lighter than the sitewide 24px bold
   .cm-content__heading here, without changing that shared class everywhere
   else it's used. font-family/weight set explicitly since the h1-h4 base
   rule hardcodes font-weight: 700, which this overrides to 600. */
.ia-item-heading {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
}

/* ==========================================================================
   31. Sitewide "Back to Top" Button
   Injected by initBackToTop() in script.js on every page (that file is
   already loaded everywhere), so no markup is duplicated per page.
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(12, 35, 80, 0.28);
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.back-to-top svg {
  width: 22px;
  height: 22px;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-navy-light);
}

@media (max-width: 600px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   32. Job Circular Page (pages/job-circular.html)
   ========================================================================== */

.jc-table-wrap {
  margin-bottom: 1.5rem;
}

@media (max-width: 1020px) {
  .jc-table-wrap {
    overflow-x: auto;
  }
}

.jc-table {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
  table-layout: fixed;
}

.jc-table th,
.jc-table td {
  border: 1px solid #bebebe;
  padding: 1rem 0.5rem;
  text-align: left;
  vertical-align: middle;
  font-family: 'Poppins', sans-serif;
}

.jc-table thead th {
  background-color: #e2e2e2;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.jc-table tbody td {
  background-color: var(--color-white);
  font-weight: 400;
  font-size: calc(15px - 1pt);
}

.jc-table__num {
  text-align: center;
}

/* Position column (3rd) - header label and data cells both centered */
.jc-table thead th:nth-child(3),
.jc-table tbody td:nth-child(3) {
  text-align: center;
}

/* Sl. No. / Job Experience / Closing Date / Published Date / Status -
   header label and data cells both centered (9 columns: Sl. No., Name of
   the Position, Position, Education, Job Experience, Closing Date,
   Published in, Published Date, Status). Education stays left-aligned. */
.jc-table thead th:nth-child(1),
.jc-table tbody td:nth-child(1),
.jc-table thead th:nth-child(5),
.jc-table tbody td:nth-child(5),
.jc-table thead th:nth-child(6),
.jc-table tbody td:nth-child(6),
.jc-table thead th:nth-child(8),
.jc-table tbody td:nth-child(8),
.jc-table thead th:nth-child(9),
.jc-table tbody td:nth-child(9) {
  text-align: center;
}

/* Published in - header label only; data cells stay left-aligned */
.jc-table thead th:nth-child(7) {
  text-align: center;
}

.jc-table__link {
  color: inherit;
  text-decoration: none;
}

/* Name of the Position cell (job-circular.html + job-circular-all.html):
   the whole cell is the link - the <a>'s ::after stretches over the full
   cell (whatever the row's height), so a click anywhere in it opens the
   details page - and the cell takes a light tint of the site's gold
   accent (--color-gold #C9A227 at 40%) on hover/keyboard focus, navy
   text on top. */
.jc-table tbody td.jc-table__position {
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.jc-table__position .jc-table__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.jc-table tbody td.jc-table__position:hover,
.jc-table tbody td.jc-table__position:focus-within {
  background-color: rgba(201, 162, 39, 0.4);
  color: var(--color-navy);
}

.jc-table__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #d7d7d7;
  color: var(--color-navy);
  font-weight: 500;
}

.jc-table tbody td.jc-table__closing {
  color: #ff2525;
  font-weight: 700;
}

.jc-table-note {
  text-align: right;
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* Pixel-measured from Figma node 2141:383's own note line: "Only Use
   for" and "View All Published Circular" sit lighter, "OFFICIAL
   Purpose." a shade darker for a small amount of emphasis - none of
   them full black, matching this note's deliberately low-visibility,
   internal-office-only styling. */
.jc-table-note__muted {
  color: #c9c9c9;
}

.jc-table-note__strong {
  color: #a0a0a0;
}

.jc-table-note__link {
  color: #b8b8b8;
  text-decoration: underline;
}

.jc-table-note__link:hover {
  color: var(--color-gold);
}

/* job-circular-all.html: its longer placeholder ("Search by Position,
   Month or Month, Year") is clipped at the shared 360px max-width. */
.listing-controls--wide-search .listing-controls__search {
  max-width: 440px;
}

/* pages/job-circular-details.html (Figma node 2141:189) */
.jcd-topbar__heading {
  margin-bottom: 40px;
  /* Lift the shared .section-heading 640px cap - "Circular Details -
     <position>" needs ~700px at the title's 36px desktop size and was
     wrapping. Font size still scales via the shared clamp(). */
  max-width: none;
}

/* A position name too long for one line still breaks into two
   even-length lines instead of leaving one word on its own. */
.jcd-topbar__heading .section-heading__title {
  text-wrap: balance;
}

.jcd-viewall {
  display: flex;
  width: fit-content;
  margin: 0 0 10px auto;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
}

.jcd-viewall svg {
  width: 16px;
  height: 16px;
}

.jcd-viewall:hover {
  color: var(--color-gold);
}

.jcd-intro {
  max-width: 900px;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--color-text-muted);
}

/* Pixel-measured from the record's own screenshot: a very pale
   rose-tinted white, not a pure grey - kept as-is rather than
   substituted for a sitewide grey, since it's this bar's own color. */
.jcd-infobar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: #fff0f0;
  border-radius: var(--radius-sm);
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
}

.jcd-infobar__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 1.1rem;
}

.jcd-infobar__body {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
}

.jcd-infobar__title {
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}

/* Permanent template for every job circular's details page: the first
   two groups get a minimum width, so each group starts at the same
   x-position on every record with typical text lengths - but (unlike
   the fixed-width grid this replaced) a longer date or "Published in"
   value widens its own group instead of overflowing into the next one,
   and the 1.5rem column gap always keeps groups visibly apart. Groups
   never break internally; one that no longer fits drops to the next
   line whole. The Published group is pushed right; the 26px right
   padding + the info bar's own 24px padding puts its right edge
   exactly 50px from the bar's border. */
.jcd-infobar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-right: 26px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.jcd-infobar__meta > * {
  white-space: nowrap;
}

.jcd-infobar__meta > :nth-child(1) {
  min-width: 300px;
}

.jcd-infobar__meta > :nth-child(2) {
  min-width: 280px;
}

.jcd-infobar__label {
  color: var(--color-navy);
  font-weight: 600;
}

.jcd-infobar__published {
  margin-left: auto;
}

@media (max-width: 900px) {
  .jcd-infobar__meta {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
  }

  .jcd-infobar__meta > *,
  .jcd-infobar__meta > :nth-child(1),
  .jcd-infobar__meta > :nth-child(2) {
    min-width: 0;
    white-space: normal;
  }

  .jcd-infobar__published {
    margin-left: 0;
  }
}

.jcd-document {
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid #bebebe;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1295 / 1830;
}

.jcd-document img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Admin-written circular description (rich-text HTML from the admin
   panel's editor) - reuses .jcd-intro's width/color/spacing, but left-
   aligned since centered headings and bullet lists read as broken.
   Headings/lists copy the faculty tab values (.fpr-tabs__panel-text),
   links copy .text-section__link. */
.jcd-description {
  text-align: left;
}

.jcd-description p {
  margin-bottom: 0.9rem;
}

.jcd-description h4 {
  font-size: 24px;
  margin: 0.5rem 0 0.9rem;
}

.jcd-description ul,
.jcd-description ol {
  margin: 0 0 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.jcd-description ol {
  margin-left: 1.8rem;
}

.jcd-description ul li {
  list-style: disc;
}

.jcd-description ol li {
  list-style: decimal;
}

.jcd-description > :last-child {
  margin-bottom: 0;
}

.jcd-description a {
  color: var(--color-navy);
  text-decoration: underline;
}

.jcd-description a:hover {
  color: var(--color-gold);
}

.jcd-description img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Un-classed (not floated) images keep the original block look. Floated
   ones (.news-inline-img--*, section 23) are excluded - this selector
   outranks those classes, so its margin: 1rem 0 would wipe their side gap. */
.jcd-description img:not([class*="news-inline-img--"]) {
  margin: 1rem 0;
  display: block;
}

@media (max-width: 640px) {
  .jcd-infobar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   33. Academic Result Page (pages/result.html)
   Same table look as the Job Circular table (section 32) - 0.5rem side
   padding, #e2e2e2 header, grey circular Sl. No. badge - but a 6-column
   layout with every column centered, so it has its own class instead of
   the 8-column-specific nth-child rules on .jc-table.
   ========================================================================== */

.rs-table-wrap {
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .rs-table-wrap {
    overflow-x: auto;
  }
}

.rs-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.rs-table th,
.rs-table td {
  border: 1px solid #bebebe;
  padding: 1rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  font-family: 'Poppins', sans-serif;
}

.rs-table thead th {
  background-color: #e2e2e2;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.rs-table tbody td {
  background-color: var(--color-white);
  font-weight: 400;
  font-size: 15px;
}

/* On phones the single grid column (1fr = minmax(auto, 1fr)) grew to the wide
   results table's min-width, so the whole page scrolled sideways. Let this
   layout's column shrink to the screen so the table scrolls inside
   .rs-table-wrap instead. Scoped to layouts that hold a results table. */
@media (max-width: 860px) {
  .cm-layout:has(.rs-table-wrap) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* .cm-content is justify-self: start (shrink-to-fit), which would still let it
     size to the table's min-width - pin it to the column instead. */
  .cm-layout:has(.rs-table-wrap) > .cm-content {
    width: 100%;
    min-width: 0;
  }
}

/* Published Date (formerly Exam Date) is Medium weight in the Figma design */
.rs-table tbody td.rs-table__date {
  font-weight: 500;
}

.rs-table__download {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #7a7a7a;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}

.rs-table__download svg {
  width: 20px;
  height: 20px;
}

.rs-table__download:hover {
  color: var(--color-gold);
}

/* Program Name cell links to the record's result PDF - reads as plain
   table text until hovered (same treatment as .jc-table__link). */
.rs-table__link {
  color: inherit;
  text-decoration: none;
}

/* Program cell (result.html + result-all.html): the whole cell is the link,
   exactly like Job Circular's position cell (.jc-table__position) - the
   <a>'s ::after stretches over the full cell, and the cell takes the same
   40% gold tint on hover/keyboard focus with navy text. */
.rs-table tbody td.rs-table__program {
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rs-table__program .rs-table__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.rs-table tbody td.rs-table__program:hover,
.rs-table tbody td.rs-table__program:focus-within {
  background-color: rgba(201, 162, 39, 0.4);
  color: var(--color-navy);
}

/* ==========================================================================
   34. Library Page (pages/library.html)
   Same float-wrap technique as .news-detail-body (section 23): each photo
   comes BEFORE the paragraph it should sit beside in the markup and floats
   out, so the following paragraphs flow around it and return to full width
   once they clear its bottom. ::after clears the floats so the section
   below never rides up beside a tall photo.
   ========================================================================== */
.library-body::after {
  content: "";
  display: table;
  clear: both;
}

.library-photo {
  max-width: 100%;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
}

.library-photo--right {
  float: right;
  width: 36%;
  aspect-ratio: 403 / 605;
  margin-left: 2rem;
}

.library-photo--left {
  float: left;
  width: 38%;
  aspect-ratio: 420 / 280;
  margin-right: 2rem;
}

@media (max-width: 760px) {
  .library-photo--right,
  .library-photo--left {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ==========================================================================
   35. Alumni Page (pages/alumni.html)
   Full-width wide photo under the heading, then a right-floated portrait
   that the following paragraphs wrap around (same float-wrap technique as
   .library-body / .news-detail-body: the photo comes BEFORE the text it
   should sit beside, and ::after clears so nothing rides up beside it).
   ========================================================================== */
.alumni-banner-photo {
  width: 100%;
  aspect-ratio: 1391 / 582;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}

.alumni-body::after {
  content: "";
  display: table;
  clear: both;
}

.alumni-photo {
  float: right;
  width: 33%;
  max-width: 100%;
  aspect-ratio: 468 / 536;
  border-radius: var(--radius-md);
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 760px) {
  .alumni-photo {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

/* ==========================================================================
   36. New Campus Page (pages/rtm-aktu-new-campus.html)
   Large lead paragraph (Figma: 32px Poppins Regular, #222, 60px leading).
   Scaled to the site's usual Figma-to-web ratio (the 50px heading renders
   at 36px, i.e. x0.72) so it reads as a lead paragraph without overflowing
   the 1100px column.
   ========================================================================== */
.new-campus-lead {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 400;
  line-height: 1.875;
  color: #222;
  margin: 0;
}

/* Deans & Heads: a head's name links to their faculty profile - reads as
   plain table text until hovered (same treatment as .jc-table__link). */
.dh-table__name-link {
  color: inherit;
  text-decoration: none;
}

.dh-table__name-link:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

/* Opt-in numbered variant of .text-section__list (faculty profile tabs with
   long numbered lists, e.g. conference papers): decimal markers, with a wider
   left margin so two-digit numbers don't hang outside the panel. */
.text-section__list--ordered {
  margin-left: 1.8rem;
}

.text-section__list--ordered li {
  list-style: decimal;
}

/* ==========================================================================
   37. Program Pages (pages/programs/*.html)
   Same float-wrap technique as .library-body / .news-detail-body: a figure
   comes BEFORE the text it should sit beside and floats out, so following
   paragraphs wrap around it and return to full width once they clear its
   bottom. ::after clears the floats so the quote banner never rides up
   beside a tall photo; headings clear too so a heading never squeezes in
   next to a float.
   ========================================================================== */
.program-body::after {
  content: "";
  display: table;
  clear: both;
}

.program-body .cm-content__heading {
  clear: both;
  margin-top: 1.5rem;
}

.program-photo {
  margin: 0 0 1.25rem;
  width: 32%;
}

.program-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.program-photo--right {
  float: right;
  margin-left: 2rem;
}

.program-photo--left {
  float: left;
  margin-right: 2rem;
}

.program-photo__caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-text-muted);
}

/* Course/fee tables are wider and denser than the Deans & Heads table this
   builds on: let columns size to their content instead of the fixed equal
   split, with tighter cell padding so the 7-column fee table fits. */
.program-body .dh-table {
  table-layout: auto;
}

.program-body .dh-table th,
.program-body .dh-table td {
  padding: 0.7rem 0.9rem;
}

.program-body .dh-table thead th {
  text-align: center;
}

@media (max-width: 760px) {
  .program-photo--right,
  .program-photo--left {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .program-body .dh-table {
    display: block;
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   Program pages, refinement round 2 (opt-in via .program-body--refined so
   pages can adopt it one at a time).
   -------------------------------------------------------------------------- */

/* Exactly 15px between a section heading and the content right below it. */
.program-body--refined .cm-content__heading {
  padding-bottom: 15px;
}

/* Bank-deposit block: label line + one line per detail, no bullets, 10px
   between lines. Sits under the "Payment Option" heading. */
.program-deposit {
  margin-bottom: 1.1rem;
}

.program-deposit p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Only the first gap (below "Deposit") is open; the detail lines sit tight. */
.program-deposit p:first-child {
  margin-bottom: 10px;
}

/* Bank lines sit one indent level in, same 2rem as the Contact telephone
   numbers. */
.program-deposit__indent {
  padding-left: 2rem;
}

/* Contact block: one paragraph with no blank lines, at the normal body line
   height (1.65, inherited), the telephone number lines indented one level and
   10px of air below the "Admission Desk" label. */
.program-contact__head {
  display: block;
  padding-bottom: 10px;
}

.program-contact__indent {
  display: block;
  padding-left: 2rem;
}

/* Faculty row as a scrollable carousel. The arrows are always rendered -
   even when every card fits - so it's clear more people can be added and
   scrolled to later; an arrow just dims when there's nothing to scroll to
   in that direction. */
.fac-carousel {
  position: relative;
  padding: 0 3rem;
}

.fac-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.fac-carousel__track::-webkit-scrollbar {
  display: none;
}

.fac-carousel__track .fmp-card {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  scroll-snap-align: start;
}

.fac-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.fac-carousel__btn:hover {
  background: var(--color-gold);
}

.fac-carousel__btn--prev {
  left: 0;
}

.fac-carousel__btn--next {
  right: 0;
}

.fac-carousel__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.fac-carousel__btn.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.fac-carousel__btn.is-disabled:hover {
  background: var(--color-navy);
}

@media (max-width: 720px) {
  .fac-carousel__track .fmp-card {
    flex-basis: calc((100% - 1.25rem) / 2);
  }
}

@media (max-width: 480px) {
  .fac-carousel {
    padding: 0 2.5rem;
  }

  .fac-carousel__track .fmp-card {
    flex-basis: 100%;
  }
}

/* Narrower content columns make three cards narrower than the 183px photo:
   let the photo shrink with its card instead of overflowing it. */
.fac-carousel .fmp-card__photo {
  width: min(183px, 100%);
  height: auto;
  aspect-ratio: 1;
}

/* ==========================================================================
   17. News Details - admin-panel rich-text body
   (pages/news-details.html's #ndBody, class .news-detail-text)
   ========================================================================== */

/* Slightly tighter paragraph/list rhythm than the sitewide
   .text-section__text/.text-section__list default (1.1rem), and gives a
   heading (.cm-content__heading, which the sitewide rule leaves with no
   margin of its own - see style.css search "cm-content__heading") the same
   breathing room above and below it. Scoped to .news-detail-text so this
   doesn't change any other page that reuses those shared classes. */
.news-detail-text .text-section__text,
.news-detail-text .text-section__list {
  margin-bottom: 0.9rem;
}

.news-detail-text .cm-content__heading {
  margin-top: 1.5rem;
  margin-bottom: 0.9rem;
}

.news-detail-text .cm-content__heading:first-child {
  margin-top: 0;
}

/* Tables inserted via the admin panel's editor (TinyMCE's table plugin).
   The editor's own inline styling on <table>/<td>/<th> is stripped by the
   sanitizer (the admin panel's news sanitizer only keeps
   text-align/background-color on td/th - see that file), so the borders,
   padding and header shading live here instead, once, in the site's own
   look - same convention as .dh-table (Deans & Heads page). A per-cell
   background-color set from the editor's "Cell properties" still shows
   through, since that inline style is one of the ones kept.
   Shared with the Job Circular description (.jcd-description) and faculty
   tab bodies + bio (.fpr-tabs__panel-text, #fprBio), whose editors have the same toolset. */
.news-detail-text table,
.jcd-description table,
.fpr-tabs__panel-text table,
#fprBio table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.news-detail-text th,
.news-detail-text td,
.jcd-description th,
.jcd-description td,
.fpr-tabs__panel-text th,
.fpr-tabs__panel-text td,
#fprBio th,
#fprBio td {
  border: 1px solid #bebebe;
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.news-detail-text thead th,
.jcd-description thead th,
.fpr-tabs__panel-text thead th,
#fprBio thead th {
  background-color: rgba(12, 35, 80, 0.06);
  color: var(--color-navy);
  font-weight: 600;
}

/* Floated editor photos: news bodies get the base .news-inline-img class
   from the frontend sanitizer, these containers take the admin HTML as
   saved (modifier class only), so the base look is repeated here, and the
   container clears its own floats like .news-detail-body::after does. */
.jcd-description img[class*="news-inline-img--"],
.fpr-tabs__panel-text img,
#fprBio img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
}

.jcd-description::after,
.fpr-tabs__panel-text::after,
#fprBio::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 760px) {
  .news-detail-text table,
  .jcd-description table,
  .fpr-tabs__panel-text table,
  #fprBio table {
    display: block;
    overflow-x: auto;
  }
}

/* ==========================================================================
   pages/job-apply.html - Online job application form (added 2026-09-27)
   Reuses the Contact form's .cp-field / .cp-field__input look and the Job
   Circular Details info bar (.jcd-infobar); everything below is only what
   the longer, sectioned application form needs on top of those.
   ========================================================================== */
.ja-infobar .jcd-infobar__body {
  padding-left: 0;
}

.jcd-infobar__meta > .ja-infobar__details {
  min-width: 0;
}

.ja-infobar__details {
  margin-left: auto;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
}

.ja-infobar__details:hover {
  color: var(--color-gold);
}

.ja-form {
  max-width: 980px;
  margin: 0 auto;
}

.ja-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ja-section {
  border: 1px solid #e2e5ea;
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem 1.75rem;
  margin: 0 0 1.75rem;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.ja-section__title {
  padding: 0 0.6rem;
  margin-left: -0.6rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-navy);
}

.ja-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}

.ja-field--wide,
.ja-file {
  grid-column: 1 / -1;
}

.ja-textarea {
  min-height: 110px;
}

.ja-req {
  color: var(--color-red);
}

.ja-optional {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.ja-group {
  background-color: var(--color-bg-light);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 1.2rem;
}

.ja-group__title {
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
}

.ja-group__grid {
  display: grid;
  /* One row with every sub-field side by side (--ja-cols = how many,
     set by job-apply.js); narrower screens fall back below. */
  grid-template-columns: repeat(var(--ja-cols, 3), minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

/* Inputs sit at the bottom of each cell, so they line up in one straight
   row even if a label wraps. */
.ja-group__grid .ja-field {
  justify-content: flex-end;
}

.ja-sublabel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.2rem;
  line-height: 1.35;
}

.ja-sublabel__hint {
  flex-basis: 100%;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.ja-file__error {
  color: var(--color-red);
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .ja-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ja-group__grid .cp-field__label {
  font-size: 0.82rem;
}

.ja-grouplist__item + .ja-grouplist__item {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #cfd5de;
}

.ja-grouplist__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.ja-add,
.ja-remove {
  border: none;
  background: none;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.ja-add {
  margin-top: 0.9rem;
  color: var(--color-navy);
  font-size: 0.9rem;
}

.ja-add:hover {
  color: var(--color-gold);
}

.ja-remove {
  color: var(--color-red);
  font-size: 0.8rem;
}

.ja-file__input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.7rem;
  border: 1px dashed #c8ced8;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-light);
  width: 100%;
}

.ja-file__info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  word-break: break-word;
}

.ja-invalid {
  border-color: var(--color-red) !important;
  box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.15) !important;
}

.ja-form__footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ja-form__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.ja-over {
  color: var(--color-red);
  font-weight: 600;
}

.ja-declare {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--color-text);
}

.ja-declare input {
  margin-top: 0.3rem;
}

.ja-declare input.ja-invalid {
  outline: 2px solid var(--color-red);
}

.ja-errors {
  background-color: #fdecea;
  border: 1px solid #f3c4c0;
  color: #8f1e18;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
}

.ja-errors__title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.ja-errors ul {
  padding-left: 1.2rem;
}

.ja-form__submit {
  align-self: flex-start;
}

.ja-form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ja-success {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--color-gold);
}

.ja-success svg {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  color: #1d8a4a;
}

.ja-success h3 {
  margin-bottom: 0.75rem;
}

.ja-success p {
  margin-bottom: 0.75rem;
}

.ja-success__ref strong {
  color: var(--color-navy);
  font-size: 1.1rem;
}

.ja-success__hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.ja-success .btn {
  margin-top: 0.75rem;
}

/* "Apply Online" button on job-circular-details.html (open circulars only). */
.jcd-apply {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 0;
}

/* These set their own display, which would otherwise beat the [hidden]
   attribute the page scripts use to show/hide them. */
.jcd-apply[hidden],
.ja-infobar[hidden],
.ja-form[hidden],
.ja-success[hidden],
.ja-errors[hidden],
.ja-add[hidden],
.ja-remove[hidden],
.ja-file__error[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .ja-grid,
  .ja-group__grid {
    grid-template-columns: 1fr;
  }

  .ja-section {
    padding: 1.1rem 1rem 1.3rem;
  }

  .ja-infobar__details {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------
   Live Edit: items hidden from the admin panel (script.js adds
   .cms-hidden). When a card in a grid is hidden, that grid switches to
   centred rows so the remaining cards close the gap; with nothing hidden
   the layout stays exactly as before.
   ------------------------------------------------------------------ */
.cms-hidden {
  display: none !important;
}

.leadership__grid:has(> .cms-hidden),
.faculties__grid:has(> .cms-hidden),
.quick-access__grid:has(> .cms-hidden) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.leadership__grid:has(> .cms-hidden) > *,
.faculties__grid:has(> .cms-hidden) > * {
  flex: 0 1 calc((100% - 2 * 1.75rem) / 3);
  min-width: 0;
}

.quick-access__grid:has(> .cms-hidden) > * {
  flex: 0 1 calc((100% - 5 * 1.25rem) / 6);
  min-width: 0;
}

@media (max-width: 992px) {
  .quick-access__grid:has(> .cms-hidden) > * {
    flex-basis: calc((100% - 2 * 1.25rem) / 3);
  }
}

@media (max-width: 860px) {
  .leadership__grid:has(> .cms-hidden) > *,
  .faculties__grid:has(> .cms-hidden) > * {
    flex-basis: 100%;
  }
}

@media (max-width: 560px) {
  .quick-access__grid:has(> .cms-hidden) > * {
    flex-basis: calc((100% - 1.25rem) / 2);
  }
}

/* Phones (2026-09-30): the desktop-only alignment of the left-shifted quote
   banner (8% margin + the 146px inset under a specific word) squeezed the
   Academics quote into the right half of a phone screen. On small screens
   it simply starts at the left, using the full width. */
@media (max-width: 767px) {
  .quote-banner__inner--left {
    margin: 0 auto;
  }

  .quote-banner__text--shadow {
    padding-left: 0;
  }
}

/* ==========================================================================
   Live Edit page-text blocks (data-cms-type="rich", class .cms-rich) -
   added 2026-10-04. A page's whole body text is edited in the admin panel's
   Live Edit with the SAME full TinyMCE toolbar as News / Events / Job
   Circulars / Faculty, so whatever that editor writes (plain <p>, <h3>/<h4>,
   lists, tables, photos with the news-inline-img--* float classes, colors,
   indents) is styled here once, matching the page's own design.
   ========================================================================== */
.cms-rich p {
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

.cms-rich h3,
.cms-rich h4 {
  margin: 0.5rem 0 0.9rem;
}

.cms-rich h3 {
  font-size: 24px;
}

.cms-rich h4 {
  font-size: 20px;
}

.cms-rich ul,
.cms-rich ol {
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cms-rich ol {
  margin-left: 1.8rem;
}

.cms-rich ul li {
  list-style: disc;
}

.cms-rich ol li {
  list-style: decimal;
}

.cms-rich a {
  color: var(--color-navy);
  text-decoration: underline;
}

.cms-rich a:hover {
  color: var(--color-gold);
}

.cms-rich img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.cms-rich img[class*="news-inline-img--"] {
  margin-bottom: 1.5rem;
}

.cms-rich img:not([class*="news-inline-img--"]) {
  display: block;
  margin: 1rem 0;
}

.cms-rich table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.cms-rich th,
.cms-rich td {
  border: 1px solid #bebebe;
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.cms-rich thead th {
  background-color: rgba(12, 35, 80, 0.06);
  color: var(--color-navy);
  font-weight: 600;
}

.cms-rich::after {
  content: "";
  display: table;
  clear: both;
}

.cms-rich img.news-inline-img--center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Pages with section sub-headings in the text block: keep the site's standard
   heading rhythm (5px / 10px padding, CLAUDE.md) after an edit, when the page-
   scoped heading classes have been dropped by the editor. */
.cms-rich--spaced h3 {
  padding-top: 5px;
  padding-bottom: 10px;
}

/* Library page: its designed right-hand photo is 36% wide (Figma 2215:902),
   not the editor's default 38% - keeps the page exactly as designed. */
.library-body img.news-inline-img--right {
  width: 36%;
}

@media (max-width: 760px) {
  .library-body img.news-inline-img--right {
    width: 100%;
  }

  .cms-rich table {
    display: block;
    overflow-x: auto;
  }
}

/* "Read More" fold (script.js initReadMore) - plain text link, not a button */
.rm-toggle-wrap { margin: 12px 0; }
.rm-toggle {
  color: #C9A227;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.rm-toggle:hover, .rm-toggle:focus { color: #0C2350; text-decoration: underline; }
.rm-more[hidden] { display: none; }

/* Program pages (pages/programs/*.html) as Live Edit page-text blocks
   (.cms-rich--program, added 2026-10-06 / v1.0.23): the page-scoped classes of
   the old hand-written markup (.program-body .cm-content__heading,
   .program-photo) are gone once an editor rewrites the block, so the same look
   is restored here - headings clear any floated photo and keep 1.5rem above /
   15px below; the two float photos stay at the designed 32% width. */
.cms-rich--program h3 {
  clear: both;
  margin-top: 1.5rem;
  padding-top: 0;
  padding-bottom: 15px;
}

.cms-rich--program img.news-inline-img--right,
.cms-rich--program img.news-inline-img--left {
  width: 32%;
}

@media (max-width: 760px) {
  .cms-rich--program img.news-inline-img--right,
  .cms-rich--program img.news-inline-img--left {
    width: 100%;
  }
}

/* Program pages: course/fee tables keep the old denser cell padding and the
   darker header band of the hand-written .dh-table. */
.cms-rich--program th,
.cms-rich--program td {
  padding: 0.7rem 0.9rem;
}

.cms-rich--program thead th {
  background-color: rgba(34, 34, 34, 0.4);
  font-weight: 500;
}

/* Program pages: an empty faculty row keeps a little height so the (dimmed)
   arrows still show that there is simply nobody to scroll to yet. */
.program-faculty .fac-carousel__track:empty {
  min-height: 4rem;
}

.program-faculty[hidden] {
  display: none;
}

/* Home "Our Faculties": with 3 cards nothing changes. From a 4th card on, the
   cards shrink and sit 4 to a row; any more wrap onto the next row. */
@media (min-width: 861px) {
  .faculties__grid:has(> .faculty-card:nth-child(4)):not(:has(> .cms-hidden)) {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
  }

  .faculties__grid:has(> .faculty-card:nth-child(4)):not(:has(> .cms-hidden)) .faculty-card__name {
    font-size: 0.95rem;
    padding: 0.9rem 1rem;
  }
}

/* Program pages on phones: a wide table scrolls inside its own box instead of
   stretching the whole page sideways. */
@media (max-width: 720px) {
  .cm-content:has(.program-body) {
    min-width: 0;
  }

  .cms-rich--program {
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: anywhere;
  }
}

/* Academics "Our Faculties": same as the Home grid - 3 cards as designed, from a
   4th card on they sit 4 to a row and any more wrap onto the next row. */
@media (min-width: 861px) {
  .af-grid:has(> .af-card:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
  }
}

/* Faculty pages (pages/faculty-*.html) as Live Edit text blocks (.cms-rich--faculty):
   the same look as the old hand-written paragraphs and headings, and the banner
   keeps its designed 840:435 shape. */
.cms-rich--faculty p {
  margin-bottom: 1.4rem;
}

.cms-rich--faculty h3 {
  clear: both;
}

.cms-rich--faculty > img.news-inline-img--center:first-child {
  aspect-ratio: 840 / 435;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 3rem;
}

/* Side menu colours chosen in Admin Panel > Sidebar (script.js renderSidebars sets --sb-bg / --sb-fg). */
.cm-sidebar__link[data-sb-color] {
  background-color: var(--sb-bg);
  border-color: var(--sb-bg);
  color: var(--sb-fg);
}
.cm-sidebar__link[data-sb-color]:hover {
  background-color: var(--sb-bg);
  border-color: var(--sb-bg);
  filter: brightness(1.08);
}
.cm-sidebar__link[data-sb-color] .cm-sidebar__link-arrow {
  color: var(--sb-fg);
}

/* v1.0.46 - pages made in Admin Panel > Pages: the text block keeps its floated
   pictures inside it (same clearfix as .library-body). */
.new-page-body::after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================================
   v1.0.47 - site-wide safety rules (Reja, 2026-10-08)
   ========================================================================== */

/* 1) Headings use the WHOLE width of their text area: next to the left menu
      box = the text column's width; on full-width pages = the full text area.
      A heading stays on one line unless it is longer than that (or Reja
      breaks it himself in Live Edit). The old 640px cap made many page
      titles wrap to two lines for no reason. */
main .section-heading {
  max-width: none;
}

/* 2) Phones/tablets: the single column of a sidebar page must never grow
      wider than the screen. A wide picture, table or calendar used to stretch
      it, so the whole page slid sideways (16 pages did, and any page could
      after a big photo was added in Live Edit). Was only fixed for the
      results table before (.cm-layout:has(.rs-table-wrap)). */
@media (max-width: 860px) {
  .cm-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .cm-layout > * {
    min-width: 0;
  }
  .cm-layout > .cm-content {
    width: 100%;
  }
}

/* 3) A long web address or e-mail without spaces, typed into any text, wraps
      instead of pushing the page wider than a phone screen. Table cells are
      left alone (wide tables scroll inside their own box). */
main :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dd, dt, figcaption) {
  overflow-wrap: anywhere;
}

/* v1.0.48 - links with no address yet ("#"), see script.js tidyDeadLinks():
   hidden on the public site, or kept as plain (not clickable) content. */
.is-deadlink-hidden {
  display: none !important;
}
.is-nolink {
  cursor: default;
  pointer-events: none;
}

/* v1.0.49 - no alt text while a picture is still loading (or if it fails):
   the browser paints the alt text in the image's text colour, so transparent
   hides it everywhere. Screen readers still read the alt text. */
img {
  color: transparent;
}

/* v1.0.49 - Students Feedback in Live Edit: cards wrap in rows instead of
   sliding, so every card (also a newly added one) can be edited. */
.testimonials__track--edit {
  flex-wrap: wrap;
  row-gap: 1.25rem;
  transform: none !important;
  margin: 0;
}

/* v1.0.51 - About The University: the photo now sits inside the page's ONE
   Live Edit text block (it can be changed / moved / removed there); this keeps
   the same frame it had before (crop, rounded corners, shadow, spacing). */
.cms-rich img.cm-photo-rich {
  display: block;
  width: 100%;
  aspect-ratio: 840 / 435;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  margin: 0 0 3rem;
}