/* =========================================================
   Vienna German Courses — glassy, playful, modern
   ========================================================= */

:root {
  /* palette */
  --bg:           #F5F3FF;
  --bg-2:         #EEF2FF;
  --surface:      rgba(255, 255, 255, 0.72);
  --surface-2:    rgba(255, 255, 255, 0.55);
  --surface-solid:#FFFFFF;
  --ink:          #1B1535;
  --ink-soft:     #4A4670;
  --muted:        #8B87A8;
  --border:       rgba(99, 91, 168, 0.14);
  --border-strong:rgba(99, 91, 168, 0.28);

  --accent:       #6D28D9;       /* violet 700 */
  --accent-2:     #DB2777;       /* pink 600 */
  --accent-3:     #2563EB;       /* blue 600 */
  --accent-soft:  #EDE9FE;
  --accent-bg:    rgba(109, 40, 217, 0.08);

  --gold:         #B45309;
  --gold-bg:      #FEF3C7;
  --success:      #047857;
  --success-bg:   #D1FAE5;

  --grad-hero:    linear-gradient(135deg, #6D28D9 0%, #DB2777 50%, #F59E0B 100%);
  --grad-soft:    linear-gradient(135deg, rgba(109,40,217,0.10), rgba(219,39,119,0.08) 50%, rgba(37,99,235,0.10));
  --grad-mesh:    radial-gradient(at 12% 8%, rgba(109,40,217,0.18) 0px, transparent 50%),
                  radial-gradient(at 88% 12%, rgba(219,39,119,0.16) 0px, transparent 50%),
                  radial-gradient(at 50% 90%, rgba(37,99,235,0.16) 0px, transparent 50%),
                  radial-gradient(at 90% 80%, rgba(245,158,11,0.12) 0px, transparent 50%);

  /* type */
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --display: "Space Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  /* layout */
  --max:        1400px;
  --gutter:     2rem;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-pill:999px;
  --shadow-sm:  0 1px 2px rgba(27, 21, 53, 0.04), 0 1px 1px rgba(27, 21, 53, 0.03);
  --shadow-md:  0 8px 24px -8px rgba(27, 21, 53, 0.12), 0 2px 6px rgba(27, 21, 53, 0.04);
  --shadow-lg:  0 24px 48px -12px rgba(109, 40, 217, 0.18), 0 8px 16px -8px rgba(27, 21, 53, 0.08);
  --shadow-glow:0 0 0 4px rgba(109, 40, 217, 0.10);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:           #0B0817;
  --bg-2:         #120E26;
  --surface:      rgba(30, 25, 56, 0.65);
  --surface-2:    rgba(30, 25, 56, 0.45);
  --surface-solid:#1A1632;
  --ink:          #F4F1FF;
  --ink-soft:     #BDB6DC;
  --muted:        #7A739B;
  --border:       rgba(160, 142, 240, 0.14);
  --border-strong:rgba(160, 142, 240, 0.28);

  --accent:       #A78BFA;
  --accent-2:     #F472B6;
  --accent-3:     #60A5FA;
  --accent-soft:  rgba(167, 139, 250, 0.18);
  --accent-bg:    rgba(167, 139, 250, 0.12);

  --gold:         #FBBF24;
  --gold-bg:      rgba(251, 191, 36, 0.14);
  --success:      #34D399;
  --success-bg:   rgba(52, 211, 153, 0.14);

  --grad-hero:    linear-gradient(135deg, #A78BFA 0%, #F472B6 50%, #FBBF24 100%);
  --grad-soft:    linear-gradient(135deg, rgba(167,139,250,0.14), rgba(244,114,182,0.10) 50%, rgba(96,165,250,0.14));
  --grad-mesh:    radial-gradient(at 12% 8%, rgba(167,139,250,0.22) 0px, transparent 50%),
                  radial-gradient(at 88% 12%, rgba(244,114,182,0.18) 0px, transparent 50%),
                  radial-gradient(at 50% 90%, rgba(96,165,250,0.18) 0px, transparent 50%),
                  radial-gradient(at 90% 80%, rgba(251,191,36,0.10) 0px, transparent 50%);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 24px 48px -12px rgba(167, 139, 250, 0.30), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
  --shadow-glow:0 0 0 4px rgba(167, 139, 250, 0.20);

  color-scheme: dark;
}

[data-theme="dark"] .topstrip {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #06030F 0%, #0B0720 100%);
}
[data-theme="dark"] .subsidies-card {
  background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(245,158,11,0.06));
  color: #FCD34D;
}
[data-theme="dark"] .subsidies-card h4 { color: #FBBF24; }
[data-theme="dark"] .chip.active {
  background: var(--surface-solid);
  color: var(--ink);
  border-color: var(--border-strong);
}
[data-theme="dark"] .cta.secondary {
  background: var(--surface-2);
  color: var(--ink);
}
[data-theme="dark"] .cta.secondary:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 0.5rem;
  padding: 0;
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px) rotate(15deg);
  box-shadow: var(--shadow-md);
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }
[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }

/* ---------- language switcher ---------- */
.lang-wrap {
  position: relative;
  margin-left: 0.5rem;
  display: inline-block;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.7rem 0.4rem 0.6rem;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}
.lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.lang-btn .lang-flag { font-size: 16px; line-height: 1; }
.lang-btn .lang-chev { width: 12px; height: 12px; opacity: 0.6; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  /* Opaque background — the dropdown was using --surface (translucent
     rgba with backdrop-filter blur). On iOS Safari and over Leaflet
     tiles, the blur is unreliable and the menu reads as "transparent"
     with colours bleeding through. Solid is clearer everywhere. */
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  /* Must outrank the cookie-consent banner (z-index 1000) so the menu
     items remain clickable when both are visible. */
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.lang-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.lang-menu li:hover {
  background: var(--accent-bg);
  color: var(--accent);
}
.lang-menu li.is-current {
  background: var(--accent-soft);
  color: var(--accent);
}
.lang-menu li .lang-flag { font-size: 18px; line-height: 1; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* hide Google Translate's banner + tooltips */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget,
.goog-te-balloon-frame,
#goog-gt-tt,
.skiptranslate iframe {
  display: none !important;
  visibility: hidden !important;
}
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
font[style*="background-color"] { background: transparent !important; box-shadow: none !important; }


* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  background-image: var(--grad-mesh);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-2); text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--accent); }

/* ---------- top strip ---------- */
.topstrip {
  background: rgba(27, 21, 53, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topstrip-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.6rem var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.topstrip-inner span { opacity: 0.75; }

/* ---------- masthead ---------- */
.masthead {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Mobile nav drawer trap: <nav id="main-nav"> lives INSIDE .masthead,
   so when we promote it to position:fixed + z-index:1000, that 1000
   is trapped inside the masthead's stacking context. Globally the
   drawer renders at the masthead's z-index (50), well below the
   .nav-backdrop (999) which sits at the document root. Result: backdrop
   eats every tap meant for the menu items.
   Fix: while the drawer is open, promote .masthead above the backdrop.
   Side benefit — the header bar stays clear above the dim, which is
   the standard mobile-drawer UX (Slack, Gmail, etc.). Scoped to the
   .nav-drawer-open state so it doesn't permanently outrank other
   modals like the filter drawer / cookie banner. */
body.nav-drawer-open .masthead { z-index: 1001; }

/* Same trap, different symptom: the language dropdown (.lang-menu)
   lives inside .masthead. Its z-index:3000 is trapped in the
   masthead's stacking context, so globally it renders at the
   masthead's z-index 50. On /map.html the dropdown ends up BEHIND
   Leaflet's tile pane (z-index 200) and zoom controls (z-index 1000).
   Fix: while the dropdown is open, promote .masthead above Leaflet.
   `:has()` lets us detect the open state in pure CSS — no JS change
   needed. Supported in Chrome 105+ / Safari 15.4+ / Firefox 121+. */
.masthead:has(.lang-menu.open) { z-index: 1100; }
.masthead-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.brand-sub {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 400;
  color: var(--ink-soft);
}
.nav {
  display: flex;
  gap: 0.4rem;
  font-size: 13px;
  font-weight: 500;
  align-items: center;
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  transition: all 0.15s ease;
}
.nav a:hover {
  color: var(--accent);
  background: var(--accent-bg);
}
.nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Right-side cluster: language selector + theme toggle + (mobile)
   hamburger. Sits as a sibling of the nav so the lang+theme stay
   visible on mobile even when the nav itself collapses into a
   drawer. */
.masthead-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-toggle { display: none; }    /* hamburger is mobile-only */

/* ---------- Mobile nav drawer ----------
   Below 700px the .nav slides out from the right when the
   hamburger is tapped. Lang + theme stay outside the drawer
   so the user can change them without opening the menu. */
@media (max-width: 1024px) {
  /* Drawer pattern: hamburger nav, slide-out from right. Threshold
     bumped from 700px → 1024px so iPad (portrait + most landscapes)
     gets the same UX as phones. Above 1024px the inline horizontal
     nav reappears — that's normal laptop width. */
  .masthead-inner {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
  .brand-mark { font-size: 1.6rem; }
  .brand-sub  { font-size: 1rem; }

  /* The hamburger button. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .nav-toggle svg { width: 22px; height: 22px; }

  /* The nav becomes a slide-out drawer pinned to the right. */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(80vw, 320px);
    height: 100vh;
    height: 100dvh;
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 1rem 2rem;
    background: var(--surface-solid, #fff);
    border-left: 1px solid var(--border);
    box-shadow: 0 0 60px rgba(0,0,0,0.25);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(110%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    font-size: 16px;
  }
  .nav.open { transform: translateX(0); }
  .nav a {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border-bottom: 1px solid var(--border);
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.active { background: var(--accent-soft); color: var(--accent); }

  /* Backdrop styling — but NOT `display: block`. `hidden` HTML
     attribute drives visibility. Same trap explained near
     .filter-backdrop; do not add a display rule here. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 999;
    animation: fade-in 0.2s ease;
  }

  body.nav-drawer-open { overflow: hidden; }
}

/* ---------- hero ---------- */
.hero {
  max-width: var(--max);
  margin: 2.5rem auto 1.5rem;
  padding: 2.5rem var(--gutter);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  line-height: 1.02;
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero-title em {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.hero-lede {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 44ch;
  line-height: 1.55;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.hero-stats > div {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-stats > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hero-stat-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero-stat-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.4rem;
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem var(--gutter); margin-top: 1rem; }
}

/* ---------- toolbar ---------- */
.toolbar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.5rem var(--gutter) 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.search {
  flex: 1;
  min-width: 250px;
  position: relative;
}
.search input {
  width: 100%;
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  border-radius: var(--radius-pill);
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.search input::placeholder { color: var(--muted); }
.search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-solid);
  box-shadow: var(--shadow-glow);
}
.search::before {
  content: "";
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border: 1.8px solid var(--muted);
  border-radius: 50%;
  pointer-events: none;
}
.search::after {
  content: "";
  position: absolute;
  left: 1.9rem; top: 56%;
  width: 7px; height: 1.8px;
  background: var(--muted);
  transform: rotate(45deg);
  border-radius: 1px;
  pointer-events: none;
}
.toolbar select,
.toolbar button {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  padding: 0.7rem 1rem;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.toolbar select:hover,
.toolbar button:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.toolbar .reset-btn {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  padding: 0.7rem 0.6rem;
  box-shadow: none;
}
.toolbar .reset-btn:hover {
  background: var(--accent-bg);
  border-color: transparent;
  transform: none;
  box-shadow: none;
}
.result-count {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- layout ---------- */
.layout {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
}
/* Mobile filter drawer — desktop hides the trigger + close button.
   .filter-backdrop is intentionally NOT in this list: its visibility
   is driven by the `hidden` HTML attribute, which app.js toggles.
   Adding it to a CSS `display: none` rule (especially one that gets
   overridden to `display: block` inside @media) breaks the hidden
   attribute and leaves the backdrop visible from page load — which
   makes the entire screen un-clickable behind a translucent overlay.
   That was a real bug; don't reintroduce it. */
.filter-toggle { display: none; }
.filter-close  { display: none; }

@media (max-width: 1024px) {
  /* Filter drawer (courses listing). Bumped from 900px → 1024px to
     match the nav drawer threshold so iPad gets the same UX as
     phones — sidebar collapses, "≡ Filters" pill appears, drawer
     slides in over a backdrop. */
  .layout { grid-template-columns: 1fr; gap: 1rem; }

  /* The ≡ Filters button: full-width chip, mobile-only. */
  .filter-toggle {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    font: 600 14px/1.2 var(--sans);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-sm);
  }
  .filter-toggle:hover { border-color: var(--accent); color: var(--accent); }

  /* The aside becomes a slide-out drawer. We park it off-screen by
     default and translate it back when .open is set. position:fixed
     keeps it above the listing without taking layout space. */
  .filters {
    position: fixed;
    top: 0; left: 0;
    width: min(85vw, 380px);
    height: 100vh;
    height: 100dvh;            /* dynamic vh on iOS Safari */
    z-index: 1000;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(0,0,0,0.25);
    transform: translateX(-110%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    padding-top: 3.5rem;       /* room for the floating close button */
  }
  .filters.open { transform: translateX(0); }

  .filter-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
  }
  .filter-close:hover { color: var(--accent); border-color: var(--accent); }

  /* Backdrop styling — but NOT `display: block`. The `hidden`
     attribute on <div id="filter-backdrop"> controls visibility.
     When JS removes hidden, the div's default display (block)
     takes over with the position/background/etc. defined here. */
  .filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 999;
    animation: fade-in 0.2s ease;
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* Lock body scroll while the drawer is open. */
  body.filter-drawer-open { overflow: hidden; }
}

/* ---------- filters ---------- */
.filters {
  font-size: 14px;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.5rem 1.25rem 1rem;
  box-shadow: var(--shadow-md);
  align-self: start;
}
.filters-header {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  margin: 0.75rem 0 0.25rem;
  color: var(--ink);
}
.filter-group {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}
.filter-group:last-of-type { border-bottom: none; }
.filter-group h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.7rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-group h3 .badge {
  background: var(--grad-hero);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  user-select: none;
  transition: all 0.15s ease;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.chip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.chip.accent.active {
  background: var(--grad-hero);
  border-color: transparent;
  color: #fff;
}
.chip.gold.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.chip.success.active { background: var(--success); border-color: var(--success); color: #fff; }

.check-row { display: flex; flex-direction: column; gap: 0.4rem; }
.check-row label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 3px 4px;
  border-radius: 6px;
  transition: background 0.1s;
}
.check-row label:hover { background: var(--accent-bg); color: var(--accent); }
.check-row input { accent-color: var(--accent); }

.range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
}
.range-row input {
  width: 100%;
  min-width: 0;       /* date inputs have a native intrinsic min-width
                         that overflows narrow grid cells; reset it */
  max-width: 100%;
  padding: 0.5rem 0.5rem;
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--ink);
  border-radius: 10px;
  transition: all 0.15s;
}
/* Date pickers add a native indicator that bloats width — collapse it
   into the input's padding instead of letting it push past the cell. */
.range-row input[type="date"] {
  padding-right: 0.3rem;
}
.range-row input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 0;
  padding: 0;
  opacity: 0.55;
  cursor: pointer;
}
.range-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.range-row .sep { font-size: 12px; color: var(--muted); text-align: center; }

.districts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
/* On narrow viewports the 6-column grid squeezes the district
   numbers + names into illegibility (the audit flagged this). Drop
   to 4 cols at typical phone widths. */
@media (max-width: 480px) {
  .districts { grid-template-columns: repeat(4, 1fr); }
}
.dist {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  padding: 6px 0;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  background: var(--surface-solid);
  border-radius: 8px;
  transition: all 0.15s;
}
.dist:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.dist.active {
  background: var(--grad-hero);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* ---------- results ---------- */
.results { display: flex; flex-direction: column; gap: 0.75rem; }
.results-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--muted);
  padding: 4rem 0;
  text-align: center;
  line-height: 1.4;
}

.card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.5rem;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.card:hover::before { opacity: 1; }
.card:hover .card-title { color: var(--accent); }
.card > * { position: relative; z-index: 1; }

.level-block {
  text-align: center;
  background: var(--grad-hero);
  border-radius: var(--radius);
  padding: 0.9rem 0.5rem;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.level-num {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.level-sub {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  margin-top: 0.3rem;
}

.card-main { min-width: 0; }
.card-school {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* Shared data-source pill — used on the listing cards AND the about page */
.source-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.7;
  text-transform: lowercase;
  cursor: help;
  flex-shrink: 0;
}
.source-tag-submitted   { background: rgba(37, 99, 235, 0.10); color: var(--accent-3); }
.source-tag-live        { background: var(--success-bg); color: var(--success); }
.source-tag-static      { background: var(--gold-bg);    color: var(--gold);    }
.source-tag-placeholder { background: var(--accent-soft); color: var(--accent); }
.source-tag-static.is-stale {
  background: var(--accent-soft);
  color: var(--accent-2);
  border: 1px dashed var(--accent-2);
}
.card-title {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  transition: color 0.15s;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.card-meta .label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.tag {
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 9px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}
.tag.gold { background: var(--gold-bg); border-color: transparent; color: var(--gold); }
.tag.success { background: var(--success-bg); border-color: transparent; color: var(--success); }
.tag.online { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.card-price {
  text-align: right;
  white-space: nowrap;
  font-family: var(--serif);
}
.card-price-big {
  font-size: 1.9rem;
  line-height: 1;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.card-price-free {
  background: linear-gradient(135deg, #047857, #10B981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.card-price-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0.4rem;
  letter-spacing: 0.03em;
}
/* ---------- Sponsored placement strip ----------
   Lives at the top of the .results container, ABOVE the organic
   course cards. Disclosure rules baked into the visual treatment
   (§ 26 Mediengesetz / UWG):
     - Distinct background colour vs organic cards
     - Solid amber "ANZEIGE · SPONSORED" ribbon on every card
     - Bold section label calling out the strip as sponsored
   Schools whose courses don't match the user's current filter are
   excluded — see renderSponsoredStrip() in app.js. */
.sponsored-strip {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--ad-bg, rgba(234, 179, 8, 0.06));
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 14px;
}
.sponsored-strip-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b45309;
}
.sponsored-strip-label::before {
  content: "🏷  ";
}
.sponsored-strip-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  font-size: 11px; font-weight: 700;
  color: #b45309;
  background: rgba(234, 179, 8, 0.18);
  border-radius: 50%;
  cursor: help;
  letter-spacing: 0;
}
.sponsored-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.sponsored-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.sponsored-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.sponsored-card-anzeige {
  display: block;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 4px 10px;
  text-transform: uppercase;
}
.sponsored-card-body {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1rem 0.5rem;
  flex: 1;
}
.sponsored-card-logo {
  width: 56px; height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}
.sponsored-card-logo-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--accent);
  background: var(--accent-bg);
}
.sponsored-card-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sponsored-card-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.sponsored-card-message {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sponsored-card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 0.25rem;
}
.sponsored-card-cta {
  display: block;
  padding: 0.6rem 1rem 0.85rem;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .sponsored-strip {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.40);
}
[data-theme="dark"] .sponsored-strip-head,
[data-theme="dark"] .sponsored-strip-help { color: #fbbf24; }
[data-theme="dark"] .sponsored-strip-help { background: rgba(234, 179, 8, 0.22); }

@media (max-width: 600px) {
  .sponsored-strip-grid { grid-template-columns: 1fr; }
  .sponsored-card-body { padding: 0.85rem 0.85rem 0.4rem; }
}

@media (max-width: 700px) {
  .card { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.25rem; }
  .level-block { display: inline-flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0.8rem; width: fit-content; }
  .level-num { font-size: 1.4rem; }
  .level-sub { margin-top: 0; }
  .card-price { text-align: left; }
}

/* ---------- pagination ---------- */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 0;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
}
.pager button {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  padding: 0.6rem 1.3rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager button:not(:disabled):hover {
  background: var(--grad-hero);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---------- detail page ---------- */
.detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem var(--gutter) 4rem;
}
.detail-back {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 2rem;
  transition: all 0.15s;
}
.detail-back:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateX(-2px);
}
.detail-school {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.detail-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: -0.025em;
}
.detail-lede {
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 2.5rem;
  line-height: 1.55;
}
.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}
@media (max-width: 800px) {
  .detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  /* On phones the price card stickiness pins it mid-viewport
     (it sits in the *aside* column which is now below the main
     content). Un-stick — let it scroll naturally with the page. */
  .price-card { position: static; top: auto; }
}

/* Below ~500px the 130px-wide fact label column was eating half
   the row's width on small phones, leaving the value squeezed
   into a thin column. Stack label above value instead. */
@media (max-width: 500px) {
  .fact-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.75rem 0;
  }
}
.facts {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.5rem 1.25rem;
  box-shadow: var(--shadow-md);
}
.fact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.fact-row:last-child { border-bottom: none; }
.fact-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.15rem;
}
.fact-value { color: var(--ink); }

.price-card {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  position: sticky;
  top: 5rem;
  box-shadow: var(--shadow-lg);
}
.price-card-big {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.price-card-big.free {
  background: linear-gradient(135deg, #047857, #10B981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card-per {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0.4rem 0 1.3rem;
}
.cta {
  display: block;
  background: var(--grad-hero);
  color: #fff;
  padding: 0.9rem 1rem;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  margin-top: 0.5rem;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-md);
}
.cta:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.cta.secondary {
  background: var(--surface-solid);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.cta.secondary:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.cta-direct-link {
  display: block;
  text-align: center;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.3rem;
  border-radius: var(--radius-pill);
  transition: color 0.15s;
}
.cta-direct-link:hover {
  color: var(--accent);
  text-decoration: none;
}
.cta.cta-saved {
  background: var(--gold-bg);
  color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-sm);
}
.cta.cta-saved:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
[data-theme="dark"] .cta.cta-saved {
  background: var(--gold-bg);
  color: var(--gold);
  border-color: var(--gold);
}
[data-theme="dark"] .cta.cta-saved:hover {
  background: var(--gold);
  color: var(--bg);
}

.subsidies-card {
  margin-top: 1rem;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  color: #78350F;
  box-shadow: var(--shadow-sm);
}
.subsidies-card h4 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.subsidies-card ul { margin: 0.3rem 0 0; padding-left: 1.1rem; line-height: 1.6; }

.section-h {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
}

/* ---------- footer ---------- */
.footer {
  background: linear-gradient(180deg, var(--ink) 0%, #0F0B26 100%);
  color: #fff;
  padding: 3.5rem var(--gutter) 2rem;
  margin-top: 4rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(at 20% 0%, rgba(109,40,217,0.25) 0px, transparent 50%),
              radial-gradient(at 80% 0%, rgba(219,39,119,0.18) 0px, transparent 50%);
  pointer-events: none;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  position: relative;
}
@media (max-width: 1000px) {
  /* 4 columns get cramped between ~700-1000px — drop to brand + 3 evenly */
  .footer-inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
}
.footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
  color: #fff;
  opacity: 0.75;
}
.footer p, .footer li {
  font-size: 13px;
  color: #fff;
  opacity: 0.78;
  line-height: 1.65;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.footer a { color: #fff; opacity: 0.85; }
.footer a:hover { opacity: 1; color: #fff; }
.footer-brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.75rem;
}
.footer-fine {
  margin-top: 2.5rem;
  max-width: var(--max);
  font-size: 11px;
  opacity: 0.5;
  letter-spacing: 0.04em;
  position: relative;
}
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- loader ---------- */
.loading {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  padding: 4rem 0;
  text-align: center;
  font-size: 1.2rem;
}
.loading::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* ---------- source-legend bar above the listing ---------- */
.source-legend {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.6rem var(--gutter) 0.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}
.source-legend a {
  color: var(--accent);
  text-decoration: none;
  margin-left: auto;
  font-weight: 500;
}
.source-legend a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .source-legend a { margin-left: 0; }
}

/* ---------- active filter badges ---------- */
.active-filters {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 0.75rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.active-badge {
  display: inline-flex;
  align-items: center; gap: 0.4rem;
  padding: 4px 10px 4px 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.active-badge:hover {
  background: var(--accent);
  color: #fff;
}
.active-badge .active-x {
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  opacity: 0.7;
}
.active-badge:hover .active-x { opacity: 1; }
.active-badge-clear {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
}
.active-badge-clear:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ---------- saved-only toggle in the toolbar ---------- */
.view-toggle {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  color: var(--ink-soft);
  padding: 0.7rem 1rem;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center; gap: 0.4rem;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.view-toggle:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.view-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.view-toggle.is-on {
  background: var(--grad-hero);
  color: #fff;
  border-color: transparent;
}
.view-toggle .saved-icon {
  font-size: 14px;
  line-height: 1;
}

/* ---------- card save-star button ---------- */
.card-save {
  /* sits as the first item inside .card-price, above the price text */
  display: block;
  margin: 0 0 0.4rem auto;
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--border-strong);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s;
}
.card-save:hover { color: var(--gold); background: var(--gold-bg); transform: scale(1.1); }
.card-save.is-saved { color: var(--gold); }
.card-save.is-saved:hover { background: var(--gold-bg); }
@media (max-width: 700px) {
  /* On mobile the price column is full-width — keep the star left-aligned
     with the price label */
  .card-save { margin-left: 0; }
}

/* ---------- skeleton loading ---------- */
.skeleton-list {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.skeleton-card {
  height: 132px;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.skeleton-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--surface-2) 50%,
    transparent 100%
  );
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-card::after { animation: none; opacity: 0.5; }
}

/* Placeholder pill — used wherever a value isn't yet known and needs
   visual flagging (email addresses pending domain registration,
   Firmenbuchnummer pending Gewerbe registration, etc.). Originally
   inline in the legal pages; lifted to a global rule so about.html
   and the public-site contact lists can use it too. */
.placeholder {
  background: rgba(202,138,4,0.18);
  color: #b07b00;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  white-space: nowrap;
}
[data-theme="dark"] .placeholder { background: rgba(202,138,4,0.22); color: #f5c451; }

/* =========================================================
   Compare feature — button on cards, floating cart bar,
   side-by-side comparison table on compare.html.
   ========================================================= */

/* "+ Compare" text link — sits under the price/UE inside .card-price.
   Stays visually quiet by default (muted grey, small caps-ish display
   font); lights up in the accent colour when the course is in the cart. */
.card-compare-link {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 2px 0;
  background: none;
  border: none;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease;
  white-space: nowrap;
}
.card-compare-link:hover {
  color: var(--accent);
}
.card-compare-link.is-on {
  color: var(--accent);
  font-weight: 600;
}
.card-compare-link.shake {
  animation: cmpShake 0.36s ease-in-out;
  color: var(--gold);
}
@keyframes cmpShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

/* -------- floating compare bar at the bottom of viewport -------- */
#compare-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 1500;
  max-width: min(960px, calc(100vw - 1.5rem));
  width: 100%;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 0.7rem 0.9rem;
  font-family: var(--sans);
  animation: cmpBarIn 220ms ease-out;
}
@keyframes cmpBarIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.compare-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.compare-bar-count {
  font-family: var(--display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.compare-bar-count strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.compare-bar-label {
  margin-left: 4px;
}
.compare-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 200px;
  min-width: 0;
}
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem 0.3rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  max-width: 220px;
  transition: all 0.12s ease;
}
.compare-chip:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
}
.compare-chip-level {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  padding: 1px 6px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 999px;
  flex-shrink: 0;
}
.compare-chip-school {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.compare-chip-x {
  font-size: 14px;
  opacity: 0.55;
  margin-left: 2px;
}
.compare-chip:hover .compare-chip-x { opacity: 1; }
.compare-bar-actions {
  display: flex;
  gap: 0.4rem;
}
.compare-bar-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: all 0.12s ease;
}
.compare-bar-btn.ghost:hover {
  background: var(--surface-2);
  color: var(--accent);
}
.compare-bar-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.compare-bar-btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.compare-bar-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 640px) {
  #compare-bar { padding: 0.55rem 0.7rem; bottom: 0.5rem; }
  .compare-bar-count { font-size: 11px; }
  .compare-bar-chips { gap: 0.25rem; }
  .compare-chip { max-width: 140px; font-size: 11.5px; padding: 0.25rem 0.5rem; }
  .compare-bar-btn { padding: 0.4rem 0.7rem; font-size: 12px; }
}

/* -------- compare.html (the comparison page) -------- */
.compare-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem var(--gutter) 7rem;  /* extra bottom padding to clear compare-bar */
}
.compare-loading { padding: 4rem var(--gutter); text-align: center; color: var(--muted); }

.compare-empty {
  text-align: center;
  padding: 4rem 1rem;
  max-width: 560px;
  margin: 0 auto;
}
.compare-empty h1 {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.compare-empty p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.compare-cta {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.15s ease;
}
.compare-cta:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.compare-header { margin-bottom: 1.5rem; }
.compare-header h1 {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.compare-sub {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 1rem;
}
.compare-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.compare-back, .compare-clear {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.12s ease;
}
.compare-back:hover, .compare-clear:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  backdrop-filter: blur(8px);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cmp-table th, .cmp-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.cmp-table tr:last-child th,
.cmp-table tr:last-child td {
  border-bottom: none;
}
.cmp-attr-header {
  width: 180px;
  min-width: 140px;
  position: sticky;
  left: 0;
  background: var(--surface-solid);
  z-index: 2;
}
.cmp-attr {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--surface-solid);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 140px;
}
.cmp-header {
  vertical-align: top;
  min-width: 220px;
  background: var(--surface-2);
}
.cmp-header-missing { opacity: 0.6; }
.cmp-school {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.cmp-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.cmp-title a {
  color: var(--ink);
  text-decoration: none;
}
.cmp-title a:hover { color: var(--accent); }
.cmp-rating {
  display: inline-block;
  font-size: 12.5px;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.cmp-source { margin-top: 0.3rem; }
.cmp-missing {
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.cmp-section-row th {
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--display);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
}

.cmp-best {
  background: rgba(22, 163, 74, 0.10);
  color: #16a34a;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}
[data-theme="dark"] .cmp-best {
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
}
.cmp-yes { color: var(--success); font-weight: 600; }
.cmp-faint { color: var(--muted); font-style: italic; }
.cmp-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 0.2rem 0.2rem 0;
  white-space: nowrap;
}

.cmp-actions-row {
  background: var(--surface-2);
}
.cmp-action {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  margin: 0 0.4rem 0.4rem 0;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: all 0.12s ease;
}
.cmp-action.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cmp-action.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.cmp-action.ghost {
  background: var(--surface);
  color: var(--ink);
}
.cmp-action.ghost:hover {
  background: var(--surface-2);
  color: var(--accent);
  border-color: var(--accent);
}

.compare-footnote {
  margin-top: 1.5rem;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 720px;
}

/* ---------- Mobile stacked-cards comparison view ----------
   The side-by-side table fundamentally doesn't fit on a phone (4
   columns × 25 rows can't compress). compare.js emits a parallel
   .compare-cards block — one card per course, vertical stack — and
   we swap which one is visible via @media. No JS viewport detection;
   resize / print / reader-mode all work correctly. */
.compare-cards { display: none; }      /* desktop hides cards */

.cmp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.1rem 0.6rem;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(8px);
}
.cmp-card-missing { opacity: 0.7; padding-bottom: 1.2rem; }
.cmp-card-header { margin-bottom: 0.6rem; }
.cmp-card-header .cmp-title { font-size: 1.15rem; }
.cmp-card-section { margin-top: 1.1rem; }
.cmp-card-section h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.cmp-card-section dl { margin: 0; }
.cmp-card-row {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
  line-height: 1.45;
}
.cmp-card-row:last-child { border-bottom: none; }
.cmp-card-row dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  align-self: center;
}
.cmp-card-row dd { margin: 0; word-break: break-word; }
.cmp-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.cmp-card-actions .cmp-action { display: block; text-align: center; }

@media (max-width: 1024px) {
  /* Compare page: swap side-by-side table for stacked per-course
     cards. Bumped from 700px → 1024px so iPad gets the same UX —
     4 columns × 25 rows is just as cramped on iPad portrait as on
     a phone. */
  .compare-header h1 { font-size: 1.6rem; }
  .compare-sub { font-size: 13.5px; }
  .compare-table-wrap { display: none; }
  .compare-cards { display: block; }
  .compare-actions { flex-direction: column; align-items: stretch; }
  .compare-actions .compare-back,
  .compare-actions .compare-clear { text-align: center; }
}

/* ---------- Calendar export (course.html price-card) ----------
   Sits below "Save for later" in the price card. Two buttons —
   Google Calendar (anchor) and .ics download (button) — share the
   .cal-btn rule so they look identical. */
.calendar-export {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.calendar-export h4 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.cal-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0.55rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.cal-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cal-btn:active {
  transform: translateY(0);
}
.cal-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.cal-hint {
  margin: 0.5rem 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* =========================================================
   Funding eligibility wizard (funding.html)
   ========================================================= */
.wizard {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}

/* ---- Intro card ---- */
.wizard-intro {
  text-align: center;
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 3rem 2rem;
  box-shadow: var(--shadow-md);
}
.wizard-intro h1 {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--ink);
}
.wizard-lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto 2rem;
  max-width: 560px;
}
.wizard-start {
  display: inline-block;
  padding: 0.95rem 2.4rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-md);
}
.wizard-start:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.wizard-disclaimer-small {
  margin-top: 1.5rem;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- Progress bar ---- */
.wizard-progress {
  position: relative;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.wizard-progress-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.wizard-step-label {
  text-align: right;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

/* ---- Question ---- */
.wizard-flow {
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.wizard-q-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--ink);
  line-height: 1.25;
}
.wizard-q-help {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.wizard-options {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wizard-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 1rem 1.2rem;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.wizard-opt:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  transform: translateX(2px);
}
.wizard-opt.is-selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.wizard-opt-label { flex: 1; }
.wizard-opt-arrow {
  font-size: 18px;
  opacity: 0.4;
  transition: opacity 0.15s, transform 0.15s;
}
.wizard-opt:hover .wizard-opt-arrow {
  opacity: 1;
  color: var(--accent);
  transform: translateX(3px);
}

/* ---- Nav (back / restart) ---- */
.wizard-nav {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.wizard-back,
.wizard-restart {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.12s ease;
}
.wizard-back:hover,
.wizard-restart:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Results ---- */
.wizard-results {
  /* No padding wrapper — children control their own spacing */
}
.results-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.results-header h1 {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
.results-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 auto 1.5rem;
  max-width: 600px;
}
.results-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.results-restart,
.results-browse {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: all 0.15s ease;
}
.results-restart {
  background: none;
  color: var(--ink-soft);
}
.results-restart:hover { color: var(--accent); border-color: var(--accent); }
.results-browse {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.results-browse:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.results-section {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* ---- Program card ---- */
.program-card {
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 14px;
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
.program-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.program-card.program-rank-match  { border-left-color: var(--success); }
.program-card.program-rank-maybe  { border-left-color: var(--gold); }

.program-rank-badge {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.program-rank-badge-match {
  background: var(--success-bg);
  color: var(--success);
}
.program-rank-badge-maybe {
  background: var(--gold-bg);
  color: var(--gold);
}

.program-header h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
.program-tagline {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.program-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0.8rem 0 1rem;
  padding: 0.8rem 1rem;
  background: var(--accent-bg);
  border-radius: 8px;
}
.program-facts dt {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-top: 2px;
}
.program-facts dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.program-note {
  font-style: italic;
}

.program-next-heading {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 1rem 0 0.5rem;
}
.program-next {
  margin: 0;
  padding-left: 1.4rem;
}
.program-next li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.program-next li a {
  color: var(--accent);
}

.program-link {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.12s ease;
}
.program-link:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* "Why these don't fit" details/summary */
.results-details {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.results-details summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  user-select: none;
}
.results-details summary:hover { color: var(--accent); }
.results-nolist {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}
.results-nolist li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.results-footnote {
  margin-top: 2rem;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 640px;
}

/* Mobile */
@media (max-width: 600px) {
  .wizard { padding: 1.5rem 1rem 3rem; }
  .wizard-intro { padding: 2rem 1.2rem; }
  .wizard-intro h1 { font-size: 1.8rem; }
  .wizard-flow { padding: 1.5rem 1.2rem; }
  .wizard-q-title { font-size: 1.4rem; }
  .wizard-opt { padding: 0.85rem 1rem; font-size: 14.5px; }
  .program-card { padding: 1.2rem; }
  .program-facts { grid-template-columns: 1fr; padding: 0.7rem 0.9rem; }
  .program-facts dt { padding-top: 0; }
  .results-header h1 { font-size: 1.7rem; }
}

/* ---- Funding guide on funding.html (below the wizard intro) ---- */
.funding-guide {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.funding-guide-header {
  margin-bottom: 2rem;
}
.funding-guide-header h2 {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.funding-guide-header p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.funding-program {
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.funding-program:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.funding-program h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0 0 0.6rem;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.funding-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 3px 9px;
  border-radius: 999px;
}
.funding-program p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}
.funding-program p:last-child { margin-bottom: 0; }
.funding-program strong { color: var(--ink); }
.funding-tip {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  font-size: 13.5px !important;
  font-family: var(--sans);
}

@media (max-width: 600px) {
  .funding-guide { margin-top: 2rem; padding-top: 1.8rem; }
  .funding-guide-header h2 { font-size: 1.5rem; }
  .funding-program { padding: 1.1rem 1.2rem; }
  .funding-program h3 { font-size: 1.2rem; }
}

/* =========================================================
   Map view (map.html) — Leaflet-based
   ========================================================= */
.body-map { overflow: hidden; }   /* prevent body scroll behind map */

.map-page {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - 130px);     /* full viewport below the masthead */
  border-top: 1px solid var(--border);
}

/* Sidebar */
.map-sidebar {
  background: var(--surface-solid);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1.3rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.map-stats {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.map-stat-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--border);
}
.map-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.map-stat-row-soft .map-stat-num { color: var(--ink-soft); }
.map-stat-num {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
}
.map-stat-label {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.map-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.map-filter-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}
.map-filter-select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-family: var(--sans);
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.map-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.map-filter-reset {
  margin-top: 0.6rem;
  padding: 0.55rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.12s ease;
}
.map-filter-reset:hover { border-color: var(--accent); color: var(--accent); }

.map-help {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.map-help p { margin: 0 0 0.6rem; }
.map-help ul { margin: 0; padding-left: 1.1rem; }
.map-help li { margin-bottom: 0.3rem; }
.map-help-attr {
  margin-top: 0.8rem;
  font-size: 11px;
  color: var(--muted);
}
.map-help-attr a { color: var(--accent); }

/* Map canvas */
.map-canvas-wrap {
  position: relative;
  background: var(--bg-2);
}
.map-canvas {
  width: 100%;
  height: 100%;
  background: var(--bg-2);
}
.map-loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.8rem 1.4rem;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--display);
  font-size: 13px;
  color: var(--ink-soft);
  box-shadow: var(--shadow-md);
}

/* Leaflet attribution control — make it match the rest of the site */
.leaflet-control-attribution {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  background: rgba(255,255,255,0.85) !important;
  padding: 2px 6px !important;
}
[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(40,30,70,0.85) !important;
  color: var(--ink-soft) !important;
}
[data-theme="dark"] .leaflet-control-attribution a { color: var(--accent) !important; }

/* Popup styling — override Leaflet's defaults */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  background: var(--surface-solid) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
}
.leaflet-popup-content {
  margin: 0 !important;
  font-family: var(--sans) !important;
  line-height: 1.5 !important;
}
.leaflet-popup-tip {
  background: var(--surface-solid) !important;
}
.leaflet-popup-close-button {
  color: var(--ink-soft) !important;
  padding: 6px 8px !important;
  font-size: 18px !important;
}

.map-popup { padding: 1rem 1.1rem; }
.map-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.map-popup-header h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}
.map-popup-rating {
  font-size: 12px;
  color: var(--gold);
  white-space: nowrap;
  font-weight: 600;
}
.map-popup-meta {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
}
.map-popup-transit {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.map-popup-count {
  font-size: 13px;
  color: var(--ink);
  margin: 0.4rem 0;
}
.map-popup-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  border-top: 1px solid var(--border);
}
.map-popup-list li { border-bottom: 1px solid var(--border); }
.map-popup-list a {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 12.5px;
  transition: background 0.1s;
}
.map-popup-list a:hover { background: var(--accent-bg); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.map-popup-level {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 2px 5px;
  border-radius: 4px;
  text-align: center;
}
.map-popup-title {
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-popup-price {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.map-popup-more {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  margin: 0.3rem 0 0.5rem;
}
.map-popup-site {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--accent);
  color: #fff !important;
  border-radius: 6px;
  text-decoration: none;
}
.map-popup-site:hover { background: var(--accent-2); }

/* Drawer trigger + close — desktop hides both. The backdrop's
   visibility is driven by its `hidden` HTML attribute (toggled
   by map.js); CSS must NOT compete with that. See the matching
   note above the .filter-* rules. */
.map-filter-toggle, .map-filter-close { display: none; }

/* Mobile — sidebar becomes a slide-out drawer (matches the courses
   page filter UX). Previously the sidebar was clipped to 240px above
   the map and forced internal scrolling for filters — usable but
   claustrophobic. The drawer pattern gives users the full screen
   height when interacting with filters, then gets out of the way. */
@media (max-width: 1024px) {
  /* Map page mobile/tablet layout: two rows — filter toggle pill
     above, map filling everything below. Sidebar + backdrop are
     position:fixed so they don't occupy grid tracks. Bumped from
     700px → 1024px so iPad portrait (where a 300px sidebar would
     take ~40% of the screen) gets the drawer pattern instead. */
  .map-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: calc(100vh - 110px);
  }

  .map-filter-toggle {
    /* Normal flow inside the grid — was position:absolute, which
       fell back to positioning relative to the viewport (no
       positioned ancestor) and parked itself over the masthead /
       logo at top-left. Now it sits cleanly as a strip above the
       map canvas. */
    display: block;
    margin: 0.6rem 0.6rem 0;
    padding: 0.6rem 0.9rem;
    font: 600 13px/1.2 var(--sans);
    color: var(--ink);
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    text-align: left;
  }
  .map-filter-toggle:hover { border-color: var(--accent); color: var(--accent); }
  /* Tighten the map canvas wrap so the map butts cleanly against
     the toggle above. */
  .map-canvas-wrap { min-height: 0; }

  .map-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: min(85vw, 380px);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    /* Must outrank Leaflet's .leaflet-top/.leaflet-bottom (z-index 1000)
       — otherwise the zoom +/- buttons render on top of the drawer. */
    z-index: 1100;
    border-right: 1px solid var(--border);
    border-bottom: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(0,0,0,0.25);
    transform: translateX(-110%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    padding-top: 3.5rem;
  }
  .map-sidebar.open { transform: translateX(0); }

  .map-filter-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
  }
  .map-filter-close:hover { color: var(--accent); border-color: var(--accent); }

  /* No `display: block` — `hidden` attribute drives visibility.
     Same z-index trap as the sidebar: must outrank Leaflet
     controls (z-index 1000) so the zoom +/- buttons get dimmed
     instead of poking through. */
  .map-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 1099;
    animation: fade-in 0.2s ease;
  }

  body.map-filter-drawer-open { overflow: hidden; }

  .map-stats { flex-direction: column; gap: 0.4rem 1.5rem; padding-bottom: 0.5rem; }
  .map-stat-num { font-size: 1.5rem; }
  .map-help { display: none; }
}

/* ---- Custom map marker (divIcon — no PNG dependency) ---------------
   A solid circle in the site's accent colour with a white border
   ring + drop shadow. Hover lifts it a touch so users see it's
   clickable. Sits dead-centre on its lat/lng, not pin-anchored. */
.map-pin {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.map-pin:hover { transform: scale(1.15); z-index: 1000; }
.map-pin .map-pin-dot {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(27, 21, 53, 0.45), 0 0 0 1px rgba(109, 40, 217, 0.30);
}
[data-theme="dark"] .map-pin .map-pin-dot {
  border-color: #fafafa;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(167, 139, 250, 0.35);
}

/* ---- Map filter sidebar — expanded (chips, toggles, schools list) ----
   Mirrors the courses-page filter UX in a vertical sidebar that
   scrolls. Keep typography compact since space is tight (~270px wide
   after sidebar padding). */

.map-search-input {
  width: 100%;
  padding: 0.55rem 0.8rem;
  font-family: var(--sans);
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 1rem;
}
.map-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.map-filter-section {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}
.map-filter-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.map-filter-section h4 {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

/* Quick toggles */
.map-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.map-toggle input[type=checkbox] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.map-toggle span { user-select: none; }

/* Chip groups */
.map-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.map-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.map-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.map-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.map-chip-group-numeric .map-chip {
  min-width: 26px;
  padding: 0.32rem 0.5rem;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
}

/* Price range pair */
.map-range-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.map-range-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
}
.map-range-input:focus {
  outline: none;
  border-color: var(--accent);
}
.map-range-sep {
  font-family: var(--display);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Schools checkbox list */
.map-checkbox-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.4rem 0.5rem;
}
.map-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.2rem;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.map-checkbox-row:hover { background: var(--accent-bg); }
.map-checkbox-row input[type=checkbox] {
  accent-color: var(--accent);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.map-checkbox-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On mobile the sidebar collapses to a horizontal scrolling strip;
   tighten everything more aggressively. */
@media (max-width: 1024px) {
  /* Tighten spacing inside the map filter drawer sections.
     Threshold matches the drawer breakpoint above. */
  .map-filter-section { padding-top: 0.6rem; margin-top: 0.6rem; }
  .map-filter-section h4 { margin-bottom: 0.35rem; font-size: 10.5px; }
  .map-checkbox-list { max-height: 140px; }
}

/* =========================================================
   Course reviews — block on course.html + submission modal
   ========================================================= */
.reviews-block {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.reviews-loading {
  color: var(--muted);
  font-style: italic;
  font-size: 13.5px;
  margin: 0.5rem 0;
}
.reviews-empty {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
.reviews-empty-cta {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 0.3rem;
}
.reviews-empty-cta:hover { text-decoration: underline; }

.reviews-aggregate {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  background: var(--accent-bg);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.reviews-avg-num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.reviews-avg-stars {
  color: #f5a623;
  font-size: 18px;
  letter-spacing: 2px;
}
.reviews-avg-count {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.reviews-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.review {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.review:first-child { border-top: none; padding-top: 0; }
.review-rating {
  color: #f5a623;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 0.4rem;
}
.review-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 0.45rem;
  white-space: pre-wrap;
}
.review-meta {
  font-size: 12.5px;
  color: var(--muted);
}
.reviews-more {
  margin-top: 1rem;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

/* ---- School's reply to a review (public) ---- */
.review-reply {
  margin-top: 0.85rem;
  margin-left: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--bg-soft, #f6f7f9);
  border-left: 3px solid var(--accent, #2563eb);
  border-radius: 6px;
}
.review-reply-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 13px;
  margin-bottom: 0.35rem;
}
.review-reply-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #2563eb);
  background: var(--accent-bg, rgba(37, 99, 235, 0.08));
  border-radius: 3px;
}
.review-reply-head strong { color: var(--fg, #111); }
.review-reply-date { color: var(--muted); font-size: 12.5px; }
.review-reply-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg, #111);
}
.review-reply-text p { margin: 0 0 0.5rem 0; }
.review-reply-text p:last-child { margin-bottom: 0; }

/* ---- Submission modal ---- */
.review-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 40, 0.55);
  backdrop-filter: blur(3px);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: reviewFadeIn 180ms ease-out;
}
@keyframes reviewFadeIn { from { opacity: 0; } to { opacity: 1; } }
.review-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem 2rem;
  box-shadow: 0 32px 64px -16px rgba(20, 15, 40, 0.5);
}
.review-modal-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  width: 32px; height: 32px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.review-modal-close:hover { color: var(--accent); }
.review-modal h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.review-modal-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.review-rating-pick {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}
.review-rating-pick legend {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 0;
  margin: 0 0 0.5rem;
}
.review-rating-stars {
  display: flex;
  gap: 0.3rem;
  font-size: 30px;
  line-height: 1;
}
.review-rating-star {
  cursor: pointer;
  color: rgba(245, 166, 35, 0.25);
  transition: color 0.1s;
}
.review-rating-star input { position: absolute; opacity: 0; pointer-events: none; }
.review-rating-star:hover,
.review-rating-star:hover ~ .review-rating-star {
  /* CSS-only hover star fill — :has() would be cleaner but isn't
     reliable on Safari < 15.4. We use sibling-walk on the natural
     LTR direction below by reversing the list visually via flex. */
}
.review-rating-stars {
  /* Reverse so :hover affects current + earlier (visually leftward)
     using ~ selector. */
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.review-rating-star:hover,
.review-rating-star:has(input:checked),
.review-rating-star:hover ~ .review-rating-star,
.review-rating-star:has(input:checked) ~ .review-rating-star {
  color: #f5a623;
}

.review-field {
  display: block;
  margin-bottom: 0.9rem;
}
.review-field > span {
  display: block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.review-field > span em {
  font-style: normal;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.4rem;
  color: var(--muted);
  font-size: 11px;
}
.review-field input[type=text],
.review-field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-family: var(--sans);
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.review-field input[type=text]:focus,
.review-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.review-field.review-confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: var(--accent-bg);
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  margin: 1rem 0 1.2rem;
}
.review-field.review-confirm > span {
  display: block;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
}
.review-field.review-confirm input[type=checkbox] {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 16px; height: 16px;
  flex-shrink: 0;
}

.review-form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.review-cancel, .review-submit {
  padding: 0.6rem 1.2rem;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.review-cancel {
  background: none;
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.review-cancel:hover { border-color: var(--accent); color: var(--accent); }
.review-submit {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.review-submit:hover { background: var(--accent-2); border-color: var(--accent-2); }
.review-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.review-form-status {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
}
.review-form-status-info { background: var(--accent-bg); color: var(--accent); }
.review-form-status-ok   { background: var(--success-bg); color: var(--success); }
.review-form-status-err  { background: rgba(220,38,38,0.10); color: #dc2626; }

@media (max-width: 600px) {
  .review-modal { padding: 1.3rem 1.2rem; }
  .review-modal h2 { font-size: 1.3rem; }
  .review-rating-stars { font-size: 26px; }
}

/* =========================================================
   School profile page (school.html)
   ========================================================= */

.school-loading,
.school-error {
  max-width: 720px;
  margin: 4rem auto;
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--ink-soft);
}
.school-error h1 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1rem;
}
.school-back {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

/* ---- Hero ---- */
.school-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: 4rem var(--gutter) 2rem;
  background: var(--grad-soft);
  border-bottom: 1px solid var(--border);
}
.school-hero.has-image {
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 360px;
}
.school-hero.has-image .school-hero-name,
.school-hero.has-image .school-hero-tagline,
.school-hero.has-image .school-hero-stats { color: #fff; }
.school-hero.has-image .school-hero-stats strong { color: #fff; }
.school-hero.has-image .school-hero-stats span { color: rgba(255,255,255,0.85); }

.school-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}
.school-hero-logo {
  display: block;
  height: 64px;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.92);
  padding: 0.5rem;
  border-radius: 12px;
}
.school-hero-name {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.school-hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  margin: 0 0 1.5rem;
  max-width: 680px;
  color: var(--ink-soft);
}
.school-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.2rem;
}
.school-hero-stats > div { display: flex; align-items: baseline; gap: 0.4rem; }
.school-hero-stats strong {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.school-hero-stats span {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Promos ---- */
.school-promos {
  max-width: var(--max);
  margin: 1.5rem auto 0;
  padding: 0 var(--gutter);
}
.school-promo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.04));
  border: 1px solid rgba(245,158,11,0.30);
  border-radius: 12px;
  margin-bottom: 0.6rem;
}
.school-promo-icon { font-size: 20px; line-height: 1; }
.school-promo-body { flex: 1; }
.school-promo-body p { margin: 0; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.school-promo-body small { color: var(--ink-soft); font-size: 12px; }
.school-promo-cta {
  padding: 0.4rem 0.9rem;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Layout ---- */
.school-layout {
  max-width: var(--max);
  margin: 2rem auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
}
.school-main { min-width: 0; }
.school-side { display: flex; flex-direction: column; gap: 1rem; }

.school-section {
  margin-bottom: 2.5rem;
}
.school-section h2 {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--ink);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.school-section h3 {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 1.5rem 0 0.5rem;
}
.school-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.school-section-head h2 { border: none; margin: 0; padding: 0; }
.school-cta-link {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.school-cta-link:hover { text-decoration: underline; }
.school-prose p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.school-empty { color: var(--muted); font-style: italic; }

.school-course-count {
  display: inline-block;
  font-family: var(--display);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* ---- Quick facts dl ---- */
.school-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.school-facts dt {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-top: 2px;
}
.school-facts dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
}

/* ---- Trial-lesson callout ---- */
.school-trial {
  background: linear-gradient(135deg, var(--accent-bg), rgba(167,139,250,0.04));
  border-left: 4px solid var(--accent);
  padding: 1rem 1.4rem;
  border-radius: 10px;
}
.school-trial h3 { margin-top: 0; color: var(--accent); }
.school-trial p { font-size: 14.5px; color: var(--ink); line-height: 1.6; margin: 0; }

/* ---- Teachers ---- */
.school-teachers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.school-teacher {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.school-teacher-img {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.7rem;
  background: var(--surface-2);
}
.school-teacher-img-blank {
  background: linear-gradient(135deg, var(--accent-bg), var(--accent-soft));
  display: flex; align-items: center; justify-content: center;
}
.school-teacher h4 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 0.2rem;
  color: var(--ink);
}
.school-teacher-title {
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.school-teacher-bio {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- FAQs ---- */
.school-faqs { display: flex; flex-direction: column; gap: 0.5rem; }
.school-faq {
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.school-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}
.school-faq[open] summary { margin-bottom: 0.5rem; }

/* ---- Reviews on school page (reuses some review classes) ---- */
.school-reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.school-reviews-head h2 { border: none; margin: 0; padding: 0; }

/* ---- Sidebar cards ---- */
.school-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.school-card h4 {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}
.school-side-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 0.9rem;
  margin: 0;
  font-size: 13.5px;
}
.school-side-facts dt {
  color: var(--muted);
  font-weight: 500;
}
.school-side-facts dd { margin: 0; color: var(--ink); word-break: break-word; }
.school-side-facts a { color: var(--accent); text-decoration: none; word-break: break-all; }
.school-side-facts a:hover { text-decoration: underline; }

.school-hours {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0;
  font-size: 13px;
}
.school-hours dt {
  font-family: var(--mono);
  color: var(--ink-soft);
  font-size: 11.5px;
}
.school-hours dd { margin: 0; color: var(--ink); }
.school-hours .muted { color: var(--muted); font-style: italic; }

.school-social { list-style: none; padding: 0; margin: 0; }
.school-social li { padding: 0.25rem 0; }
.school-social a {
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.school-social a:hover { color: var(--accent); }

.school-ratings-card { background: linear-gradient(135deg, var(--accent-bg), transparent); }
.school-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
}
.school-rating-row:last-child { border-bottom: none; }
.school-rating-label {
  font-family: var(--display);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.school-rating-stars {
  color: #f5a623;
  font-weight: 600;
  font-size: 14px;
}
.school-rating-stars small { color: var(--muted); font-weight: 400; }

.school-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.school-tag {
  display: inline-block;
  padding: 3px 9px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- Courses grid ---- */
.school-courses-section {
  max-width: var(--max);
  margin: 0 auto 2rem;
  padding: 0 var(--gutter);
}
.school-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
}
.school-course-card {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s ease;
}
.school-course-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.school-course-level {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  background: var(--accent-bg);
  text-align: center;
  padding: 0.5rem 0;
  border-radius: 6px;
}
.school-course-body h3 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 0.2rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.school-course-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 0;
}
.school-course-price {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.school-course-free { color: var(--success); }
.school-course-more {
  margin-top: 0.8rem;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

/* ---- Photos ---- */
.school-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.school-photo {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.school-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.school-photo figcaption {
  padding: 0.5rem 0.7rem;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--surface-solid);
}

/* ---- Map ---- */
.school-map {
  width: 100%;
  height: 360px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-2);
  max-width: var(--max);
  margin: 0 auto;
}

.school-footer-note {
  max-width: var(--max);
  margin: 2rem auto;
  padding: 1rem var(--gutter);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}
.school-footer-note a { color: var(--accent); }

/* Mobile */
@media (max-width: 880px) {
  .school-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .school-side { order: -1; }   /* contact card up top on mobile */
  .school-hero { padding-left: 1rem; padding-right: 1rem; }
  .school-section h2 { font-size: 1.4rem; }
}

/* Phone-width school page tightening (the audit flagged the
   880px breakpoint as the only one — hero stats, course grid,
   teacher cards all stayed desktop-sized below it). */
@media (max-width: 600px) {
  .school-hero {
    padding: 2.5rem 1rem 2rem;
    min-height: auto;
  }
  .school-hero-name { font-size: 1.85rem; line-height: 1.15; }
  .school-hero-tagline { font-size: 1rem; }
  .school-hero-logo { width: 64px; height: 64px; }
  /* Stats wrap to two rows of two on phones instead of a single
     squished row of four. */
  .school-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1rem;
    font-size: 13px;
  }
  .school-hero-stats strong { font-size: 1.3rem; }

  .school-section { padding-left: 1rem; padding-right: 1rem; }
  .school-section h2 { font-size: 1.25rem; }

  /* Teacher cards stack on phone; the 2-col grid was always too
     tight for the headshot + bio at this width. */
  .school-teachers { grid-template-columns: 1fr; }
  /* Photo gallery 2-column on phone instead of 3 */
  .school-photos { grid-template-columns: repeat(2, 1fr); }
  /* Course cards in the "Courses at this school" section: single
     column on phone (was awkwardly trying to stay 2-col). */
  .school-course-grid { grid-template-columns: 1fr; }
}

.card-school-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s;
}
.card-school-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------------
   Pro badge — small marker on cards / popups / hero for Pro schools
   --------------------------------------------------------------------- */
.pro-badge {
  display: inline-block;
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 0.35rem;
  vertical-align: 0.05em;
  cursor: help;
}
.pro-badge-hero {
  font-size: 13px;
  padding: 2px 10px;
  vertical-align: 0.18em;
  background: rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .pro-badge {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

/* ---------------------------------------------------------------------
   Inquiry form (school.html + course.html, Basic+ schools only)
   --------------------------------------------------------------------- */
.inquiry-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.inquiry-card-h {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.inquiry-card-lede {
  margin: 0 0 0.85rem;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.inq-course-line {
  font-size: 13px;
  background: rgba(0,0,0,0.04);
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  margin: 0 0 0.85rem;
}

.inquiry-form { display: flex; flex-direction: column; gap: 0.85rem; }
.inq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.inq-field { display: flex; flex-direction: column; gap: 0.25rem; }
.inq-field-wide { grid-column: 1 / -1; }
.inq-field > span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.inq-field small { font-weight: 400; color: var(--muted); }
.inq-field input,
.inq-field select,
.inq-field textarea {
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--ink);
  width: 100%;
}
.inq-field textarea { resize: vertical; min-height: 5em; }
.inq-field input:focus,
.inq-field select:focus,
.inq-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* Honeypot: invisible to humans, present in DOM for bots to fill.
   `display:none` is detectable; off-screen-positioning is the
   conventional trick. */
.inq-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.inq-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.inq-consent input { margin-top: 0.2rem; flex-shrink: 0; }
.inq-consent a { color: var(--accent); }

.inq-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.inq-submit {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.inq-submit:hover { filter: brightness(1.08); }
.inq-submit:disabled { opacity: 0.6; cursor: progress; }
.inq-status {
  font-size: 13px;
  color: var(--muted);
}
.inq-status-busy  { color: var(--ink-soft); }
.inq-status-error { color: #DC2626; }

/* Mobile: stack the grid so 320px screens aren't crammed. */
@media (max-width: 600px) {
  .inq-grid { grid-template-columns: 1fr; }
}