/* =========================================================
   Emzek Academy: Stylesheet
   Mobile-first, WCAG 2.1 AA, 16px base, breakpoints 768/1024px
   ========================================================= */

:root {
  /* Brand colors */
  --color-navy: #0D2C54;
  --color-navy-light: #173E70;
  --color-navy-dark: #081B36;
  --color-gold: #ECBE07;
  --color-gold-dark: #9A7B05;
  --color-green: #1A9260;
  --color-blue: #028BE5;
  --color-red: #CA3434;

  /* Neutrals */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F6F7;
  --color-bg-alt-2: #F2F4F6;
  --color-border: #E1E5EB;
  --color-text: #1F2937;
  --color-text-muted: #545C68;
  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --fs-base: 1rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container-width: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(13, 44, 84, 0.08);
  --shadow-md: 0 8px 24px rgba(13, 44, 84, 0.10);
  --shadow-lg: 0 16px 40px rgba(13, 44, 84, 0.14);
  --header-height: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { color: var(--color-text); }
p + p { margin-top: var(--space-4); }

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section {
  padding: var(--space-8) 0;
}
.section--alt { background: var(--color-bg-alt); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--navy h2, .section--navy h3 { color: var(--color-white); }
.section--navy .text-muted { color: rgba(255,255,255,0.72); }

.section__header {
  max-width: 760px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.section__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-navy);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  margin-bottom: var(--space-4);
}
.section--navy .section__eyebrow {
  color: var(--color-gold);
  background: rgba(236, 190, 7, 0.18);
}
.section__subheading {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.grid {
  display: grid;
  gap: var(--space-6);
}
.grid--2 { grid-template-columns: repeat(1, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  min-height: 44px;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-gold);
  color: var(--color-navy-dark);
}
.btn--primary:hover { background: #D4AC06; box-shadow: var(--shadow-sm); }

.btn--outline {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn--outline:hover { background: rgba(255,255,255,0.12); }

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

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

.btn--whatsapp {
  background: var(--color-green);
  color: var(--color-white);
}
.btn--whatsapp:hover { background: #157A4F; }

.btn--secondary {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn--secondary:hover { background: var(--color-navy-light); }

.btn--block { width: 100%; }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn--sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; min-height: 36px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-height);
}
.site-logo img { height: 44px; width: auto; }

.site-nav { display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
}
.site-nav__list a {
  position: relative;
  padding: var(--space-2) 0;
  color: var(--color-navy);
}
.site-nav__list a:hover { color: var(--color-gold-dark); }
.site-nav__list a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--color-bg-alt); }
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
  padding: var(--space-4) var(--space-5) var(--space-6);
}
.mobile-nav__list {
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 500;
}
.mobile-nav__list li + li { border-top: 1px solid var(--color-border); }
.mobile-nav__list a {
  display: block;
  padding: var(--space-4) 0;
  color: var(--color-navy);
}
.mobile-nav__list a.is-active { color: var(--color-gold-dark); }
.mobile-nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__actions { display: flex; }
  .nav-toggle, .mobile-nav { display: none; }
}

/* ---------- Nav dropdown ---------- */
.site-nav__list .has-dropdown { position: relative; }
.has-dropdown.is-open .nav-chevron { transform: rotate(180deg); }

/* Make the dropdown trigger button look like a nav link */
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  margin: 0;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-navy);
  line-height: inherit;
  text-decoration: none;
  -webkit-appearance: none;
  vertical-align: middle;
}
.nav-dropdown-toggle:hover { color: var(--color-gold-dark); }
.nav-dropdown-toggle.is-active { color: var(--color-gold-dark); font-weight: 600; }
/* Override global svg { display: block } for the chevron inside the button */
.nav-chevron { display: inline !important; flex-shrink: 0; transition: transform .2s; color: currentColor; }

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  min-width: 160px;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  z-index: 300;
  white-space: nowrap;
}
/* Invisible bridge over the 10px gap above the menu, so moving the mouse
   diagonally from the nav item down to the first submenu link doesn't
   momentarily leave .has-dropdown and close the menu (a hover gap has to
   be fully covered by hoverable area, not just visually closed). */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.has-dropdown.is-open .nav-dropdown { display: block; }
.nav-dropdown li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.nav-dropdown li a {
  display: block;
  padding: 10px 20px;
  color: var(--color-navy);
  font-size: 0.9rem;
  font-family: var(--font-heading);
  font-weight: 500;
  transition: background .12s, color .12s;
  text-decoration: none;
}
.nav-dropdown li a:hover,
.nav-dropdown li a.is-active:hover { background: var(--color-gold); color: #fff; }
.nav-dropdown li a.is-active { color: var(--color-gold-dark); font-weight: 600; }
.nav-dropdown li a.is-active::after { content: none; }

/* Disabled "Coming Soon" dropdown entry, not yet a real page, no link */
.nav-dropdown__soon {
  display: block;
  padding: 10px 20px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-family: var(--font-heading);
  font-weight: 500;
  cursor: default;
}
.nav-dropdown__soon small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* CSS hover fallback (works even without JS) */
@media (min-width: 1024px) {
  .has-dropdown:hover .nav-dropdown { display: block; }
  .has-dropdown:hover .nav-chevron { transform: rotate(180deg); }
}

/* Mobile child items */
.mobile-nav__child a {
  display: block;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--color-border);
}
.mobile-nav__child a::before { content: '— '; }
.mobile-nav__child a.is-active { color: var(--color-gold-dark); }
.mobile-nav__child--soon {
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--color-border);
}
.mobile-nav__child--soon::before { content: '— '; }
.mobile-nav__child--soon small {
  display: block;
  margin-left: 1.1em;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(236,190,7,0.16) 0%, transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(26,146,96,0.16) 0%, transparent 45%);
  pointer-events: none;
}
/* Hero with background image set via CMS - same flat dark-navy scrim used on
   every other page's .page-header--has-image (see below), just darker than
   that one's 0.72 since the homepage hero carries more text over more of the
   image. One consistent treatment for every hero image on the site, simple
   to reason about, rather than a different rule per page.
   IMPORTANT: this must come AFTER .hero::before above - both target the same
   ::before pseudo-element at equal specificity (one class + one pseudo-
   element each), so whichever rule is later in the file wins the cascade.
   This one needs to win (it's the actual readability fix); .hero::before's
   decorative radial-gradient dots are only meant for the plain gradient
   background state, not layered over a photo. */
.hero--has-image::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(13, 42, 86, 0.85);
  z-index: 0;
}
.hero--has-image .hero__inner { position: relative; z-index: 1; }
.hero__inner {
  position: relative;
  padding: var(--space-8) 0;
  max-width: 760px;
}
@media (min-width: 1024px) {
  .hero__inner { padding: var(--space-9) 0; max-width: 720px; }
}
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy-dark);
  background: var(--color-gold);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.hero h1 { color: var(--color-white); margin-bottom: var(--space-5); }
.hero p { color: rgba(255,255,255,0.85); font-size: 1.1rem; }
.hero__subheading-secondary { margin-top: var(--space-2); font-size: 1rem; color: rgba(255,255,255,0.72); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.hero__trust {
  margin-top: var(--space-6);
  font-size: 0.9rem;
  color: var(--color-gold);
  font-weight: 500;
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--space-3); }
.card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(13,44,84,0.06);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--color-navy);
  font-weight: 700;
  font-family: var(--font-heading);
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat {
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--color-navy);
}
.section--navy .stat { background: rgba(255,255,255,0.06); }
.section--navy .stat__value { color: var(--color-gold); }
.stat__label {
  font-family: var(--font-heading);
  font-weight: 600;
  margin-top: var(--space-2);
}
.stat__description {
  margin-top: var(--space-2);
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.section--navy .stat__description { color: rgba(255,255,255,0.7); }

/* ---------- Badge / pill ---------- */
.badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-navy-dark);
}
.badge--green { background: rgba(26,146,96,0.14); color: var(--color-green); }
.badge--blue { background: rgba(2,139,229,0.12); color: var(--color-blue); }

/* ---------- Certification pathway cards + diagram ---------- */
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
@media (min-width: 900px) {
  .pathway-grid { grid-template-columns: repeat(4, 1fr); }
}
.pathway-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.pathway-card h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 1.05rem;
}
.pathway-card__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}
.pathway-card__tag--green { background: rgba(26,146,96,0.14); color: var(--color-green); }
.pathway-card__tag--blue  { background: rgba(2,139,229,0.12); color: var(--color-blue); }

.pathway-diagram {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  overflow-x: auto;
}
.pathway-diagram svg { min-width: 640px; }

/* ---------- Program cards ---------- */
/*
  Fixed grid-template-rows locks every card section to the same height,
  so the image always appears at exactly the same vertical position
  regardless of title or subtitle length.
    Row 1  .program-card__top      : title + badge   7rem
    Row 2  .program-card__subtitle : slogan          4rem (extra room below a 2-line subtitle, before the image)
    Row 3  .program-card__img      : image           auto (aspect-ratio)
    Row 4  .program-card__category : pill            2.25rem
    Row 5  .program-card__summary  : body copy       1fr  (stretches)
    Row 6  .program-card__bottom   : meta/price/CTA  auto
*/
.program-card {
  display: grid;
  grid-template-rows: 7rem 4rem auto 2.25rem 1fr auto;
  padding: 0;
  overflow: hidden;
}
/* ── Title + badge ── */
.program-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) 0;
  overflow: hidden;
}
.program-card__title {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
}
.program-card__badge { flex-shrink: 0; }
/* ── Subtitle / slogan ── */
.program-card__subtitle {
  padding: var(--space-2) var(--space-5) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}
/* ── Programme image ── */
.program-card__img {
  width: 100%;
  aspect-ratio: 800 / 420;
  overflow: hidden;
  background: var(--color-navy);
}
.program-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ── Category pill ── */
.program-card__category {
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
}
/* -- Summary: fills remaining space -- */
.program-card__summary {
  padding: var(--space-2) var(--space-5) 0;
  font-size: 0.9rem;
  color: var(--color-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin: 0;
  align-self: start;
}
/* ── Bottom: meta / price / CTA ── */
.program-card__bottom {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
}
.program-card__price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-navy);
  margin-top: var(--space-3);
}
.program-card__price-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.program-card__meta {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.program-card__meta strong { color: var(--color-text); }
.program-card__cta {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.program-card__cta .btn { flex: 1 1 auto; min-width: 0; width: auto; }

/* -- Pagination (programs.html) -- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.pagination__btn:hover:not(:disabled) { border-color: var(--color-navy); }
.pagination__btn--active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}
.pagination__btn--nav { font-weight: 500; }
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* -- Homepage featured cards (no category row, use flex) -- */
.program-card--simple {
  display: flex;
  flex-direction: column;
  grid-template-rows: unset;
}
.program-card--simple .program-card__top {
  min-height: 6.5rem;
  height: auto;
}
/* Fixed 2-line height for the title itself (not just the row it sits in),
   so the badge and everything below it (image, meta) start at the same
   vertical position across cards, whether the title text actually wraps
   to 1 line or 2. */
.program-card--simple .program-card__title {
  min-height: 3.11rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.program-card--simple > .text-muted,
.program-card--simple > p {
  padding: var(--space-2) var(--space-5) 0;
  margin: 0;
  font-size: 0.875rem;
}
/* Fixed height for the subtitle line (1 or 2 lines of text) so the banner
   image below always starts at the same vertical position across cards,
   regardless of how long each programme's subtitle happens to be.
   0.5rem top padding + 2 lines at 0.875rem font / 1.65 line-height = 3.39rem;
   line-clamp caps it at 2 lines even if a subtitle is unusually long. */
.program-card--simple > .text-muted {
  min-height: 3.39rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.program-card--simple .program-card__img {
  margin-top: var(--space-4);
}
.program-card--simple .program-card__meta {
  flex: 1;
  padding: var(--space-3) var(--space-5) 0;
  margin: 0;
}
.program-card--simple .program-card__price {
  padding: 0 var(--space-5);
  margin-top: var(--space-3);
}
.program-card--simple .program-card__price-note {
  padding: 0 var(--space-5);
}
.program-card--simple .program-card__cta {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

/* ---------- Trainer cards ---------- */
.trainer-card { text-align: center; display: flex; flex-direction: column; }
.trainer-card img {
  width: 240px; height: 240px;
  border-radius: 16px;
  margin: 0 auto var(--space-4);
  object-fit: cover;
  display: block;
}
.trainer-card__title { color: var(--color-text-muted); font-size: 0.92rem; margin-top: var(--space-1); }
.trainer-card__credentials {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.testimonial__quote {
  font-style: italic;
  color: var(--color-text);
  flex-grow: 1;
}
.testimonial__quote::before { content: '\201C'; }
.testimonial__quote::after { content: '\201D'; }
.testimonial__name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-navy);
  margin-top: var(--space-4);
}
.testimonial__programs {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Testimonial slider ---------- */
.t-slider-wrap { display: flex; align-items: center; gap: var(--space-3); }
.t-slider { overflow: hidden; flex: 1; min-width: 0; }
.t-slider__track {
  display: flex;
  transition: transform 0.4s ease;
}
.t-slider__page { min-width: 100%; }
.t-slider__btn {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--color-navy); background: transparent;
  color: var(--color-navy); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.t-slider__btn:hover { background: var(--color-navy); color: #fff; }

/* ---------- FAQ accordion ---------- */
.faq-category h2 { margin-bottom: var(--space-4); }
.faq-category + .faq-category { margin-top: var(--space-7); }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.faq-item__question {
  width: 100%;
  text-align: left;
  background: var(--color-white);
  border: none;
  padding: var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq-item__question:hover { background: var(--color-bg-alt); }
.faq-item__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.faq-item__question[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); background: var(--color-gold); }
.faq-item__answer {
  padding: 0 var(--space-5);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.faq-item__answer[data-open="true"] {
  padding: 0 var(--space-5) var(--space-5);
  max-height: 1000px;
}

/* ---------- Programme course-structure accordion (reuses FAQ accordion JS/markup) ---------- */
/* Module content (learning outcomes + a full day-by-day list) runs much longer than a FAQ
   answer, so this variant needs a taller max-height ceiling than the base rule above. */
.course-item__answer[data-open="true"] {
  max-height: 6000px;
}
.course-day-label {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* ---------- Enroll page: summary sidebar + form layout ---------- */
/* Mobile: single column, source order (summary card first, then the
   notices/form), unchanged from before. Desktop: splits into a wider
   main column (form) + a narrower sticky summary sidebar on the right,
   the standard checkout-page pattern. Uses explicit grid-column/grid-row
   placement rather than relying on source order, so the DOM can stay in
   the same reading order at every width. */
.enroll-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .enroll-layout {
    grid-template-columns: 1fr 380px;
  }
  .enroll-main {
    grid-column: 1;
    grid-row: 1;
  }
  .enroll-summary {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--space-5);
  }
}
/* Static (non-hover-lifting) card variant for the summary panel, it's a
   reference panel, not a clickable card, so the usual .card hover lift
   doesn't apply. */
.card--static:hover {
  box-shadow: var(--shadow-sm);
  transform: none;
}
/* Scaled-up typography for the enroll summary card specifically, it's
   the single focal reference card in a sidebar (not one of many in a
   grid like programs.html/index.html), so it reads better bigger than
   the shared .program-card__* defaults used elsewhere. Scoped to
   .enroll-summary only; the shared classes themselves are untouched. */
.enroll-summary .badge { font-size: 0.8rem; }
.enroll-summary h3 { font-size: 1.6rem; }
.enroll-summary .text-muted { font-size: 1rem; }
.enroll-summary .program-card__meta { font-size: 1rem; gap: var(--space-2); }
.enroll-summary .program-card__price { font-size: 2rem; }
.enroll-summary .program-card__price-note { font-size: 0.95rem; }
/* The banner is bled to the card's edges via negative margins (see the
   inline style on .program-card__img in enroll.html). The shared
   .program-card__img rule sets an explicit width:100%, which (unlike
   width:auto) doesn't expand to absorb negative margins, so only the
   left edge reached the card edge and the right edge fell short by
   about 2x the padding amount. Overriding to width:auto here only
   (not in the shared rule, which is fine as-is for its other, non
   -negative-margin usages on programs.html/index.html) lets the box
   fill all available width the normal block-level way, bleeding flush
   on both sides. */
.enroll-summary .program-card__img { width: auto; }

/* ---------- Forms ---------- */
.form-field {
  margin-bottom: var(--space-5);
}
.form-field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  min-height: 44px;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-blue);
}
.form-field--required label::after { content: ' *'; color: var(--color-red); }
.form-hint { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy-dark);
  color: rgba(255,255,255,0.78);
  padding: var(--space-8) 0 var(--space-6);
  font-size: 0.95rem;
}
.site-footer h2 {
  color: var(--color-white);
  font-size: 1.05rem;
  margin-bottom: var(--space-4);
}
.site-footer a:hover { color: var(--color-gold); }
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}
.site-footer__logo { height: 40px; margin-bottom: var(--space-4); }
.site-footer__brand p { color: rgba(255,255,255,0.7); }
.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__contact li { line-height: 1.5; }

/* Click-to-copy email address (footer + contact page) */
.email-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}
.email-copy__badge {
  position: relative;
  top: -0.6em;
  margin-left: 2px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  border-radius: 50%;
}
.email-copy__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy-dark);
  color: var(--color-white);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}
.email-copy__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-navy-dark);
}
.email-copy:hover .email-copy__tooltip,
.email-copy:focus-visible .email-copy__tooltip {
  opacity: 1;
  visibility: visible;
}
.email-copy--copied .email-copy__tooltip {
  opacity: 1;
  visibility: visible;
  background: var(--color-gold-dark);
}
.email-copy--copied .email-copy__tooltip::after {
  border-top-color: var(--color-gold-dark);
}
.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.site-footer__badges img {
  height: 32px; width: auto;
  background: var(--color-white);
  border-radius: 4px;
  padding: 2px 6px;
}
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-5);
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
}
.site-footer__social a:hover { background: rgba(255,255,255,0.25); }
.site-footer__regnums { font-size: 0.8em; opacity: 0.75; }

/* Contact page social links */
.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-2);
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-navy);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.contact-social a:hover { background: var(--color-navy); color: #fff; }

/* Site-wide announcement banner */
/* ------------------------------------------------------------------
   Intake announcement bar: single-slide carousel cycling through the
   next 4 upcoming programme intakes, one at a time.
   Namespaced under .emz-intakebar / .emz-ib__* to avoid collisions.
   ------------------------------------------------------------------ */
.emz-intakebar {
  background: var(--color-navy-dark);
  padding: var(--space-3) var(--space-3);
}
.emz-ib__viewport {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* .emz-ib__track is the fixed clipping mask, it must NOT be the element
   that gets translateX()'d, since transforming an overflow:hidden element
   moves its own clip box along with it (the "window" slides away instead
   of the content sliding within it). .emz-ib__slides is the inner flex
   row that JS actually transforms; .emz-ib__track just clips it. */
.emz-ib__track {
  flex: 1;
  overflow: hidden;
}
.emz-ib__slides {
  display: flex;
}
.emz-ib__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.emz-ib__slide-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) var(--space-2);
  color: var(--color-white, #fff);
  text-decoration: none;
  line-height: 1.3;
  text-align: center;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.emz-ib__slide-link:hover,
.emz-ib__slide-link:focus-visible {
  background: rgba(255,255,255,0.08);
}
.emz-ib__slide-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.emz-ib__date {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.emz-ib__title {
  font-size: 0.9rem;
  font-weight: 600;
}
.emz-ib__meta {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.68);
}
.emz-ib__cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gold);
  white-space: nowrap;
}
.emz-ib__flag {
  background: var(--color-gold);
  color: var(--color-navy-dark);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  animation: emz-ib-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .emz-ib__flag { animation: none; }
  .emz-ib__track { transition: none !important; }
}
@keyframes emz-ib-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.emz-ib__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--color-white, #fff);
  cursor: pointer;
  transition: background 0.15s ease;
}
.emz-ib__arrow:hover { background: rgba(255,255,255,0.18); }
.emz-ib__arrow:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .emz-ib__title { font-size: 0.85rem; }
  .emz-ib__cta { display: none; }
}

.site-footer__bottom p { color: rgba(255,255,255,0.78); }
.site-footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 0.85rem; padding: var(--space-4) 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: var(--space-2); }

/* ---------- Page header (non-home) ---------- */
.page-header {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: var(--color-white);
  padding: var(--space-7) 0;
  min-height: 300px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.page-header .container { width: 100%; }
.page-header h1 { margin-bottom: var(--space-3); color: var(--color-white); }
.page-header p { color: rgba(255,255,255,0.82); max-width: 700px; font-size: 1.05rem; }
.breadcrumbs { color: rgba(255,255,255,0.65); }
.breadcrumbs a { color: rgba(255,255,255,0.85); }
.breadcrumbs li:not(:last-child)::after { color: rgba(255,255,255,0.35); }
.breadcrumbs a:hover { color: var(--color-gold); text-decoration: underline; }

/* page-header with hero image set via CMS - same treatment as .hero--has-image above */
.page-header--has-image::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(13, 42, 86, 0.85); z-index: 0;
}
.page-header--has-image .container { position: relative; z-index: 1; }

/* ---------- Misc content blocks ---------- */
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose ul { margin: var(--space-4) 0 var(--space-4) var(--space-5); list-style: disc; }
.prose li { margin-bottom: var(--space-2); }
.prose p { margin-top: var(--space-4); }
.schedule-label { font-weight: 600; margin-bottom: var(--space-1); }
.schedule-label + .schedule-dates { margin-top: var(--space-2); }

.prose .icon-list,
.icon-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.icon-list li {
  /* Was display:flex with the checkmark as a flex sibling of raw inline
     text/<strong> content. When that mixed inline content had to wrap
     (e.g. a bullet with a bold word mid-sentence), some browsers laid the
     text runs out as separate misaligned chunks instead of one flowing
     paragraph. Using an absolutely-positioned badge instead of flex avoids
     the anonymous-flex-item edge case entirely, the text now wraps as
     plain block content. */
  position: relative;
  padding-left: calc(22px + var(--space-3));
}
.icon-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.cta-band {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  color: var(--color-white);
  text-align: center;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(255,255,255,0.8); }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-gold);
  background: var(--color-navy);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}

.note-box {
  border-left: 4px solid var(--color-gold);
  background: var(--color-bg-alt);
  padding: var(--space-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem;
}

/* ---------- Payment mode selector (enroll.html) ---------- */
.payment-mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.payment-mode-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  flex: 1 1 200px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.payment-mode-option input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--color-navy);
}
.payment-mode-option:has(input:checked) {
  border-color: var(--color-navy);
  background: var(--color-bg-alt);
}

/* ---------- Blog ---------- */
.blog-grid { align-items: start; }

.blog-card {
  display: flex;
  flex-direction: column;
}
.blog-card img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  display: block;
}
.blog-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card__body h2 {
  font-size: 1.1rem;
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.35;
  /* Clamp to 2 lines; a longer title is cut short with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__body h2 a {
  color: var(--color-navy);
  text-decoration: none;
}
.blog-card__body h2 a:hover { color: var(--color-gold-dark); }
.blog-card__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
}
.blog-card__excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  flex: 1;
  /* Clamp to 3 lines; a longer excerpt is cut short with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.blog-card__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.blog-pagination__info {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.blog-pagination .btn.is-disabled,
.blog-pagination span.btn {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.blog-post__cover {
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
  aspect-ratio: 1200/630;
  object-fit: cover;
}
.blog-post__meta {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* ---------- Blog inline images (content-block images, not the cover) ----------
   The "size" percentage is set on the FIGURE itself (not the img), so the
   figcaption, which has no width of its own and just fills its figure,
   always matches the image's actual rendered width, no separate rules needed. */
.blog-inline-img {
  margin: var(--space-7) 0;
  max-width: 100%;
}
.blog-inline-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.blog-inline-img figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-align: center;
}
/* Size when wrap is "none": percentage of the full .prose column width */
.blog-inline-img--wrap-none.blog-inline-img--size-25 { width: 25%; }
.blog-inline-img--wrap-none.blog-inline-img--size-50 { width: 50%; }
.blog-inline-img--wrap-none.blog-inline-img--size-75 { width: 75%; }
.blog-inline-img--wrap-none.blog-inline-img--size-full { width: 100%; }
/* Size when floated left/right: percentage of the available half-column space
   (the column minus the gap margin), so two floated images at the same size
   sit flush side by side instead of one stretching to fill leftover space. */
.blog-inline-img--wrap-left.blog-inline-img--size-25,
.blog-inline-img--wrap-right.blog-inline-img--size-25 { width: calc((50% - var(--space-5)) * 0.25); }
.blog-inline-img--wrap-left.blog-inline-img--size-50,
.blog-inline-img--wrap-right.blog-inline-img--size-50 { width: calc((50% - var(--space-5)) * 0.5); }
.blog-inline-img--wrap-left.blog-inline-img--size-75,
.blog-inline-img--wrap-right.blog-inline-img--size-75 { width: calc((50% - var(--space-5)) * 0.75); }
.blog-inline-img--wrap-left.blog-inline-img--size-full,
.blog-inline-img--wrap-right.blog-inline-img--size-full { width: calc(50% - var(--space-5)); }
/* "Original" size: natural image size, only capped so it can't overflow its column/half-column */
.blog-inline-img--size-original { width: auto; }
.blog-inline-img--size-original img { width: auto; max-width: 100%; }
.blog-inline-img--wrap-left.blog-inline-img--size-original,
.blog-inline-img--wrap-right.blog-inline-img--size-original { max-width: calc(50% - var(--space-5)); }
/* Wrap: none = normal block, centered if narrower than the column; left/right = float, text flows around it */
.blog-inline-img--wrap-none { clear: both; }
.blog-inline-img--wrap-none:not(.blog-inline-img--size-full):not(.blog-inline-img--size-original) {
  margin-left: auto;
  margin-right: auto;
}
.blog-inline-img--wrap-left {
  float: left;
  margin-right: var(--space-5);
}
.blog-inline-img--wrap-right {
  float: right;
  margin-left: var(--space-5);
}
@media (max-width: 640px) {
  /* Floats fight small screens, drop back to a normal centered block */
  .blog-inline-img--wrap-left,
  .blog-inline-img--wrap-right {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}

/* ---------- Award highlight (about.html, e.g. Golden Eagle Award) ---------- */
.award-highlight-wrap {
  margin-top: var(--space-8);
}
.award-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.award-highlight__text {
  flex: 1 1 60%;
  max-width: 70%;
}
.award-highlight__photo {
  flex: 1 1 30%;
  max-width: 30%;
}
.award-highlight__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
@media (max-width: 640px) {
  .award-highlight__text,
  .award-highlight__photo {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ---------- Map / contact ---------- */
.contact-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.contact-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.contact-info-list li {
  display: flex;
  gap: var(--space-4);
}
.contact-info-list .icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
}
.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16/10;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Programme Calendar ---------- */
.emz-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.emz-cal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.emz-cal-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
/* Type-based colours: still used by the Full List table's Type column
   below the grid, a separate context from the grid cells (see the
   .emz-cal__cell .emz-cal-pill override further down, which repaints
   pills inside the grid to a neutral chip since the grid cell's own
   background now carries the programme colour instead). */
.emz-cal-dot--class,     .emz-cal-pill--class     { background: var(--color-blue); }
.emz-cal-dot--exam,      .emz-cal-pill--exam      { background: var(--color-red); }
.emz-cal-dot--revision,  .emz-cal-pill--revision  { background: var(--color-gold-dark); }
.emz-cal-dot--holiday,   .emz-cal-pill--holiday   { background: var(--color-red); }
.emz-cal-pill--note      { background: var(--color-text-muted); }
.emz-cal-pill--more      { background: var(--color-bg-alt-2); color: var(--color-text-muted); }
/* Legend swatches for the two programme colour families (each a
   7-shade gradient bar, lightest = the flagship/complete pathway,
   darkest = the last numbered module), replacing the old per-type dots
   for the grid legend now that grid cells are coloured by programme. */
.emz-cal-swatch {
  width: 30px; height: 10px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
}
.emz-cal-swatch--shariah {
  background: linear-gradient(to right, #2797E7, #1889DA, #1579C1, #1369A8, #105A8E, #0D4A75, #0A3A5C);
}
.emz-cal-swatch--ifp {
  background: linear-gradient(to right, #CC7919, #B86D17, #A36114, #8F5512, #7B480F, #663C0D, #52300A);
}

.emz-cal {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
}
.emz-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.emz-cal__title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--color-navy);
  text-align: center;
  flex: 1;
}
.emz-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(84px, 1fr));
  gap: 4px;
  min-width: 620px;
}
.emz-cal__dow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.emz-cal__cell {
  min-height: 92px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Days with no events: a solid, noticeably darker neutral fill (rather
     than the near-white default), so they read as clearly "inactive"
     next to the colourful programme-striped event days. */
  background: #A7AFB9;
}
.emz-cal__cell--empty {
  border-color: transparent;
  background: transparent;
}
.emz-cal__cell--has-events {
  /* Fallback only: the actual programme colour(s) are set per cell via
     an inline style (see calendar_cell_background()), which always
     overrides this when the cell has events. */
  background: var(--color-white);
}
.emz-cal__cell--has-events .emz-cal__daynum,
.emz-cal__cell--has-events .emz-cal-pill {
  color: var(--color-white);
}
/* Inside the grid, pills have no background of their own, no shading
   either, text relies on the grid cell's own programme colour behind it
   for contrast (per request). Higher specificity than the
   .emz-cal-pill--class/exam/revision/holiday rules above, so this wins
   without needing !important. Doesn't affect the Full List table below
   the grid, a separate context that keeps its own per-type pill colours. */
.emz-cal__cell .emz-cal-pill {
  background: transparent;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}
.emz-cal__cell--today {
  border-color: var(--color-navy);
  border-width: 2px;
}
.emz-cal__daynum {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}
.emz-cal-pill {
  display: block;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--color-white);
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emz-cal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.emz-cal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.emz-cal-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}
.emz-cal-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}
.emz-cal-table tbody tr:hover { background: var(--color-bg-alt); }
.emz-cal-table .emz-cal-pill {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.72rem;
}

@media (min-width: 640px) {
  .emz-cal__grid { min-width: 0; }
  .emz-cal__cell { min-height: 108px; }
  .emz-cal-pill { font-size: 0.72rem; }
}

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }