/* ==========================================================================
   content-blocks.css  -  Block-specific CSS for UB Elements Content Blocks
   University of Bridgeport · plugin: ub-elements
   ========================================================================== */

/* ==========================================================================
   program.css  -  Program detail pages (pattern established on MS in AI)
   University of Bridgeport

   Load order: style.css → home.css (shared v2 layer) → program.css
   home.css supplies the brand tokens, --ub-blue-text, --section-pad,
   --wedge, .reveal, .eyebrow-rule, .display-*, .btn-ghost, .sticky-cta,
   .scroll-progress. Nothing here re-declares them.

   INTENT
   A program page is a decision page, not a brochure. Its job is to answer,
   in order: can I get in → what will I actually learn → where does it lead
   → what does it cost me in time → how do I start. Everything below is
   ordered to that sequence, and the two facts a graduate STEM applicant
   screens on first (credits/duration and STEM-OPT eligibility) are in the
   fact rail above the fold.

   Reused brand devices: the diagonal wedge, the 3px UB Blue rule as the
   marker for a fact, 0px radius, oversized numerals for scale contrast.
   ========================================================================== */

:root {
  /* ---- Hero / fact-rail interlock ------------------------------------
     The fact rail rides UP over the hero's bottom edge. Both positions
     are derived from one variable so changing the overlap cannot leave
     the hero copy sitting underneath the rail (the bug that bit the
     homepage switcher). */
  --fact-overlap: 54px;
  --fact-clear: 40px;     /* air between hero copy and the rail          */
}

/* --------------------------------------------------------------------------
   Body-copy link colour, scoped per section.
   Deliberately NOT a blanket `.v2 a` rule  -  at that specificity it
   outranks the header/footer chrome rules in style.css and repaints the
   whole nav. Same discipline as home.css.
   -------------------------------------------------------------------------- */
.v2 .pg-onramp a:not([class*="btn"]),
.v2 .pg-conc a:not([class*="btn"]),
.v2 .pg-path a:not([class*="btn"]),
.v2 .pg-recog a:not([class*="btn"]),
.v2 .pg-admit a:not([class*="btn"]),
.v2 .pg-faq a:not([class*="btn"]),
.v2 .pg-more a:not([class*="btn"]):not(.pg-more-card) {
  color: var(--ub-blue-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ==========================================================================
   0. SIMPLE PAGE TITLE / HEADER (ub/page-title)
   Clean, daylight header for non-critical pages, team rosters, and directories
   without heavy hero imagery or dark background overlays.
   ========================================================================== */
.ub-page-title-sec {
  background: #ffffff;
  border-bottom: 1px solid var(--hairline, #e2e8f0);
  padding: 44px 0 36px;
  position: relative;
}
.ub-page-title-crumbs {
  margin-bottom: 16px;
}
.ub-page-title-crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.4;
}
.ub-page-title-crumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}
.ub-page-title-crumb-item a {
  color: var(--ub-blue-text, #0a6e8f);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.ub-page-title-crumb-item a:hover {
  color: var(--ub-purple, #592d82);
  text-decoration: underline;
}
.ub-page-title-crumb-sep {
  font-size: 0.65rem;
  color: #94a3b8;
}
.ub-page-title-crumb-item.is-current span,
.ub-page-title-crumb-item span[aria-current="page"] {
  color: #1e293b;
  font-weight: 600;
}
.ub-page-title-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ub-purple, #592d82);
  margin: 0 0 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ub-page-title-kicker::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--ub-blue, #005cb9);
}
.ub-page-title-heading {
  font-size: clamp(2.1rem, 4vw, 2.85rem);
  font-weight: 800;
  color: var(--text-main, #0f172a);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 16px 0;
}
.ub-page-title-desc {
  font-size: 1.12rem;
  line-height: 1.65;
  color: #475569;
}
.ub-page-title-desc p {
  margin: 0 0 12px 0;
}
.ub-page-title-desc p:last-child {
  margin-bottom: 0;
}
.ub-page-title-sec + .ub-profile-sec,
.ub-section-nav + .ub-profile-sec {
  padding-top: 24px;
}
.ub-profile-sec + .ub-contact-strip-sec,
.ub-profile-sec + .pg-sec.ub-contact-strip-sec {
  padding-top: clamp(1.5rem, 3vw, 2.25rem) !important;
}
@media (max-width: 768px) {
  .ub-page-title-sec {
    padding: 32px 0 28px;
  }
  .ub-page-title-heading {
    font-size: clamp(1.8rem, 6vw, 2.25rem);
    margin-bottom: 12px;
  }
  .ub-page-title-desc {
    font-size: 1.02rem;
  }
}

/* ==========================================================================
   0b. SECTION SUB-PAGE NAVIGATION (.ub-section-nav)
   Daylight horizontal navigation strip connecting parent hubs & child sub-pages
   ========================================================================== */
.ub-section-nav {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #E6EBEE;
  width: 100%;
  box-sizing: border-box;
  z-index: 35;
  margin-top: 0;
}

.ub-section-nav.is-sticky {
  position: sticky;
  top: var(--pg-header-h, var(--ub-header-h, 0px));
  z-index: 45;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #E6EBEE;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.ub-section-nav .container {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.ub-section-nav__mobile-bar {
  display: none;
}

.ub-section-nav__mobile-arrow {
  display: none;
}

.ub-section-nav__drawer {
  display: block;
  width: 100%;
}

.ub-section-nav__track {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.ub-section-nav__track::-webkit-scrollbar {
  display: none;
}

.ub-section-nav__kicker {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  padding-right: 14px;
  border-right: 1px solid #E6EBEE;
  white-space: nowrap;
}

.ub-section-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.ub-section-nav__item {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

.ub-section-nav__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 17px 15px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-main, #120826);
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  box-shadow: none !important;
  outline: none;
}

.ub-section-nav__link:hover,
.ub-section-nav__link:focus-visible {
  color: var(--ub-purple, #592D82) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 3px solid #D5DDE2 !important;
  text-decoration: none;
  box-shadow: none !important;
}

.ub-section-nav__link.is-active,
.ub-section-nav__link[aria-current="page"] {
  color: var(--ub-purple, #592D82) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 3px solid var(--ub-blue, #00A7E0) !important;
  font-weight: 700;
  box-shadow: none !important;
}

.ub-page-title-sec + .ub-section-nav {
  border-top: none;
}

/* Mobile & Tablet Responsive Hamburger Menu Mode (<= 1100px) */
@media (max-width: 1100px) {
  .ub-section-nav .container {
    padding-left: var(--gutter, 16px);
    padding-right: var(--gutter, 16px);
  }

  .ub-section-nav__kicker {
    display: none !important;
  }

  .ub-section-nav__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 6px 0;
    gap: 12px;
  }

  .ub-section-nav__mobile-current {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
  }

  .ub-section-nav__mobile-kicker {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    line-height: 1.2;
  }

  .ub-section-nav__mobile-active {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ub-purple, #592D82);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ub-section-nav__mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 0 !important;
    color: var(--ub-purple, #592D82);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
  }

  .ub-section-nav__mobile-toggle:hover,
  .ub-section-nav__mobile-toggle:focus-visible {
    background: #f1f5f9;
    border-color: var(--ub-purple, #592D82);
    outline: none;
  }

  .ub-section-nav.is-open .ub-section-nav__mobile-toggle {
    background: var(--ub-purple, #592D82);
    border-color: var(--ub-purple, #592D82);
    color: #ffffff;
  }

  .ub-section-nav__mobile-toggle-icon {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
  }

  .ub-section-nav__mobile-toggle .ub-icon-open {
    display: inline-block;
  }

  .ub-section-nav__mobile-toggle .ub-icon-close {
    display: none;
  }

  .ub-section-nav.is-open .ub-section-nav__mobile-toggle .ub-icon-open {
    display: none;
  }

  .ub-section-nav.is-open .ub-section-nav__mobile-toggle .ub-icon-close {
    display: inline-block;
  }

  /* Mobile Drawer */
  .ub-section-nav__drawer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #E6EBEE;
    border-bottom: 3px solid var(--ub-purple, #592D82);
    box-shadow: 0 16px 32px rgba(18, 8, 38, 0.12);
    z-index: 100;
    max-height: calc(80vh - var(--pg-header-h, 60px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ub-section-nav.is-open .ub-section-nav__drawer {
    display: block;
    animation: ubSecNavFadeIn 0.18s ease-out;
  }

  @keyframes ubSecNavFadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .ub-section-nav__track {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 0;
    overflow: visible;
  }

  .ub-section-nav__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding: 4px 0;
    margin: 0;
    white-space: normal;
  }

  .ub-section-nav__item {
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
  }

  .ub-section-nav__item:last-child {
    border-bottom: none;
  }

  .ub-section-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #1e293b !important;
    text-decoration: none;
    background: #ffffff !important;
    border: none !important;
    border-left: 4px solid transparent !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .ub-section-nav__link:hover,
  .ub-section-nav__link:focus-visible {
    background: #f8fafc !important;
    color: var(--ub-purple, #592D82) !important;
    border-left-color: #cbd5e1 !important;
    border-bottom: none !important;
  }

  .ub-section-nav__link.is-active,
  .ub-section-nav__link[aria-current="page"] {
    background: #f5f3ff !important;
    color: var(--ub-purple, #592D82) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--ub-blue, #00A7E0) !important;
    border-bottom: none !important;
  }

  .ub-section-nav__mobile-arrow {
    display: inline-block;
    font-size: 11px;
    color: #94a3b8;
    margin-left: 12px;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
  }

  .ub-section-nav__link:hover .ub-section-nav__mobile-arrow {
    color: var(--ub-purple, #592D82);
    transform: translateX(2px);
  }

  .ub-section-nav__link.is-active .ub-section-nav__mobile-arrow {
    color: var(--ub-purple, #592D82);
  }
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.pg-hero {
  position: relative;
  background-color: var(--ub-purple-deep);
  background-image: url('../images/legacy/programs-ai-lg.jpg');
  background-size: cover;
  /* NOT background-attachment: fixed  -  scrolling happens inside
     .main-content-wrapper, and `fixed` anchors to the viewport instead,
     which strands the image. */
  background-position: center 32%;
  overflow: hidden;
}
.pg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(98deg,
    rgba(27,16,35,0.96) 0%,
    rgba(42,18,64,0.92) 38%,
    rgba(42,18,64,0.62) 70%,
    rgba(42,18,64,0.34) 100%);
}
/* Signature wedge */
.pg-hero::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 46%;
  background: linear-gradient(150deg, rgba(89,45,130,0.6) 0%, rgba(89,45,130,0) 66%);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.pg-hero > .container { position: relative; z-index: 2; }

.pg-hero-inner {
  padding: 54px 0 calc(var(--fact-overlap) + var(--fact-clear));
  max-width: 47rem;
  border-left: 3px solid var(--ub-blue);
  padding-left: 32px;
}

.pg-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  margin-bottom: 24px;
}
.pg-crumb a { color: rgba(255,255,255,0.66); text-decoration: none; }
.pg-crumb a:hover { color: var(--white); text-decoration: underline; }
.pg-crumb span[aria-current] { color: var(--white); font-weight: 600; }
.pg-crumb i { color: rgba(255,255,255,0.34); font-size: 0.64rem; }

.pg-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FD9F5;
  margin-bottom: 18px;
}
.pg-kicker .sep { color: rgba(255,255,255,0.3); }
/* STEM flag reads as a credential, so it gets a chip rather than plain text */
.pg-kicker .stem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ub-blue);
  color: var(--ink);
  padding: 5px 11px;
  letter-spacing: 0.1em;
}

.pg-hero h1 {
  font-size: clamp(2.5rem, 5.1vw, 4.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.034em;
  color: var(--white);
  overflow-wrap: anywhere; /* "Neuromusculoskeletal" is wider than a 320px column */
}
/* At 40px "Administration" alone is wider than the 253px column on a 320px
   screen, so it broke mid-word. A smaller size keeps ordinary words whole. */
@media (max-width: 360px) {
  .pg-hero h1 { font-size: 2rem; }
}
/* Degree abbreviation as a set-apart line rather than "(MS)" wrapping
   onto its own orphan line inside the h1. */
.pg-degree-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}
.pg-degree-line .deg {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.24);
  padding: 4px 12px;
  color: var(--white);
  letter-spacing: 0.04em;
}

/* Enrollment notice: a solid light chip so it stays legible over the photograph
   (ink on white is 17:1) rather than glass over a moving background. */
.pg-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 35rem;
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--white, #fff);
  border-left: 4px solid var(--ub-blue);
  color: var(--ink, #1B1023);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
}
.pg-notice i {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--ub-purple, #592D82);
}

.pg-hero .lede {
  font-size: 1.17rem;
  line-height: 1.64;
  color: rgba(255,255,255,0.87);
  margin-top: 22px;
  max-width: 35rem;
}
.pg-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* The program's information sheet: a quiet text link under the hero buttons.
   Its colour is the theme's on-dark link colour (.v2 .pg-hero p a). */
.pg-hero-doc {
  margin-top: 18px;
  font-size: 0.98rem;
  font-weight: 600;
}
.pg-hero-doc a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.pg-hero-doc a:hover,
.pg-hero-doc a:focus-visible {
  text-decoration-thickness: 2px;
}
.pg-hero-doc a:focus-visible {
  outline: 2px solid var(--white, #fff);
  outline-offset: 3px;
}
.pg-hero-doc i { color: var(--ub-blue, #00A7E0); }

/* ==========================================================================
   1B. PAGE HERO V2 (Asymmetric Editorial Split Hero)
   Deep purple/indigo canvas, crisp typography, sharp framed visual,
   strictly sharp corners (border-radius: 0)
   ========================================================================== */
.page-hero-v2 {
  position: relative;
  background: linear-gradient(135deg, #180928 0%, #2f1246 60%, #120826 100%);
  color: #ffffff;
  padding: 56px 0 72px;
  overflow: hidden;
  border-bottom: 3px solid #7FD9F5;
}

.page-hero-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 85% 15%, rgba(127, 217, 245, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 85%, rgba(75, 29, 107, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero-v2-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 48px;
  align-items: center;
}

.page-hero-v2--no-image .page-hero-v2-container {
  grid-template-columns: 1fr;
  max-width: var(--measure, 1384px);
}
/* No image to share the row with: title and lede run the container width. */
.page-hero-v2--no-image .hero-v2-lede {
  max-width: none;
}

/* Breadcrumbs */
.hero-v2-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.7);
}
.hero-v2-breadcrumbs a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-v2-breadcrumbs a:hover {
  color: #7FD9F5;
  text-decoration: underline;
}
.hero-v2-breadcrumbs .crumb-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
}
.hero-v2-breadcrumbs .crumb-current {
  color: #7FD9F5;
}

/* Kicker & Badges */
.hero-v2-kicker-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.hero-v2-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7FD9F5;
}
.hero-v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(127, 217, 245, 0.12);
  border: 1px solid rgba(127, 217, 245, 0.28);
  border-radius: 0;
  color: #7FD9F5;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Typography */
.hero-v2-title {
  font-size: clamp(2.3rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero-v2-lede {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 640px;
}

/* Actions / Buttons */
.hero-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
}
.hero-v2-actions .btn {
  border-radius: 0 !important;
  font-weight: 700;
  padding: 14px 28px;
}
.hero-v2-actions .btn-primary {
  background: #7FD9F5;
  color: #120826;
  border: 1px solid #7FD9F5;
}
.hero-v2-actions .btn-primary:hover {
  background: #ffffff;
  color: #120826;
  border-color: #ffffff;
}
.hero-v2-actions .btn-outline-light,
.hero-v2-actions .btn-glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  backdrop-filter: blur(8px);
}
.hero-v2-actions .btn-outline-light:hover,
.hero-v2-actions .btn-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  color: #ffffff;
}

/* Highlights Rail */
.hero-v2-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-v2-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 3px solid #7FD9F5;
  border-radius: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: #ffffff;
}
.hero-v2-highlight-pill .h-label {
  color: #e5e7eb;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.hero-v2-highlight-pill .h-val {
  color: #7FD9F5;
  font-weight: 800;
}

/* Visual Column */
.page-hero-v2-col-visual {
  position: relative;
}
.hero-v2-image-frame {
  position: relative;
  z-index: 1;
}
.hero-v2-accent-frame {
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 2px solid #7FD9F5;
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-v2-image-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.55);
}
.hero-v2-floating-badge {
  position: absolute;
  bottom: 24px;
  left: -20px;
  z-index: 3;
  background: #ffffff;
  color: #120826;
  border-radius: 0;
  border-left: 4px solid var(--ub-purple, #4b1d6b);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  padding: 12px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-v2-floating-badge i {
  color: var(--ub-purple, #4b1d6b);
}

@media (max-width: 991px) {
  .page-hero-v2 {
    padding: 44px 0 56px;
  }
  .page-hero-v2-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .page-hero-v2-col-visual {
    max-width: 540px;
  }
  .hero-v2-accent-frame {
    right: -10px;
    bottom: -10px;
  }
  .hero-v2-image-frame img {
    height: 320px;
  }
  .hero-v2-floating-badge {
    left: 12px;
    bottom: 12px;
  }
}

/* ==========================================================================
   1C. PAGE HERO V3 (Clean Magazine / At-A-Glance Split Banner)
   Porcelain daylight canvas, architectural top gradient stripe,
   authoritative typography, interactive quick-action card
   ========================================================================== */
.page-hero-v3 {
  position: relative;
  background: #ffffff;
  border-bottom: 2px solid #e8ecf2;
  padding: 48px 0 64px;
  overflow: hidden;
}
.hero-v3-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #4b1d6b 0%, #0077aa 50%, #7FD9F5 100%);
}

.hero-v3-container {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 0 24px;
}

/* Breadcrumbs */
.hero-v3-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #6c757d;
}
.hero-v3-breadcrumbs a {
  color: #4b5563;
  text-decoration: none;
}
.hero-v3-breadcrumbs a:hover {
  color: var(--ub-purple, #4b1d6b);
  text-decoration: underline;
}
.hero-v3-breadcrumbs .crumb-sep {
  color: #adb5bd;
}
.hero-v3-breadcrumbs .crumb-current {
  color: var(--ub-purple, #4b1d6b);
  font-weight: 700;
}

/* Header */
.hero-v3-header {
  margin-bottom: 24px;
}
.hero-v3-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ub-purple, #4b1d6b);
  margin-bottom: 8px;
}
.hero-v3-title {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--ub-purple, #4b1d6b);
  margin: 0;
  letter-spacing: -0.025em;
}

/* Body Grid */
.hero-v3-body-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: start;
}
.hero-v3--no-sidebar .hero-v3-body-grid {
  grid-template-columns: 1fr;
}

.hero-v3-lede {
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  line-height: 1.65;
  color: #374151;
  margin: 0 0 28px;
}

/* Optional wordmark above the kicker. Sized as a mark (brand: logos 48-96px
   tall, never stretched or upscaled). */
.hero-v3-mark {
  display: block;
  width: auto;
  height: auto;
  max-height: 72px;
  max-width: min(320px, 100%);
  margin: 0 0 20px;
  border-radius: 0;
}

.hero-v3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.hero-v3-actions .btn {
  border-radius: 0 !important;
  font-weight: 700;
  padding: 14px 28px;
}
.hero-v3-actions .btn-primary {
  background: var(--ub-purple, #4b1d6b);
  color: #ffffff;
  border: 1px solid var(--ub-purple, #4b1d6b);
}
.hero-v3-actions .btn-primary:hover {
  background: #36134f;
  border-color: #36134f;
  color: #ffffff;
}
.hero-v3-actions .btn-secondary,
.hero-v3-actions .btn-outline-primary {
  background: transparent;
  color: var(--ub-purple, #4b1d6b);
  border: 2px solid var(--ub-purple, #4b1d6b);
}
.hero-v3-actions .btn-secondary:hover,
.hero-v3-actions .btn-outline-primary:hover {
  background: var(--ub-purple, #4b1d6b);
  color: #ffffff;
}

/* Sidebar Quick Card */
.hero-v3-sidebar {
  position: relative;
}
.hero-v3-card {
  background: #f8f9fc;
  border: 1px solid #e1e6ee;
  border-top: 4px solid var(--ub-blue, #0077aa);
  border-radius: 0;
  padding: 24px 26px;
  box-shadow: 0 8px 24px -6px rgba(18, 8, 38, 0.08);
}
.hero-v3-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e9f0;
}
.hero-v3-card-header i {
  color: var(--ub-blue, #0077aa);
  font-size: 1.15rem;
}
.hero-v3-card-header h2,
.hero-v3-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #120826;
  margin: 0;
}

.hero-v3-quicklinks {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-v3-quicklinks li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 0;
  color: #1f2937;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hero-v3-quicklinks li a:hover {
  background: #ffffff;
  border-color: var(--ub-blue, #0077aa);
  color: var(--ub-blue, #0077aa);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 119, 170, 0.12);
}
.hero-v3-quicklinks li a i {
  color: var(--ub-blue, #0077aa);
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}
.hero-v3-quicklinks li a:hover i {
  transform: translateX(3px);
}

.hero-v3-card-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #e5e9f0;
}
.hero-v3-card-contact .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-v3-card-contact .contact-link:hover {
  color: var(--ub-purple, #4b1d6b);
}
.hero-v3-card-contact .contact-link i {
  color: var(--ub-purple, #4b1d6b);
  width: 16px;
}

@media (max-width: 991px) {
  .page-hero-v3 {
    padding: 38px 0 48px;
  }
  .hero-v3-body-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- Fact rail ---------- */
.pg-facts {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--fact-overlap) * -1);
  padding-bottom: 0;
}
.pg-facts-inner {
  background: var(--white);
  box-shadow: 0 24px 54px rgba(27,16,35,0.18);
  display: flex;
  width: 100%;
}
.pg-fact {
  flex: 1 1 0;
  min-width: 0;
  padding: 26px 24px 24px;
  border-right: 1px solid #E6EBEE;
}
.pg-fact:last-child { border-right: 0; }
.pg-fact .n {
  font-size: 1.72rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ub-purple);
}
.pg-fact .n small {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-light);
  display: block;
  margin-top: 4px;
}
.pg-fact .l {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 3px solid var(--ub-blue);
  display: inline-block;
}
.pg-facts-source {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-light, #5a6570);
  font-style: italic;
}

/* ==========================================================================
   2. STICKY JUMP BAR
   --pg-header-h is measured at runtime by program.js. The site header is
   sticky and its height changes at 768px (the centennial ribbon hides), so
   a hard-coded offset pins this bar underneath it at one breakpoint or the
   other.
   ========================================================================== */
.pg-jump {
  position: sticky;
  top: var(--pg-header-h, 0px);
  z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E6EBEE;
  margin-top: 24px;
}
/* Hero clearance when followed by proof strip / facts rail: the hero's 104px
   bottom padding is the room the strip is pulled up into. */
.college-page-hero + .proof-strip,
.pg-hero + .proof-strip {
  margin-top: -44px;
  position: relative;
  z-index: 2;
}
.page-hero-v2 + .proof-strip,
.page-hero-v3 + .proof-strip {
  margin-top: 32px;
  position: relative;
  z-index: 2;
}
/* Spacing when jump bar follows a proof strip or facts rail */
.proof-strip:has(+ .pg-jump) {
  padding-bottom: 24px;
}
.proof-strip + .pg-jump,
.pg-facts + .pg-jump {
  margin-top: 16px;
}
/* If hero is followed immediately by jump bar */
.college-page-hero + .pg-jump,
.pg-hero + .pg-jump,
.page-hero-v2 + .pg-jump,
.page-hero-v3 + .pg-jump {
  margin-top: 0;
}
/* Breathing room under a section menu or jump bar. Designed ub/* sections
   bring their own top padding, but bare core blocks and the split layout
   do not, so without this the first paragraph sits flush against the bar
   (MarComm, 0px). Sized like the top of a section on each breakpoint. */
:is(.site-main, .page-program-detail) > :is(.ub-section-nav, .pg-jump) + :is(p, h2, h3, h4, ul, ol, figure, .wp-block-columns, .wp-block-group, .wp-block-table, .wp-block-image, .wp-block-embed, .wp-block-heading, .wp-block-list, .wp-block-paragraph) {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
:is(.site-main, .page-program-detail) > :is(.ub-section-nav, .pg-jump) + .college-layout {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
/* One section menu per screen. The page title's section menu also renders as
   the "In This Section" list at the top of the split layout's sidebar. From
   992px, where the sidebar sits beside the content, the menu bar above it is
   hidden; below 992px the bar stays as the collapsed "Section Menu" drawer and
   the sidebar list is hidden. The padding rule above still matches, which
   keeps the air between the title and the layout. */
@media (min-width: 992px) {
  :is(.site-main, .page-program-detail) > .ub-section-nav:has(+ .college-layout > .college-sidebar .college-sidebar-card--section) {
    display: none;
  }
}
/* Below 992px the bar's drawer is the section menu, so the sidebar list (which
   would sit under the content) is not repeated; hand-built quick links stay. */
@media (max-width: 991.98px) {
  .college-sidebar .college-sidebar-card--section {
    display: none;
  }
}
/* "Show all (N)" under a long Quick Links list; added by content-blocks.js. */
.college-sidebar-more {
  min-height: 44px;
  margin: 8px 0 0;
  padding: 8px 10px;
  background: none;
  border: 0;
  color: var(--ub-purple);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.college-sidebar-more:hover {
  color: var(--ub-blue-text, var(--ub-purple));
}
.college-sidebar-more:focus-visible {
  outline: 3px solid var(--ub-blue);
  outline-offset: 2px;
}
.college-sidebar-nav li.is-current > a {
  background: rgba(0, 167, 224, 0.1);
  color: var(--ub-purple);
  box-shadow: inset 3px 0 0 var(--ub-purple);
}
/* A designed ub/* section placed in the split layout's main column already
   sits inside the page container and the layout's rhythm. Its own section
   padding and inner gutter pushed a fee table ~170px down and 32px in beside
   the sidebar card (Cost & Aid). Keep only the gap between siblings. */
/* Callouts and profile cards are boxes, not sections: their padding is the
   space between the border and the text, so they keep it (Paying Your Bill,
   First Year, the president's message). */
.college-main > section:not(.college-callout):not(.college-dean):not(.ac-colleges):not(.cta-section):not(.ub-countdown-banner) {
  padding-top: 0;
  padding-bottom: 0;
}
.college-main > section:not(.college-callout):not(.college-dean) > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* Image cards in the main column: the grey band would start mid-page at the
   column edge. The head below carries no margin above it, so no padding either. */
.college-main > .ac-colleges {
  background: transparent;
  padding: 0;
}
/* Tinted and dark bands, the stat strip's grey slab and the table's grey variant
   would each paint a band that starts mid-page at the column edge. */
.college-main > :is(.pg-sec, .pg-labs, .pg-admit, .ub-table-sec, .ub-profile-sec, .proof-strip, .ub-milestone-cards, .ub-video-testimonials, .ub-video-gallery) {
  background: transparent;
}
.college-main > .pg-labs::before,
.college-main > .pg-labs::after {
  display: none;
}
.college-main > .proof-strip {
  margin: 0;
  padding: 0;
}
.college-main > .proof-strip > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* `.college-main h3` margin (32px) stacked on the card body's own padding, and
   on every other card's title. */
.college-main :is(.ac-college-body, .pg-onramp-card, .pg-lab, .pg-admit-card, .pg-opt, .ub-profile-card__body, .ub-milestone-body, .ub-vtest-body) :is(h3, h4) {
  margin-top: 0;
}
/* The role aside is a purple panel: `.college-main h3` and `p` repainted its text purple on purple. */
.college-main .pg-opt h3 {
  color: var(--white);
}
.college-main .pg-opt p {
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 0;
}
/* Section heads in the column take the column's own heading look (the data
   table's "Policies" head): `.display-lg` is sized for a full-width page and
   ran 58px beside the sidebar. Eyebrows keep their size; the space above them
   is the sibling gap below, not an extra 48px. */
body .college-main :is(.pg-head, .ub-table-head, .proof-lead, .ac-colleges > .container > .reveal) > h2:not(.screen-reader-text) {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.026em;
  color: var(--ub-purple);
  margin: 0 0 14px;
}
body .college-main :is(.pg-head, .ub-table-head, .proof-lead, .ac-colleges > .container > .reveal) .eyebrow-rule {
  margin: 0 0 10px;
}
body .college-main :is(.pg-head, .ub-table-head, .proof-lead, .ac-colleges > .container > .reveal) .section-lede {
  font-size: 1.12rem;
  line-height: 1.7;
  margin: 0;
}
.college-main :is(.pg-head, .ub-table-head, .proof-lead) {
  margin-bottom: 28px;
}
.college-main .ac-colleges > .container > .reveal + .ac-college-grid {
  margin-top: 28px;
}
.college-main .ac-college-grid:first-child {
  margin-top: 0;
}
@media (max-width: 900px) {
  body .college-main :is(.pg-head, .ub-table-head, .proof-lead, .ac-colleges > .container > .reveal) > h2:not(.screen-reader-text) {
    font-size: 1.45rem;
  }
}
/* Image cards: one card is a horizontal card (image left, text right) rather
   than a 320px tile beside two empty tracks, and a third card that would sit
   alone on the second row at 1100 spans the row the same way. */
@media (min-width: 769px) {
  .college-main .ac-college-grid:has(> :only-child) {
    grid-template-columns: 1fr;
  }
  .college-main .ac-college-grid > .ac-college:only-child {
    flex-direction: row;
  }
  .college-main .ac-college-grid > .ac-college:only-child > .ac-college-media {
    flex: 0 0 38%;
    height: auto;
    aspect-ratio: auto;   /* a horizontal card: the image fills the row's height */
    min-height: 220px;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .college-main .ac-college-grid:has(> :nth-child(3):last-child) > :nth-child(3) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .college-main .ac-college-grid:has(> :nth-child(3):last-child) > :nth-child(3) > .ac-college-media {
    flex: 0 0 38%;
    height: auto;
    aspect-ratio: auto;   /* a horizontal card: the image fills the row's height */
    min-height: 200px;
  }
}
/* Requirement cards sit two across, so a third card was alone on the second
   row beside an empty half (Testing, TRIO, Clery). Three cards go three across
   where the column is wide enough; an odd last card otherwise spans the row. */
@media (min-width: 769px) {
  .pg-admit-grid > .pg-admit-card:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1101px) {
  .pg-admit-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  .pg-admit-grid:has(> :nth-child(3):last-child) > .pg-admit-card {
    padding: 32px 28px 28px;
  }
  .pg-admit-grid > .pg-admit-card:nth-child(3):last-child:not(:only-child) {
    grid-column: auto;
  }
}
/* Two-across profile cards in the column blew a 150-300px headshot up to a
   500px square (GCSP faculty). They become horizontal cards: photo left at a
   size the originals hold, details right; one per row through the tablet band. */
@media (min-width: 769px) {
  .college-main .ub-profile-grid--cols-2:not(.ub-profile-grid--row) .ub-profile-card {
    flex-direction: row;
  }
  .college-main .ub-profile-grid--cols-2:not(.ub-profile-grid--row) .ub-profile-card__photo-wrap {
    flex: 0 0 176px;
    width: 176px;
    height: auto;
    align-self: flex-start;
    padding: 0;
    background: none;
  }
  .college-main .ub-profile-grid--cols-2:not(.ub-profile-grid--row) .ub-profile-card__photo {
    width: 100%;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .college-main .ub-profile-grid--cols-2:not(.ub-profile-grid--row) {
    grid-template-columns: 1fr;
  }
}
/* Contact strip in the column: a compact bordered card, details across in a
   grid, not a full-bleed band. The renderer styles the card and head inline,
   hence the !important. */
.college-main > section.ub-contact-strip-sec {
  padding: 0 !important;
}
.college-main .ub-contact-strip__inner {
  padding: 28px 32px !important;
  box-shadow: none !important;
}
.college-main .ub-contact-strip__inner > h2 {
  font-size: 1.65rem !important;
  line-height: 1.25;
  letter-spacing: -0.026em;
  margin: 0 0 14px !important;
}
.college-main .ub-contact-strip__inner > p {
  margin-bottom: 20px !important;
}
.college-main .ub-contact-strip__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 28px !important;
}
.college-main .ub-contact-item {
  align-items: flex-start !important;
  min-width: 0;
  overflow-wrap: anywhere;
}
.college-main .ub-contact-item i {
  margin-top: 5px;
}
@media (max-width: 600px) {
  .college-main .ub-contact-strip__inner {
    padding: 22px 20px !important;
  }
}
/* CTA band in the column: a purple panel, not a full-bleed band. With no
   padding its text touched both edges, and `.college-main h2` / `p` repainted
   the heading purple on purple (Login). The container keeps the zero gutter
   above; the panel's own padding replaces it. */
.college-main > section.cta-section {
  padding: 40px 44px;
}
.college-main > section.cta-section .cta-container {
  flex-wrap: wrap;
  gap: 24px 40px;
}
.college-main > section.cta-section .cta-text h2 {
  color: var(--white);
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.college-main > section.cta-section .cta-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.02rem;
  margin: 0;
}
@media (max-width: 600px) {
  .college-main > section.cta-section {
    padding: 28px 22px;
  }
}
.college-main > * + section,
.college-main > section + *,
.college-main > * + :is(.ub-accordion, .proof-strip),
.college-main > :is(.ub-accordion, .proof-strip) + * {
  margin-top: clamp(2rem, 4vw, 3rem);
}
/* On desktop a long section menu wraps to a second row instead of scrolling
   sideways behind a hidden scrollbar, which left the last pages unreachable
   (Tuition and Fees: 10 pages). Below 1101px the menu is a drawer. */
@media (min-width: 1101px) {
  /* Doubled class: the theme's style.css repeats the nowrap rules and loads later. */
  .ub-section-nav .ub-section-nav__track {
    overflow: visible;
  }
  .ub-section-nav .ub-section-nav__list {
    flex-wrap: wrap;
  }
}

/* Safety rule: in case jump bar is placed before proof strip */
.pg-jump + .proof-strip {
  margin-top: 0;
  padding-bottom: 40px;
}
.pg-jump-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pg-jump-links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  flex: 1 1 auto;
}
.pg-jump-links::-webkit-scrollbar { display: none; }
.pg-jump-links a {
  flex-shrink: 0;
  padding: 17px 15px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  /* Colour only  -  NOT `all`. With the border transitioning, the outgoing
     link's rule fades out while the incoming one fades in, so mid-scroll
     two links read as active and the bar smears. */
  transition: color 0.2s ease;
}
.pg-jump-links a:hover { color: var(--ub-purple); border-bottom-color: #D5DDE2; }
.pg-jump-links a.current {
  color: var(--ub-purple);
  border-bottom-color: var(--ub-blue);
}
.pg-jump-act { flex-shrink: 0; display: flex; gap: 9px; }
/* A clipped last link is the only cue that the strip scrolls. The fade sits
   over the strip's right end, and the end padding lets the last link scroll
   clear of it. When the links fit, the faded area is empty. */
.pg-jump-links {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  padding-right: 40px;
}
/* Once the script has measured the strip, an arrow takes over from the bare fade:
   it sticks to the strip's right edge while links remain beyond it and goes away
   at the end. Without the script the fade above still applies. */
.pg-jump.is-scrollable .pg-jump-links {
  -webkit-mask-image: none;
  mask-image: none;
}
.pg-jump.is-scrollable .pg-jump-links::after {
  content: "";
  flex: 0 0 52px;
  position: sticky;
  right: -40px; /* the strip's own end padding is outside the sticky box */
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23592D82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") right 8px center / 20px 20px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), #fff 55%);
}
.pg-jump.is-scrollable.is-at-end .pg-jump-links::after { display: none; }
.pg-jump-act .btn { padding: 10px 20px; font-size: 0.88rem; }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.pg-sec { padding: var(--section-pad) 0; }
.pg-sec--light { background: var(--bg-light); }
.pg-sec--white { background: var(--white); }

/* Adjacent sections on the SAME background stack two --section-pad values into
   one undivided gap  -  2 × 152px, with no colour change to explain it. A tint
   change earns that much air; an invisible seam does not. Collapse the pair to
   a single pad by dropping the lower section's top padding.
 *
 * Keyed to the tinted sections by name because .pg-embed and .pg-conc set no
 * background of their own and inherit white, so "same background" is not
 * something a selector can test for. Sections listed in the light group are the
 * ones that set --bg-light; everything else on a program page is white.
 *
 * Block order is editorial, so any pair can end up adjacent  -  this is a rule
 * about the element pair, not about one page's running order. */
.pg-sec + .pg-sec { padding-top: 0; }

/* A light section after a white one (or the reverse) keeps its full pad: the
   tint boundary is doing visible work and needs the room to read as a break.
   Custom content blocks also maintain their vertical breathing room when adjacent. */
.pg-sec + .pg-path,
.pg-sec + .pg-recog,
.pg-sec + .pg-admit,
.pg-sec + .pg-more,
.pg-sec + .pg-sec--light,
.pg-sec + .pg-onramp,
.pg-sec + .pg-conc,
.pg-sec + .ub-profile-sec,
.pg-sec + .pg-out,
.pg-sec + .pg-voices,
.pg-sec + .pg-embed,
.pg-path + .pg-sec,
.pg-recog + .pg-sec,
.pg-admit + .pg-sec,
.pg-more + .pg-sec,
.pg-sec--light + .pg-sec,
.pg-onramp + .pg-sec,
.pg-conc + .pg-sec,
.ub-profile-sec + .pg-sec,
.pg-out + .pg-sec,
.pg-voices + .pg-sec,
.pg-embed + .pg-sec { padding-top: var(--section-pad); }

/* Split Sections & FAQ Sections - normalized, elegant vertical rhythm */
.ub-split-sec,
.pg-sec.ub-split-sec {
  padding: clamp(3rem, 4.5vw, 4.5rem) 0;
}
.pg-faq,
.pg-sec.pg-faq,
.pg-sec.ub-accordion-sec {
  padding: clamp(3rem, 4.5vw, 4.5rem) 0;
}
/* Quote cards, data tables and the video showcase take the same rhythm. On
   program and landing pages they sit between other sections, and a full
   --section-pad above and below stacked ~300px of empty white around a single
   quote or a three-row course table. `section.` outranks the block sheets'
   own `padding: var(--section-pad)`, and the pair rules that drop a top pad
   between two of them still win. */
.pg-sec.pg-voices,
section.ub-table-sec,
section.ub-video-showcase {
  padding: clamp(3rem, 4.5vw, 4.5rem) 0;
}
/* The white section after one of them (or after a lone callout) starts at the
   same rhythm instead of a full pad: white on white is one run of content. A
   tinted neighbour keeps its full pad, since the tint change is the break. */
:is(.pg-sec.pg-voices, section.ub-table-sec:not(.ub-table-sec--dark), .container:has(> :is(.college-callout, .college-dean):only-child))
  + :is(.pg-out, .pg-onramp, .pg-sec--white, .pg-voices, .pg-faq, .ub-split-sec) {
  padding-top: clamp(3rem, 4.5vw, 4.5rem);
}
/* And the mirror seam: a white section directly above one of them ends at the
   same rhythm, so the white between them is one pad, not 152px plus one.
   (`:has()` cannot nest, so the callout/profile wrapper is matched by its child.) */
:is(.pg-out, .pg-onramp, .pg-sec--white, .pg-conc, .pg-voices, .ub-split-sec):has(+ :is(.pg-voices, .ub-split-sec, section.ub-table-sec:not(.ub-table-sec--dark)), + .container > :is(.college-callout, .college-dean):only-child) {
  padding-bottom: clamp(3rem, 4.5vw, 4.5rem);
}
/* A profile card between sections (program director) has a top margin but
   nothing below it, so its bottom edge sat flush on the next band. */
.container:has(> .college-dean:only-child) + section {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
/* A light icon-card band turns white next to a pale band (rule further down), so
   on its other side it can meet a white section: white on white is one run, and
   that seam takes one pad instead of two (MPH: ~250px between onramp and labs). */
:is(.pg-onramp, .pg-out, .pg-sec--white, .pg-voices, .pg-conc, .ub-split-sec)
  + .pg-labs--light:has(+ :is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white)) {
  padding-top: 0;
}
:is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white)
  + .pg-labs--light + :is(.pg-onramp, .pg-out, .pg-sec--white, .pg-voices, .pg-conc, .ub-split-sec) {
  padding-top: 0;
}
/* The stat strip already ends on 100px of white; a white section under it
   starts at its content instead of adding its own pad on top. */
.proof-strip + :is(.ub-split-sec, .pg-voices, section.ub-table-sec:not(.ub-table-sec--dark)) {
  padding-top: 0;
}
/* The video showcase is tinted: after another tinted section the pair is one
   grey run, so it drops its top pad like the other same-tint pairs. */
:is(.pg-labs--light, .pg-sec--light, .pg-admit, .pg-more, .pg-recog) + section.ub-video-showcase {
  padding-top: 0;
}
.ub-split-sec .split-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.ub-split-sec .split-content { flex: 1 1 480px; }
/* A long single word ("Neuromusculoskeletal") sets the column's min-content,
   so at 320px it outgrew the viewport. `anywhere` lets it count as breakable. */
.ub-split-sec .split-content h2 { overflow-wrap: anywhere; }
/* The tinted text panel takes the homepage split's `padding: 8% 6%` from
   style.css: ~105px above and below a single paragraph at 1440. A text panel
   needs card padding, not hero padding. */
.ub-split-sec .split-content { padding: clamp(1.75rem, 3.5vw, 3rem); }
.ub-split-sec .split-content > :last-child { margin-bottom: 0; }
/* .split-image is also the homepage split's class in style.css, which gives it
   a 500px min-height for a background photo. This one holds an <img>, so the
   min-height only left white space under short images. */
.ub-split-sec .split-image {
  flex: 1 1 400px;
  min-height: 0;
}
/* Beside a long text panel the row's `align-items: center` floated the image to
   the middle with a blank block above it (Attracted to the Flame). It starts level
   with the top of the panel instead. */
@media (min-width: 769px) {
  .ub-split-sec .split-image { align-self: flex-start; }
}
/* Square, with elevation from the shadow scale. Never wider than the file, so a
   288px legacy image is not stretched to the 596px column. */
.ub-split-sec .split-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: var(--shadow-md);
}
.ub-split-sec .split-content .section-lede { margin: 0 0 20px; }
.ub-split-sec .split-bullets { list-style: none; padding: 0; margin: 24px 0 0; }
.ub-split-sec .split-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.ub-split-sec .split-bullets i { color: var(--ub-purple); margin-top: 4px; }
.ub-split-sec .split-row:last-child {
  margin-bottom: 0 !important;
}
.pg-faq .pg-head {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
/* The FAQ is a primary section: the brand's section padding. */
.pg-faq,
.pg-sec.pg-faq {
  padding: var(--section-pad) 0;
}

/* Adjacent split/faq sections (both white) - collapse double padding to avoid
   dead whitespace. Only these pairs: the generic `.pg-sec` pairs that used to
   be here also caught a grey section next to a white FAQ or split, and the
   tint change then had 24px around it. Those seams follow the general
   same-background rules above. */
.ub-split-sec + .pg-faq,
.pg-faq + .ub-split-sec,
.ub-split-sec + .ub-split-sec,
.pg-faq + .pg-faq {
  padding-top: clamp(0.75rem, 1.5vw, 1.5rem) !important;
}
.ub-split-sec:has(+ .ub-split-sec),
.ub-split-sec:has(+ .pg-faq) {
  padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}

/* Contact Strip Section - ensure top and bottom breathing room even when following another .pg-sec */
.ub-contact-strip-sec { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.pg-sec + .ub-contact-strip-sec,
.pg-sec.ub-contact-strip-sec { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
.ub-contact-strip__inner { border-radius: 0 !important; }

/* Two tinted sections in a row are the same-background case again. These win by
   coming later in source order at equal specificity (0,2,0). */
.pg-path + .pg-recog,
.pg-path + .pg-admit,
.pg-path + .pg-more,
.pg-recog + .pg-path,
.pg-recog + .pg-admit,
.pg-recog + .pg-more,
.pg-admit + .pg-path,
.pg-admit + .pg-recog,
.pg-admit + .pg-more,
.pg-more + .pg-path,
.pg-more + .pg-recog,
.pg-more + .pg-admit,
.pg-sec--light + .pg-sec--light { padding-top: 0; }

/* Recognition callout panel - balanced vertical padding */
.pg-recog,
.pg-sec.pg-recog {
  padding: clamp(2.5rem, 4vw, 4rem) 0;
}
.pg-sec + .pg-recog {
  padding-top: clamp(2.5rem, 4vw, 4rem);
}
.pg-path + .pg-recog {
  padding-top: 0;
}
.pg-recog + .pg-sec {
  padding-top: clamp(2.5rem, 4vw, 4rem);
}
/* Two recognition panels in a row (Awards and rankings, then Accreditations) sit
   on the same tint, so the seam is one gap between two panels: the first block's
   bottom pad alone, at the rhythm of adjacent cards. Both pads, plus the generic
   .pg-sec pair rule's full section pad, stacked 115-240px. */
.pg-recog + .pg-recog { padding-top: 0; }
.pg-recog:has(+ .pg-recog) { padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem); }

/* Adjacent role cards & catalog embeds - normalize white-on-white spacing */
.pg-out + .pg-out {
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}
.pg-out:has(+ .pg-out) {
  padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.pg-out + .pg-embed {
  padding-top: clamp(2rem, 3.5vw, 3.5rem) !important;
}
.pg-out:has(+ .pg-embed) {
  padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
}
.pg-head { margin-bottom: 44px; }
/* An eyebrow with no visible heading (the h2 is screen-reader only): the
   eyebrow labels what follows, so it sits close to it. */
.pg-head:has(> h2.screen-reader-text:last-child) { margin-bottom: 26px; }
.pg-head:has(> h2.screen-reader-text:last-child) .eyebrow-rule { margin-bottom: 0; }
.pg-head .display-lg + .section-lede { margin-top: 18px; }
/* Plain URLs in a lede (licensure notes) would otherwise push the page wider than a 320px screen. */
.pg-head .section-lede,
.pg-head .display-lg { overflow-wrap: anywhere; }

/* ==========================================================================
   3. ONRAMP  -  "does this fit my background?"
   The single biggest objection to a graduate AI degree is "my bachelor's
   isn't in computer science". This answers it before the curriculum, which
   is why it is section one and not a bullet list further down.
   ========================================================================== */
.pg-onramp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.pg-onramp-card {
  background: var(--white);
  border: 1px solid #E1E7EA;
  border-top: 4px solid var(--ub-purple);
  padding: 34px 30px 30px;
  position: relative;
  transition: var(--transition);
}
.pg-onramp-card:hover {
  border-top-color: var(--ub-blue);
  box-shadow: 0 18px 40px rgba(27,16,35,0.1);
  transform: translateY(-3px);
}
.pg-onramp-card .who {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ub-blue-text);
  margin-bottom: 12px;
}
.pg-onramp-card h3 {
  font-size: 1.34rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.016em;
  color: var(--ub-purple);
  margin-bottom: 13px;
}
.pg-onramp-card p {
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--text-light);
}
.pg-onramp-card .answer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #EDF1F3;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  gap: 10px;
  text-decoration: none;
}
.pg-onramp-card a.answer:hover {
  color: var(--ub-purple);
  text-decoration: underline;
}
.pg-onramp-card .answer i { color: var(--ub-blue); margin-top: 4px; flex-shrink: 0; }

/* ==========================================================================
   4. CONCENTRATIONS  -  the decision engine
   Choosing a track is the real decision on this page, so it gets an
   interactive tablist instead of four inert pills. All four panels are in
   the HTML and merely hidden, so the content stays crawlable for the
   AEO/SEO layer.
   ========================================================================== */
.pg-conc { background: var(--white); }
.pg-conc-shell {
  display: grid;
  /* minmax(0,…) not 1fr: a bare 1fr track has an automatic minimum of the
     item's min-content, and the rail's min-content is set by the tabs'
     210px min-width in the horizontal layout. That pushed the grid wider
     than the viewport and produced 471px of horizontal overflow at 390px. */
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 0;
  border: 1px solid #E1E7EA;
}
/* The rail is the grid cell; the tablist is nested inside it so the advisor
   nudge below is NOT a child of role="tablist" (a tablist may only contain
   tabs). */
.pg-conc-rail {
  background: var(--bg-light);
  border-right: 1px solid #E1E7EA;
  display: flex;
  flex-direction: column;
}
.pg-conc-tabs { display: flex; flex-direction: column; min-width: 0; }
.pg-conc-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #E1E7EA;
  border-left: 4px solid transparent;
  padding: 24px 24px 22px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  display: block;
  width: 100%;
}
.pg-conc-tab:last-child { border-bottom: 0; }
.pg-conc-tab .num {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-light);
  display: block;
  margin-bottom: 7px;
}
.pg-conc-tab .name {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text-main);
  display: block;
}
.pg-conc-tab:hover { background: #ECF1F3; }
.pg-conc-tab[aria-selected="true"] {
  background: var(--ub-purple);
  border-left-color: var(--ub-blue);
}
.pg-conc-tab[aria-selected="true"] .num { color: #7FD9F5; }
.pg-conc-tab[aria-selected="true"] .name { color: var(--white); }
.pg-conc-tab:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: -3px; }

/* The tab rail is a grid cell, so it stretches to the height of the tallest
   panel and leaves dead grey below track 04. Rather than collapse the rail,
   the leftover space carries the nudge that belongs exactly here: the
   student who has read all four tracks and still can't choose. */
.pg-conc-aside {
  margin-top: auto;
  border-top: 1px solid #E1E7EA;
  padding: 24px;
}
.pg-conc-aside .k {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 9px;
}
.pg-conc-aside p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 15px;
}
.pg-conc-aside .btn { width: 100%; text-align: center; }

.pg-conc-panels { padding: 40px 44px 44px; position: relative; }
.pg-conc-panel[hidden] { display: none; }
.pg-conc-panel h3 {
  font-size: 1.86rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ub-purple);
  margin-bottom: 14px;
}
.pg-conc-panel > p {
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0 0 1rem;
}
.pg-conc-panel > p:last-child { margin-bottom: 0; }
.pg-conc-panel > p.pg-conc-lede {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ub-purple);
  margin-bottom: 18px;
}

/* Header photo, as each legacy concentration page opened with one. */
.pg-conc-media { margin: 0 0 14px; aspect-ratio: 2 / 1; overflow: hidden; background: var(--bg-light); }
.pg-conc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Callout tiles: purple, outlined, purple - the legacy three-panel row. */
.pg-conc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.pg-conc-stat {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 26px 22px;
  background: var(--ub-purple);
  color: var(--white);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
}
.pg-conc-stat:nth-child(even) {
  background: var(--white);
  color: var(--ub-purple);
  border: 5px solid var(--ub-blue);
  padding: 21px 17px;
}

/* Pull quote with the graduate's headshot at a size that carries the face. */
.pg-conc-quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  margin: 34px 0;
  padding: 0;
}
.pg-conc-quote.has-photo { grid-template-columns: 220px minmax(0, 1fr); }
.pg-conc-quote-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pg-conc-quote-body {
  border-left: 6px solid var(--ub-purple);
  padding: 6px 0 6px 26px;
}
.pg-conc-quote blockquote { margin: 0; padding: 0; border: 0; }
.pg-conc-quote blockquote p {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ub-purple-dark);
  margin: 0;
}
.pg-conc-quote blockquote p::before { content: '\201C'; }
.pg-conc-quote blockquote p::after { content: '\201D'; }
.pg-conc-quote figcaption {
  margin-top: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-light);
}
.pg-conc-quote figcaption strong { color: var(--ub-purple); }

.pg-conc-panel > .pg-conc-note {
  margin-top: 26px;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--text-light);
}
.pg-conc-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 32px;
}
/* Text after the lists (no quote between) needs the same air as above them. */
.pg-conc-panel > .pg-conc-cols + p { margin-top: 30px; }
/* One list column takes the full width rather than half the panel. */
.pg-conc-cols:has(> .pg-conc-col:only-child) { grid-template-columns: minmax(0, 1fr); }
.pg-conc-col h4 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ub-blue);
  margin-bottom: 15px;
  display: inline-block;
}
.pg-conc-col ul { display: grid; gap: 9px; }
.pg-conc-col li {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--text-main);
  display: flex;
  gap: 10px;
}
.pg-conc-col li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ub-purple);
  flex-shrink: 0;
  margin-top: 8px;
}
.pg-conc-roles {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #EDF1F3;
}
.pg-conc-roles h4 {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 13px;
}
.pg-role-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pg-role-chip {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ub-purple-dark);
  background: var(--bg-light);
  border-left: 3px solid var(--ub-blue);
  padding: 8px 14px;
}
/* ==========================================================================
   5. CURRICULUM PATH
   ========================================================================== */
.pg-path,
.pg-sec.pg-path {
  background: var(--bg-light);
  padding: clamp(2.75rem, 4.5vw, 4.25rem) 0;
}
.pg-sec + .pg-path,
.pg-path + .pg-sec {
  padding-top: clamp(2.5rem, 4vw, 3.75rem);
}
.pg-path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pg-step {
  background: var(--white);
  padding: 0 0 28px;
  border: 1px solid #E1E7EA;
  position: relative;
}
/* Wedge-cut corner: the hero's diagonal, reduced to a corner detail. */
.pg-step::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 22px 22px;
  border-color: transparent transparent var(--ub-blue) transparent;
}
.pg-step-head {
  background: var(--ub-purple);
  color: var(--white);
  padding: 18px 24px 16px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.pg-step:nth-child(2) .pg-step-head { background: #4E2673; }
.pg-step:nth-child(3) .pg-step-head { background: var(--ub-purple-dark); }
.pg-step:nth-child(4) .pg-step-head { background: var(--ub-purple-deep); }
.pg-step-head .stage {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.pg-step-head .num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
  margin-top: 2px;
}
.pg-step-body { padding: 22px 24px 0; }
.pg-step-body h3 {
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.26;
  color: var(--ub-purple);
  margin-bottom: 11px;
}
.pg-step-body p {
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--text-light);
}
/* Path Footer - Centered, comfortable padding on paragraph and link */
.pg-path-foot,
.path-foot {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  /* Left, under left-aligned step cards. */
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding: 0;
}

.pg-path-foot p,
.path-foot p {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--text-light, #555e68);
  margin: 0;
  text-align: left;
  padding: 0.25rem 0;
}

.pg-path-foot a,
.pg-path-foot .btn,
.path-foot a,
.path-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 34px;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  border-radius: var(--btn-radius, 6px);
  text-decoration: none;
  transition: var(--transition, all 0.2s ease);
}

.pg-path-foot a:hover,
.pg-path-foot .btn:hover,
.path-foot a:hover,
.path-foot .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
}

/* ==========================================================================
   6. LABS & COMPUTE / ICON CARDS
   Accessible, modern cards supporting dark (Midnight) & light variants
   ========================================================================== */
.pg-labs {
  position: relative;
  background: var(--ink, #120826);
  color: var(--white, #ffffff);
  padding: var(--section-pad, 80px) 0;
  overflow: hidden;
}
.pg-labs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 42%;
  background: radial-gradient(circle at 10% 20%, rgba(89, 45, 130, 0.45) 0%, rgba(89, 45, 130, 0) 70%);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
  pointer-events: none;
}
.pg-labs > .container { position: relative; z-index: 2; }
.pg-labs .eyebrow-rule,
.v2 .pg-labs .eyebrow-rule { color: #7FD9F5; }
.pg-labs h2,
.pg-labs .display-lg,
.v2 .pg-labs h2,
.v2 .pg-labs .display-lg,
.v2 .pg-labs .pg-head h2 {
  color: var(--white, #ffffff);
}
.pg-labs .section-lede,
.v2 .pg-labs .section-lede { color: rgba(255, 255, 255, 0.88); font-size: 1.125rem; line-height: 1.6; }

.pg-labs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pg-labs-cta { margin-top: 32px; }

/* Base / Dark Card */
.pg-lab {
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid #7FD9F5;
  border-radius: 0;
  padding: 32px 28px 28px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}
.pg-lab:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(127, 217, 245, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 18px 38px -8px rgba(0, 0, 0, 0.65), 0 0 20px rgba(127, 217, 245, 0.12);
}

/* Icon Box */
.pg-lab-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: rgba(127, 217, 245, 0.12);
  border: 1px solid rgba(127, 217, 245, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.pg-lab:hover .pg-lab-icon-box {
  transform: scale(1.05);
  background: rgba(127, 217, 245, 0.18);
  border-color: rgba(127, 217, 245, 0.45);
}
.pg-lab-icon-box i,
.pg-lab > i {
  font-size: 1.35rem;
  color: #7FD9F5;
  display: block;
}
.pg-lab > i {
  margin-bottom: 18px;
}

/* Abbreviation Badge */
.pg-lab .abbr {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7FD9F5;
  background: rgba(127, 217, 245, 0.12);
  border: 1px solid rgba(127, 217, 245, 0.24);
  padding: 3px 8px;
  border-radius: 0;
  margin-bottom: 10px;
}

/* Heading & Text */
.pg-lab h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--white, #ffffff);
  margin: 0 0 12px;
}
.pg-lab p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 12px;
}

.pg-lab:has(.pg-lab-link) {
  cursor: pointer;
}
.pg-lab:has(.pg-lab-link) .pg-lab-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.pg-lab-action {
  margin-top: auto;
  padding-top: 14px;
  position: relative;
  z-index: 3;
}
.pg-lab-link,
.pg-lab .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #7FD9F5 !important;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.pg-lab-link .arrow,
.pg-lab .btn-text .arrow {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pg-lab-link:hover,
.pg-lab .btn-text:hover {
  color: #ffffff !important;
}
.pg-lab:hover .pg-lab-link .arrow,
.pg-lab:hover .btn-text .arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   Clean Light Theme Variant (.pg-labs--light)
   ========================================================================== */
.pg-labs--light {
  background: var(--bg-light, #f8f9fc);
  color: var(--ink, #120826);
}
.pg-labs--light::before {
  background: radial-gradient(circle at 10% 20%, rgba(75, 29, 107, 0.08) 0%, rgba(75, 29, 107, 0) 70%);
}
.pg-labs--light .eyebrow-rule,
.v2 .pg-labs--light .eyebrow-rule {
  color: var(--ub-purple, #4b1d6b);
}
.pg-labs--light h2,
.pg-labs--light .display-lg,
.v2 .pg-labs--light h2,
.v2 .pg-labs--light .display-lg,
.v2 .pg-labs--light .pg-head h2 {
  /* Purple, like every other section head on a light ground. */
  color: var(--ub-purple);
}
.pg-labs--light .section-lede,
.v2 .pg-labs--light .section-lede {
  color: var(--text-muted, #4b5563);
}

.pg-labs--light .pg-lab {
  background: #ffffff;
  border: 1px solid rgba(18, 8, 38, 0.08);
  border-top: 3px solid var(--ub-purple, #4b1d6b);
  border-radius: 0;
  box-shadow: 0 4px 18px rgba(18, 8, 38, 0.06);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}
.pg-labs--light .pg-lab:hover {
  background: #ffffff;
  border-color: rgba(75, 29, 107, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(18, 8, 38, 0.12), 0 0 20px rgba(75, 29, 107, 0.06);
}
.pg-labs--light .pg-lab-icon-box {
  border-radius: 0;
  background: rgba(75, 29, 107, 0.08);
  border-color: rgba(75, 29, 107, 0.16);
}
.pg-labs--light .pg-lab:hover .pg-lab-icon-box {
  background: rgba(75, 29, 107, 0.14);
  border-color: rgba(75, 29, 107, 0.3);
}
.pg-labs--light .pg-lab-icon-box i,
.pg-labs--light .pg-lab > i {
  color: var(--ub-purple, #4b1d6b);
}
.pg-labs--light .pg-lab .abbr {
  color: var(--ub-purple, #4b1d6b);
  background: rgba(75, 29, 107, 0.08);
  border-color: rgba(75, 29, 107, 0.18);
}
.pg-labs--light .pg-lab h3 {
  color: var(--ink, #120826);
}
.pg-labs--light .pg-lab p {
  color: #4b5563;
}
.pg-labs--light .pg-lab-link,
.pg-labs--light .pg-lab .btn-text {
  color: var(--ub-purple, #4b1d6b) !important;
}
.pg-labs--light .pg-lab-link:hover,
.pg-labs--light .pg-lab .btn-text:hover {
  color: #0077aa !important;
}

.pg-labs--white {
  background: #ffffff !important;
}
.pg-labs--white::before {
  display: none !important;
}
.pg-labs--white .pg-lab {
  background: var(--bg-light, #f8f9fc) !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid var(--ub-purple, #4b1d6b) !important;
  border-radius: 0 !important;
}
.pg-labs--white .pg-lab:hover {
  background: #ffffff !important;
  border-color: rgba(75, 29, 107, 0.4) !important;
  box-shadow: 0 16px 36px -8px rgba(18, 8, 38, 0.12), 0 0 20px rgba(75, 29, 107, 0.06) !important;
}

/* Light cards next to another pale band (admission, step path, curriculum, recognition, light cards) would
   merge into one grey slab: there the section takes the white ground with pale cards, so bands alternate. */
:is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white) + .pg-labs--light,
.pg-labs--light:has(+ :is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white)) {
  background: #ffffff;
}
:is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white) + .pg-labs--light::before,
.pg-labs--light:has(+ :is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white))::before {
  display: none;
}
:is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white) + .pg-labs--light .pg-lab,
.pg-labs--light:has(+ :is(.pg-sec--light, .pg-admit, .pg-path, .pg-curriculum, .pg-recog, .pg-labs--light):not(.pg-sec--white):not(.pg-labs--white)) .pg-lab {
  background: var(--bg-light, #f8f9fc);
  border-color: #e2e8f0;
  border-top-color: var(--ub-purple, #4b1d6b);
  box-shadow: none;
}

/* ==========================================================================
   7. OUTCOMES
   ========================================================================== */
.pg-out { background: var(--white); }
.pg-out-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 46px;
  align-items: start;
}
.pg-out-layout--no-aside,
.pg-out-layout:has(> :only-child) {
  grid-template-columns: 1fr;
}
.pg-out-layout--no-aside .pg-out-roles,
.pg-out-layout:has(> :only-child) .pg-out-roles {
  width: 100%;
}
.pg-out-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #E1E7EA;
  border: 1px solid #E1E7EA;
}
.pg-out-role {
  background: var(--white);
  padding: 22px 22px 20px;
}
.pg-out-role .t {
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ub-purple);
}
.pg-out-role .d {
  /* 13.9px in --text-light was under the 14px floor for that colour. */
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-main);
  margin-top: 7px;
  overflow-wrap: anywhere; /* bare URLs (state board links) widened the grid track */
}
.pg-opt {
  background: var(--ub-purple);
  color: var(--white);
  padding: 34px 32px 32px;
  position: relative;
  overflow: hidden;
}
.pg-opt::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent var(--ub-blue) transparent;
}
.pg-opt .tag {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  background: var(--ub-blue);
  color: var(--ink);
  padding: 5px 11px;
  margin-bottom: 16px;
}
.pg-opt h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 13px;
}
.pg-opt p { font-size: 0.97rem; line-height: 1.7; color: rgba(255,255,255,0.84); }
.pg-opt p + p { margin-top: 13px; }
.pg-opt a { color: #7FD9F5; text-decoration: underline; text-underline-offset: 3px; }
.pg-opt a:hover { color: var(--white); }

/* ==========================================================================
   8. RECOGNITION
   ========================================================================== */
.pg-recog { background: var(--bg-light); }
.pg-recog-inner {
  background: var(--white);
  border: 1px solid #E1E7EA;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: stretch;
}
/* No badge, no badge column. Without this the copy is auto-placed into the
   220px track reserved for the image and the whole panel becomes a column of
   two-word lines  -  which is what a program with no award looks like, and every
   program starts that way. The renderer sets the class; it is not left to the
   browser to infer. */
.pg-recog-inner--nobadge { grid-template-columns: 1fr; }
.pg-recog-badge {
  background: var(--ub-purple-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
}
.pg-recog-badge img { width: 152px; height: auto; display: block; }
/* Several marks stack in the badge column, each sized as a mark. */
.pg-recog-badges {
  flex-direction: column;
  gap: 24px;
}
.pg-recog-badges img {
  width: auto;
  max-width: 152px;
  max-height: 96px;
}
/* badgeSurface:"light": dark-ink logos on transparent PNGs were near-illegible
   on purple-deep. */
.pg-recog-badge--light {
  background: var(--white);
  border-right: 1px solid #E1E7EA;
}
/* Marks with no body and no figures (a page of awards, nothing to argue): the
   marks are the content. The heading moves to the left and the marks sit in a
   row at a size their own small print can be read at, instead of 96px
   thumbnails in a side column beside an empty panel. The renderer sets the
   class. */
.pg-recog-inner--showcase {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.pg-recog-inner--showcase .pg-recog-copy {
  order: -1;
  align-self: center;
}
.pg-recog-inner--showcase .pg-recog-badges {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px 56px;
  padding: 44px 48px;
}
.pg-recog-inner--showcase .pg-recog-badges img {
  max-width: min(100%, 300px);
  max-height: 190px;
}
.pg-recog-inner--showcase .pg-recog-badge--light {
  border-right: 0;
  border-left: 1px solid #E1E7EA;
}
@media (max-width: 1100px) {
  .pg-recog-inner--showcase .pg-recog-badge--light {
    border-left: 0;
    border-top: 1px solid #E1E7EA;
    border-bottom: 0;
  }
}
@media (max-width: 768px) {
  .pg-recog-inner--showcase .pg-recog-badges { gap: 28px 32px; padding: 30px 24px; }
  .pg-recog-inner--showcase .pg-recog-badges img { max-width: 100%; max-height: 140px; }
}
/* Up to three marks stay on one row on a wide screen: at 300px each plus the gaps
   the third wrapped under the first two (the AI landing page). They may shrink to
   share the row; a fourth lets the row wrap again. */
@media (min-width: 1101px) {
  .pg-recog-inner--showcase .pg-recog-badges:not(:has(> :nth-child(4))) {
    flex-wrap: nowrap;
    gap: 32px;
    padding: 44px 40px;
  }
  .pg-recog-inner--showcase .pg-recog-badges:not(:has(> :nth-child(4))) img {
    flex: 0 1 auto;
    min-width: 0;
    object-fit: contain;
  }
}
.pg-recog-copy { padding: 42px 44px 40px; }
.pg-recog-copy h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--ub-purple);
  margin-bottom: 16px;
}
.pg-recog-copy p { font-size: 1.02rem; line-height: 1.72; color: var(--text-light); }
.pg-recog-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #EDF1F3;
}
.pg-recog-marks > div { border-top: 3px solid var(--ub-blue); padding-top: 12px; }
.pg-recog-marks .n {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ub-purple);
}
.pg-recog-marks .l {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.4;
}
.pg-footnote,
.pg-recog-copy .pg-footnote {   /* outranks .pg-recog-copy p, which set 1.02rem */
  margin-top: 22px;
  font-size: 0.83rem;
  font-style: italic;
  /* Was #8A97A0: 3.76:1 on white, fails WCAG AA for normal text. */
  color: var(--text-light);
}

/* ==========================================================================
   9. VOICES
   ========================================================================== */
.pg-voices { background: var(--white); }
.pg-voices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  /* Each card is as tall as its own quote. Stretching them to the tallest in the
     row left short quotes sitting in a large empty box. */
  align-items: start;
}
.pg-voice {
  --pg-voice-lines: 6;
  background: var(--bg-light);
  border-left: 4px solid var(--ub-purple);
  padding: 32px 34px 30px;
  position: relative;
}
.pg-voice::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  right: 24px;
  font-size: 6rem;
  line-height: 1;
  font-weight: 800;
  color: rgba(89,45,130,0.1);
  pointer-events: none;
}
.pg-voice blockquote { margin: 0; }
.pg-voice blockquote p {
  font-size: 1.13rem;
  line-height: 1.66;
  font-weight: 500;
  color: var(--text-main);
  position: relative;
  z-index: 1;
}
/* The person comes first: the photo, name and role, then what they said. The
   rule under the byline separates the two. */
.pg-voice-by {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #DFE6EA;
  /* Clear of the 6rem quote mark in the top-right corner. */
  padding-right: 56px;
  position: relative;
  z-index: 1;
}
.pg-voice-by img {
  width: 68px;
  height: 68px;
  border-radius: 50%;   /* inherently circular  -  the radius exception */
  object-fit: cover;
  flex-shrink: 0;
}
.pg-voice-by .who { font-size: 1rem; font-weight: 700; color: var(--ub-purple); }
.pg-voice-by .what { font-size: 0.85rem; color: var(--text-light); margin-top: 2px; }

/* Story cards: a quote with a photograph, heading and paragraph above it.
   The photograph runs to the card's edges; the byline moves under the
   paragraph, ruled off from it. Cards in a row share a height. */
.pg-voices-grid:has(> .pg-voice--story) { align-items: stretch; }
.pg-voices .pg-voice--story {
  border-left: 0;
  border-top: 4px solid var(--ub-purple);
  padding-top: 0;
}
.pg-voices .pg-voice--story:nth-child(even) { border-top-color: var(--ub-blue); }
.pg-voice--story::before { content: none; }
.pg-voice-photo {
  margin: 0 -34px 30px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ub-purple-deep, #2a1240);
}
.pg-voice-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-voice-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--ub-purple);
  margin: 0 0 14px;
}
.pg-voice-text {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text-light);
  margin: 0 0 28px;
}
.pg-voice--story .pg-voice-by {
  padding: 24px 0 0;
  margin-bottom: 14px;
  border-bottom: 0;
  border-top: 1px solid #DFE6EA;
}
.pg-voice--story blockquote p { font-size: 1.05rem; }
@media (max-width: 768px) {
  .pg-voice-photo { margin: 0 -24px 24px; }
  .pg-voice-title { font-size: 1.4rem; }
}

/* Long quotes. quote-cards.js adds .is-clamped and keeps it only where the text
   overflows; with no script the whole quote shows. */
.pg-voice.is-clamped blockquote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pg-voice-lines);
  line-clamp: var(--pg-voice-lines);
  overflow: hidden;
}
.pg-voice-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 8px 0 -10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ub-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.pg-voice-more[hidden] { display: none; }
.pg-voice-more:hover { color: var(--ub-purple-dark); }
.pg-voice-more:focus-visible { outline: 3px solid var(--ub-purple); outline-offset: 3px; }
@media print {
  .pg-voice.is-clamped blockquote p { display: block; overflow: visible; }
  .pg-voice-more { display: none; }
}

/* Larger headshots (layout: portrait | feature). The default, compact, is the
   small round byline above and is untouched. Legacy showed these at about
   300 px; these two put them back to that size or more, but never much past the
   file's own width: the PHP adds .pg-voice--cap-N for a small file (N = about
   1.25x its width) and every photo below holds to --pg-voice-cap. Each card is
   its own size container so it picks its arrangement from the width it was
   given, not from the page: a card alone in a row, or the odd one left over at
   tablet width, lays out photo-beside-text, and a card in a narrow column
   stacks. Photos are cropped from the top down, so a face is not cut. */
.pg-voices .pg-voice--portrait,
.pg-voices .pg-voice--feature {
  container-type: inline-size;
  padding: 0;
  border-left: 0;
}
.pg-voice--portrait.has-photo::before,
.pg-voice--feature::before { content: none; }
.pg-voice--cap-160 { --pg-voice-cap: 160px; }
.pg-voice--cap-180 { --pg-voice-cap: 180px; }
.pg-voice--cap-200 { --pg-voice-cap: 200px; }
.pg-voice--cap-220 { --pg-voice-cap: 220px; }
.pg-voice--cap-240 { --pg-voice-cap: 240px; }
.pg-voice--cap-260 { --pg-voice-cap: 260px; }
.pg-voice--cap-280 { --pg-voice-cap: 280px; }
.pg-voice--cap-300 { --pg-voice-cap: 300px; }
.pg-voice--cap-320 { --pg-voice-cap: 320px; }
.pg-voice--cap-340 { --pg-voice-cap: 340px; }
.pg-voice--cap-360 { --pg-voice-cap: 360px; }
.pg-voice--cap-380 { --pg-voice-cap: 380px; }
.pg-voice--cap-400 { --pg-voice-cap: 400px; }
.pg-voice--cap-420 { --pg-voice-cap: 420px; }
.pg-voice--cap-440 { --pg-voice-cap: 440px; }
.pg-voice--cap-460 { --pg-voice-cap: 460px; }
.pg-voice--cap-480 { --pg-voice-cap: 480px; }
.pg-voice--cap-500 { --pg-voice-cap: 500px; }
.pg-voice--cap-520 { --pg-voice-cap: 520px; }
.pg-voice--cap-540 { --pg-voice-cap: 540px; }
.pg-voice--cap-560 { --pg-voice-cap: 560px; }
.pg-voice-frame { display: grid; grid-template-columns: minmax(0, 1fr); }
.pg-voice-portrait {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--pg-voice-cap, none);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--ub-purple-deep, #2a1240);
}
.pg-voice-main {
  position: relative;
  align-self: center;
  min-width: 0;
  padding: 28px 34px 30px;
}

/* Portrait: the photo heads the card, then the name, then the words. Cards in a
   row share a height (the grid stretches them and the frame fills the card), so
   a short quote does not leave a notch beside a long one. */
.pg-voices .pg-voice--portrait { border-top: 4px solid var(--ub-purple); }
.pg-voices .pg-voice--portrait:nth-child(even) { border-top-color: var(--ub-blue); }
.pg-voices--portrait .pg-voices-grid { align-items: stretch; }
.pg-voice--portrait .pg-voice-frame { height: 100%; }
.pg-voice--portrait .pg-voice-main { align-self: stretch; }
.pg-voice--portrait.has-photo .pg-voice-frame { grid-template-rows: auto 1fr; }
/* Stacked, the photo is a square set in the card with air round it, centred
   when the cap makes it narrower than the card. */
.pg-voice--portrait.has-photo .pg-voice-portrait {
  width: calc(100% - 56px);
  margin: 28px 28px 0;
  justify-self: center;
}
.pg-voice--portrait.has-photo .pg-voice-by { padding-right: 0; }
.pg-voice--portrait .pg-voice-by .who { font-size: 1.2rem; }
.pg-voice--portrait .pg-voice-by .what { font-size: 0.9rem; }
@container (min-width: 600px) {
  /* Beside the text the photo is the card's left column, 4:5, flush to the top
     and left; the card's own tint runs on below it, so a taller card gains air
     rather than a stretched photo. */
  .pg-voice--portrait.has-photo .pg-voice-frame {
    --pg-voice-ph: min(clamp(240px, 32cqw, 360px), var(--pg-voice-cap, 360px));
    grid-template-columns: var(--pg-voice-ph) minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .pg-voice--portrait.has-photo .pg-voice-portrait {
    width: 100%;
    margin: 0;
    aspect-ratio: 4 / 5;
    align-self: start;
    justify-self: stretch;
  }
  .pg-voice--portrait .pg-voice-main { padding: 32px 40px 34px; }
}
@container (min-width: 900px) {
  .pg-voice--portrait blockquote p { font-size: 1.3rem; line-height: 1.6; }
}

/* Five or more portraits go three across on a wide screen, not two: nine cards in
   two columns left one alone, and eighteen ran very tall. Four stay 2 x 2. A grid
   is six tracks with each card taking two, so a short last row is centred rather
   than hanging left (5 = 3 + 2, 7 = 3 + 3 + 1, 8 = 3 + 3 + 2). */
@media (min-width: 1101px) {
  .pg-voices--portrait .pg-voices-grid:has(> :nth-child(5)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .pg-voices--portrait .pg-voices-grid:has(> :nth-child(5)) > .pg-voice { grid-column: span 2; }
  .pg-voices--portrait .pg-voices-grid:has(> :nth-child(5)) > .pg-voice:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  .pg-voices--portrait .pg-voices-grid:has(> :nth-child(5)) > .pg-voice:last-child:nth-child(3n + 2) { grid-column: 4 / span 2; }
  .pg-voices--portrait .pg-voices-grid:has(> :nth-child(5)) > .pg-voice:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}

/* Feature: one testimonial to a row, the photo beside a large quote, the
   next row the other way round. The person follows the quote. */
section.pg-sec.pg-voices--feature .pg-voices-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 6vw, 88px);
}
.pg-voices .pg-voice--feature { background: transparent; }
.pg-voice--feature .pg-voice-frame { gap: 28px; }
.pg-voice--feature .pg-voice-main {
  padding: 24px 0 0;
  border-top: 4px solid var(--ub-purple);
}
.pg-voices .pg-voice--feature:nth-child(even) .pg-voice-main { border-top-color: var(--ub-blue); }
.pg-voice--feature blockquote::before {
  content: '\201C';
  display: block;
  height: 0.5em;
  margin-bottom: 18px;
  font-size: 5rem;
  line-height: 0.9;
  font-weight: 800;
  color: rgba(89,45,130,0.22);
}
.pg-voice--feature blockquote p {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.8rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.pg-voice--feature .pg-voice-by {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}
.pg-voice--feature .pg-voice-by .who { font-size: 1.35rem; }
.pg-voice--feature .pg-voice-by .what { font-size: 1rem; }
@container (min-width: 760px) {
  .pg-voice--feature.has-photo .pg-voice-frame {
    --pg-voice-ph: min(clamp(300px, 36cqw, 460px), var(--pg-voice-cap, 460px));
    grid-template-columns: var(--pg-voice-ph) minmax(0, 1fr);
    gap: clamp(40px, 6cqw, 88px);
    align-items: center;
  }
  .pg-voices .pg-voice--feature:nth-child(even).has-photo .pg-voice-frame {
    grid-template-columns: minmax(0, 1fr) var(--pg-voice-ph);
  }
  .pg-voice--feature:nth-child(even) .pg-voice-portrait { grid-column: 2; grid-row: 1; }
  .pg-voice--feature:nth-child(even) .pg-voice-main { grid-column: 1; grid-row: 1; }
  .pg-voice--feature .pg-voice-main {
    max-width: 52rem;
    padding: 0 0 0 36px;
    border-top: 0;
    border-left: 4px solid var(--ub-purple);
  }
  .pg-voices .pg-voice--feature:nth-child(even) .pg-voice-main { border-left-color: var(--ub-blue); }
  .pg-voice--feature:not(.has-photo) .pg-voice-main { max-width: 62rem; }
}

/* A button at the foot of a card (a row with linkText and linkUrl), in every
   layout. */
.pg-voice-link { margin-top: 22px; }

/* Carousel (layout: carousel): the portrait card in a scroll-snap row, three
   across, two at tablet width, one on a phone. The scrolling, controls and
   counter are the gallery-slider engine (gallery-slider.css / .js, which this
   layout pulls in); this is only the card sizing. Without JS the row scrolls
   and the next card peeks in. */
.pg-voices-car { --pg-car-gap: 28px; }
.pg-voices-car .pg-voices-track {
  gap: var(--pg-car-gap);
  align-items: stretch;
  padding-bottom: 6px;
  background: transparent;
}
.pg-voices-car.ub-gal .pg-voice.ub-gal-slide {
  flex: 0 0 calc((100% - 2 * var(--pg-car-gap)) / 3);
  min-width: 0;
  flex-direction: column;
  background: var(--bg-light);
}
.pg-voices-car .pg-voice-frame { flex: 1; grid-template-rows: auto 1fr; }
.pg-voices-car .pg-voice-main { display: flex; flex-direction: column; align-self: stretch; }
.pg-voices-car .pg-voice-link { margin-top: auto; padding-top: 22px; }
@media (max-width: 1100px) {
  .pg-voices-car.ub-gal .pg-voice.ub-gal-slide { flex-basis: calc((100% - var(--pg-car-gap)) / 2); }
}
@media (max-width: 768px) {
  .pg-voices-car.ub-gal .pg-voice.ub-gal-slide { flex-basis: 86%; }
  .pg-voices-car.is-ready.ub-gal .pg-voice.ub-gal-slide { flex-basis: 100%; }
}

/* ==========================================================================
   10. ADMISSION SNAPSHOT
   ========================================================================== */
.pg-admit { background: var(--bg-light); }
.pg-admit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.pg-admit-card {
  background: var(--white);
  border: 1px solid #E1E7EA;
  padding: 36px 34px 32px;
}
.pg-admit-card h3 {
  font-size: 1.34rem;
  font-weight: 700;
  color: var(--ub-purple);
  margin-bottom: 20px;
}
.pg-req { display: grid; gap: 15px; }
.pg-req li {
  display: flex;
  gap: 13px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--text-main);
}
.pg-req li i { color: var(--ub-blue); margin-top: 5px; flex-shrink: 0; }

/* Deadline timeline: the rule is the spine, the squares are the dates. */
.pg-dates { display: grid; gap: 0; }
.pg-date {
  display: grid;
  /* "December 1" wrapped inside a fixed 96px column. */
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #EDF1F3;
  align-items: baseline;
}
.pg-date:last-child { border-bottom: 0; }
.pg-date .d {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ub-purple);
  border-left: 3px solid var(--ub-blue);
  padding-left: 12px;
  white-space: nowrap;
}
.pg-date .t { font-size: 0.97rem; font-weight: 600; color: var(--text-main); }
.pg-date .s { font-size: 0.87rem; color: var(--text-light); margin-top: 3px; }
/* Narrow cards: the date column and the 20px gap left the label ~110-180px, so
   "Fall Open House" wrapped a word per line. Stack the date above its label. */
@media (max-width: 768px) {
  .pg-date { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
}
.pg-admit-card .btn { margin-top: 26px; }
/* Optional copy around the list: an intro before it, a note after it. */
.pg-admit-intro,
.pg-admit-note {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--text-light);
  margin: 0 0 20px;
}
.pg-admit-note { margin: 22px 0 0; }
.pg-admit-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.pg-admit-acts .btn { margin-top: 0; }
@media (max-width: 768px) {
  .pg-admit-acts .btn { width: 100%; }
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.pg-faq { background: var(--white); }
.pg-faq .pg-head { margin-inline: 0; text-align: left; }
.pg-faq-list { width: 100%; max-width: 100%; margin-inline: auto; border-top: 1px solid #E1E7EA; }
.pg-faq details { border-bottom: 1px solid #E1E7EA; }
.pg-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 46px 22px 0;
  position: relative;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-main);
  transition: var(--transition);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary:hover { color: var(--ub-purple); }
.pg-faq summary::after {
  content: '\002B';
  position: absolute;
  right: 8px;
  top: 22px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ub-blue-text);
  transition: transform 0.25s ease;
}
.pg-faq details[open] summary { color: var(--ub-purple); }
.pg-faq details[open] summary::after { content: '\2212'; }
.pg-faq summary:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: 2px; }
/* ub_accordion_parts() markup: an h3 holding a button, same look as the summary
   above. The heading resets so only the button carries the type. */
.pg-faq-item { border-bottom: 1px solid #E1E7EA; }
.pg-faq .pg-faq-q {
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.pg-faq .pg-faq-trigger {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  padding: 24px 46px 22px 0;
  position: relative;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-main);
  transition: var(--transition);
}
.pg-faq .pg-faq-trigger:hover { color: var(--ub-purple); }
.pg-faq .pg-faq-trigger::after {
  content: '\002B';
  content: '\002B' / '';
  position: absolute;
  right: 8px;
  top: 22px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ub-blue-text);
}
.pg-faq .pg-faq-trigger[aria-expanded="true"] { color: var(--ub-purple); }
.pg-faq .pg-faq-trigger[aria-expanded="true"]::after { content: '\2212'; content: '\2212' / ''; }
.pg-faq .pg-faq-trigger:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: 2px; }
/* A closed panel is hidden="until-found": content-visibility hides its content but
   keeps its box, so drop the padding that would otherwise show as a gap. */
.pg-faq-a[hidden],
.college-details__body[hidden] {
  padding: 0;
  border: 0;
}
.pg-faq-a { padding: 0 46px 26px 0; width: 100%; }
.pg-faq-a p {
  font-size: 1rem;
  line-height: 1.74;
  color: var(--text-light);
  max-width: 100%;
}
.pg-faq-a p + p { margin-top: 12px; }

/* ==========================================================================
   12. MORE IN THIS PROGRAM (replaces the old left sidebar)
   ========================================================================== */
/* Full padding top AND bottom. It previously opened with `padding: 0`, which
   works only if whatever precedes it is white and supplies the gap itself  -  but
   the tint starts at the section box, so the heading's caps sat 15px under the
   colour change and read as clipped. A tinted band owns its own breathing room;
   this is the same rhythm every .pg-sec uses, and it holds whatever an editor
   drops above it. */
.pg-more { background: var(--bg-light); padding: var(--section-pad) 0; }
.pg-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pg-more-card {
  display: block;
  background: var(--white);
  border: 1px solid #E1E7EA;
  padding: 26px 24px 24px;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
}
.pg-more-card:hover {
  border-color: var(--ub-purple);
  box-shadow: 0 16px 34px rgba(27,16,35,0.1);
  transform: translateY(-3px);
}
.pg-more-card .k {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ub-blue-text);
  margin-bottom: 10px;
}
.pg-more-card .t {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ub-purple);
}
.pg-more-card .s { font-size: 0.88rem; line-height: 1.55; color: var(--text-light); margin-top: 8px; }
.pg-more-card .go { font-size: 0.85rem; font-weight: 700; color: var(--ub-blue-text); margin-top: 16px; display: block; }
.pg-more-card .go i { transition: transform 0.25s ease; }
.pg-more-card:hover .go i { transform: translateX(4px); }

/* ==========================================================================
   12b. DEFERRED EMBED (ub/catalog-embed)
   --------------------------------------------------------------------------
   The catalog widget folded in from the old curriculum sub-page. It is the one
   element on a program page that is page-sized rather than section-sized, so it
   stays behind a click and the section reserves space for it rather than
   letting a vendor iframe shove the rest of the page around on arrival.
   ========================================================================== */
.pg-embed-card {
  border: 1px solid #E1E7EA;
  border-radius: 0;
  background: var(--white);
  padding: 34px 32px 30px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.pg-embed-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  /* Holds the vertical space the iframe will take, so the click does not make
     everything below it jump. */
  min-height: 132px;
  justify-content: center;
}
.pg-embed-frame.is-loaded {
  display: block;
  min-height: 0;
}
.pg-embed-frame iframe {
  width: 100%;
  min-height: 560px;
  border: 0;
  border-radius: 10px;
  display: block;
}
.pg-embed-note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
}
.pg-embed-fallback {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid #EEF2F4;
  font-size: 0.94rem;
}
.pg-embed-fallback a {
  color: var(--ub-blue-text);
  font-weight: 600;
  text-decoration: none;
}
.pg-embed-fallback a:hover { text-decoration: underline; }
.pg-embed-fallback i { font-size: 0.78rem; margin-left: 6px; }

/* ==========================================================================
   20. UB / ACALOG CURRICULUM (Stacked Term Tables)
   Follows UB brand principles:
   - Clean, scannable two-column tables (Course Code | Course Title)
   - Brand tokens: --ub-purple (#592D82), --ub-purple-deep, --bg-light
   - Responsive, zero CLS, fully accessible
   ========================================================================== */
.pg-curriculum {
  padding-top: var(--section-pad, 100px);
  padding-top: clamp(2rem, 3.5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  background: var(--bg-light, #F8FAFB);
  border-top: 1px solid #E8ECEE;
}

.pg-curriculum .pg-head {
  margin-bottom: 20px;
}

.ub-curric-simple-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Toolbar (Count summary & Expand all / Collapse all) */
.ub-curric-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 0 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid #E2E8F0;
}
.ub-curric-total-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
}
.ub-curric-total-badge i {
  color: var(--ub-purple, #592D82);
  font-size: 0.95rem;
}
.ub-curric-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ub-purple, #592D82);
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ub-curric-toggle-all:hover {
  background: rgba(89, 45, 130, 0.05);
  border-color: var(--ub-purple, #592D82);
  color: var(--ub-purple-deep, #3B1B54);
}
.ub-curric-toggle-all:focus-visible {
  outline: 2px solid var(--ub-purple, #592D82);
  outline-offset: 2px;
}

/* Major Group Header (e.g. General Ed vs Core Requirements) */
.ub-curric-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 8px;
  margin-top: 18px;
  margin-bottom: 2px;
  border-bottom: 2px solid var(--ub-purple, #592D82);
}
.ub-curric-group-header:first-of-type {
  margin-top: 6px;
}
.ub-curric-group-title {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ub-purple-deep, #3B1B54);
  letter-spacing: -0.02em;
  margin: 0;
}
.ub-curric-group-credits {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ub-purple, #592D82);
  background: rgba(89, 45, 130, 0.08);
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Collapsible Term / Category Card */
.ub-curric-term-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid var(--ub-purple, #592D82);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ub-curric-term-card:hover {
  border-color: #CBD5E1;
  border-left-color: var(--ub-purple, #592D82);
  box-shadow: 0 4px 12px rgba(89, 45, 130, 0.06);
}

.ub-curric-term-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 15px 22px;
  background: #FFFFFF;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.15s ease;
}
/* A requirement with no course list ("Free electives - 48 credits"): a static row, not a toggle. */
.ub-curric-term-card--flat .ub-curric-term-header {
  cursor: default;
}
.ub-curric-term-card--flat .ub-curric-term-header:hover {
  background: #FFFFFF;
}
.ub-curric-term-header::-webkit-details-marker {
  display: none;
}
.ub-curric-term-header:hover {
  background: #FAFBFD;
}
.ub-curric-term-header:focus-visible {
  outline: 2px solid var(--ub-purple, #592D82);
  outline-offset: -2px;
}
.ub-curric-term-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ub-curric-term-title {
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
  letter-spacing: -0.01em;
}
.ub-curric-term-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ub-curric-term-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  background: #F1F5F9;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ub-curric-term-credits {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ub-purple, #592D82);
  background: rgba(89, 45, 130, 0.08);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ub-curric-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F8FAFC;
  color: var(--ub-purple, #592D82);
  border: 1px solid #E2E8F0;
  font-size: 0.74rem;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.ub-curric-term-header:hover .ub-curric-chevron {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

/* Expanded State */
details[open].ub-curric-term-card > .ub-curric-term-header {
  border-bottom: 1px solid #EDF2F7;
  background: #FAFBFD;
}
details[open].ub-curric-term-card > .ub-curric-term-header .ub-curric-chevron {
  transform: rotate(180deg);
  background: var(--ub-purple, #592D82);
  color: #FFFFFF;
  border-color: var(--ub-purple, #592D82);
}

.ub-curric-term-body {
  background: #FFFFFF;
}
.ub-curric-term-desc {
  padding: 12px 22px 4px;
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.55;
}

.ub-curric-term-desc > :first-child { margin-top: 0; }
.ub-curric-term-desc > :last-child { margin-bottom: 0; }
.ub-curric-term-desc p,
.ub-curric-term-desc ul,
.ub-curric-term-desc ol {
  margin: 0 0 0.6em;
}
.ub-curric-term-desc ul,
.ub-curric-term-desc ol {
  padding-left: 1.25em;
}
/* A long catalog list (milestones, concentration areas) reads as ruled rows in columns;
   numbers only where the catalog itself orders the list (<ol>). */
.ub-curric-term-desc :is(ul, ol):has(> li:nth-child(4)) {
  list-style: none;
  padding: 0;
  columns: 16rem 3;
  column-gap: 28px;
  counter-reset: ub-curric-li;
}
.ub-curric-term-desc :is(ul, ol):has(> li:nth-child(4)) > li {
  break-inside: avoid;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid #EEF1F5;
  color: #1F2937;
}
.ub-curric-term-desc ul:has(> li:nth-child(4)) > li::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 0.55em;
  background: var(--ub-purple, #592D82);
}
.ub-curric-term-desc ol:has(> li:nth-child(4)) > li::before {
  counter-increment: ub-curric-li;
  content: counter(ub-curric-li, decimal-leading-zero);
  flex: 0 0 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(89, 45, 130, 0.08);
  border: 1px solid rgba(89, 45, 130, 0.18);
  color: var(--ub-purple, #592D82);
  font-weight: 800;
  font-size: 0.78rem;
}

/* A section with no course table ends on its text */
.ub-curric-term-body > :last-child:not(.ub-curric-table-responsive) {
  margin-bottom: 16px;
}

/* Group intro and catalog notes (plain text, not cards) */
.ub-curric-group-intro {
  padding: 10px 2px 2px;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.55;
}
.ub-curric-group-intro > :first-child { margin-top: 0; }
.ub-curric-group-intro > :last-child { margin-bottom: 0; }
.ub-curric-note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  background: #F8FAFC;
  border-left: 3px solid var(--ub-purple, #592D82);
  font-size: 0.9rem;
  line-height: 1.55;
  color: #475569;
}
.ub-curric-term-body .ub-curric-note {
  margin: 12px 22px 0;
}
.ub-curric-note-label {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ub-purple, #592D82);
}
.ub-curric-note-text { min-width: 0; }
.ub-curric-note-text > :first-child { margin-top: 0; }
.ub-curric-note-text > :last-child { margin-bottom: 0; }

/* Course Table */
.ub-curric-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ub-curric-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.93rem;
}
.ub-curric-table thead th {
  padding: 10px 22px;
  background: #F8FAFC;
  color: #64748B;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #E2E8F0;
  border-top: none;
}
.ub-curric-th-code {
  width: 160px;
}
.ub-curric-table tbody tr {
  border-bottom: 1px solid #F1F5F9;
  transition: background-color 0.15s ease;
}
.ub-curric-table tbody tr:nth-child(even) {
  background-color: #FAFCFD;
}
.ub-curric-table tbody tr:hover {
  background-color: rgba(89, 45, 130, 0.035);
}
.ub-curric-td-code {
  padding: 12px 22px;
  width: 160px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
.ub-curric-code-link {
  color: var(--ub-purple, #592D82);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}
.ub-curric-code-link:hover {
  color: var(--ub-purple-dark, #431E66);
  text-decoration: underline;
}
.ub-curric-code-empty {
  color: #94A3B8;
}
.ub-curric-td-title {
  padding: 12px 22px;
  color: #334155;
  font-weight: 500;
  line-height: 1.45;
  vertical-align: middle;
}

/* Clean Official Catalog Footer Note */
.ub-curric-simple-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 22px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid var(--ub-purple, #592D82);
  border-radius: 4px;
  margin-top: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.ub-curric-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748B;
  font-size: 0.88rem;
  line-height: 1.5;
  flex: 1;
  min-width: 260px;
}
.ub-curric-footer-left i {
  color: var(--ub-purple, #592D82);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ub-curric-footer-right {
  flex-shrink: 0;
}
.ub-curric-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .pg-curriculum {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .ub-curric-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ub-curric-term-header {
    padding: 14px 16px;
  }
  .ub-curric-table thead th,
  .ub-curric-td-code,
  .ub-curric-td-title {
    padding: 10px 14px;
  }
  .ub-curric-simple-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .ub-curric-note {
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
  }
  .ub-curric-term-body .ub-curric-note {
    margin: 12px 14px 0;
  }
  .ub-curric-term-desc {
    padding: 12px 16px 4px;
  }
}


/* ==========================================================================
   13. FINAL CTA  -  moved to style.css
   --------------------------------------------------------------------------
   The mockup's `.pg-cta` is now the `program` variant of `ub/cta-band`, which
   renders `class="cta-section pg-cta"` (see docs/programs-plugin-plan.md §5.4).
   Its rules moved to style.css next to `.cta-section` for one reason: cta-band
   is a generic block usable on any page, but program.css only loads when a
   program block is present. Left here, a CTA band on a page with no other
   program block would render unstyled.

   Nothing to see here. Selectors live in style.css § "CTA  -  program variant".
   ========================================================================== */

/* ==========================================================================
   COUNT-AWARE GRIDS
   A fixed 3- or 4-column track leaves a lone last card or an empty column
   whenever the editor's count does not match it: four icon cards went 3+1,
   three steps left a blank fourth column, two route cards left a blank third.
   Desktop only; the 1100 and 768 rules below set their own columns.
   ========================================================================== */
@media (min-width: 1101px) {
  .pg-onramp-grid:has(> :nth-child(2):last-child),
  .pg-onramp-grid:has(> :nth-child(4):last-child),
  .pg-labs-grid:has(> :nth-child(2):last-child),
  .pg-labs-grid:has(> :nth-child(4):last-child),
  .ac-college-grid:has(> :nth-child(2):last-child),
  .ac-college-grid:has(> :nth-child(4):last-child),
  .pg-path-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-path-grid:has(> :nth-child(3):last-child),
  .pg-voices-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 769px) {
  /* One quote should not sit in half a grid beside an empty half. The card takes
     the whole row so its edges line up with the section heading and everything
     around it; only the quote text keeps a readable line length. */
  .pg-voices-grid > .pg-voice:only-child {
    grid-column: 1 / -1;
  }
  .pg-voices-grid > .pg-voice:only-child blockquote {
    max-width: 62rem;
  }
  /* An odd number of roles in two columns leaves a blank cell. */
  .pg-out-roles > .pg-out-role:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .pg-voices-grid > .pg-voice:last-child:nth-child(odd),
  .pg-labs-grid > :last-child:nth-child(odd),
  .pg-onramp-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .pg-facts-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .pg-fact {
    border-right: 1px solid #E6EBEE;
    border-top: 0;
  }
  .pg-fact:nth-child(2n) { border-right: 0; }
  .pg-fact:nth-child(n+3) { border-top: 1px solid #E6EBEE; }

  /* Brand: grids go 4 -> 2 at 1100 and to one column only at 768. */
  .pg-onramp-grid { grid-template-columns: repeat(2, 1fr); }
  /* The jump links need the whole bar at this width ("Military & Veterans"
     was clipped); the sticky CTA carries Apply / Request info. */
  .pg-jump-act { display: none; }
  .pg-conc-shell { grid-template-columns: 1fr; }
  .pg-conc-rail {
    border-right: 0;
    border-bottom: 1px solid #E1E7EA;
    min-width: 0;
    overflow: hidden;   /* contains the tabs' horizontal scroll */
  }
  /* The tabs stack as full-width rows above the panel. As a sideways strip,
     tabs 2-4 sat off-screen with no cue (About: the strategic plan; Campus map:
     every route but the first). The aside stays: on the map page it carries
     the Google Maps link and the Waterbury address. */
  .pg-conc-tabs {
    flex-direction: column;
    overflow-x: visible;
  }
  .pg-conc-tab {
    min-width: 0;
    border-bottom: 1px solid #E1E7EA;
    padding: 18px 20px 16px;
  }
  .pg-conc-panels { padding: 32px 28px 36px; }
  .pg-conc-quote.has-photo { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; }
  .pg-path-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-labs-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-out-layout { grid-template-columns: 1fr; gap: 34px; }
  .pg-recog-inner { grid-template-columns: 1fr; }
  .pg-recog-badge { padding: 30px; }
  .pg-recog-badges { flex-direction: row; flex-wrap: wrap; }
  .pg-recog-badge--light { border-right: 0; border-bottom: 1px solid #E1E7EA; }
  .pg-voices-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-admit-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-more-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pg-conc-quote.has-photo { grid-template-columns: 1fr; gap: 20px; }
  .pg-conc-quote-photo { max-width: 240px; }
  .pg-conc-quote-body { padding-left: 20px; }
  .pg-hero-inner { padding-left: 20px; max-width: none; }
  .pg-hero-ctas .btn, .pg-hero-ctas .btn-ghost { width: 100%; text-align: center; }
  .pg-facts-inner { display: flex; flex-direction: column; }
  .pg-fact { border-right: 0 !important; border-top: 1px solid #E6EBEE; }
  .pg-fact:first-child { border-top: 0; }

  .pg-jump { margin-top: 30px; }
  .pg-jump-inner { justify-content: flex-start; }
  /* The two buttons would eat the whole bar on a phone; the sticky CTA at
     the foot of the viewport already carries Apply / Request info. */
  .pg-jump-act { display: none; }
  .pg-jump-links a { padding: 14px 12px 11px; font-size: 0.86rem; }

  .pg-conc-cols { grid-template-columns: 1fr; gap: 24px; }
  .pg-onramp-grid,
  .pg-voices-grid { grid-template-columns: 1fr; }
  .pg-path-grid { grid-template-columns: 1fr; }
  .pg-out-roles { grid-template-columns: minmax(0, 1fr); }
  .pg-recog-copy { padding: 30px 26px 28px; }
  .pg-voice { --pg-voice-lines: 8; padding: 26px 24px 22px; }
  .pg-voice-by { padding-right: 40px; }
  .pg-admit-card { padding: 28px 24px 26px; }
  .pg-more-grid { grid-template-columns: 1fr; }
  .pg-labs {
    padding: var(--section-pad) 0 !important;
  }
  .pg-labs > .container {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .pg-labs-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pg-lab {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 24px 20px 22px !important;
  }
  /* .pg-cta responsive rules moved to style.css with the rest of the variant. */
}



/* ==========================================================================
   BREADCRUMB IN HEROES
   .college-page-hero and its toolbar are styled in SPLIT LAYOUT FAMILY below.
   ========================================================================== */
.academics-breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 16px;
    opacity: 0.95;
}

.academics-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
}

.academics-breadcrumb a:hover {
    text-decoration: underline;
}

.academics-breadcrumb-sep {
    margin: 0 8px;
    opacity: 0.7;
}

.academics-breadcrumb-current {
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   PERSONA CHIPS (ub/persona-chips)
   -------------------------------------------------------------------------- */
.ac-personas { margin-bottom: 30px; }
.ac-personas-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 13px;
}
.ac-persona-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-persona {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid #CBD4D8;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}
.ac-persona i { color: var(--ub-blue-text); font-size: 0.95rem; }
.ac-persona:hover {
  border-color: var(--ub-purple);
  color: var(--ub-purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.ac-persona[aria-pressed="true"] {
  background: var(--ub-purple);
  border-color: var(--ub-purple);
  color: var(--white);
}
.ac-persona[aria-pressed="true"] i { color: var(--white); }

/* --------------------------------------------------------------------------
   COLLEGE / IMAGE CARDS (ub/image-cards)
   -------------------------------------------------------------------------- */
.ac-colleges {
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2rem, 3vw, 2.75rem);
  background: var(--bg-light);
}
.ac-college-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 50px;
}
.ac-college {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--ub-purple);
  transition: var(--transition);
}
.ac-college:nth-child(even) { border-top-color: var(--ub-blue); }
.ac-college:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.ac-college-media { height: 186px; background-size: cover; background-position: center; }
/* The photo keeps one shape at every width instead of a fixed 186px: two or
   four cards across made each card ~650px wide and the 186px strip cut away
   the top and bottom of the photo (3.5:1 against 2:1 to 4:3 sources). 16:9
   was measured against every image-card photo on the site as the shape that
   crops least overall. Two classes so it also wins over the theme's copy of
   the 186px rule in academics.css. */
.ac-colleges .ac-college-media { height: auto; aspect-ratio: 16 / 9; }
.ac-college-body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.ac-college-body h3 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 12px;
}
.ac-college-body p {
  font-size: 0.94rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 22px;
}
.ac-college-more {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ub-purple);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--transition);
}
.ac-college:hover .ac-college-more { gap: 13px; }

@media (max-width: 1100px) {
  .ac-college-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Exactly three cards would leave a lone half-width card on the second row at
   1100; the full-width band has room to keep all three across. */
@media (min-width: 769px) and (max-width: 1100px) {
  .ac-colleges:not(.college-main > .ac-colleges) .ac-college-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .ac-college-grid { grid-template-columns: 1fr; }
}
/* Cards two across (two or four of them) are ~650px wide, and the 16:9 photo is
   then 365px tall: a tall slab for a photo that is a thumbnail of the place. A
   wider, shorter crop keeps the card in proportion. */
@media (min-width: 1101px) {
  .ac-college-grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) .ac-college-media,
  .college-main .ac-college-grid:has(> :nth-child(10):last-child) .ac-college-media {
    aspect-ratio: 21 / 9;
  }
}
/* A grid never ends on one card where a better count exists. Five or more cards
   go three across on a six-track grid, each card taking two, so a short last row
   is centred (5 = 3 + 2, 7 = 3 + 3 + 1, 8 = 3 + 3 + 2). Ten go five across on the
   full page, and two across beside a sidebar (where five columns would be about
   180px each). One to four cards keep their own layouts above. */
@media (min-width: 1101px) {
  .ac-college-grid:has(> :nth-child(5)):not(:has(> :nth-child(10):last-child)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ac-college-grid:has(> :nth-child(5)):not(:has(> :nth-child(10):last-child)) > .ac-college { grid-column: span 2; }
  .ac-college-grid:has(> :nth-child(5)):not(:has(> :nth-child(10):last-child)) > .ac-college:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  .ac-college-grid:has(> :nth-child(5)):not(:has(> :nth-child(10):last-child)) > .ac-college:last-child:nth-child(3n + 2) { grid-column: 4 / span 2; }
  .ac-college-grid:has(> :nth-child(5)):not(:has(> :nth-child(10):last-child)) > .ac-college:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
  .ac-colleges:not(.college-main > .ac-colleges) .ac-college-grid:has(> :nth-child(10):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }
  .college-main .ac-college-grid:has(> :nth-child(10):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   PROFILE GRID (ub/profile-grid) - Executive and Leadership Headshots
   -------------------------------------------------------------------------- */
.ub-profile-sec {
  padding: 32px 0 36px;
  background: #ffffff;
}
.ub-profile-sec .pg-head {
  margin-bottom: 18px;
}
.ub-profile-grid {
  display: grid;
  gap: 24px;
  margin-top: 16px;
}
.ub-profile-sec .pg-head + .ub-profile-grid,
.ub-profile-sec .pg-head + .ub-profile-grid--row {
  margin-top: 12px;
}
.ub-profile-sec > .container > .ub-profile-grid:first-child,
.ub-profile-sec > .container > .screen-reader-text + .ub-profile-grid {
  margin-top: 0;
}
.ub-profile-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.ub-profile-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ub-profile-grid--cols-4 .ub-profile-card__body {
  padding: 20px 18px 24px;
}
.ub-profile-grid--cols-4 .ub-profile-card__role {
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  margin-bottom: 5px;
}
.ub-profile-grid--cols-4 .ub-profile-card__name {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 6px 0;
}
.ub-profile-grid--cols-4 .ub-profile-card__dept {
  font-size: 0.84rem;
  line-height: 1.35;
  margin-bottom: 10px;
}
.ub-profile-grid--cols-4 .ub-profile-card__bio {
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.ub-profile-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ub-profile-card {
  background: var(--white, #ffffff);
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--ub-purple, #592d82);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  height: 100%;
}
.ub-profile-card:nth-child(even) {
  border-top-color: var(--ub-blue, #005cb9);
}
.ub-profile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

/* Headshot container: NEVER CHOPPED. Proper 1:1 square framing */
.ub-profile-card__photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #edf0f5;
  overflow: hidden;
}
.ub-profile-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.35s ease;
}
.ub-profile-card:hover .ub-profile-card__photo {
  transform: scale(1.03);
}
/* Card layout: the headshot is a medium square, 176px, centred on the tinted band
   at the head of the card. Faculty files are 128-250px, and filling the 322px
   column showed them at up to 2.5x. A small file is held to ~1.25x its width by
   the .ub-profile-card--cap-N class the PHP adds. The text below keeps its own
   left-aligned column. */
.ub-profile-card--cap-100 { --ub-profile-ph: 100px; }
.ub-profile-card--cap-110 { --ub-profile-ph: 110px; }
.ub-profile-card--cap-120 { --ub-profile-ph: 120px; }
.ub-profile-card--cap-130 { --ub-profile-ph: 130px; }
.ub-profile-card--cap-140 { --ub-profile-ph: 140px; }
.ub-profile-card--cap-150 { --ub-profile-ph: 150px; }
.ub-profile-card--cap-160 { --ub-profile-ph: 160px; }
.ub-profile-card--cap-170 { --ub-profile-ph: 170px; }
.ub-profile-grid--card .ub-profile-card__photo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  aspect-ratio: auto;
  height: 232px;   /* band = photo + 28px each side, so a smaller file does not move the text */
  padding: 28px 24px;
}
.ub-profile-grid--card .ub-profile-card__photo {
  width: var(--ub-profile-ph, 176px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.ub-profile-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ub-profile-card__role {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ub-purple, #592d82);
  margin-bottom: 6px;
}
.ub-profile-card:nth-child(even) .ub-profile-card__role {
  color: var(--ub-blue-text, #0a6e8f);
}
.ub-profile-card__name {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-main, #111111);
  line-height: 1.25;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.ub-profile-card__dept {
  font-size: 0.9rem;
  color: #555555;
  font-style: italic;
  margin-bottom: 12px;
  line-height: 1.4;
}
.ub-profile-card__dept a {
  color: var(--ub-blue-text, #0a6e8f);
  text-decoration: none;
  font-weight: 600;
  font-style: normal;
}
.ub-profile-card__dept a:hover {
  color: var(--ub-purple, #592d82);
  text-decoration: underline;
}
.ub-profile-card__bio {
  font-size: 0.92rem;
  color: var(--text-light, #444444);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}
/* .college-main p (style.css) has the same specificity as the bare rule, so
   the in-column selector is spelled out. */
.ub-profile-card__bio p,
.college-main .ub-profile-card__bio p {
  margin: 0 0 10px 0;
}
.ub-profile-card__bio p:last-child {
  margin-bottom: 0;
}
.ub-profile-card__link {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ub-blue-text, #0a6e8f);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ub-profile-card__link:hover {
  color: var(--ub-purple, #592d82);
}

/* ==========================================================================
   Row / Simple Photo + Bio Directory layout variant (Team & Faculty Rosters)
   ========================================================================== */
.ub-profile-grid--row {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
}

.ub-profile-grid--row:is(.ub-profile-grid--cols-2, .ub-profile-grid--cols-3) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 36px;
  width: 100%;
  max-width: 100%;
}
/* Three across when the row is wide enough for a 120px photo plus a readable
   body; two across through the tablet band, one column on phones (rules below). */
.ub-profile-grid--row.ub-profile-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 881px) and (max-width: 1100px) {
  .ub-profile-grid--row.ub-profile-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ub-profile-grid--row .ub-profile-card {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  height: auto;
  min-height: 0;
  overflow: visible;
  transition: none !important;
}

.ub-profile-grid--row:is(.ub-profile-grid--cols-2, .ub-profile-grid--cols-3) .ub-profile-card {
  gap: 18px;
  padding: 18px 0;
}

.ub-profile-grid--row:not(.ub-profile-grid--cols-2):not(.ub-profile-grid--cols-3) .ub-profile-card:first-child {
  padding-top: 8px;
}

.ub-profile-grid--row:not(.ub-profile-grid--cols-2):not(.ub-profile-grid--cols-3) .ub-profile-card:last-child {
  border-bottom: none !important;
  padding-bottom: 0;
}

.ub-profile-grid--row .ub-profile-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Headshot container: fixed, crisp portrait that never overlaps text */
.ub-profile-grid--row .ub-profile-card__photo-wrap {
  flex: 0 0 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  height: 160px !important;
  aspect-ratio: 1 / 1;
  border-radius: 0 !important;
  overflow: hidden;
  background: #edf0f5;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  margin: 0;
  align-self: flex-start;
}

.ub-profile-grid--row:is(.ub-profile-grid--cols-2, .ub-profile-grid--cols-3) .ub-profile-card__photo-wrap {
  flex: 0 0 120px !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: 120px !important;
  border-radius: 0 !important;
}

.ub-profile-grid--row .ub-profile-card__photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block;
}

.ub-profile-grid--row .ub-profile-card:hover .ub-profile-card__photo {
  transform: none !important;
}

/* Card Body: fills all remaining space, min-width: 0 prevents word-overflow */
.ub-profile-grid--row .ub-profile-card__body {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.ub-profile-grid--row .ub-profile-card__name {
  order: 1;
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--text-main, #111111);
  line-height: 1.25;
  margin: 0 0 4px 0;
}

.ub-profile-grid--row:is(.ub-profile-grid--cols-2, .ub-profile-grid--cols-3) .ub-profile-card__name {
  font-size: 1.15rem;
}

.ub-profile-grid--row .ub-profile-card__role {
  order: 2;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ub-purple, #592d82);
  margin-bottom: 6px;
}

.ub-profile-grid--row .ub-profile-card__dept {
  order: 3;
  font-style: normal;
  font-size: 0.9rem;
  color: #475569;
  margin-bottom: 10px;
  line-height: 1.45;
  word-break: break-word;
}

.ub-profile-grid--row .ub-profile-card__dept a {
  color: var(--ub-blue-text, #0a6e8f);
  text-decoration: none;
  font-weight: 600;
}

.ub-profile-grid--row .ub-profile-card__dept a:hover {
  color: var(--ub-purple, #592d82);
  text-decoration: underline;
}

.ub-profile-grid--row .ub-profile-card__bio {
  order: 4;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 0;
}

.ub-profile-grid--row .ub-profile-card__bio strong {
  color: var(--text-main, #111111);
  font-weight: 700;
}

.ub-profile-grid--row .ub-profile-card__link {
  order: 5;
  margin-top: 10px;
}

/* Responsive Media Queries */
@media (max-width: 1200px) and (min-width: 881px) {
  .ub-profile-grid--card.ub-profile-grid--cols-4,
  .ub-profile-grid:not(.ub-profile-grid--row).ub-profile-grid--cols-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

@media (max-width: 880px) and (min-width: 641px) {
  .ub-profile-grid--card.ub-profile-grid--cols-3,
  .ub-profile-grid--card.ub-profile-grid--cols-4,
  .ub-profile-grid:not(.ub-profile-grid--row).ub-profile-grid--cols-3,
  .ub-profile-grid:not(.ub-profile-grid--row).ub-profile-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .ub-profile-grid--row:is(.ub-profile-grid--cols-2, .ub-profile-grid--cols-3) {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Five profiles go five across on a wide screen, and 3 + 2 (the two centred) in
   the band below it, rather than four and one. */
@media (min-width: 1280px) {
  .ub-profile-grid--card.ub-profile-grid--cols-4:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}
@media (max-width: 1279px) and (min-width: 881px) {
  .ub-profile-grid--card.ub-profile-grid--cols-4:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, 1fr);
  }
  .ub-profile-grid--card.ub-profile-grid--cols-4:has(> :nth-child(5):last-child) > .ub-profile-card { grid-column: span 2; }
  .ub-profile-grid--card.ub-profile-grid--cols-4:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
  .ub-profile-grid--card.ub-profile-grid--cols-4:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 4 / span 2; }
}

@media (max-width: 640px) {
  .ub-profile-grid--card,
  .ub-profile-grid:not(.ub-profile-grid--row) {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  /* On a phone a headshot card is a compact row, the photo beside the text, not a
     full-width square above it. A card with a long bio keeps the band above: a
     paragraph in a 230px column runs to a very tall strip. */
  .ub-profile-grid--card .ub-profile-card.has-photo:not(.has-bio) {
    flex-direction: row;
    align-items: flex-start;
  }
  .ub-profile-grid--card .has-photo:not(.has-bio) .ub-profile-card__photo-wrap {
    flex: 0 0 112px;
    width: 112px;
    height: auto;
    padding: 0;
    align-self: flex-start;
    justify-content: flex-start;
  }
  .ub-profile-grid--card .has-photo:not(.has-bio) .ub-profile-card__photo { width: min(112px, var(--ub-profile-ph, 112px)); }
  .ub-profile-grid--card .has-photo:not(.has-bio) .ub-profile-card__body { min-width: 0; padding: 18px 18px 22px; }
  .ub-profile-grid--row:is(.ub-profile-grid--cols-2, .ub-profile-grid--cols-3) {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ub-profile-grid--row .ub-profile-card {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0;
  }
  .ub-profile-grid--row .ub-profile-card__photo-wrap,
  .ub-profile-grid--row:is(.ub-profile-grid--cols-2, .ub-profile-grid--cols-3) .ub-profile-card__photo-wrap {
    flex: 0 0 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height: 130px !important;
    aspect-ratio: 1 / 1;
    border-radius: 0 !important;
  }
  .ub-profile-grid--row .ub-profile-card__body {
    width: 100% !important;
  }
  .ub-profile-grid--row .ub-profile-card__name {
    font-size: 1.18rem;
  }
  .ub-profile-grid--row .ub-profile-card__bio {
    font-size: 0.92rem;
  }
}

/* --------------------------------------------------------------------------
   LARGE / EXECUTIVE PROFILE CARD (ub/profile-card with size=large or #president)
   The #president forks stay only because /about/leadership/ is saved without
   size=large; once it is, they can go. This sheet is the only copy of these
   rules (the theme's duplicates were retired).
   -------------------------------------------------------------------------- */
.college-dean--large,
#president.college-dean {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
  margin-top: 48px;
  padding: 48px !important;
  background: var(--white, #ffffff) !important;
  border-radius: 0;
  border: 1px solid #e5e7eb;
  border-top: 5px solid var(--ub-purple, #592d82) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}

.college-dean--large .college-dean__photo,
#president.college-dean .college-dean__photo {
  max-width: 380px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(89, 45, 130, 0.16) !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.college-dean--large .college-dean__photo img,
#president.college-dean .college-dean__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block;
}

.college-dean--large .college-dean__content h2,
#president.college-dean .college-dean__content h2 {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--ub-purple, #592d82);
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.college-dean--large .college-dean__content p,
#president.college-dean .college-dean__content p {
  font-size: 1.05rem;
  line-height: 1.72;
  color: #333333;
  margin-bottom: 18px;
}

.college-dean--large .college-dean__content .dean-sig,
#president.college-dean .college-dean__content .dean-sig {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid #eef2f6;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ub-purple, #592d82);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .college-dean--large,
  #president.college-dean {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 36px !important;
  }
  .college-dean--large .college-dean__photo,
  #president.college-dean .college-dean__photo {
    max-width: 300px !important;
  }
}

@media (max-width: 768px) {
  .college-dean,
  .college-dean:has(.college-dean__photo),
  .college-dean--large,
  #president.college-dean,
  .college-dean--large:has(.college-dean__photo),
  #president.college-dean:has(.college-dean__photo) {
    grid-template-columns: 1fr !important;
    padding: 24px 20px !important;
    gap: 24px !important;
  }
  .college-dean .college-dean__photo,
  .college-dean__photo,
  .college-dean:has(.college-dean__photo) .college-dean__photo,
  .college-dean--large .college-dean__photo,
  #president.college-dean .college-dean__photo {
    max-width: 180px !important;
    margin: 0 auto 12px auto !important;
  }
  .college-dean__content,
  .college-dean__content .dean-sig {
    min-width: 0 !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .college-dean--large .college-dean__content h2,
  #president.college-dean .college-dean__content h2 {
    font-size: 1.6rem;
    text-align: center;
  }
}

/* ==========================================================================
   ELEMENT BLOCKS: COUNTDOWN, VIDEO SHOWCASE, MILESTONES, TESTIMONIALS, GIVING
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED ELEMENT BUTTONS (Sharp Edges, 0px Radius, WCAG AAA Contrast)
   -------------------------------------------------------------------------- */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f8df8c 0%, #d4af37 55%, #b68d1d 100%);
  color: #12041d !important;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 0 !important;
  border: 1px solid #eed07a;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}
.btn-gold:hover, .btn-gold:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.5);
  filter: brightness(1.05);
  color: #12041d !important;
}

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #ffffff !important;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 0 !important;
  border: 2px solid #ffffff;
  text-decoration: none !important;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}
.btn-ghost-light:hover, .btn-ghost-light:focus {
  background: #ffffff;
  border-color: #ffffff;
  color: #230c33 !important;
  transform: translateY(-2px);
}

.btn-outline-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #3a1454 !important;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 0 !important;
  border: 2px solid #3a1454;
  text-decoration: none !important;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.btn-outline-purple:hover, .btn-outline-purple:focus {
  background: #3a1454;
  color: #ffffff !important;
  border-color: #3a1454;
}

/* ==========================================================================
   1. COUNTDOWN BANNER (ub/countdown-banner)
   Two shapes: the band (default) and the hero (variant "hero"), a full-bleed
   photographic page opener with breadcrumbs, the crest as a mark and the
   timer inside it. Purple, blue and sky only; the numerals are Outfit 800.
   ========================================================================== */
.ub-countdown-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 72px;
  background: linear-gradient(120deg, var(--ub-purple-deep, #2A1240) 0%, var(--ub-purple-dark, #3f1d61) 100%);
  border-top: 4px solid var(--ub-blue, #00a7e0);
  border-radius: 0 !important;
  color: #ffffff;
}
.ub-countdown-banner .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* `.ub-countdown-banner` in front: the theme's `.container { padding: 0 … }`
   prints after this sheet and would otherwise zero any block padding. */
.ub-countdown-banner .ub-countdown-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ub-countdown-shell {
  position: relative;
  z-index: 2;
  max-width: 56rem;
}

/* The crest is a mark, not a hero image: a fixed height, never stretched. */
.ub-countdown-crest { margin: 0 0 24px; }
.ub-countdown-crest img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 96px;
  filter: drop-shadow(0 4px 18px rgba(18, 8, 38, 0.55));
}

body .ub-countdown-banner .eyebrow-rule {
  color: var(--ub-sky, #7FD9F5);
  margin-bottom: 14px;
}
body .ub-countdown-banner .eyebrow-rule::before { background: var(--ub-sky, #7FD9F5); }

.ub-countdown-heading {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ub-countdown-subtext {
  max-width: 42rem;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Timer: square cells, numerals in Outfit 800. Not interactive, so no hover. */
.ub-timer-grid {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 28px;
}
.ub-countdown-banner .ub-timer-grid[hidden] { display: none; }
.ub-timer-card {
  flex: 0 1 128px;
  min-width: 0;
  padding: 16px 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(127, 217, 245, 0.45);
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ub-timer-num {
  display: block;
  color: #ffffff;
  font-family: var(--font-primary, 'Outfit', sans-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ub-timer-lbl {
  display: block;
  margin-top: 8px;
  color: var(--ub-sky, #7FD9F5);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ub-timer-divider {
  align-self: center;
  color: var(--ub-sky, #7FD9F5);
  font-family: var(--font-primary, 'Outfit', sans-serif);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

/* Only when the author sets dateLabel. */
.ub-countdown-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 8px 18px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(127, 217, 245, 0.45);
  border-radius: 0 !important;
}
.ub-countdown-date-badge i { color: var(--ub-sky, #7FD9F5); }

.ub-countdown-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* .btn-primary is --ub-purple, which all but vanishes on a purple ground.
   Sky fill with ink text, as the v2 hero does. */
.ub-countdown-banner .btn-primary {
  background: var(--ub-sky, #7FD9F5);
  border-color: var(--ub-sky, #7FD9F5);
  color: var(--ink, #1B1023);
}
.ub-countdown-banner .btn-primary:hover,
.ub-countdown-banner .btn-primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink, #1B1023);
}

/* ---------- Hero ---------- */
.ub-countdown-banner--hero {
  display: flex;
  min-height: clamp(620px, 82vh, 820px);
  padding: 0;
}
.ub-countdown-media,
.ub-countdown-scrim {
  position: absolute;
  inset: 0;
}
.ub-countdown-media { z-index: -2; }
.ub-countdown-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* A left-to-right purple wash that carries the copy, and a floor that deepens
   toward the bottom edge where the timer and buttons sit. */
.ub-countdown-scrim {
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(42, 18, 64, 0.88) 0%, rgba(42, 18, 64, 0.3) 40%, rgba(42, 18, 64, 0) 64%),
    linear-gradient(90deg, rgba(42, 18, 64, 0.95) 0%, rgba(89, 45, 130, 0.84) 36%, rgba(89, 45, 130, 0.4) 64%, rgba(89, 45, 130, 0.06) 100%);
}
.ub-countdown-banner--hero .ub-countdown-inner {
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  padding-top: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.ub-countdown-banner--hero .ub-countdown-shell { max-width: 46rem; }
.ub-countdown-banner--hero .ub-countdown-crest { margin-bottom: 20px; }
.ub-countdown-banner--hero .ub-countdown-crest img {
  height: 144px;
  max-height: none;
}
.ub-countdown-banner--hero .ub-countdown-heading {
  font-size: clamp(2.4rem, 4.2vw, 3.9rem);
  line-height: 1.03;
  text-shadow: 0 2px 24px rgba(18, 8, 38, 0.35);
}
.ub-countdown-banner--hero .ub-countdown-subtext {
  max-width: 40rem;
  margin-bottom: 24px;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
}
.ub-countdown-banner--hero .ub-timer-grid { margin-bottom: 24px; }
.ub-countdown-banner--hero .ub-timer-card { padding: 12px 10px; }

/* Breadcrumb on a frosted strip, legible over any photograph. */
.ub-countdown-crumbs { align-self: flex-start; }
.ub-countdown-crumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 9px 16px;
  list-style: none;
  background: rgba(18, 8, 38, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.ub-countdown-crumbs li {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.86);
}
.ub-countdown-crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 12px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.ub-countdown-crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ub-countdown-crumbs a:hover,
.ub-countdown-crumbs a:focus-visible {
  color: #ffffff;
  border-bottom-color: var(--ub-blue, #00a7e0);
}
.ub-countdown-crumbs [aria-current] { color: #ffffff; font-weight: 700; }

/* ---------- In the split layout's main column ----------
   The column rules below zero a section's padding and its container's gutter;
   a purple band is a panel, so it keeps its own padding, and the column's
   heading and paragraph colours would otherwise repaint it purple on purple. */
.college-main > section.ub-countdown-banner { padding: clamp(28px, 4vw, 48px); }
.college-main .ub-countdown-banner .ub-countdown-heading {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}
.college-main .ub-countdown-banner .ub-countdown-subtext {
  max-width: none;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
}
.college-main .ub-countdown-banner .ub-timer-num { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }

@media (max-width: 768px) {
  .ub-countdown-banner { padding: 48px 0 56px; }
  .ub-timer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ub-timer-divider { display: none; }
  .ub-timer-card { padding: 12px 4px; }
  .ub-timer-num { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .ub-timer-lbl { margin-top: 6px; letter-spacing: 0.02em; }
  .college-main > section.ub-countdown-banner { padding: 28px 18px; }
  .ub-countdown-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }

  /* The photo stacks above the purple panel, with no scrim, so the "100"
     formation stays visible; the breadcrumb rides on the photo. */
  .ub-countdown-banner--hero { display: block; min-height: 0; padding: 0; }
  .ub-countdown-media {
    position: relative;
    inset: auto;
    z-index: auto;
    aspect-ratio: 16 / 11;
  }
  .ub-countdown-scrim { display: none; }
  .ub-countdown-banner--hero .ub-countdown-inner { padding-top: 40px; padding-bottom: 56px; gap: 0; }
  .ub-countdown-banner--photo .ub-countdown-crumbs {
    position: absolute;
    top: 14px;
    left: var(--gutter, 22px);
    right: var(--gutter, 22px);
    z-index: 3;
  }
  .ub-countdown-crumbs ol { padding: 7px 12px; font-size: 0.8rem; }
  .ub-countdown-crumbs li + li::before { margin: 0 9px; }
  .ub-countdown-banner--hero .ub-countdown-crest img { height: 96px; }
  .ub-countdown-banner--hero .ub-countdown-heading { font-size: clamp(2.1rem, 9vw, 2.6rem); }
}

/* ==========================================================================
   2. VIDEO SHOWCASE (ub/video-showcase)
   ========================================================================== */
.ub-video-showcase {
  background-color: var(--bg-light);
  padding: var(--section-pad) 0;
}

/* A section head like every other: left-aligned, Display LG in UB Purple. */
.ub-video-showcase-header {
  text-align: left;
  max-width: 56rem;
  margin: 0 0 48px;
}
.ub-video-showcase-header h2 {
  color: var(--ub-purple);
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0 0 14px;
}
.ub-video-showcase-lede {
  font-size: 1.12rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

.ub-video-showcase-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: stretch;
}
/* No side panel: the video takes a readable width instead of the left 58%
   beside an empty column. */
.ub-video-showcase-grid--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 960px;
  margin-inline: auto;
}
/* A lone video is centred in the container, so its head centres over it too:
   left-aligned text above a centred frame reads as two unrelated pieces. */
.ub-video-showcase:has(.ub-video-showcase-grid--solo) .ub-video-showcase-header {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}
.ub-video-showcase:has(.ub-video-showcase-grid--solo) .ub-video-showcase-header .eyebrow-rule {
  justify-content: center;
}
.ub-video-showcase-grid--solo .ub-video-theater-caption {
  justify-content: center;
}

.ub-video-theater {
  display: flex;
  flex-direction: column;
}

.ub-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 0;
}
/* The poster sits under the embed: it is what shows while the player loads, or if
   a blocker stops it. */
.ub-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ub-video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ub-video-theater-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-light);
  margin-top: 12px;
  padding: 0 4px;
}
.ub-video-theater-caption i {
  color: var(--ub-purple);
  font-size: 1.1rem;
}

.ub-video-narrative {
  background: #ffffff;
  border: 1px solid #E1E7EA;
  border-left: 4px solid var(--ub-blue);
  border-radius: 0 !important;
  padding: 36px 32px;
  box-shadow: 0 10px 30px rgba(42, 18, 64, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ub-narrative-title {
  color: var(--ub-purple);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 14px;
}

.ub-narrative-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0 0 20px;
}

.ub-narrative-quote {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--bg-light);
  border-left: 3px solid var(--ub-purple);
  border-radius: 0 !important;
}
.ub-narrative-quote p {
  /* Outfit only: no second typeface, including for quotes. */
  font-family: inherit;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-main);
  line-height: 1.5;
  margin: 0 0 6px;
}
.ub-narrative-quote cite {
  display: block;
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 700;
  color: var(--ub-purple);
}

.ub-narrative-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ub-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--ub-purple-dark);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 0 !important;
  border: 1px solid #E1E7EA;
}
.ub-badge-pill i {
  color: var(--ub-blue-text);
}

/* ==========================================================================
   3. MILESTONE CARDS (ub/milestone-cards)
   ========================================================================== */
.ub-milestone-cards {
  background-color: #ffffff;
  padding: 80px 0 88px;
}

/* A section head like every other: left-aligned, UB Purple. */
.ub-milestone-header {
  text-align: left;
  max-width: 820px;
  margin: 0 0 52px;
}
.ub-milestone-header h2 {
  color: var(--ub-purple, #592D82);
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  line-height: 1.15;
  margin: 10px 0 14px;
}
.ub-milestone-lede {
  font-size: 1.12rem;
  color: var(--text-light, #5B6A75);
  line-height: 1.6;
}

.ub-milestone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}

.ub-milestone-card {
  background: #ffffff;
  border: 1px solid #e5dfed;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(42, 18, 64, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
.ub-milestone-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(42, 18, 64, 0.12);
  border-color: var(--ub-blue, #00A7E0);
}

.ub-milestone-media {
  position: relative;
  width: 100%;
  height: 230px;
  background: #1e0d33;
  border-radius: 0 !important;
  overflow: hidden;
}
.ub-milestone-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ub-milestone-card:hover .ub-milestone-media img {
  transform: scale(1.05);
}

.ub-milestone-year-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: var(--ub-purple, #592D82);
  color: #ffffff;
  font-family: var(--font-primary, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--ub-blue, #00A7E0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

.ub-milestone-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ub-milestone-cat {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #4b1d6b;
  margin-bottom: 8px;
}

.ub-milestone-title {
  color: #1e0d33;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px;
}

.ub-milestone-desc {
  font-size: 0.95rem;
  color: #2b2f38;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

/* ==========================================================================
   4. VIDEO TESTIMONIALS (ub/video-testimonials)
   ========================================================================== */
.ub-video-testimonials {
  background: var(--bg-light, #F4F7F6);
  padding: 80px 0 88px;
}

/* A section head like every other: left-aligned, UB Purple. */
.ub-vtest-header {
  text-align: left;
  max-width: 800px;
  margin: 0 0 52px;
}
.ub-vtest-header h2 {
  color: var(--ub-purple, #592D82);
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  line-height: 1.15;
  margin: 10px 0 14px;
}
.ub-vtest-lede {
  font-size: 1.12rem;
  color: var(--text-light, #5B6A75);
  line-height: 1.6;
}

.ub-vtest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ub-vtest-card {
  background: #ffffff;
  border: 1px solid #e5dfed;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(42, 18, 64, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.ub-vtest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(42, 18, 64, 0.12);
}

.ub-vtest-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #230c33;
  border-radius: 0 !important;
  overflow: hidden;
}
.ub-vtest-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ub-vtest-card:hover .ub-vtest-media img {
  transform: scale(1.04);
}

.ub-vtest-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 0 !important;
  background: var(--ub-purple, #592D82);
  border: 2px solid #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.25s ease;
  padding-left: 2px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.ub-vtest-play-btn:hover,
.ub-vtest-play-btn:focus-visible {
  background: var(--ub-blue, #00A7E0);
  color: var(--ink, #1B1023);
  transform: translate(-50%, -50%) scale(1.1);
  border-color: #ffffff;
}

.ub-vtest-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--ub-purple, #592D82);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--ub-blue, #00A7E0);
}

.ub-vtest-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ub-vtest-name {
  color: #1e0d33;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.ub-vtest-role {
  font-size: 0.86rem;
  color: #4b1d6b;
  font-weight: 700;
  margin-bottom: 12px;
}

.ub-vtest-quote {
  font-family: inherit;
  font-size: 0.98rem;
  font-style: italic;
  color: #374151;
  line-height: 1.55;
  margin: 0 0 16px;
  flex-grow: 1;
}

.ub-vtest-watch-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #4b1d6b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
  text-align: left;
}
.ub-vtest-watch-link:hover,
.ub-vtest-watch-link:focus-visible {
  color: var(--ub-blue-text, #0A6E8F);
}

/* ==========================================================================
   4b. VIDEO GALLERY (ub/video-gallery)

   Cards open the shared lightbox (video-testimonials.js). The grid answers to
   the block's own width (a container query), not the viewport, so the same
   markup is right on a full-width page and in the split layout's main column:
     narrow  a horizontal scroll-snap row, the next card peeking in
     medium  two across
     wide    three across for 3 videos, two by two for 4, three across otherwise
   Nothing advances by itself; the row moves only when the reader scrolls it, and
   every card is a button, so it is reachable and scrolls into view on Tab.
   ========================================================================== */
.ub-video-gallery {
  background: var(--bg-light, #F4F7F6);
  padding: 80px 0 88px;
}
.ub-vgal-header {
  text-align: left;
  max-width: 800px;
  margin: 0 0 52px;
}
.ub-vgal-header h2 {
  color: var(--ub-purple, #592D82);
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  line-height: 1.15;
  margin: 10px 0 14px;
}
.ub-vgal-lede {
  font-size: 1.12rem;
  color: var(--text-light, #5B6A75);
  line-height: 1.6;
  margin: 0;
}

.ub-vgal-scope { container-type: inline-size; }
.ub-vgal-grid {
  list-style: none;
  margin: 0;
  padding: 8px 6px 16px;
  margin: 0 -6px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* room for the focus ring and the hover lift, which overflow would clip */
  scroll-padding: 0 6px;
}
/* position:relative: the card's screen-reader-only prefix is absolutely
   positioned, and without a positioned ancestor inside the scroller it escapes
   the row's clipping and widens the whole page. */
.ub-vgal-item { position: relative; margin: 0; scroll-snap-align: start; min-width: 0; }

.ub-vgal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #ffffff;
  border: 1px solid #e5dfed;
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(42, 18, 64, 0.06);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ub-vgal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(42, 18, 64, 0.12);
}
.ub-vgal-card:focus-visible {
  outline: 3px solid var(--ub-blue, #00A7E0);
  outline-offset: 3px;
}

/* YouTube's hqdefault is 4:3 with black bars top and bottom; cropping it to
   16:9 removes the bars exactly. */
.ub-vgal-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #230c33;
  overflow: hidden;
}
.ub-vgal-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ub-vgal-card:hover .ub-vgal-media img { transform: scale(1.04); }

.ub-vgal-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  background: var(--ub-purple, #592D82);
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 1.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: background 0.25s ease, color 0.25s ease;
}
.ub-vgal-card:hover .ub-vgal-play,
.ub-vgal-card:focus-visible .ub-vgal-play {
  background: var(--ub-blue, #00A7E0);
  color: var(--ink, #1B1023);
}

.ub-vgal-title {
  display: block;
  padding: 18px 22px 22px;
  color: #1e0d33;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

@container (min-width: 480px) {
  .ub-vgal-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 8px 6px 16px;
  }
}
/* Two across, an odd last video sits centred on its own row rather than beside an
   empty cell. */
@container (min-width: 480px) and (max-width: 759.98px) {
  .ub-vgal-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 24px) / 2);
    justify-self: center;
  }
}
@container (min-width: 760px) {
  .ub-vgal--n3 .ub-vgal-grid,
  .ub-vgal--many .ub-vgal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  /* Three across, a short last row (5 = 3 + 2) is centred: six tracks, each video
     taking two, so no cell is left empty beside it. */
  .ub-vgal--many .ub-vgal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ub-vgal--many .ub-vgal-item { grid-column: span 2; }
  .ub-vgal--many .ub-vgal-item:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  .ub-vgal--many .ub-vgal-item:last-child:nth-child(3n + 2) { grid-column: 4 / span 2; }
  .ub-vgal--many .ub-vgal-item:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ub-vgal-card, .ub-vgal-media img, .ub-vgal-play { transition: none; }
  .ub-vgal-card:hover { transform: none; }
  .ub-vgal-card:hover .ub-vgal-media img { transform: none; }
}

/* ==========================================================================
   5. GIVING TIERS (ub/giving-tiers)
   ========================================================================== */
.ub-giving-tiers {
  background-color: #ffffff;
  padding: 80px 0 88px;
}

.ub-giving-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 36px;
}
.ub-giving-header h2 {
  color: #230c33;
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  margin: 10px 0 14px;
}
.ub-giving-lede {
  font-size: 1.12rem;
  color: #4a5568;
  line-height: 1.6;
}

.ub-giving-stat-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fbf7ec;
  border: 1.5px solid #d4af37;
  border-radius: 0 !important;
  padding: 12px 28px;
  max-width: 580px;
  margin: 0 auto 48px;
  color: #230c33;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.5px;
}
.ub-giving-stat-ribbon i {
  color: #b68d1d;
}

.ub-giving-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.ub-giving-card {
  background: #ffffff;
  border: 1.5px solid #e7e0ef;
  border-radius: 0 !important;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(42, 18, 64, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ub-giving-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(42, 18, 64, 0.12);
  border-color: #d4af37;
}

.ub-giving-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ub-giving-icon {
  width: 48px;
  height: 48px;
  border-radius: 0 !important;
  background: #f2edf8;
  color: #4b1d6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.ub-giving-badge {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: #6e2594;
  background: #f5effa;
  padding: 4px 10px;
  border-radius: 0 !important;
  border: 1px solid #dfd1ee;
}

.ub-giving-card-body {
  flex-grow: 1;
  margin-bottom: 24px;
}

.ub-giving-title {
  color: #1e0d33;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
}

.ub-giving-desc {
  font-size: 0.92rem;
  color: #2b2f38;
  line-height: 1.55;
  margin: 0 0 14px;
}

.ub-giving-impact {
  font-size: 0.85rem;
  color: #1e0d33;
  background: #f9f8fc;
  padding: 10px 14px;
  border-radius: 0 !important;
  border-left: 3px solid #6e2594;
}

.ub-giving-card-footer {
  margin-top: auto;
}
.ub-giving-card-footer .btn-outline-purple {
  width: 100%;
}

/* Giving Callout Banner (Accessible Contrast) */
.ub-giving-banner {
  background-color: #170428 !important;
  background: linear-gradient(135deg, #2b0b42 0%, #170428 55%, #0e021a 100%) !important;
  border-radius: 0 !important;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  border: 1.5px solid #d4af37 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  color: #ffffff !important;
}

.ub-giving-banner-content h3 {
  color: #ffffff !important;
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.ub-giving-banner-content p {
  color: #f3ecfb !important;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

.ub-giving-banner-actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.ub-giving-banner-actions .btn-gold {
  background: #d4af37 !important;
  color: #120320 !important;
  border: 1px solid #e5c158 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.ub-giving-banner-actions .btn-gold:hover {
  background: #f5d77f !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

.ub-giving-banner-actions .btn-ghost-light {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.ub-giving-banner-actions .btn-ghost-light:hover {
  background: #ffffff !important;
  color: #170428 !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   6. VIDEO MODAL LIGHTBOX
   ========================================================================== */
.ub-video-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 4, 16, 0.9);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  /* visibility, not just opacity: closed, the dialog and its Close button must
     leave the accessibility tree and the tab order. The delay lets the fade
     finish before it hides; opening shows it at once. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.ub-video-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s;
}

.ub-video-modal-container {
  width: 100%;
  max-width: 900px;
  background: var(--ub-purple-deep, #2A1240);
  border: 1.5px solid var(--ub-blue, #00A7E0);
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}
.ub-video-modal-backdrop.is-active .ub-video-modal-container {
  transform: scale(1);
}

.ub-video-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.ub-video-modal-close:hover,
.ub-video-modal-close:focus-visible {
  background: var(--ub-blue, #00A7E0);
  color: var(--ink, #1B1023);
  border-color: var(--ub-blue, #00A7E0);
}

.ub-video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 0 !important;
}
.ub-video-modal-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ub-video-modal-footer {
  padding: 14px 20px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--ub-purple-dark, #3F1D61);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* In the split layout's main column (sidebar beside it from 992px) the grids
   count the column, not the viewport: two milestone cards across, and as many
   video cards as fit at 260px. Below 992px the column is full width and the
   rules above apply. */
/* Their heads take the column's head: Display sized for a full page ran large
   beside the sidebar, and the margins stacked on the eyebrow's own. */
.college-main :is(.ub-milestone-header, .ub-vtest-header, .ub-vgal-header) { max-width: none; margin-bottom: 28px; }
body .college-main :is(.ub-milestone-header, .ub-vtest-header, .ub-vgal-header) .eyebrow-rule { margin: 0 0 10px; }
body .college-main :is(.ub-milestone-header, .ub-vtest-header, .ub-vgal-header) h2 {
  margin: 0 0 14px;
  font-size: 1.65rem;
  line-height: 1.25;
}
body .college-main :is(.ub-milestone-header, .ub-vtest-header, .ub-vgal-header) :is(.ub-milestone-lede, .ub-vtest-lede, .ub-vgal-lede) {
  margin: 0;
  color: var(--text-light, #5B6A75);
}
@media (min-width: 992px) {
  .college-main .ub-milestone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .college-main .ub-vtest-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
/* Full width with 4, 7 or 8 cards: four across, so the last row never holds a lone card. */
@media (min-width: 1200px) {
  .ub-vtest-grid:is(:has(> .ub-vtest-card:nth-child(4):last-child), :has(> .ub-vtest-card:nth-child(7):last-child), :has(> .ub-vtest-card:nth-child(8):last-child)):not(.college-main *) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .ub-video-showcase-grid {
    grid-template-columns: 1fr;
  }
  .ub-vtest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ub-giving-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ub-giving-banner {
    flex-direction: column;
    text-align: center;
  }
  .ub-giving-banner-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .ub-milestone-grid {
    grid-template-columns: 1fr;
  }
  .ub-vtest-grid {
    grid-template-columns: 1fr;
  }
  .ub-giving-grid {
    grid-template-columns: 1fr;
  }
  .ub-giving-banner {
    padding: 32px 24px;
  }
}

/* ==========================================================================
   UB DATATABLE EMBED (ub/datatable)
   ========================================================================== */
.ub-datatable-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ub-charcoal, #1B1023);
}

/* Background Variants */
.ub-datatable-section--bg-light {
  background-color: var(--ub-gray-50, #F4F7F6);
}
.ub-datatable-section--bg-white {
  background-color: #FFFFFF;
}
.ub-datatable-section--bg-offwhite {
  background-color: #FAFCFB;
}
.ub-datatable-section--bg-transparent {
  background-color: transparent;
}

/* Padding Variants */
.ub-datatable-section--pad-none {
  padding-top: 0;
  padding-bottom: 0;
}
.ub-datatable-section--pad-compact {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(2rem, 3.5vw, 2.75rem);
}
.ub-datatable-section--pad-normal {
  padding-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.ub-datatable-section--pad-spacious {
  padding-top: clamp(4rem, 6vw, 6rem);
  padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

/* Standard Container (1200px max) */
.ub-datatable-section--standard .ub-datatable-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  box-sizing: border-box;
}

/* Wide Container (1440px max) */
.ub-datatable-section--wide .ub-datatable-container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  padding-right: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  box-sizing: border-box;
}

/* Site Container: the same box as the header and page title */
.ub-datatable-section--container .ub-datatable-container {
  max-width: var(--measure, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter, 20px);
  padding-right: var(--gutter, 20px);
  width: 100%;
  box-sizing: border-box;
}

/* Full Page Width (100vw breakout) */
.ub-datatable-section--full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

.ub-datatable-section--full .ub-datatable-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ub-datatable-section--full .ub-datatable-head {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  box-sizing: border-box;
}

.ub-datatable-head {
  margin-bottom: 2rem;
}

/* Card Wrap */
.ub-datatable-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-top: 4px solid var(--ub-purple, #592D82);
  border-radius: 0 !important;
  box-shadow: 0 4px 16px -2px rgba(89, 45, 130, 0.05);
  padding: clamp(18px, 2.5vw, 32px);
  box-sizing: border-box;
}

/* Scroll Pane Container (Smooth momentum touch scrolling, refined scrollbar) */
.ub-datatable-scroll-pane {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F8FAFC;
}
.ub-datatable-scroll-pane::-webkit-scrollbar {
  height: 6px;
}
.ub-datatable-scroll-pane::-webkit-scrollbar-track {
  background: #F8FAFC;
}
.ub-datatable-scroll-pane::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}
.ub-datatable-scroll-pane::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Sharp 0px corners brand rule */
.ub-datatable-section,
.ub-datatable-section * {
  border-radius: 0 !important;
}

/* Title & Description toggles */
.ub-datatable-hide-title .wpdt-c[id^="wdt-table-title"] {
  display: none !important;
}
.ub-datatable-hide-desc .wpdt-c[id^="wdt-table-description"] {
  display: none !important;
}

/* Quick Status Filter Toolbar */
.ub-dt-toolbar {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #EDF2F7;
}
.ub-dt-chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ub-dt-chips-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #592D82;
}
.ub-dt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ub-dt-chip {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0 !important;
}
.ub-dt-chip:hover {
  background: #F1F5F9;
  border-color: #592D82;
  color: #592D82;
}
.ub-dt-chip.is-active {
  background: #592D82 !important;
  border-color: #592D82 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(89, 45, 130, 0.25);
}
.ub-dt-chip__count {
  font-size: 0.74rem;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.08);
  font-weight: 800;
}
.ub-dt-chip.is-active .ub-dt-chip__count {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* Base Table Presentation: Relaxed, spacious & modern */
.ub-datatable-section table.wpDataTable {
  width: 100% !important;
  min-width: 860px;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.92rem !important;
  margin: 0 !important;
  border: none !important;
}

/* The 860px floor suits the wide admin tables, which scroll sideways inside
   the pane ("scroll", the default). "collapse" and "standard" fit the table to
   its container instead, so a short list such as the campus directory keeps
   every column on a phone rather than pushing one off-screen. */
.ub-datatable--resp-collapse table.wpDataTable,
.ub-datatable--resp-standard table.wpDataTable {
  min-width: 0;
}
/* Links break between words here, not mid-word (the break-all below is for
   the long URLs in the admin tables), and a phone number never splits. */
.ub-datatable--resp-collapse table.wpDataTable td a,
.ub-datatable--resp-standard table.wpDataTable td a {
  word-break: normal !important;
}
.ub-datatable-section table.wpDataTable td a[href^="tel:"] {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .ub-datatable--resp-collapse table.wpDataTable tbody td,
  .ub-datatable--resp-standard table.wpDataTable tbody td {
    padding: 12px 12px !important;
  }
  .ub-datatable--resp-collapse.has-card-wrap .ub-datatable-card,
  .ub-datatable--resp-standard.has-card-wrap .ub-datatable-card {
    padding: 14px;
  }
}

/* Sticky Header with Institutional Navy and clean typography */
.ub-datatable-section table.wpDataTable thead th {
  background: #1B1023 !important;
  color: #FFFFFF !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 16px 20px !important;
  border: none !important;
  border-bottom: 3px solid #592D82 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.ub-datatable-section table.wpDataTable thead th.sorting:after,
.ub-datatable-section table.wpDataTable thead th.sorting_asc:after,
.ub-datatable-section table.wpDataTable thead th.sorting_desc:after {
  opacity: 0.7;
}

/* Table Body Cells: Relaxed padding, readable line-height */
.ub-datatable-section table.wpDataTable tbody td {
  padding: 18px 20px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #EDF2F7 !important;
  border-top: none !important;
  line-height: 1.6 !important;
  font-size: 0.92rem !important;
  color: #1B1023 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Row Density Variants */
.ub-datatable--density-spacious table.wpDataTable tbody td {
  padding: 20px 24px !important;
  line-height: 1.65 !important;
}
.ub-datatable--density-normal table.wpDataTable tbody td {
  padding: 16px 20px !important;
  line-height: 1.6 !important;
}
.ub-datatable--density-compact table.wpDataTable tbody td {
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
}

/* Row Hover and Alternating Striping */
.ub-datatable-section table.wpDataTable tbody tr:hover td {
  background-color: #FAF8FC !important;
}
.ub-datatable-section table.wpDataTable tbody tr.odd td {
  background-color: #FAFCFB;
}
.ub-datatable-section table.wpDataTable tbody tr.even td {
  background-color: #FFFFFF;
}

/* Hidden Clutter Columns */
.ub-datatable-section .col-hidden,
.ub-datatable-section th.col-hidden,
.ub-datatable-section td.col-hidden {
  display: none !important;
}

/* Column Specific Constraints & Sizing */
/* Date Column */
.ub-datatable-section table.wpDataTable th.col-date,
.ub-datatable-section table.wpDataTable td.col-date,
.ub-datatable-textwrap table.wpDataTable td.column-datecreated,
.ub-datatable-textwrap table.wpDataTable th.column-datecreated {
  min-width: 140px !important;
  white-space: nowrap !important;
  color: #64748B !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
}

/* Status Column & Badges */
.ub-datatable-section table.wpDataTable th.col-status,
.ub-datatable-section table.wpDataTable td.col-status,
.ub-datatable-textwrap table.wpDataTable td.column-status,
.ub-datatable-textwrap table.wpDataTable th.column-status {
  min-width: 150px !important;
  white-space: nowrap !important;
}

.ub-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 0 !important;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.2;
}
.ub-status-badge__icon {
  font-size: 0.75em;
  line-height: 1;
}
.ub-status-badge--resolved,
.ub-status-badge.resolved {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #10B981;
}
.ub-status-badge--pending,
.ub-status-badge.pending {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #F59E0B;
}
.ub-status-badge--cancelled,
.ub-status-badge.cancelled {
  background: #F3F4F6;
  color: #4B5563;
  border: 1px solid #9CA3AF;
}

/* Category Column & Badges */
.ub-datatable-section table.wpDataTable th.col-category,
.ub-datatable-section table.wpDataTable td.col-category,
.ub-datatable-textwrap table.wpDataTable td.column-whatisthisfeedbackregarding,
.ub-datatable-textwrap table.wpDataTable th.column-whatisthisfeedbackregarding {
  min-width: 130px !important;
}
.ub-cat-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #F4EFF9;
  color: #592D82;
  border: 1px solid #E9D5FF;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 0 !important;
}

/* Feedback Message Column */
.ub-datatable-section table.wpDataTable th.col-feedback,
.ub-datatable-section table.wpDataTable td.col-feedback,
.ub-datatable-textwrap table.wpDataTable td.column-pleasedescribeyourfeedback,
.ub-datatable-textwrap table.wpDataTable th.column-pleasedescribeyourfeedback,
.ub-datatable-textwrap table.wpDataTable td[data-column_header*="Feedback"],
.ub-datatable-textwrap table.wpDataTable td[data-column_header*="Message"] {
  min-width: 320px !important;
  max-width: 480px !important;
  color: #1B1023 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* Admin Notes Column */
.ub-datatable-section table.wpDataTable th.col-notes,
.ub-datatable-section table.wpDataTable td.col-notes,
.ub-datatable-textwrap table.wpDataTable td.column-adminnotes,
.ub-datatable-textwrap table.wpDataTable th.column-adminnotes,
.ub-datatable-textwrap table.wpDataTable td[data-column_header*="Notes"] {
  min-width: 290px !important;
  max-width: 440px !important;
  color: #374151 !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}
.ub-empty-notes {
  color: #94A3B8;
  font-style: italic;
  font-size: 0.84rem;
}

/* Page URL Column */
.ub-datatable-section table.wpDataTable th.col-url,
.ub-datatable-section table.wpDataTable td.col-url,
.ub-datatable-textwrap table.wpDataTable td.column-currentpageurl,
.ub-datatable-textwrap table.wpDataTable th.column-currentpageurl,
.ub-datatable-textwrap table.wpDataTable td[data-column_header*="URL"] {
  min-width: 180px !important;
  max-width: 240px !important;
}
.ub-datatable-section table.wpDataTable td a {
  color: #0A6E8F !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  word-break: break-all !important;
  transition: color 0.15s ease !important;
}
.ub-datatable-section table.wpDataTable td a:hover {
  color: #592D82 !important;
}

/* User Email Column */
.ub-datatable-section table.wpDataTable th.col-email,
.ub-datatable-section table.wpDataTable td.col-email,
.ub-datatable-textwrap table.wpDataTable td.column-youremailoptional,
.ub-datatable-textwrap table.wpDataTable th.column-youremailoptional {
  min-width: 150px !important;
  max-width: 200px !important;
  font-size: 0.86rem !important;
}

/* Entry ID Column */
.ub-datatable-section table.wpDataTable th.col-id,
.ub-datatable-section table.wpDataTable td.col-id,
.ub-datatable-textwrap table.wpDataTable td.column-id,
.ub-datatable-textwrap table.wpDataTable th.column-id,
.ub-datatable-textwrap table.wpDataTable td.column-grad_year,
.ub-datatable-textwrap table.wpDataTable th.column-grad_year,
.ub-datatable-textwrap table.wpDataTable td.column-business_state,
.ub-datatable-textwrap table.wpDataTable th.column-business_state,
.ub-datatable-textwrap table.wpDataTable td.column-state,
.ub-datatable-textwrap table.wpDataTable th.column-state {
  min-width: 68px !important;
  max-width: 96px !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: #64748B !important;
  white-space: nowrap !important;
}

/* Long Description / Notes / College Columns across wpDataTables */
.ub-datatable-section table.wpDataTable td.column-business_desc,
.ub-datatable-section table.wpDataTable th.column-business_desc,
.ub-datatable-section table.wpDataTable td.column-event_desc,
.ub-datatable-section table.wpDataTable th.column-event_desc,
.ub-datatable-section table.wpDataTable td.column-notes,
.ub-datatable-section table.wpDataTable th.column-notes {
  min-width: 280px !important;
  max-width: 440px !important;
}

.ub-datatable-section table.wpDataTable td.column-college,
.ub-datatable-section table.wpDataTable th.column-college,
.ub-datatable-section table.wpDataTable td.column-school,
.ub-datatable-section table.wpDataTable th.column-school,
.ub-datatable-section table.wpDataTable td.column-business_name,
.ub-datatable-section table.wpDataTable th.column-business_name,
.ub-datatable-section table.wpDataTable td.column-event_name,
.ub-datatable-section table.wpDataTable th.column-event_name,
.ub-datatable-section table.wpDataTable td.column-preprod_page_title,
.ub-datatable-section table.wpDataTable th.column-preprod_page_title {
  min-width: 200px !important;
  max-width: 300px !important;
}

.ub-datatable-section table.wpDataTable td.column-legacy_url,
.ub-datatable-section table.wpDataTable th.column-legacy_url,
.ub-datatable-section table.wpDataTable td.column-legacy_path,
.ub-datatable-section table.wpDataTable th.column-legacy_path,
.ub-datatable-section table.wpDataTable td.column-preprod_url,
.ub-datatable-section table.wpDataTable th.column-preprod_url {
  min-width: 190px !important;
  max-width: 270px !important;
}

/* wpDataTables UI Polish: inputs, buttons, pagination */
.ub-datatable-section .dataTables_filter {
  margin-bottom: 1.25rem !important;
}
.ub-datatable-section .dataTables_filter label {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #1B1023 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ub-datatable-section .dataTables_filter input {
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  background: #FFFFFF !important;
  min-width: 260px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.ub-datatable-section .dataTables_filter input:focus {
  border-color: var(--ub-purple, #592D82) !important;
  box-shadow: 0 0 0 3px rgba(89, 45, 130, 0.15) !important;
}

.ub-datatable-section .dataTables_length {
  margin-bottom: 1.25rem !important;
}
.ub-datatable-section .dataTables_length label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ub-datatable-section .dataTables_length select {
  height: 42px !important;
  padding: 0 28px 0 12px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  outline: none !important;
}

.ub-datatable-section .wdt-export-buttons button,
.ub-datatable-section .DTTT_button,
.ub-datatable-section .dt-button {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
  border: 1px solid #CBD5E1 !important;
  background: #ffffff !important;
  color: var(--ub-charcoal, #1B1023) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}
.ub-datatable-section .wdt-export-buttons button:hover,
.ub-datatable-section .DTTT_button:hover,
.ub-datatable-section .dt-button:hover {
  background: var(--ub-purple, #592D82) !important;
  color: #ffffff !important;
  border-color: var(--ub-purple, #592D82) !important;
}

.ub-datatable-section .dataTables_info {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #64748B !important;
  padding-top: 16px !important;
}
.ub-datatable-section .dataTables_paginate {
  padding-top: 12px !important;
}
.ub-datatable-section .paginate_button {
  padding: 6px 12px !important;
  border-radius: 0 !important;
  border: 1px solid #E2E8F0 !important;
  background: #ffffff !important;
  color: #1B1023 !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  margin: 0 2px !important;
  transition: all 0.15s ease !important;
}
.ub-datatable-section .paginate_button:hover {
  background: #F4EFF9 !important;
  border-color: var(--ub-purple, #592D82) !important;
  color: var(--ub-purple, #592D82) !important;
}
.ub-datatable-section .paginate_button.current,
.ub-datatable-section .paginate_button.current:hover {
  background: var(--ub-purple, #592D82) !important;
  color: #ffffff !important;
  border-color: var(--ub-purple, #592D82) !important;
}

/* Table Controls Visibility Toggles */
.ub-datatable-hide-search .dataTables_filter,
.ub-datatable-hide-search .wpDataTableFilterSection,
.ub-datatable-hide-search .wpDataTablesFilter {
  display: none !important;
}
.ub-datatable-hide-export .wdt-export-buttons,
.ub-datatable-hide-export .DTTT,
.ub-datatable-hide-export .DTTT_container {
  display: none !important;
}
.ub-datatable-hide-pagination .dataTables_paginate,
.ub-datatable-hide-pagination .paging_full_numbers {
  display: none !important;
}
.ub-datatable-hide-length .dataTables_length {
  display: none !important;
}
.ub-datatable-hide-info .dataTables_info {
  display: none !important;
}

/* Filter form: one row of controls with their bottoms aligned. The plugin
   floats each filter in a fixed 230px box, stacks the two date-range inputs,
   and draws inputs, dropdowns and the button at three different heights. */
.ub-datatable-section .wpDataTableFilterBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin: 0 0 28px;
}
.ub-datatable-section .wpDataTableFilterBox > .wpDataTableFilterSection {
  float: none !important;
  flex: 1 1 180px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.ub-datatable-section .wpDataTableFilterBox > .wpDataTableFilterSection:has(.wdt-filter-date-range) {
  flex: 2 1 320px;
}
.ub-datatable-section .wpDataTableFilterBox > #wdt-clear-filters-button-block {
  flex: 0 0 auto;
}
.ub-datatable-section .wpDataTableFilterSection > label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy, #120826);
}
.ub-datatable-section .wpDataTableFilterSection .wdt-filter-date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ub-datatable-section .wpDataTableFilterSection .bootstrap-select {
  width: 100% !important;
}
/* The skin sets input height with !important at five classes deep, so these
   selectors carry the same chain plus the section class. */
.ub-datatable-section .wpdt-c .wpDataTablesFilter .wpDataTableFilterSection input.form-control.wdt-filter-control,
.ub-datatable-section .wpdt-c .wpDataTablesFilter .wpDataTableFilterSection .bootstrap-select > .dropdown-toggle,
.ub-datatable-section .wpdt-c .wpDataTablesFilter .wdt-clear-filters-button {
  box-sizing: border-box;
  width: 100%;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  color: #1E293B;
  font-size: 0.95rem !important;
  line-height: 42px !important;
}
.ub-datatable-section .wpDataTableFilterSection input.wdt-filter-control:focus-visible,
.ub-datatable-section .wpDataTableFilterSection .bootstrap-select > .dropdown-toggle:focus-visible,
.ub-datatable-section .wdt-clear-filters-button:focus-visible {
  outline: 2px solid var(--ub-purple, #592D82) !important;
  outline-offset: 2px;
}
.ub-datatable-section .wpdt-c .wpDataTablesFilter .wpDataTableFilterSection .bootstrap-select > .dropdown-toggle .filter-option {
  position: static;
  display: flex;
  align-items: center;
  width: 100% !important;
  height: 100%;
  padding: 0 24px 0 0;
}
.ub-datatable-section .wpdt-c .wpDataTablesFilter .bootstrap-select .filter-option-inner,
.ub-datatable-section .wpdt-c .wpDataTablesFilter .bootstrap-select .filter-option-inner-inner {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ub-datatable-section .wpdt-c .wpDataTablesFilter .wdt-clear-filters-button {
  width: auto;
  padding: 0 18px !important;
  border-color: var(--ub-purple, #592D82) !important;
  color: var(--ub-purple, #592D82) !important;
  font-weight: 700;
  cursor: pointer;
}
.ub-datatable-section .wpdt-c .wpDataTablesFilter .wdt-clear-filters-button::before {
  margin-right: 8px;
}
.ub-datatable-section .wdt-clear-filters-button:hover {
  background: var(--ub-purple, #592D82) !important;
  color: #FFFFFF !important;
}

/* Filter dropdowns (bootstrap-select) flip upward when the viewport has less
   room below, but the scroll pane clips anything above the card, cutting off
   the first options. Always open them downward, over the table. */
.ub-datatable-section .bootstrap-select.dropup .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
  transform: none !important;
}

/* Responsive row toggle. When columns are hidden on phones, wpDataTables puts a
   toggle in each row's first cell, but this skin draws its +/- from a sprite
   positioned off-canvas, leaving an empty box. Draw the sign instead, and let
   that cell wrap at spaces only so a date does not split mid-word. */
.ub-datatable-section table.has-columns-hidden > tbody > tr > td.expand {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.ub-datatable-section table.has-columns-hidden > tbody > tr > td > span.responsiveExpander {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 8px 4px 0;
  vertical-align: middle;
  background: var(--ub-purple, #592D82) !important;
  border: 0;
  border-radius: 0;
  opacity: 1 !important;
  cursor: pointer;
}
.ub-datatable-section table.has-columns-hidden > tbody > tr > td > span.responsiveExpander::after {
  content: "+";
  width: auto;
  height: auto;
  background: none;
  color: #FFFFFF;
  font: 700 16px/1 sans-serif;
}
.ub-datatable-section table.has-columns-hidden > tbody > tr.detail-show > td > span.responsiveExpander::after {
  content: "\2212";
}

/* Placeholder for editor */
.ub-datatable-section--placeholder .ub-datatable-placeholder-box {
  padding: 40px 24px;
  background: #ffffff;
  border: 2px dashed #CBD4D8;
  text-align: center;
  margin: 0 auto;
  max-width: 600px;
}





/* ==========================================================================
   SPLIT LAYOUT FAMILY
   ub/split-layout (.college-layout, .college-main), ub/sidebar-card and
   ub/section-menu (.college-sidebar*), ub/callout, ub/accordion
   (.college-details*), and the image variant of ub/page-hero with ub/toolbar
   (.college-page-hero, .college-hero-*, .college-toolbar-*). The theme's
   style.css and wp-content.css used to carry these; they live with the blocks
   now. Keep this section below the rest of the sheet: the theme's copies
   printed after it and won every tie, and its place here preserves that.
   ========================================================================== */

/* ---------- Page hero (image variant) and toolbar ---------- */
.college-page-hero {
    position: relative;
    isolation: isolate;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 44px 0 104px;
    background-color: var(--ub-purple);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.college-page-hero .hero-overlay {
    background: linear-gradient(135deg, rgba(89, 45, 130, 0.92) 0%, rgba(0, 167, 224, 0.52) 100%);
}

.college-page-hero.college-hero--ebe .hero-overlay {
    background: linear-gradient(135deg, rgba(89, 45, 130, 0.9) 0%, rgba(0, 130, 195, 0.62) 100%);
}

.college-page-hero.college-hero--chs .hero-overlay {
    background: linear-gradient(135deg, rgba(89, 45, 130, 0.94) 0%, rgba(0, 110, 150, 0.48) 100%);
}

.college-hero-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 10px;
}

/* The hero copy sits on ONE element that is both .container and
   .college-hero-inner. .container supplies `max-width: var(--measure)` plus
   `margin: 0 auto`; narrowing max-width to 760px here left those auto margins
   in place, so the box centred itself in the viewport instead of starting at
   the container's left gutter. Breadcrumb, kicker, title, lede and buttons all
   drifted inward and stopped lining up with every section below the hero.

   Keep the container's width and centring; constrain the *text* with a
   separate measure on the children instead. */
.college-hero-inner {
    position: relative;
    z-index: 2;
    color: var(--white);
}

.college-hero-inner > * {
    max-width: 760px;
    margin-right: auto;
}

/* .college-hero-lead sets its own narrower measure further down; this keeps
   the child rule above from widening it back to 760px. */
.college-hero-inner > .college-hero-lead {
    max-width: 640px;
}

.college-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.college-hero-lead {
    font-size: 1.08rem;
    line-height: 1.65;
    opacity: 0.96;
    max-width: 640px;
    margin-bottom: 22px;
}

.college-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.college-toolbar-band {
    padding: 0 0 12px;
    margin-top: -36px;
    position: relative;
    z-index: 3;
}

.college-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px 20px;
    padding: 18px 24px;
}

.college-toolbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 0;
}

.college-details__note {
    margin-top: 14px;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.55;
    max-width: 52rem;
}

.college-toolbar-links a {
    color: var(--ub-purple);
    text-decoration: none;
}

.college-toolbar-links a:hover {
    color: var(--ub-blue);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .college-page-hero {
        min-height: 320px;
        padding: 36px 0 48px;
    }

    .college-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .college-toolbar-links {
        justify-content: flex-start;
    }
}

/* ---------- ub/split-layout in the editor canvas ----------
   The canvas mirrors the front end's two columns from 992px: Section Menu and
   Sidebar Cards in a 260px column on the left, every other block on the right.
   The sidebar blocks share one area spanning all main rows (--ub-split-rows,
   set by the block's editor script, which also pushes each sidebar block down
   by the ones above it). These classes exist only in the editor. */
@media (min-width: 992px) {
  .ub-split-editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  .ub-split-editor > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
    grid-column: 2;
    min-width: 0;
  }
  .ub-split-editor > .block-editor-inner-blocks > .block-editor-block-list__layout > :is([data-type="ub/section-menu"], [data-type="ub/sidebar-card"]) {
    grid-column: 1;
    grid-row: 1 / span var(--ub-split-rows, 1);
    margin-bottom: 0;
  }
  /* No sidebar blocks: one column, as .college-layout--no-aside on the front end. */
  .ub-split-editor > .block-editor-inner-blocks > .block-editor-block-list__layout:not(:has(> :is([data-type="ub/section-menu"], [data-type="ub/sidebar-card"]))) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ub-split-editor > .block-editor-inner-blocks > .block-editor-block-list__layout:not(:has(> :is([data-type="ub/section-menu"], [data-type="ub/sidebar-card"]))) > * {
    grid-column: 1;
  }
}

/* ---------- Layout, sidebar and main column ---------- */
.college-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "sidebar";
    gap: 32px;
    align-items: start;
    width: 100%;
}

/* Block axis only. This element is also the .container, and the old
   `padding: 32px 0 72px` shorthand zeroed the container's inline gutter, so
   the sidebar and main column sat 32px outside the content edge at 1440 and
   touched the screen edge at phone width. Doubled class: the theme's
   `.container { padding: 0 var(--gutter) }` prints after this sheet and would
   otherwise zero the block padding. */
.container.college-layout {
    padding-block: 32px 72px;
}

@media (min-width: 992px) {
    .college-layout {
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
        grid-template-areas: "sidebar main";
        gap: 40px;
    }

    /* ub/split-layout with no sidebar-card child: no 260px track to reserve,
       or the main column starts 300px in and lines up with nothing. */
    .college-layout--no-aside {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main";
    }

    .college-sidebar {
        position: sticky;
        top: 92px;
        align-self: start;
    }
}

.college-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.college-sidebar-card {
    background: var(--white);
    border-radius: 0;
    padding: 22px 20px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--ub-blue);
}

.college-sidebar-card h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    margin-bottom: 14px;
    font-weight: 700;
}

.college-sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.college-sidebar-nav li {
    margin-bottom: 4px;
}

.college-sidebar-nav a {
    display: block;
    padding: 8px 10px;
    border-radius: 0;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: var(--transition);
}

.college-sidebar-nav a:hover,
.college-sidebar-nav a:focus-visible {
    background: rgba(0, 167, 224, 0.1);
    color: var(--ub-purple);
}

.college-sidebar-nav .college-sidebar-nav__hub {
    font-weight: 800;
    color: var(--ub-purple);
    margin-bottom: 8px;
}

.college-sidebar-nav .college-sidebar-nav__hub a {
    color: var(--ub-purple);
}

.college-main {
    grid-area: main;
    min-width: 0;
}

.college-main h2 {
    font-size: 1.65rem;
    color: var(--ub-purple);
    font-weight: 800;
    margin: 36px 0 14px;
    line-height: 1.25;
}

.college-main h2:first-child {
    margin-top: 0;
}

.college-main .college-lead {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 24px;
}

.college-main p {
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 16px;
}

/* ub/split-content in the column keeps the column's heading size. Its own
   `.split-content h2` (style.css) prints after this sheet and would otherwise
   win the tie. */
.college-main .split-content h2 {
    font-size: 1.65rem;
    margin-bottom: 14px;
}

/* Core blocks in the main column. `* { margin: 0 }` left h3-h5, images and
   columns with no space around them, so copy touched photos and an h5 came
   out smaller than the paragraph under it. */
.college-main h3,
.college-main h4,
.college-main h5 {
    font-weight: 700;
    line-height: 1.3;
}
.college-main h3 { font-size: 1.32rem; color: var(--ub-purple); margin: 32px 0 12px; }
.college-main h4 { font-size: 1.1rem; color: var(--ub-purple); margin: 24px 0 10px; }
.college-main h5 { font-size: 1rem; color: var(--text-main); margin: 20px 0 8px; }
.college-main .wp-block-image,
.college-main .wp-block-columns {
    margin: 0 0 28px;
}
.college-main .wp-block-image img {
    display: block;
    height: auto;
}

/* An eyebrow paragraph opens the section below it, so the space goes above
   the eyebrow and the heading tucks under it. */
.college-main p.eyebrow-rule {
    margin: 48px 0 10px;
}
.college-main > p.eyebrow-rule:first-child {
    margin-top: 0;
}
.college-main p.eyebrow-rule + h2 {
    margin-top: 0;
}

.college-callout {
    background: linear-gradient(180deg, rgba(0, 167, 224, 0.08) 0%, rgba(89, 45, 130, 0.06) 100%);
    border: 1px solid rgba(0, 167, 224, 0.25);
    border-radius: 0;
    padding: 24px 26px;
    margin: 28px 0 32px;
}

.college-callout h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.35rem;
}

.college-callout p:last-child {
    margin-bottom: 0;
}

/* ub/callout splits its body on blank lines; without this the paragraphs
   ran together as one block. */
.college-callout p + p {
    margin-top: 12px;
}

.college-callout .college-callout__actions {
    margin-top: 20px;
}

.college-callout + h2 {
    margin-top: 24px;
}

.college-details {
    border: 2px solid #eaeaea;
    border-radius: 0;
    margin-bottom: 14px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.college-details:hover {
    border-color: rgba(89, 45, 130, 0.2);
}

.college-details[open] {
    border-color: rgba(0, 167, 224, 0.35);
    box-shadow: var(--shadow-md);
}

.college-details summary {
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ub-purple);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    line-height: 1.35;
}

.college-details summary::-webkit-details-marker {
    display: none;
}

.college-details summary::after {
    content: "+";
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ub-blue);
    flex-shrink: 0;
    margin-top: 0.12em;
}

.college-details[open] summary::after {
    content: "\2212";
}

/* ub_accordion_parts() markup: a heading holding a button, same look as the
   summary above; .is-open stands in for [open]. */
.college-details.is-open {
    border-color: rgba(0, 167, 224, 0.35);
    box-shadow: var(--shadow-md);
}
.college-details .college-details__heading {
    margin: 0;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.college-details .college-details__trigger {
    appearance: none;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
    padding: 18px 22px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ub-purple);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    line-height: 1.35;
}
.college-details .college-details__trigger::after {
    content: "+";
    content: "+" / "";
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ub-blue);
    flex-shrink: 0;
    margin-top: 0.12em;
}
.college-details .college-details__trigger[aria-expanded="true"]::after {
    content: "\2212";
    content: "\2212" / "";
}
.college-details .college-details__trigger:focus-visible {
    outline: 3px solid var(--ub-blue);
    outline-offset: -3px;
}

.college-details__body {
    padding: 0 22px 22px;
    border-top: 1px solid #eaeaea;
}

.college-details__body > p {
    margin-top: 14px;
}

.college-details__body .btn-school {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 18px;
    border-radius: 0;
    background: var(--ub-purple);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition);
}

.college-details__body .btn-school:hover {
    background: var(--ub-blue);
    color: var(--white);
}

.college-link-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 28px;
    align-items: start;
    margin-top: 4px;
}

.college-details__body ul.college-link-list {
    margin: 0;
    padding-left: 1.35rem;
    color: var(--text-main);
    list-style: square;
    list-style-position: outside;
}

.college-link-list li::marker {
    color: var(--ub-purple);
}

.college-link-list li {
    margin-bottom: 8px;
}

.college-link-list a {
    color: var(--ub-blue-text);
    font-weight: 600;
    text-decoration: none;
}

.college-link-list a:hover {
    text-decoration: underline;
}

/* ---------- Content in the column, callouts and accordion bodies ----------
   The theme strips markers from every ul (navigation lists are the common
   case). The class-less lists that accordion bodies, split-layout main columns
   and callouts carry are CONTENT and get them back. Square markers in UB
   Purple: square to match the 0px-radius form language, purple because UB Blue
   is under 3:1 on white. */
.college-main > ul:not([class]),
.college-details__body ul:not([class]),
.college-callout ul:not([class]) {
    list-style: square outside;
}
.college-main > ol:not([class]),
.college-details__body ol:not([class]),
.college-callout ol:not([class]) {
    list-style: decimal outside;
}
/* Room for the marker inside the column. `* { padding: 0 }` left these flush,
   so markers and two-digit numbers hung outside the text edge. Accordion
   bodies indent with a margin instead (below). */
.college-main > ul:not([class]),
.college-main > ol:not([class]),
.college-callout ul:not([class]),
.college-callout ol:not([class]) {
    padding-left: 1.5rem;
}
.college-main > :is(ul, ol):not([class]) li::marker,
.college-details__body :is(ul, ol):not([class]) li::marker,
.college-callout :is(ul, ol):not([class]) li::marker {
    color: var(--ub-purple);
}
.college-main > :is(ul, ol):not([class]) li + li,
.college-callout :is(ul, ol):not([class]) li + li {
    margin-top: 6px;
}
.college-main > .wp-block-list,
.college-main > :is(ul, ol):not([class]) {
    margin-bottom: 20px;
}

/* Rich elements inside UB Accordion. Sizes are explicit because the browser
   default made an h5 13.3px, smaller than the 16px body copy it heads. */
.college-details__body h3,
.college-details__body h4,
.college-details__body h5 {
    color: var(--ub-purple, #592d82);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.college-details__body h3 { font-size: 1.2rem; }
.college-details__body h4 { font-size: 1.08rem; }
.college-details__body h5 { font-size: 1rem; color: var(--text-main); }
.college-details__body ul,
.college-details__body ol {
    margin: 0.75rem 0 1.25rem 1.75rem;
    color: var(--text-main, #333);
}
.college-details__body li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.college-details__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
/* A table straight in an accordion body scrolls inside its own box. The panel
   is overflow:hidden (details.college-details), so a licensure table wider than
   the panel was clipped with no way to reach its URL and Contact columns. */
.college-details__body > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* ub_wrap_tables() puts every accordion table in a focusable, labelled region
   so a keyboard user can scroll to the far columns. data-table.css styles the
   same class but only loads with ub/data-table, so the essentials are here. */
.college-details__body .ub-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
}
.college-details__body .ub-table-scroll > table {
    margin: 0;
}
.college-details__body .ub-table-scroll:focus-visible {
    outline: 3px solid var(--ub-blue, #00a7e0);
    outline-offset: 2px;
}
.college-details__body th,
.college-details__body td {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}
.college-details__body th {
    background: #f8f6fb;
    color: var(--ub-purple, #592d82);
    font-weight: 700;
}
.college-details__body tr:nth-child(even) td {
    background: #fafafa;
}
.college-details__body figure {
    margin: 24px 0 32px;
    max-width: 720px;
}
.college-details__body figure img,
.college-details__body > img {
    display: block;
    max-width: 100%;
    height: auto;
}
.college-details__body figcaption {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-light);
}

/* Photographic hero legibility. The theme gives `.hero-overlay` a purple
   gradient but never gave it position or size, and `.college-page-hero` is a
   flex column, so the overlay was a zero-height flex item and the gradient
   never painted: text sat over the photograph at full brightness. The UB Page
   Hero block lets an editor choose ANY image, so a bright one makes the
   heading unreadable. This applies the positioning the gradient always
   assumed. */
.college-page-hero > .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Keep the copy above the wash. */
.college-page-hero > .college-hero-inner {
    position: relative;
    z-index: 1;
}

/* A readable floor regardless of the image, without flattening the gradient. */
.college-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(20, 8, 34, 0.35) 0%, rgba(20, 8, 34, 0.55) 100%);
    pointer-events: none;
}

/* WCAG 1.4.1: a link in a block of text cannot be told from the text by colour
   alone (the text-safe blue is only 3.3:1 against body copy). Underline plain
   links in the column, accordion bodies and callouts. `a:not([class])` leaves
   buttons, cards and pills, which carry a class, un-underlined. */
.college-main :is(p, li) a:not([class]),
.college-details__body :is(p, li) a:not([class]),
.college-callout :is(p, li) a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.college-main :is(p, li) a:not([class]):hover,
.college-details__body :is(p, li) a:not([class]):hover,
.college-callout :is(p, li) a:not([class]):hover {
    text-decoration-thickness: 2px;
}

/* A slash-joined heading ("INAPPROPRIATE/DISRUPTIVE BEHAVIOR") has no break
   point and set the page 401px wide at 390. Headings in the content column and
   accordion bodies may break anywhere rather than widen the page. */
.college-main :is(h1, h2, h3, h4),
.college-details__body :is(h3, h4, h5) {
    overflow-wrap: anywhere;
}

/* Core button groups in the content column had no outer margin: two groups
   stacked at 0px, and the next paragraph touched the button (Health &
   Wellness, First-Gen). */
.college-main .wp-block-buttons {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
.college-main .wp-block-buttons + .wp-block-buttons {
    margin-top: -1rem;
}

/* An embed (video, map) in the content column had no space below it: the next
   paragraph touched the frame (Transfer, Campus Map). */
.college-main .wp-block-embed {
    margin-bottom: 1.5rem;
}

/* A core table in the content column or an accordion body scrolls inside its
   own box (Key to UB chapter 6: 458px wide at 390). */
.college-main .wp-block-table,
.college-details__body .wp-block-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.college-main .wp-block-table table {
    min-width: 100%;
}


/* ub/section-menu in the editor: a menu placed in a Split Layout previews as
   the sidebar card it becomes, at sidebar width; a section with nothing to list
   says so instead of rendering blank. Neither class is printed on the site. */
.ub-section-menu-preview {
  max-width: 300px;
}
.ub-section-menu-preview .college-sidebar-card {
  background: #fff;
  padding: 22px 20px;
  border-left: 4px solid var(--ub-blue, #00a7e0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ub-section-menu-empty {
  padding: 16px 18px;
  border: 1px dashed #b8c2cc;
  background: #f7f9fa;
  color: var(--text-light, #4a5560);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The section menu on phones: a collapsed "In This Section" panel naming the
   current page, in its own grid row above the content. From 992px the sidebar
   list is the menu and the panel is hidden. */
.ub-section-disclosure {
  grid-area: menu;
  background: var(--white, #fff);
  border-left: 4px solid var(--ub-blue, #00a7e0);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
}
.ub-section-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
}
.ub-section-disclosure summary::-webkit-details-marker {
  display: none;
}
.ub-section-disclosure summary:focus-visible {
  outline: 3px solid var(--ub-blue, #00a7e0);
  outline-offset: 2px;
}
.ub-section-disclosure__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ub-section-disclosure__label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light, #4a5560);
}
.ub-section-disclosure__current {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ub-purple, #592d82);
}
.ub-section-disclosure summary .fa-chevron-down {
  flex: none;
  color: var(--ub-purple, #592d82);
  transition: transform 0.2s ease;
}
.ub-section-disclosure details[open] summary .fa-chevron-down {
  transform: rotate(180deg);
}
.ub-section-disclosure details[open] summary {
  border-bottom: 1px solid var(--border-light, #e3e8ec);
}
.ub-section-disclosure .college-sidebar-nav {
  padding: 12px 12px 14px;
}
/* Phone tap targets: 44px rows. */
.ub-section-disclosure .college-sidebar-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* The section's main page leads the list in bold. The hub rule set 800 on
   the li, but the generic link rule (600) won on the a itself. */
.college-sidebar-nav .college-sidebar-nav__hub a {
  font-weight: 800;
}
@media (max-width: 991.98px) {
  .college-layout:has(> .ub-section-disclosure) {
    grid-template-areas:
      "menu"
      "main"
      "sidebar";
  }
}
@media (min-width: 992px) {
  .ub-section-disclosure {
    display: none;
  }
}