/* =====================================================================
   Public pages (templates/pages/index.html, templates/pages/faq.html) —
   builds on the shared design system in static/css/style.css.
   Some classes below (.hero-v2/.hero-v2-sm, .faq-search, .faq-tabs/
   .faq-tab, .campus-faq-*, .faq-cta) are shared between BOTH pages —
   keep their base rules page-agnostic. Anything prefixed `.hero-ed-` or
   `.ed-` is homepage-only (templates/pages/index.html) and safe to
   restyle freely without touching the FAQ page's look.
   The site header/nav itself (.public-header etc.) lives in the shared
   stylesheet since main/base.html renders it on every public page now.
   ===================================================================== */

/* ------------------------------------------------------- shared hero -- */
.hero-v2{
  position:relative; overflow:hidden; isolation:isolate;
  color:#fff; padding:96px 24px 120px; text-align:center;
}
.hero-v2-bg{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  background-image:
    linear-gradient(135deg, rgba(0,31,74,.88) 0%, rgba(0,55,123,.78) 55%, rgba(11,79,163,.7) 100%),
    var(--hero-photo);
}
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; z-index:0;
  animation:heroBlobFloat 16s ease-in-out infinite alternate;
}
.hero-v2-sm{
  padding:64px 24px 74px;
  background:linear-gradient(135deg, var(--primary-600) 0%, var(--primary) 60%, #0b4fa3 100%);
}
.hero-v2-sm .hero-inner{ max-width:640px; }
.hero-v2-sm .hero-inner h1{ font-size:clamp(26px,4vw,36px); }
.hero-blob.b1{ width:420px; height:420px; background:#5ea3ff; top:-160px; left:-120px; }
.hero-blob.b2{ width:380px; height:380px; background:#ffb648; top:60px; right:-140px; animation-duration:20s; animation-delay:-4s; }
.hero-blob.b3{ width:300px; height:300px; background:#7fe8c0; bottom:-160px; left:38%; animation-duration:14s; animation-delay:-8s; }
@keyframes heroBlobFloat{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(30px,-24px) scale(1.12); }
}
@media (prefers-reduced-motion:reduce){ .hero-blob{ animation:none; } }

.hero-inner{ position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  font-size:12.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-bottom:22px;
  backdrop-filter:blur(6px);
}
.hero-inner h1{
  font-family:'Merriweather',serif; font-weight:800; font-size:clamp(32px,5.2vw,52px); line-height:1.12; margin:0 0 18px;
  text-wrap:balance; color:#fff;
}
.hero-inner h1 .accent{
  background:linear-gradient(90deg,#ffd166,#ff9a76); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-inner p{ max-width:640px; margin:0 auto 32px; font-size:15.5px; line-height:1.75; color:rgba(255,255,255,.86); }
.hero-actions{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:48px; }
.btn-light{ background:#fff; color:var(--primary); border:none; }
.btn-light:hover{ background:rgba(255,255,255,.9); transform:translateY(-1px); }
.btn-ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* Campus detail hero (templates/pages/campus_detail.html) — a .hero-v2-sm
   variant that can show the campus's own uploaded photo as a full-bleed
   cover instead of a flat brand-color gradient, with a crisp circular
   avatar of the same photo as the focal point (campuses only have the one
   image, so it does double duty as cover + avatar, LinkedIn-page style). */
.campus-hero{ background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 65%, black) 100%); }
.campus-hero.has-photo{
  background-size:cover; background-position:center;
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, black) 0%, color-mix(in srgb, var(--accent) 50%, black) 55%, color-mix(in srgb, var(--accent) 15%, transparent) 100%),
    var(--photo);
}
.campus-hero-avatar{
  position:relative; width:96px; height:96px; margin:0 auto 22px; border-radius:24px; overflow:hidden;
  border:3px solid rgba(255,255,255,.85); box-shadow:0 10px 28px rgba(0,0,0,.32);
}
.campus-hero-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Soft pulsing halo behind the avatar, tinted to the campus's own accent —
   a small "alive" detail instead of the avatar just sitting static. */
.campus-hero-avatar::before{
  content:""; position:absolute; inset:-18px; z-index:-1; border-radius:32px; filter:blur(10px);
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, white) 0%, transparent 72%);
  animation:campusAvatarGlow 3.6s ease-in-out infinite alternate;
}
@keyframes campusAvatarGlow{ from{ opacity:.35; transform:scale(.94); } to{ opacity:.7; transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .campus-hero-avatar::before{ animation:none; } }
.campus-hero-stats{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 28px; }
.campus-hero-stat{
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px);
  font-size:12.5px; font-weight:700; color:#fff; transition:background .2s ease, transform .15s ease;
}
.campus-hero-stat:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
.campus-hero-stat svg{ width:14px; height:14px; opacity:.85; }

/* Breadcrumb + "keep scrolling" cue — small wayfinding/orientation details
   that make the hero read as a proper landing page rather than a banner. */
.campus-hero-breadcrumb{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:18px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.6);
}
.campus-hero-breadcrumb a{ color:rgba(255,255,255,.85); text-decoration:none; }
.campus-hero-breadcrumb a:hover{ text-decoration:underline; }
.campus-hero-breadcrumb svg{ width:11px; height:11px; opacity:.6; flex-shrink:0; }
.campus-hero-scroll{
  position:relative; z-index:1; display:flex; justify-content:center; margin-top:-6px;
  color:rgba(255,255,255,.55); animation:heroBounce 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .campus-hero-scroll{ animation:none; } }

/* Blobs default to the homepage's fixed blue/amber palette — on the campus
   hero they're tinted from the campus's own --accent instead, so each
   campus's page feels distinctly "branded" rather than reusing one look. */
.campus-hero .hero-blob.b1{ background:color-mix(in srgb, var(--accent) 65%, #5ea3ff); }
.campus-hero .hero-blob.b2{ background:color-mix(in srgb, var(--accent) 45%, #ffb648); }

/* -------------------------------------------------------- shell/sections */
.public-shell{ max-width:1180px; margin:0 auto; padding:64px 24px; }
.public-section{ margin-bottom:72px; }

/* Full-bleed tinted "band" a section can sit inside, so consecutive
   sections visually blend into different backgrounds instead of one flat
   page. Breaks out of any max-width parent via the negative-margin trick. */
.section-band{
  position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:70px 0; overflow:hidden;
}
.section-band.tint-neutral{ background:linear-gradient(180deg, transparent 0%, var(--surface-2) 14%, var(--surface-2) 86%, transparent 100%); }
.section-band.tint-primary{ background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary) 7%, transparent) 14%, color-mix(in srgb, var(--primary) 7%, transparent) 86%, transparent 100%); }
.section-band.tint-warm{ background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--warning) 11%, transparent) 14%, color-mix(in srgb, var(--warning) 11%, transparent) 86%, transparent 100%); }
.section-band.tint-cool{ background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--success) 9%, transparent) 14%, color-mix(in srgb, var(--success) 9%, transparent) 86%, transparent 100%); }
.section-band.tint-dark{
  background:linear-gradient(135deg, #061428 0%, var(--primary-600) 55%, var(--primary) 100%);
  color:#fff; padding:80px 0;
}
.section-band.tint-dark .eyebrow{ color:#7fe8c0; }
.section-band.tint-dark .section-head-row h2,
.section-band.tint-dark .public-section-head h2{ color:#fff; }
.section-band.tint-dark .public-section-head p{ color:rgba(255,255,255,.72); }
.section-band.tint-dark .view-more-link{ color:#fff; }
.section-band.tint-dark .view-more-link:hover{ color:#7fe8c0; }
.public-section-head{ text-align:center; max-width:640px; margin:0 auto 32px; }
.public-section-head.left{ text-align:left; margin:0 0 40px; max-width:640px; }
.public-section-head .eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--primary-text); margin-bottom:8px; }
.public-section-head h2{ font-family:'Merriweather',serif; font-size:clamp(22px,3vw,28px); margin:0 0 8px; }
.public-section-head p{ font-size:13.5px; color:var(--muted); line-height:1.6; }

.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.section-head-row .eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--primary-text); margin-bottom:8px; display:block; }
.section-head-row h2{ font-family:'Merriweather',serif; font-size:clamp(22px,3vw,28px); margin:0; }
.view-more-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--primary-text); white-space:nowrap; }
.view-more-link svg{ width:14px; height:14px; transition:transform .2s ease; }
.view-more-link:hover svg{ transform:translate(3px,-3px); }

/* Big faint numeral behind a section's eyebrow+heading — an editorial/
   magazine-style wayfinding detail for pages with a couple of numbered
   sections (see campus_detail.html's Forms/FAQs). Purely decorative, so
   it's hidden on narrow screens rather than fighting for space. */
.section-head-row.numbered{ position:relative; padding-left:60px; }
.section-head-row .section-num{
  position:absolute; left:0; top:-8px; font-family:'Merriweather',serif; font-weight:800; font-size:42px;
  line-height:1; color:var(--border); user-select:none;
}
@media(max-width:640px){
  .section-head-row.numbered{ padding-left:0; }
  .section-head-row .section-num{ display:none; }
}

/* ------------------------------------------- campus detail: forms grid
   A richer, dedicated card for a campus's own webforms list — kept
   separate from the shared .mega-item (used by the navbar's "Campus"
   dropdown) so restyling one never affects the other. */
.campus-forms-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.campus-form-card{
  position:relative; display:flex; align-items:center; gap:16px; padding:22px 20px; border-radius:18px;
  border:1px solid var(--border); background:var(--surface); overflow:hidden; text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .25s ease;
}
.campus-form-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent, var(--primary)), transparent);
  opacity:0; transition:opacity .2s ease;
}
.campus-form-card:hover{
  border-color:var(--accent, var(--primary)); background:var(--surface-2);
  transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.1);
}
.campus-form-card:hover::before{ opacity:1; }
.campus-form-card-icon{
  width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--accent-100, var(--info-100)); color:var(--accent, var(--info));
}
.campus-form-card-icon svg{ width:20px; height:20px; }
.campus-form-card-body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.campus-form-card-title{ font-size:14.5px; font-weight:700; color:var(--text); }
.campus-form-card-sub{ font-size:12px; color:var(--muted); }
.campus-form-card-arrow{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--muted); transition:background .2s ease, color .2s ease, transform .2s ease;
}
.campus-form-card-arrow svg{ width:15px; height:15px; }
.campus-form-card:hover .campus-form-card-arrow{ background:var(--accent, var(--primary)); color:#fff; transform:translate(3px,-3px); }

/* scroll-reveal (progressive enhancement — content is visible without JS) */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger .in-view{ transition-delay:calc(var(--stagger-i, 0) * 70ms); }

/* ================================================================ */
/*  Homepage-only "bold editorial" components (templates/pages/index) */
/* ================================================================ */

/* ------------------------------------------------------ ed. hero ---- */
.hero-ed{ position:relative; background:#04122b; color:#fff; overflow:hidden; }
.hero-ed::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px circle at 12% 15%, rgba(11,79,163,.55), transparent 60%),
    radial-gradient(520px circle at 92% 85%, rgba(255,149,51,.14), transparent 60%);
}
.hero-ed-shell{
  position:relative; z-index:1; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:56px;
  padding:100px 24px 96px;
}
.hero-ed-eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800;
  letter-spacing:1.8px; text-transform:uppercase; color:#ffb648; margin-bottom:26px;
}
.hero-ed-eyebrow::before{ content:""; width:26px; height:2px; background:#ffb648; flex-shrink:0; }
.hero-ed-copy h1{
  font-family:'Merriweather',serif; font-weight:800; font-size:clamp(38px,4.8vw,64px); line-height:1.06;
  letter-spacing:-.5px; margin:0 0 24px; text-wrap:balance; color:#fff;
}
.hero-ed-copy h1 .accent{ color:#ffb648; }
.hero-ed-copy p{ font-size:16px; line-height:1.8; color:rgba(255,255,255,.72); max-width:480px; margin:0 0 38px; }
.hero-ed-actions{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-bottom:56px; }
.btn-ed-primary{
  display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px;
  background:#fff; color:var(--primary-600); font-weight:800; font-size:14px;
  transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.btn-ed-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.34); }
.btn-ed-primary svg{ width:16px; height:16px; transition:transform .2s ease; }
.btn-ed-primary:hover svg{ transform:translate(3px,-2px); }
.btn-ed-text{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#fff;
  border-bottom:1.5px dashed rgba(255,255,255,.4); padding-bottom:3px; transition:border-color .2s ease;
}
.btn-ed-text:hover{ border-color:#fff; }
.btn-ed-text svg{ width:14px; height:14px; transition:transform .2s ease; }
.btn-ed-text:hover svg{ transform:translate(3px,-3px); }
.hero-ed-stats{ display:flex; border-top:1px solid rgba(255,255,255,.16); padding-top:26px; max-width:480px; }
.hero-ed-stat{ flex:1; padding-right:22px; }
.hero-ed-stat + .hero-ed-stat{ border-left:1px solid rgba(255,255,255,.16); padding-left:22px; }
.hero-ed-stat .n{ display:block; font-family:'Merriweather',serif; font-weight:800; font-size:28px; }
.hero-ed-stat .l{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.55); margin-top:4px; }

/* Real photo "card deck" — every slide is its own rounded card; instead of
   a plain crossfade, each tick reshuffles which card sits in which depth
   role (front/mid/back/hidden), so the ones behind actually show the next
   photos queued up rather than a flat decorative color (see initHeroSlider
   in pages/scripts.js, which just swaps each card's role class). */
.hero-ed-media{ position:relative; aspect-ratio:0.893; }
.hero-ed-media-frame{
  position:absolute; inset:0; border-radius:22px; overflow:hidden; background-size:cover; background-position:center;
  background-image:linear-gradient(200deg, rgba(4,18,43,0) 42%, rgba(4,18,43,.88) 100%), var(--hero-photo);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  transition:transform .7s cubic-bezier(.22,.85,.32,1), opacity .7s ease, z-index 0s;
}
.hero-card-role-0{ transform:translate(0,0) rotate(0deg) scale(1); opacity:1; z-index:3; }
.hero-card-role-1{ transform:translate(16px,-16px) rotate(5deg) scale(.94); opacity:.85; z-index:2; }
.hero-card-role-2{ transform:translate(30px,-30px) rotate(9deg) scale(.88); opacity:.55; z-index:1; }
.hero-card-role-hidden{ transform:translate(30px,-30px) rotate(9deg) scale(.82); opacity:0; z-index:0; pointer-events:none; }
/* Overlaid on the photo itself (bottom-center) rather than below it. Active
   dot stretches into a pill (instead of just changing color) so it visually
   reads as two dots joined together. */
.hero-ed-media-dots{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(4,18,43,.35); backdrop-filter:blur(6px);
}
.hero-ed-media-dot{
  width:8px; height:8px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.4); transition:width .3s ease, background .3s ease;
}
.hero-ed-media-dot:hover{ background:rgba(255,255,255,.65); }
.hero-ed-media-dot.active{ width:22px; background:#ffb648; }
@media (prefers-reduced-motion:reduce){ .hero-ed-media-frame{ transition:opacity .4s ease; } }

.hero-ed-scroll{
  position:relative; z-index:1; display:flex; justify-content:center; padding-bottom:40px;
  color:rgba(255,255,255,.55); animation:heroBounce 2.2s ease-in-out infinite;
}
@keyframes heroBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce){ .hero-ed-scroll{ animation:none; } }
@media(max-width:900px){
  .hero-ed-shell{ grid-template-columns:1fr; padding:64px 20px 70px; gap:36px; }
  .hero-ed-media{ order:-1; aspect-ratio:1.724; }
}

/* ------------------------------------------------- ed. feature list -- */
.ed-feature-list{ display:flex; flex-direction:column; }
.ed-feature-row{
  display:grid; grid-template-columns:60px 200px 1fr; gap:32px; align-items:center;
  padding:34px 0; border-top:1px solid var(--border);
}
.ed-feature-list .ed-feature-row:last-child{ border-bottom:1px solid var(--border); }
.ed-feature-index{ font-family:'Merriweather',serif; font-weight:800; font-size:34px; color:var(--border); line-height:1; }
.ed-feature-media{ width:100%; height:120px; border-radius:14px; overflow:hidden; }
.ed-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ed-feature-row:hover .ed-feature-media img{ transform:scale(1.06); }
.ed-feature-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; background:var(--accent-100, var(--primary-100)); color:var(--accent, var(--primary));
}
.ed-feature-body h3{ font-size:19px; margin:0 0 8px; }
.ed-feature-body p{ font-size:14px; color:var(--muted); line-height:1.7; margin:0 0 14px; max-width:520px; }
.ed-feature-link{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--text);
  border-bottom:1.5px dashed var(--accent, var(--primary)); padding-bottom:2px;
}
.ed-feature-link svg{ width:13px; height:13px; transition:transform .2s ease; }
.ed-feature-row:hover .ed-feature-link svg{ transform:translate(3px,-3px); }
@media(max-width:760px){
  .ed-feature-row{ grid-template-columns:1fr; gap:16px; padding:26px 0; }
  .ed-feature-media{ height:160px; order:-1; }
  .ed-feature-index{ font-size:26px; }
}

/* ------------------------------------------- campus split layout/nav --
   Shared by the home page, a campus's own detail page, and the public
   webform page — NOT homepage-only despite living next to the ed- FAQ
   styles below, so keep these two selectors framework-agnostic. */
.ed-faq-layout, .campus-split-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }

/* ------------------------------------------------- campus quick-jump nav
   (FAQs / each webform by name / official site) — see
   templates/pages/_campus_section_nav.html. */
.campus-nav-card{
  /* top clears the sticky .public-header (~69px tall) plus the usual 24px
     breathing room — without it the card's own sticky offset was measured
     from the viewport top, so it scrolled up underneath the header instead
     of stopping below it. */
  position:sticky; top:calc(69px + 24px); display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.07);
}
.campus-nav-group-label{
  font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted);
  padding:14px 12px 6px;
}
.campus-nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px;
  color:var(--text); font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background .18s ease;
}
.campus-nav-item-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--muted); transition:background .18s ease, color .18s ease;
}
.campus-nav-item-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.campus-nav-item-count{
  flex-shrink:0; min-width:20px; padding:2px 7px; border-radius:999px; text-align:center;
  font-size:10.5px; font-weight:800; background:var(--surface-2); color:var(--muted);
  transition:background .18s ease, color .18s ease;
}
.campus-nav-item-chev{
  flex-shrink:0; color:var(--muted); opacity:0; transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
.campus-nav-item:hover{ background:var(--surface-2); }
.campus-nav-item:hover .campus-nav-item-chev{ opacity:1; transform:none; }
.campus-nav-item:hover .campus-nav-item-icon{ background:color-mix(in srgb, var(--primary) 12%, var(--surface)); color:var(--primary-text); }
.campus-nav-item.active{
  background:linear-gradient(135deg, var(--primary), var(--primary-600)); color:#fff;
  box-shadow:0 10px 22px color-mix(in srgb, var(--primary) 35%, transparent);
}
.campus-nav-item.active .campus-nav-item-icon{ background:rgba(255,255,255,.2); color:#fff; }
.campus-nav-item.active .campus-nav-item-count{ background:rgba(255,255,255,.22); color:#fff; }
.campus-nav-item.active .campus-nav-item-chev{ opacity:1; transform:none; color:#fff; }
.ed-faq-panels .campus-faq-block{ padding:0; }
.ed-faq-panels .campus-faq-head{ padding-top:0; }
.ed-faq-panels .campus-faq-list{ max-width:none; margin:0; }
.campus-split-layout .campus-faq-block{ padding:0; }
.campus-split-layout .campus-faq-head{ padding-top:0; }
.campus-split-layout .campus-faq-list{ max-width:none; margin:0; }
.faq-empty-state{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:56px 20px; color:var(--muted); border:1.5px dashed var(--border); border-radius:14px;
}
.faq-empty-state svg{ opacity:.55; }
.faq-empty-state p{ margin:0; font-size:14px; }

/* ----------------------------------------------------- campus cards --- */
/* Square photo tiles (campus.image is uploaded square) — the image fills
   the whole card, name/stats sit in a bottom scrim, and the "open" arrow
   only appears on hover so the tile reads as a clean photo grid at rest. */
.campus-card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.campus-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:1/1;
  border-radius:18px; overflow:hidden; background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, black) 100%);
  background-size:cover; background-position:center; box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, background-size .5s ease;
}
.campus-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.78) 100%);
  transition:background .25s ease;
}
.campus-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.18); background-size:112%; }
.campus-card:hover::before{ background:linear-gradient(180deg, rgba(0,0,0,.08) 25%, rgba(0,0,0,.85) 100%); }

.campus-card-arrow{
  position:absolute; top:14px; right:14px; z-index:1; width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.32); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translate(-6px,6px) scale(.85); transition:opacity .2s ease, transform .2s ease, background .15s ease;
}
.campus-card-arrow svg{ width:15px; height:15px; }
.campus-card:hover .campus-card-arrow{ opacity:1; transform:translate(0,0) scale(1); }
.campus-card:hover .campus-card-arrow:hover{ background:rgba(255,255,255,.28); }

.campus-card-info{ position:relative; z-index:1; padding:16px; }
.campus-card-info h3{
  font-family:'Merriweather',serif; font-size:16px; margin:0 0 4px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.campus-card-stats{ display:flex; gap:10px; font-size:12px; font-weight:600; color:rgba(255,255,255,.85); }

@media (prefers-reduced-motion:reduce){
  .campus-card, .campus-card-arrow{ transition:none; }
}

@media(max-width:820px){
  /* Matches .public-section's own mobile margin-bottom (48px, set further
     down) — otherwise the gap between the stacked nav card and the first
     section (16px) read noticeably tighter than the gap between the
     sections themselves (48px), even though both are just "space before
     the next block" on a single-column mobile layout. */
  .ed-faq-layout, .campus-split-layout{ grid-template-columns:1fr; gap:48px; }
  /* Stays a vertical stack like desktop (just no longer sticky) — the
     column's default align-items:stretch is what makes each row (including
     the active one's highlight) span the card's full width; row+wrap+auto
     here previously shrank every item to its own content width instead,
     like a row of chips rather than a list of full-width rows. */
  .campus-nav-card{ position:static; }
  .campus-nav-group-label{ display:none; }
  .campus-card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .campus-card-grid{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------- ed. events - */
.ed-events-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; }
.ed-event-feature{ position:relative; display:block; border-radius:18px; overflow:hidden; min-height:420px; color:#fff; }
.ed-event-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ed-event-feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,12,28,.92) 0%, rgba(4,12,28,.15) 55%, transparent 100%);
}
.ed-event-feature:hover img{ transform:scale(1.06); }
.ed-event-feature-body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:32px; }
.ed-event-feature-tag{ display:inline-flex; font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#ffb648; margin-bottom:10px; }
.ed-event-feature-body h3{ font-family:'Merriweather',serif; font-size:24px; margin:0 0 8px; color:#fff; line-height:1.3; }
.ed-event-feature-body p{ font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.6; max-width:440px; margin:0; }

.ed-event-list{ display:flex; flex-direction:column; }
.ed-event-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); color:#fff; }
.ed-event-list .ed-event-row:first-child{ padding-top:0; }
.ed-event-row-media{ width:76px; height:76px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.ed-event-row-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ed-event-row:hover .ed-event-row-media img{ transform:scale(1.08); }
.ed-event-row-body{ flex:1; min-width:0; }
.ed-event-row-body h4{ font-size:14.5px; margin:0 0 5px; color:#fff; line-height:1.4; }
.ed-event-row-body p{
  font-size:12.5px; color:rgba(255,255,255,.62); margin:0; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ed-event-row-arrow{ flex-shrink:0; color:rgba(255,255,255,.5); transition:transform .2s ease, color .2s ease; }
.ed-event-row-arrow svg{ width:16px; height:16px; }
.ed-event-row:hover .ed-event-row-arrow{ color:#fff; transform:translate(3px,-3px); }
@media(max-width:860px){
  .ed-events-layout{ grid-template-columns:1fr; }
  .ed-event-feature{ min-height:280px; }
}

/* ---------------------------------------------------------- ed. news - */
.ed-news-list{ display:flex; flex-direction:column; }
.ed-news-row{ display:flex; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid var(--border); }
.ed-news-list .ed-news-row:first-child{ padding-top:0; }
.ed-news-date{
  flex-shrink:0; width:108px; font-family:'Merriweather',serif; font-weight:800; font-size:13px;
  color:var(--warning); text-transform:uppercase; letter-spacing:.3px; line-height:1.4;
}
.ed-news-body{ flex:1; min-width:0; }
.ed-news-body h4{ font-size:16px; margin:0 0 6px; }
.ed-news-body p{
  font-size:13px; color:var(--muted); line-height:1.6; margin:0;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ed-news-thumb{ width:88px; height:64px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.ed-news-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ed-news-row:hover .ed-news-thumb img{ transform:scale(1.08); }
.ed-news-arrow{ flex-shrink:0; color:var(--muted); transition:transform .2s ease, color .2s ease; }
.ed-news-arrow svg{ width:16px; height:16px; }
.ed-news-row:hover .ed-news-arrow{ color:var(--primary-text); transform:translate(3px,-3px); }
@media(max-width:640px){
  .ed-news-arrow{ display:none; }
  .ed-news-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .ed-news-date{ width:auto; }
  .ed-news-thumb{ width:100%; height:160px; order:3; margin-top:4px; }
}

/* --------------------------------------------------------- ed. clubs - */
.ed-club-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px; }
.ed-club-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 16px;
  border-radius:16px; border:1px solid var(--border); background:var(--surface);
  transition:transform .12s ease, box-shadow .25s ease, border-color .2s ease; will-change:transform;
}
.ed-club-card:hover{ box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--primary) 30%, var(--border)); }
.ed-club-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; margin-bottom:14px; border:1px solid var(--border); flex-shrink:0; }
.ed-club-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-club-card h4{ font-size:13.5px; margin:0 0 4px; }
.ed-club-card p{ font-size:11.5px; color:var(--muted); margin:0 0 8px; line-height:1.4; }
.ed-club-tag{ font-size:10.5px; font-weight:800; color:var(--primary-text); text-transform:uppercase; letter-spacing:.3px; padding:3px 10px; border-radius:999px; background:var(--primary-100); }

/* ------------------------------------------------------- ed. FAQ CTA -- */
.faq-search{ max-width:520px; margin:28px auto 0; position:relative; }
.faq-search input{
  width:100%; padding:15px 20px 15px 48px; border-radius:14px; border:1px solid rgba(255,255,255,.18); outline:none;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); color:#fff; font-size:14px; font-family:inherit;
  transition:background .2s ease, box-shadow .2s ease;
}
.faq-search input::placeholder{ color:rgba(255,255,255,.6); }
.faq-search input:focus{ background:rgba(255,255,255,.2); box-shadow:0 0 0 3px rgba(255,255,255,.16); }
.faq-search svg{ position:absolute; left:17px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:rgba(255,255,255,.7); pointer-events:none; }

/* --------------------------------------------------------- FAQ tabs ---- */
.faq-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:32px; }
.faq-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface);
  font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .2s ease; font-family:inherit;
}
.faq-tab .dotc{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.faq-tab:hover{ border-color:var(--primary); color:var(--primary-text); transform:translateY(-1px); }
.faq-tab.active{
  background:linear-gradient(135deg, var(--primary), var(--primary-600)); border-color:var(--primary); color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent);
}
.faq-tab.active .dotc{ background:#fff !important; }
.faq-panel{ display:none; scroll-margin-top:100px; }
.faq-panel.active{ display:block; animation:faqPanelIn .35s ease; }
@keyframes faqPanelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* While searching, every campus panel is shown at once (see initFaqSearch
   in pages/scripts.js) so a match under a non-active tab still surfaces. */
.faq-panels.searching .faq-panel{ display:block; margin-bottom:20px; }

/* ----------------------------------------------------- FAQ accordion --- */
.campus-faq-block{ padding:8px 30px 32px; }
.campus-faq-head{ display:flex; align-items:center; justify-content:center; text-align:left; gap:14px; padding:22px 0 20px; }
.campus-faq-head-icon{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.campus-faq-head-icon svg{ width:20px; height:20px; }
.campus-faq-head h3{ font-family:'Merriweather',serif; font-size:19px; margin:0; }
.campus-faq-list{ max-width:760px; margin:0 auto; }

.campus-faq-cat-group{ --cat-accent:var(--primary); margin-bottom:4px; }
.campus-faq-category{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--cat-accent);
  background:color-mix(in srgb, var(--cat-accent) 14%, var(--surface)); padding:5px 13px; border-radius:999px;
  margin:24px 0 12px;
}
.campus-faq-cat-group:first-child .campus-faq-category{ margin-top:0; }

/* Each question is its own elevated card (not a divided row inside one big
   card) — matches the standalone-card look used by the admin's FAQ list. */
.campus-faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.04); margin-bottom:12px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.campus-faq-item:last-child{ margin-bottom:0; }
.campus-faq-item:hover{ border-color:color-mix(in srgb, var(--cat-accent) 35%, var(--border)); box-shadow:0 6px 18px rgba(0,0,0,.07); }
.campus-faq-q{
  width:100%; display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer;
  background:transparent; border:none; text-align:left; font-family:inherit;
}
.campus-faq-q-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cat-accent) 16%, var(--surface)); color:var(--cat-accent);
  transition:background .2s ease, color .2s ease;
}
.campus-faq-item.open .campus-faq-q-icon{ background:var(--cat-accent); color:#fff; }
.campus-faq-q-text{ flex:1; font-size:14.5px; font-weight:700; color:var(--text); line-height:1.5; transition:color .2s ease; }
.campus-faq-item.open .campus-faq-q-text{ color:var(--cat-accent); }
.campus-faq-q-toggle{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--muted); transition:background .2s ease, color .2s ease, transform .3s ease;
}
.campus-faq-item:hover .campus-faq-q-toggle{ background:color-mix(in srgb, var(--cat-accent) 16%, var(--surface)); color:var(--cat-accent); }
.campus-faq-item.open .campus-faq-q-toggle{ background:var(--cat-accent); color:#fff; transform:rotate(45deg); }
.campus-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.22,.85,.32,1); }
.campus-faq-a .answer{
  padding:0 20px 18px 68px;
  font-size:13.5px; color:var(--muted); line-height:1.75;
}

/* --------------------------------------------------------- FAQ CTA ----- */
.faq-cta{
  margin-top:16px; padding:36px; border-radius:20px; text-align:center;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%); color:#fff;
}
.faq-cta h3{ font-family:'Merriweather',serif; font-size:20px; margin:0 0 6px; color:#fff; }
.faq-cta p{ font-size:13.5px; color:rgba(255,255,255,.8); margin:0 0 20px; }

/* ------------------------------------------------------------ responsive */
@media(max-width:640px){
  .hero-v2{ padding:64px 18px 84px; }
  .hero-v2-sm{ padding:48px 18px 56px; }
  .public-shell{ padding:44px 18px; }
  .public-section{ margin-bottom:48px; }
  .section-band{ padding:44px 0; }
  .campus-faq-block{ padding:20px 18px; }
}