/**
 * acad-shared.css — v2 (Phase 6 polish)
 *
 * Shared styles for the six academic CPT templates: degree, minor,
 * certificate, concentration, continuing education, course.
 *
 * What changed in v2 (vs v1):
 *   - Full rewrite based on the polished pre-plugin template
 *     (theme/single-degree_program.php) which had stronger typography,
 *     larger sections, dramatic dark backgrounds for Learn and BWV, and
 *     a floating Quick Facts strip that overlaps the hero.
 *   - Animation system: .acad-anim adds a fade-up animation triggered
 *     by an IntersectionObserver. .acad-d2 ... .acad-d6 stagger the
 *     delay. Templates wire the observer at the bottom of the page.
 *   - Breadcrumbs moved to a dark bar above the hero (was light strip
 *     below). Matches the original site-wide pattern better.
 *   - Hero gradient is now dark→charcoal→red-dark instead of red→red-dark.
 *     The bg image (if present) sits at 0.2 opacity above the gradient,
 *     with a translucent dark overlay on top. Reads as moody, not blocky.
 *
 * Class prefix conventions (unchanged from v1):
 *   .acad-*   shared / cross-CPT
 *   .deg-*    degree-specific extras
 *   .min-*    minor-specific extras
 *   .cert-*   certificate-specific extras
 *   .conc-*   concentration-specific extras
 *   .coned-*  ConEd-specific extras
 *   .crs-*    course-specific extras
 *
 * Modifier conventions:
 *   .acad-section--alt        cream background (alternating section bg)
 *   .acad-section--dark       black background, light text inside
 *   .acad-section--charcoal   slightly lighter dark (for BWV)
 *   .acad-card--numbered      adds an inline-block circled number
 *   .acad-card--dark          dark variant of card for use inside .--dark sections
 *
 * Brand tokens (CSS custom props on .acad-page so other sites can't
 * accidentally inherit them):
 *   --acu-red, --acu-red-dark, --acu-red-light
 *   --acu-gold
 *   --acu-black, --acu-charcoal
 *   --acu-gray, --acu-gray-light, --acu-light-gray
 *   --acu-cream, --acu-white
 *
 * IMPORTANT: every selector in this file is namespaced under .acad-page
 * so it can't bleed into other parts of the site. The hero background,
 * quick-facts overlap, and dark sections all assume that nesting.
 */


/* ─────────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────── */
.acad-page {
  --acu-red:        #C8372D;
  --acu-red-dark:   #9B2C24;
  --acu-red-light:  #E85A50;
  --acu-gold:       #D4A843;
  --acu-black:      #1A1A1A;
  --acu-charcoal:   #2D2D2D;
  --acu-gray:       #6B6B6B;
  --acu-gray-light: #B3B3B3;
  --acu-light-gray: #F5F5F5;
  --acu-cream:      #FAFAF8;
  --acu-light:      #E8E6E1;
  --acu-white:      #FFFFFF;

  --acu-font:       'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --acu-radius-sm:  4px;
  --acu-radius:     12px;
  --acu-radius-lg:  16px;

  --acu-shadow-sm:  0 2px 8px rgba(0,0,0,0.05);
  --acu-shadow:     0 4px 20px rgba(0,0,0,0.08);
  --acu-shadow-lg:  0 10px 35px rgba(0,0,0,0.12);
  --acu-shadow-xl:  0 8px 40px rgba(0,0,0,0.15);

  --acu-container:        1200px;
  --acu-container-narrow: 950px;

  font-family: var(--acu-font);
  color: var(--acu-black);
  line-height: 1.6;
  background: var(--acu-white);
  overflow-x: hidden;
}

.acad-page *,
.acad-page *::before,
.acad-page *::after {
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────────
   BASE TYPOGRAPHY
   The original used !important liberally to fight WordPress theme styles.
   Keeping that pattern here for consistency — these rules need to win
   against the global theme css that wraps the academic templates.
   ───────────────────────────────────────────────────────────────────── */
.acad-page h1,
.acad-page h2,
.acad-page h3,
.acad-page h4 {
  font-family: var(--acu-font);
  font-weight: 700;
  color: var(--acu-black);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.acad-page p {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.acad-page a {
  color: var(--acu-red);
  text-decoration: none;
  transition: color 0.2s ease;
}
.acad-page a:hover { color: var(--acu-red-dark); }


/* ─────────────────────────────────────────────────────────────────────
   ANIMATIONS
   Templates add .acad-anim to elements that should fade up on scroll.
   The IntersectionObserver lives at the bottom of each template and
   adds .acad-vis once the element enters the viewport. Delay classes
   (.acad-d2 ... .acad-d6) stagger groups so a grid animates in waves.
   ───────────────────────────────────────────────────────────────────── */
.acad-anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.acad-anim.acad-vis {
  opacity: 1;
  transform: translateY(0);
}
.acad-d2 { transition-delay: 0.15s; }
.acad-d3 { transition-delay: 0.30s; }
.acad-d4 { transition-delay: 0.45s; }
.acad-d5 { transition-delay: 0.60s; }
.acad-d6 { transition-delay: 0.75s; }


/* ─────────────────────────────────────────────────────────────────────
   CONTAINERS
   ───────────────────────────────────────────────────────────────────── */
.acad-container {
  max-width: var(--acu-container);
  margin: 0 auto;
  padding: 0 1rem;
}

.acad-container-narrow {
  max-width: var(--acu-container-narrow);
  margin: 0 auto;
  padding: 0 1rem;
}


/* ─────────────────────────────────────────────────────────────────────
   BREADCRUMBS — dark bar above the hero (matches original)
   ───────────────────────────────────────────────────────────────────── */
.acad-breadcrumb {
  background: var(--acu-black);
  padding: 0.9rem 2rem;
}

.acad-breadcrumb__inner {
  max-width: var(--acu-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.acad-breadcrumb__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.acad-breadcrumb__link:hover {
  color: rgba(255,255,255,0.9);
}

.acad-breadcrumb__sep {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}

.acad-breadcrumb__current {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}


/* ─────────────────────────────────────────────────────────────────────
   COMING SOON BANNER
   Sits between breadcrumbs and hero when a CPT has the coming-soon flag.
   Gold to distinguish from announcement bars elsewhere on the site.
   ───────────────────────────────────────────────────────────────────── */
.acad-coming-soon {
  background: var(--acu-gold);
  color: var(--acu-black);
  text-align: center;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.acad-coming-soon__label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-right: 8px;
}

.acad-coming-soon__cta {
  display: inline-block;
  margin-left: 16px;
  padding: 6px 18px;
  background: var(--acu-black);
  color: var(--acu-white);
  border-radius: var(--acu-radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.acad-coming-soon__cta:hover {
  background: var(--acu-red-dark);
  color: var(--acu-white);
}


/* ─────────────────────────────────────────────────────────────────────
   HERO — dark moody gradient, bg image overlaid at low opacity
   Tall enough to feel substantial. The Quick Facts strip below this
   uses negative margin to overlap the hero edge.
   ───────────────────────────────────────────────────────────────────── */
.acad-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(
    135deg,
    var(--acu-black) 0%,
    var(--acu-charcoal) 40%,
    var(--acu-red-dark) 100%
  );
  overflow: hidden;
}

.acad-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

.acad-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26,26,26,0.85) 0%,
    rgba(45,45,45,0.7) 40%,
    rgba(155,44,36,0.6) 100%
  );
}

.acad-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.acad-hero__badge {
  display: inline-block;
  background: rgba(200,55,45,0.25);
  border: 1px solid rgba(200,55,45,0.4);
  color: var(--acu-white);
  padding: 0.4rem 1.25rem;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.acad-hero__degree {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 0.5rem 0;
}

.acad-hero__title {
  font-size: clamp(3rem, 8vw, 5.5rem) !important;
  font-weight: 900 !important;
  color: var(--acu-white) !important;
  letter-spacing: -1px;
  line-height: 1.1 !important;
  margin: 0 0 1.25rem 0 !important;
}

.acad-hero__subtitle {
  font-size: clamp(1.25rem, 3vw, 1.7rem) !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.6 !important;
  max-width: 750px;
  margin: 0 auto 2rem auto !important;
  font-weight: 400;
}

.acad-hero__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────────────
   BUTTONS
   .acad-btn is the base; modifiers control color treatment.
   Hero contexts use --primary-on-dark and --outline-on-dark (white text);
   regular sections use --primary and --outline (red text).
   ───────────────────────────────────────────────────────────────────── */
.acad-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2.25rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  cursor: pointer;
}

/* Light hero context: solid white button with red text */
.acad-btn--primary-on-dark {
  background: var(--acu-white);
  color: var(--acu-red);
}
.acad-btn--primary-on-dark:hover {
  background: var(--acu-cream);
  color: var(--acu-red);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.acad-btn--outline-on-dark {
  background: transparent;
  color: var(--acu-white);
  border-color: rgba(255,255,255,0.5);
}
.acad-btn--outline-on-dark:hover {
  border-color: var(--acu-white);
  background: rgba(255,255,255,0.1);
  color: var(--acu-white);
  transform: translateY(-2px);
}

/* Regular section context: red solid / red outline */
.acad-btn--primary {
  background: var(--acu-red);
  color: var(--acu-white);
  border-color: var(--acu-red);
}
.acad-btn--primary:hover {
  background: var(--acu-red-dark);
  border-color: var(--acu-red-dark);
  color: var(--acu-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(200,55,45,0.35);
}

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


/* ─────────────────────────────────────────────────────────────────────
   QUICK FACTS — floats up to overlap the hero
   The .acad-quickfacts section creates the white surface; the inner
   .acad-quickfacts__bar uses negative top margin to lift into the hero.
   ───────────────────────────────────────────────────────────────────── */
.acad-quickfacts {
  background: var(--acu-white);
  padding: 0;
  position: relative;
  z-index: 3;
}

.acad-quickfacts__bar {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 900px;
  margin: -2rem auto 0 auto;
  background: var(--acu-white);
  border-radius: 16px;
  box-shadow: var(--acu-shadow-xl);
  overflow: hidden;
}

.acad-quickfact {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1rem;
  border-right: 1px solid var(--acu-light-gray);
  min-height: 110px;
}
.acad-quickfact:last-child { border-right: none; }

.acad-quickfact__value {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--acu-red);
  line-height: 1.1;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acad-quickfact__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--acu-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0.5rem 0 0 0;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────
   HIGHLIGHTS STRIP — appears right after quick facts (cream background)
   These are the "qf_highlights" repeater rendered as a 4-card grid.
   ───────────────────────────────────────────────────────────────────── */
.acad-highlights-strip {
  background: var(--acu-cream);
  padding: 4.5rem 2rem;
}

.acad-highlights-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--acu-container);
  margin: 0 auto;
}

.acad-highlight-strip-item {
  background: var(--acu-white);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  border-top: 4px solid var(--acu-red);
  box-shadow: var(--acu-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.acad-highlight-strip-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--acu-shadow);
}

.acad-highlight-strip-item__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 0 0.6rem 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.acad-highlight-strip-item__text {
  font-size: 1.05rem !important;
  color: var(--acu-gray) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   SECTIONS — base section container, alternates background per page
   The original alternates: white → cream → black → white → charcoal →
   white → cream → ... so reading down the page feels rhythmic.

   Note on padding: sections only carry vertical padding. The horizontal
   inset comes from the inner .acad-container (1rem) so that on narrow
   viewports content can sit close to the edges without compounding
   inset from both the section and the container.
   ───────────────────────────────────────────────────────────────────── */
.acad-section {
  padding: 6rem 0;
  background: var(--acu-white);
}

.acad-section--alt {
  background: var(--acu-cream);
}

.acad-section--dark {
  background: var(--acu-black);
  color: var(--acu-white);
}

.acad-section--charcoal {
  background: var(--acu-charcoal);
  color: var(--acu-white);
}

.acad-section--light-gray {
  background: var(--acu-light-gray);
}

.acad-section--narrow .acad-container {
  max-width: var(--acu-container-narrow);
}

.acad-section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.acad-section__title {
  font-size: clamp(2.25rem, 5vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--acu-black) !important;
  text-align: center;
  margin: 0 0 1rem 0 !important;
  line-height: 1.2 !important;
}

.acad-section--dark .acad-section__title,
.acad-section--charcoal .acad-section__title {
  color: var(--acu-white) !important;
}

.acad-section__intro {
  text-align: center;
  font-size: 1.3rem !important;
  color: var(--acu-gray) !important;
  line-height: 1.8 !important;
  max-width: 850px;
  margin: 0 auto 3rem auto !important;
}

.acad-section--dark .acad-section__intro,
.acad-section--charcoal .acad-section__intro {
  color: rgba(255,255,255,0.8) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   OVERVIEW — long-form text block, larger reading size
   ───────────────────────────────────────────────────────────────────── */
.acad-overview__body {
  font-size: 1.2rem !important;
  color: var(--acu-charcoal) !important;
  line-height: 1.8 !important;
  max-width: 900px;
  margin: 0 auto !important;
}
.acad-overview__body p { margin: 0 0 1.25rem 0; }
.acad-overview__body p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────────────
   CARDS — base card pattern, numbered + dark variants
   Used by What You'll Learn (dark), Getting Started (light), and
   anywhere else that needs the numbered-card pattern.
   ───────────────────────────────────────────────────────────────────── */
.acad-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: var(--acu-container);
  margin: 0 auto;
}

.acad-card {
  background: var(--acu-white);
  border: 1px solid var(--acu-light);
  border-radius: var(--acu-radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--acu-shadow-sm);
  transition: all 0.3s ease;
}
.acad-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--acu-shadow);
}

.acad-card--dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.acad-card--dark:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(200,55,45,0.3);
}

.acad-card__number {
  display: inline-block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--acu-red);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
}

.acad-card__title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 0 0.75rem 0 !important;
  line-height: 1.3 !important;
}

.acad-card--dark .acad-card__title {
  color: var(--acu-white) !important;
}

.acad-card__text {
  font-size: 1.05rem !important;
  color: var(--acu-gray) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.acad-card--dark .acad-card__text {
  color: rgba(255,255,255,0.65) !important;
}

.acad-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--acu-red);
  text-decoration: none;
  transition: gap 0.25s ease;
}
.acad-card__link:hover { gap: 0.75rem; }


/* ─────────────────────────────────────────────────────────────────────
   BWV CARDS — charcoal background with gold accents
   The defining visual of the "Biblical Worldview" section in the
   original. Two columns on desktop, gold topic header, white
   integration body, gold→white italic application footer.
   ───────────────────────────────────────────────────────────────────── */
.acad-bwv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 1000px;
  margin: 0 auto;
}

.acad-bwv-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--acu-radius-lg);
  padding: 2.25rem 2rem;
  transition: all 0.3s ease;
}
.acad-bwv-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(212,168,67,0.3);
  transform: translateY(-3px);
}

.acad-bwv-card__topic {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--acu-gold) !important;
  margin: 0 0 0.75rem 0 !important;
}

.acad-bwv-card__integration {
  font-size: 1.1rem !important;
  color: rgba(255,255,255,0.8) !important;
  line-height: 1.7 !important;
  margin: 0 0 1rem 0 !important;
}

.acad-bwv-card__application {
  font-size: 1rem !important;
  color: rgba(255,255,255,0.5) !important;
  font-style: italic;
  margin: 0 !important;
  display: block;
}
.acad-bwv-card__application::before {
  content: '→ ';
  color: var(--acu-gold);
}


/* ─────────────────────────────────────────────────────────────────────
   CAREERS — multi-color top-border accents on rotating cards
   ───────────────────────────────────────────────────────────────────── */
.acad-careers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.acad-career-card {
  background: var(--acu-light-gray);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  border-top: 3px solid transparent;
  transition: all 0.3s ease;
}
.acad-career-card:nth-child(4n+1) { border-top-color: var(--acu-red); }
.acad-career-card:nth-child(4n+2) { border-top-color: var(--acu-gold); }
.acad-career-card:nth-child(4n+3) { border-top-color: var(--acu-charcoal); }
.acad-career-card:nth-child(4n)   { border-top-color: var(--acu-red-dark); }
.acad-career-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--acu-shadow);
}

.acad-career-card__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 0 0.3rem 0 !important;
}

.acad-career-card__desc {
  font-size: 1rem !important;
  color: var(--acu-gray) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   FACULTY SPOTLIGHT — float-left photo with quote overlay
   Original uses an actual CSS float and shape-outside for the text wrap.
   On mobile we collapse to a stacked center-aligned layout.
   ───────────────────────────────────────────────────────────────────── */
.acad-faculty-card {
  max-width: 950px;
  margin: 0 auto;
  background: var(--acu-white);
  border-radius: 20px;
  padding: 3rem;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.acad-faculty-card__photo {
  float: left;
  width: 220px;
  height: 220px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: var(--acu-charcoal);
  margin: 0 2.5rem 1.5rem 0;
  shape-outside: inset(0 0 0 0 round 16px);
  aspect-ratio: 1 / 1;
}

.acad-faculty-card__body {
  overflow: visible;
}

.acad-faculty-card__quote {
  position: relative;
}
.acad-faculty-card__quote::before {
  content: '\201C';
  font-size: 4rem;
  color: rgba(200,55,45,0.2);
  font-family: Georgia, serif;
  line-height: 1;
  position: absolute;
  top: -1.5rem;
  left: -0.5rem;
}

.acad-faculty-card__message {
  font-size: 1.15rem !important;
  color: var(--acu-charcoal) !important;
  line-height: 1.85 !important;
  font-style: italic;
  margin: 0 0 1.5rem 0 !important;
}
.acad-faculty-card__message p { margin: 0 0 1rem 0; }
.acad-faculty-card__message p:last-child { margin-bottom: 0; }

.acad-faculty-card__name {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 !important;
  clear: left;
}

.acad-faculty-card__role {
  font-size: 1.05rem !important;
  color: var(--acu-red) !important;
  font-weight: 600;
  margin: 0.25rem 0 0 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   WHY-CHOOSE / HIGHLIGHTS GRID — 2 columns, left-border accent rotates
   Different from the highlights-strip (4 columns above quick facts);
   these are bigger cards with more reading copy.
   ───────────────────────────────────────────────────────────────────── */
.acad-whychoose-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.acad-whychoose-item {
  background: var(--acu-white);
  border-radius: var(--acu-radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.acad-whychoose-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--acu-red);
}
.acad-whychoose-item:nth-child(4n+2)::before { background: var(--acu-gold); }
.acad-whychoose-item:nth-child(4n+3)::before { background: var(--acu-charcoal); }
.acad-whychoose-item:nth-child(4n)::before   { background: var(--acu-red-dark); }
.acad-whychoose-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.acad-whychoose-item__title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 0 0.5rem 0 !important;
}

.acad-whychoose-item__desc {
  font-size: 1.05rem !important;
  color: var(--acu-gray) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   TESTIMONIAL — centered quote with optional video embed above
   ───────────────────────────────────────────────────────────────────── */
.acad-testimonial {
  max-width: 900px;
  margin: 0 auto;
}

.acad-testimonial__video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--acu-radius-lg);
  margin-bottom: 2.5rem;
  box-shadow: var(--acu-shadow-xl);
}
.acad-testimonial__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.acad-testimonial__quote-block {
  text-align: center;
  position: relative;
}
.acad-testimonial__quote-block::before {
  content: '\201C';
  font-size: 4rem;
  color: rgba(200,55,45,0.2);
  font-family: Georgia, serif;
  line-height: 1;
  display: block;
  margin-bottom: -0.5rem;
}

.acad-testimonial__quote {
  font-size: clamp(1.4rem, 3vw, 1.85rem) !important;
  font-style: italic;
  color: var(--acu-charcoal) !important;
  line-height: 1.7 !important;
  max-width: 800px;
  margin: 0 auto 1.5rem auto !important;
}

.acad-testimonial__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.acad-testimonial__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--acu-light-gray);
  flex-shrink: 0;
}

.acad-testimonial__name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 !important;
}

.acad-testimonial__detail {
  font-size: 1rem !important;
  color: var(--acu-red) !important;
  font-weight: 600;
  margin: 0.15rem 0 0 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   GETTING STARTED — numbered circle-step cards
   Different layout from the .acad-card--numbered (uppercase number label);
   these have a big circle with a numeral inside and center-aligned text.
   ───────────────────────────────────────────────────────────────────── */
.acad-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.acad-step {
  background: var(--acu-white);
  border-radius: var(--acu-radius-lg);
  padding: 2rem 1.75rem;
  text-align: center;
  transition: all 0.3s ease;
}
.acad-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.acad-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--acu-red);
  color: var(--acu-white);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.acad-step__title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 0 0.5rem 0 !important;
}

.acad-step__desc {
  font-size: 1rem !important;
  color: var(--acu-gray) !important;
  line-height: 1.6 !important;
  margin: 0 0 1rem 0 !important;
}

.acad-step__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--acu-red);
  text-decoration: none;
  transition: gap 0.25s ease;
}
.acad-step__link:hover { gap: 0.75rem; }


/* ─────────────────────────────────────────────────────────────────────
   RELATED PROGRAMS — horizontal cards with sliding arrow on hover
   ───────────────────────────────────────────────────────────────────── */
.acad-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.acad-related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--acu-light-gray);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}
.acad-related-card:hover {
  border-left-color: var(--acu-red);
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.acad-related-card__name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 0 0.2rem 0 !important;
}

.acad-related-card__type {
  font-size: 0.9rem !important;
  font-weight: 600;
  color: var(--acu-red) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 !important;
}

.acad-related-card__arrow {
  width: 20px;
  height: 20px;
  fill: var(--acu-gray);
  flex-shrink: 0;
  transition: fill 0.25s ease;
}
.acad-related-card:hover .acad-related-card__arrow {
  fill: var(--acu-red);
}


/* ─────────────────────────────────────────────────────────────────────
   CTA — closing call-to-action with dark gradient + buttons + contact
   ───────────────────────────────────────────────────────────────────── */
.acad-cta {
  background: linear-gradient(
    135deg,
    var(--acu-charcoal) 0%,
    var(--acu-black) 100%
  );
  padding: 5rem 2rem;
  text-align: center;
  color: var(--acu-white);
}

.acad-cta__title {
  font-size: clamp(2.25rem, 5vw, 3rem) !important;
  font-weight: 800 !important;
  color: var(--acu-white) !important;
  margin: 0 0 1.25rem 0 !important;
}

.acad-cta__text {
  font-size: clamp(1.2rem, 2.5vw, 1.45rem) !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.7 !important;
  max-width: 800px;
  margin: 0 auto 2rem auto !important;
}

.acad-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}


/* ─────────────────────────────────────────────────────────────────────
   CONTACT CARD — appears inside the CTA section if contact details set
   ───────────────────────────────────────────────────────────────────── */
.acad-contact-card {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--acu-radius-lg);
  padding: 1.25rem 2rem;
  text-align: left;
}

.acad-contact-card__photo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.acad-contact-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--acu-white);
  margin: 0;
}

.acad-contact-card__role {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin: 0.15rem 0 0.4rem 0;
}

.acad-contact-card__links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.acad-contact-card__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: border-color 0.25s ease;
}
.acad-contact-card__link:hover {
  border-bottom-color: var(--acu-white);
  color: var(--acu-white);
}


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE
   Tablets get reduced grid columns; phones get full vertical stacking.
   The Quick Facts bar collapses to a single column with side-by-side
   value+label so it stays compact on small screens.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .acad-section { padding: 4rem 0; }
  .acad-hero { min-height: 380px; padding: 4rem 1.5rem; }

  .acad-quickfacts__bar {
    flex-direction: column;
    margin-top: -1.5rem;
    border-radius: 12px;
  }
  .acad-quickfact {
    border-right: none;
    border-bottom: 1px solid var(--acu-light-gray);
    padding: 1.25rem 1rem;
    flex-direction: row;
    gap: 0.75rem;
    min-height: auto;
  }
  .acad-quickfact:last-child { border-bottom: none; }
  .acad-quickfact__value { flex: none; }
  .acad-quickfact__label { margin: 0; }

  .acad-highlights-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .acad-cards { grid-template-columns: 1fr; }
  .acad-bwv-grid { grid-template-columns: 1fr; }
  .acad-whychoose-grid { grid-template-columns: 1fr; }
  .acad-careers-grid { grid-template-columns: repeat(2, 1fr); }

  .acad-faculty-card { padding: 2rem; }
  .acad-faculty-card__photo {
    float: none;
    width: 160px;
    height: 160px;
    margin: 0 auto 1.5rem auto;
  }
  .acad-faculty-card__name { text-align: center; }
  .acad-faculty-card__role { text-align: center; }
  .acad-faculty-card__body { text-align: center; }
  .acad-faculty-card__quote::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .acad-highlights-strip__grid { grid-template-columns: 1fr; }
  .acad-hero__buttons { flex-direction: column; align-items: center; }
  .acad-cta__buttons { flex-direction: column; align-items: center; }
  .acad-contact-card { flex-direction: column; text-align: center; }
  .acad-careers-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────
   BACKWARD-COMPATIBILITY ALIASES
   The cert, minor, conc, course templates that shipped before this CSS
   rewrite use a slightly different class naming convention. Rather than
   rewriting every template (risky — five templates touched in the same
   deploy as the CSS change), we map their classes to the new equivalents.
   When we rewrite each template to match the new naming, these aliases
   can be deleted.
   ───────────────────────────────────────────────────────────────────── */

/* Breadcrumb: old templates use a <ul> wrapper with <li> items.
   New CSS uses flat spans with separators. Make either work. */
.acad-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  /* Match the flat-span layout: items get separators via ::after */
}

.acad-breadcrumb__item {
  display: flex;
  align-items: center;
}

.acad-breadcrumb__item:not(:last-child)::after {
  content: '›';
  margin: 0 8px;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  font-size: 0.75rem;
}

.acad-breadcrumb__text {
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
}

/* Button: --secondary alias for old templates that used it in CTA blocks */
.acad-btn--secondary {
  background: transparent;
  color: var(--acu-white);
  border-color: rgba(255,255,255,0.4);
}
.acad-btn--secondary:hover {
  border-color: var(--acu-white);
  background: rgba(255,255,255,0.08);
  color: var(--acu-white);
  transform: translateY(-2px);
}

/* Hero image: old templates use <img class="acad-hero__image">,
   new templates use a div background via .acad-hero__bg */
.acad-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  z-index: 1;
}

/* Quick facts grid: old templates used a CSS grid; new ones use the
   floating pill bar. Provide the old grid style as a fallback layout
   so old templates render at least like a horizontal strip. */
.acad-quickfacts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Faculty card: old templates use shorter names without --card suffix.
   Provide aliases that match the new --card visual. */
.acad-faculty {
  max-width: 950px;
  margin: 0 auto;
  background: var(--acu-white);
  border-radius: 20px;
  padding: 3rem;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  display: block; /* override any grid the new template might apply */
}

.acad-faculty__photo {
  float: left;
  width: 220px;
  height: 220px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: var(--acu-charcoal);
  object-fit: cover;
  margin: 0 2.5rem 1.5rem 0;
  aspect-ratio: 1 / 1;
  shape-outside: inset(0 0 0 0 round 16px);
}

.acad-faculty__info {
  overflow: visible;
}

.acad-faculty__message {
  font-size: 1.15rem !important;
  color: var(--acu-charcoal) !important;
  line-height: 1.85 !important;
  font-style: italic;
  margin: 0 0 1.5rem 0 !important;
}
.acad-faculty__message p { margin: 0 0 1rem 0; }
.acad-faculty__message p:last-child { margin-bottom: 0; }

.acad-faculty__name {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--acu-black) !important;
  margin: 0 !important;
  clear: left;
}

.acad-faculty__role {
  font-size: 1.05rem !important;
  color: var(--acu-red) !important;
  font-weight: 600;
  margin: 0.25rem 0 0 0 !important;
}

/* Contact card: old templates have __info wrapper and __placeholder */
.acad-contact-card__info {
  /* Empty wrapper — let children flow naturally */
  display: block;
}

.acad-contact-card__placeholder {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acu-white);
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .acad-faculty {
    text-align: center;
    padding: 2rem;
  }
  .acad-faculty__photo {
    float: none;
    width: 160px;
    height: 160px;
    margin: 0 auto 1.5rem auto;
  }
  .acad-faculty__name { text-align: center; }
  .acad-faculty__role { text-align: center; }
  .acad-faculty__info { text-align: center; }
}


/* ─────────────────────────────────────────────────────────────────────
   ═════════════════════════════════════════════════════════════════════
   v2.8.2 VISUAL POLISH PATCHES
   ═════════════════════════════════════════════════════════════════════

   The base v2.8.1 styles above work but five readability/layout
   issues showed up in production review. These patches address them
   without touching templates. Kept as a separate block so reverting
   means deleting just this section.

   Bug list addressed:
   1. Hero & CTA buttons unreadable (red text on red gradient)
   2. Card grids don't center incomplete rows (5 cards in repeat(3,1fr)
      leaves an empty 3rd column on the bottom row)
   3. BWV cards invisible on light background (translucent white on
      white). The cards were designed for use inside a dark section
      but every current template puts them in a light section.
   4. Concentrations section visually weak — needs to read as a major
      "choose your path" decision, not a footnote
   5. (folded into 1) CTA buttons same problem as hero buttons
   ───────────────────────────────────────────────────────────────────── */


/* ─── 1+5. Context-aware button colors ────────────────────────────────
   When .acad-btn--primary or .acad-btn--secondary sits inside a dark
   context (.acad-hero, .acad-cta, or any .acad-section--dark variant),
   swap to high-contrast colors automatically. No template changes
   required — the buttons figure out where they live and adapt.

   Primary in dark context: solid WHITE button with charcoal text. Pops
   off dark gradients. Hover lifts and adds a subtle gold-tinted shadow.

   Secondary in dark context: transparent button with GOLD border + GOLD
   text. Sits next to the white primary with clear visual separation,
   uses our accent color. Hover fills the button with solid gold.
   ───────────────────────────────────────────────────────────────────── */

.acad-hero .acad-btn--primary,
.acad-cta .acad-btn--primary,
.acad-section--dark .acad-btn--primary,
.acad-section--charcoal .acad-btn--primary {
  background: var(--acu-white);
  color: var(--acu-charcoal);
  border-color: var(--acu-white);
}
.acad-hero .acad-btn--primary:hover,
.acad-cta .acad-btn--primary:hover,
.acad-section--dark .acad-btn--primary:hover,
.acad-section--charcoal .acad-btn--primary:hover {
  background: var(--acu-cream);
  color: var(--acu-black);
  border-color: var(--acu-cream);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 168, 67, 0.35);
}

.acad-hero .acad-btn--secondary,
.acad-cta .acad-btn--secondary,
.acad-section--dark .acad-btn--secondary,
.acad-section--charcoal .acad-btn--secondary {
  background: transparent;
  color: var(--acu-gold);
  border-color: var(--acu-gold);
}
.acad-hero .acad-btn--secondary:hover,
.acad-cta .acad-btn--secondary:hover,
.acad-section--dark .acad-btn--secondary:hover,
.acad-section--charcoal .acad-btn--secondary:hover {
  background: var(--acu-gold);
  color: var(--acu-charcoal);
  border-color: var(--acu-gold);
  transform: translateY(-2px);
}


/* ─── 2. Card grids center incomplete rows ────────────────────────────
   The base CSS uses CSS grid which won't center an incomplete final
   row — 5 cards in a 3-col grid leaves an awkward empty slot. Switch
   the major card containers to flexbox (wrap + center) so the last
   row centers automatically.

   We set a fixed flex-basis range on the children so cards don't go
   absurdly wide when there are only 1-2 of them. The grids stay
   grid-styled for layouts where exact column counts matter (e.g.
   the highlights-strip 4-up), but the flexible "list of cards"
   patterns convert to flex.
   ───────────────────────────────────────────────────────────────────── */

/* Numbered cards (What You'll Learn, etc) */
.acad-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  max-width: var(--acu-container);
  margin: 0 auto;
}
.acad-cards > * {
  flex: 1 1 280px;
  max-width: 360px;
}

/* BWV cards */
.acad-bwv-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  max-width: 1000px;
  margin: 0 auto;
}
.acad-bwv-grid > * {
  flex: 1 1 380px;
  max-width: 470px;
}

/* Career cards (smaller flex basis since they're more compact) */
.acad-careers-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}
.acad-careers-grid > * {
  flex: 1 1 220px;
  max-width: 280px;
}

/* Why-choose cards */
.acad-whychoose-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.acad-whychoose-grid > * {
  flex: 1 1 420px;
  max-width: 480px;
}

/* Related programs */
.acad-related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}
.acad-related-grid > * {
  flex: 1 1 250px;
  max-width: 340px;
}

/* Getting Started steps */
.acad-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.acad-steps > * {
  flex: 1 1 240px;
  max-width: 320px;
}

/* Highlights strip — kept as 4-up grid since it always has exactly 4 */
.acad-highlights-strip__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: var(--acu-container);
  margin: 0 auto;
}
.acad-highlights-strip__grid > * {
  flex: 1 1 240px;
  max-width: 280px;
}


/* ─── 3. BWV cards readable on light backgrounds ──────────────────────
   The v2.8.1 design assumed BWV would render inside a dark section
   (charcoal background). Real templates put BWV inside a regular
   light section, so the translucent-white cards become invisible.

   Fix: the BWV CARD itself becomes the dark surface. Charcoal bg,
   gold accent for the topic, white body text. The surrounding section
   stays whatever color the template chose. Reads as a dramatic
   "dark moment" within the page without requiring the section to be
   redesigned.
   ───────────────────────────────────────────────────────────────────── */

.acad-bwv-card {
  background: var(--acu-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.acad-bwv-card:hover {
  background: #383838; /* a hair lighter than charcoal */
  border-color: rgba(212, 168, 67, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* When BWV is in a dark section, lighten the card slightly so it still
   reads as raised above the surrounding surface. */
.acad-section--dark .acad-bwv-card,
.acad-section--charcoal .acad-bwv-card {
  background: rgba(255, 255, 255, 0.05);
}
.acad-section--dark .acad-bwv-card:hover,
.acad-section--charcoal .acad-bwv-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Text inside BWV cards is always light, regardless of surrounding
   section color, because the card itself is dark. */
.acad-bwv-card__topic {
  color: var(--acu-gold) !important;
}
.acad-bwv-card__integration {
  color: rgba(255, 255, 255, 0.88) !important;
}
.acad-bwv-card__application {
  color: rgba(255, 255, 255, 0.55) !important;
}
.acad-bwv-card__application::before {
  color: var(--acu-gold);
}


/* ─── 4. Concentrations section prominence ────────────────────────────
   Concentrations are a major navigation moment on a degree page —
   "choose your specialization" is a real decision the student is
   making. Treat the section accordingly: larger cards, alternating
   accent colors, a clear image area (CSS slot ready for the template
   to fill in once we add deg_concentrations.image support), strong
   hover treatment that signals "click here."

   Implementation note: the template currently renders concentration
   cards inside .deg-conc-grid (legacy class) OR .deg-concentrations-grid
   (newer class). I'm styling both so this works regardless of which
   template version is live. Both selectors target the same visual.
   ───────────────────────────────────────────────────────────────────── */

.deg-conc-grid,
.deg-concentrations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.deg-conc-grid > *,
.deg-concentrations-grid > * {
  flex: 1 1 320px;
  max-width: 420px;
}

/* Card itself — bigger, more visual presence */
.deg-conc-card,
.deg-concentration-card {
  display: block;
  background: var(--acu-white);
  border-radius: var(--acu-radius-lg);
  padding: 0; /* override base padding — we'll handle inside */
  overflow: hidden;
  text-decoration: none;
  border-left: 6px solid var(--acu-red);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
}

/* Rotating accent border so multiple concentrations feel distinct */
.deg-conc-grid > *:nth-child(2) .deg-conc-card,
.deg-conc-grid > *:nth-child(2),
.deg-concentrations-grid > *:nth-child(2) .deg-concentration-card,
.deg-concentrations-grid > *:nth-child(2),
.deg-conc-card:nth-child(2),
.deg-concentration-card:nth-child(2) {
  border-left-color: var(--acu-gold);
}
.deg-conc-card:nth-child(3),
.deg-concentration-card:nth-child(3) {
  border-left-color: var(--acu-charcoal);
}
.deg-conc-card:nth-child(4),
.deg-concentration-card:nth-child(4) {
  border-left-color: var(--acu-red-dark);
}
.deg-conc-card:nth-child(5),
.deg-concentration-card:nth-child(5) {
  border-left-color: var(--acu-red-light);
}

.deg-conc-card:hover,
.deg-concentration-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  border-left-width: 10px;
}

/* Optional image area: ready for the template to add an
   <img class="deg-conc-card__image"> or background-image inline style.
   If no image is set, the area collapses (height 0) and the card looks
   exactly like a no-image card. */
.deg-conc-card__image,
.deg-concentration-card__image {
  display: block;
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--acu-light-gray);
}

/* Inner content padding */
.deg-conc-card,
.deg-concentration-card {
  /* keep card outer padding 0 (handled above) */
}

/* Wrap name/desc/link inside a content block — if the template
   doesn't use this wrapper, the rules below also work on the
   children directly via descendant selectors. */
.deg-conc-card > .deg-conc-name,
.deg-conc-card > .deg-conc-desc,
.deg-conc-card > .deg-conc-link,
.deg-concentration-card > .deg-concentration-card__title,
.deg-concentration-card > .deg-concentration-card__desc,
.deg-concentration-card > .deg-concentration-card__arrow {
  padding-left: 2rem;
  padding-right: 2rem;
}
.deg-conc-card > .deg-conc-name,
.deg-concentration-card > .deg-concentration-card__title {
  margin-top: 1.75rem !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--acu-black) !important;
}
.deg-conc-card > .deg-conc-desc,
.deg-concentration-card > .deg-concentration-card__desc {
  margin-top: 0.5rem !important;
  margin-bottom: 1.25rem !important;
  font-size: 1.05rem !important;
  color: var(--acu-gray) !important;
  line-height: 1.6 !important;
}
.deg-conc-card > .deg-conc-link,
.deg-concentration-card > .deg-concentration-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--acu-red);
  text-decoration: none;
  transition: gap 0.25s ease;
}
.deg-conc-card > .deg-conc-link:hover,
.deg-concentration-card:hover .deg-concentration-card__arrow {
  gap: 0.9rem;
}

/* Section background — give the concentrations section a subtle
   cream background so it reads as a distinct "choose your path"
   moment between Learn and BWV. Targets the section that wraps
   concentration cards. */
.deg-concentrations,
.acad-section:has(.deg-concentrations-grid),
.acad-section:has(.deg-conc-grid) {
  background: var(--acu-cream);
}

/* Stronger section heading for the concentrations area */
.deg-concentrations .acad-section__title,
.acad-section:has(.deg-concentrations-grid) .acad-section__title,
.acad-section:has(.deg-conc-grid) .acad-section__title {
  font-size: clamp(2.5rem, 5.5vw, 3.25rem) !important;
}


/* ─── Responsive overrides for v2.8.2 patches ─────────────────────────
   Tweaks to the flex layouts for narrower viewports. The base mobile
   rules earlier in the file handle most of this, but a few flex grids
   need adjusted basis values so they don't stack too narrow.
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .deg-conc-card,
  .deg-concentration-card {
    border-left-width: 4px;
  }
  .deg-conc-card:hover,
  .deg-concentration-card:hover {
    border-left-width: 6px;
  }
  .deg-conc-card__image,
  .deg-concentration-card__image {
    height: 140px;
  }
}


/* ─── 6. Faculty card: proper side-by-side grid layout ────────────────
   The base CSS (and back-compat alias) uses float-left + shape-outside
   for the photo, which works for "text wraps around photo" but doesn't
   give a clean side-by-side feel when the info block is short or tall.

   Replace with CSS Grid: photo is a fixed 240px column, info takes
   the rest. Vertically centered. On mobile, collapse to single column.

   Targets BOTH .acad-faculty (back-compat class used by current
   templates) AND .acad-faculty-card (newer pattern from the polished
   degree template) so this fix lands on every template at once.

   We override the float-left from the base CSS so the photo joins the
   grid as a normal column. No template changes needed — the existing
   markup of <photo><info> as direct children is exactly what Grid
   expects.
   ───────────────────────────────────────────────────────────────────── */

.acad-faculty,
.acad-faculty-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 950px;
  margin: 0 auto;
  background: var(--acu-white);
  border-radius: 20px;
  padding: 3rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.acad-faculty__photo,
.acad-faculty-card__photo {
  /* Cancel the float-left from base CSS — we're using grid now */
  float: none;
  margin: 0;
  shape-outside: none;

  width: 240px;
  height: 240px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: var(--acu-charcoal);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* Info block — make sure its own children don't have layout
   surprises that fight the grid. */
.acad-faculty__info,
.acad-faculty-card__body {
  overflow: visible;
  min-width: 0; /* allow flex/grid item to shrink below content width */
}

/* Clear the "clear: left" from the name — that was needed to push it
   below the float, but the float is gone now. */
.acad-faculty__name,
.acad-faculty-card__name {
  clear: none;
}

/* Mobile: stack vertically with photo centered above text. */
@media (max-width: 768px) {
  .acad-faculty,
  .acad-faculty-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem;
    text-align: center;
  }
  .acad-faculty__photo,
  .acad-faculty-card__photo {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }
}