/* ===========================================================================
   BW Academic Majors Page Template
   ---------------------------------------------------------------------------
   Stylesheet for the new individual-major page template (Biology, Geology,
   Chemistry, English, etc.). Drops in as a replacement for
   /_files/css/majors.css. All rules are scoped to .majors-template so they
   cannot bleed into the universal bw.edu header / footer / nav.

   Token system: CSS custom properties on .majors-template. Override with a
   variant class (e.g. .majors-template--conservatory) to retheme.

   Grid: leverages Foundation 5's .row / .columns classes that are already
   loaded sitewide. Custom .mt-* classes handle section framing, components,
   and visual treatment.

   Breakpoints: small <640, medium >=640, large >=900 (multi-column grids
   transition here per Matt 6/16/26 punch list 1.7 — was 1024). The Hero
   keeps its own >=1024 typography/min-height tier as an explicit
   exception (it sets its visual scale independent of body grid columns).

   Accessibility: WCAG 2.1 AA target. All interactive elements receive a
   visible focus ring; color tokens are contrast-checked.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
.majors-template {
  /* Color — backgrounds */
  --mt-bg:           #FFFFFF;
  --mt-bg-alt:       #F6F4F2;   /* Light Sandstone */
  --mt-bg-overlay:   rgba(0, 0, 0, 0.55);

  /* Color — text */
  --mt-text:         #3F230D;   /* Body brown */
  --mt-text-muted:   #6B5A4A;
  --mt-text-invert:  #FFFFFF;

  /* Color — interactive */
  --mt-link:         #BF4200;   /* Burnt Orange (default) */
  --mt-link-hover:   #A13F00;   /* Deep Burnt Orange (hover/focus) */
  --mt-link-visited: #8A2F00;

  /* Color — accents */
  --mt-heading:      #0356A4;   /* BW Blue — h2/h3 */
  --mt-accent:       #C79A30;   /* Gold — dividers, icons, checks */
  --mt-accent-soft:  #E6CF8A;
  --mt-border-soft:  #D9D2C8;

  /* Typography */
  --mt-font-display: "PT Serif", Georgia, "Times New Roman", serif;
  --mt-font-heading: "Oswald", "Arial Narrow", Impact, sans-serif;
  --mt-font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale — UX Pilot CSS values used verbatim, with narrow-width
     floors swapped per Dan / punch list 1.5 (6/16/26 — Approved): "H1
     larger than H2 at narrow widths." H1 floor 36 → 40px, H2 floor 40
     → 36px. Both desktop maxes (H1 58, H2 44) unchanged, so H1 > H2
     holds at every viewport. */
  --mt-fs-h1:        clamp(2.5rem, 5vw, 3.625rem);   /* 40 → 58px (hero) */
  --mt-fs-h2:        clamp(2.25rem, 3vw, 2.75rem);   /* 36 → 44px (UX Pilot lg:text-[44px]) */
  --mt-fs-h3:        1.75rem;                         /* 28px (UX Pilot text-[28px]) */
  --mt-fs-h4:        1.25rem;                         /* 20px */
  --mt-fs-body:      1.125rem;                        /* 18px (UX Pilot text-lg / text-[18px]) */
  --mt-fs-pullquote: 1.5rem;                          /* 24px (UX Pilot text-2xl) */
  --mt-fs-small:     1rem;                            /* 16px */
  --mt-fs-mini:      0.875rem;                        /* 14px */

  --mt-lh-tight:     1.15;
  --mt-lh-snug:      1.35;
  --mt-lh-relaxed:   1.6;

  /* Spacing */
  --mt-row-py:       clamp(2.5rem, 6vw, 5rem);
  --mt-row-px:       clamp(1rem, 3vw, 2rem);
  --mt-gap-sm:       0.75rem;
  --mt-gap:          1.5rem;
  --mt-gap-lg:       3rem;

  /* Sizing */
  --mt-container:    1152px;     /* UX Pilot max-w-6xl */
  --mt-radius:       0;          /* squared per design */
  --mt-bar:          4px;        /* gold/colored accent bar width */

  /* Focus */
  --mt-focus-ring:   0 0 0 3px rgba(191, 66, 0, 0.35);
}

/* Conservatory variant — full fuchsia takeover. Per Dan via Matt
   6/18/26 (punch list 2.4 final): "we are going full-on fuchsia —
   the fuchsia will replace the orange." Every interactive / accent
   surface that consumes --mt-link, --mt-link-hover, --mt-link-visited
   or --mt-accent picks up the Conservatory palette automatically —
   hyperlink text, hero CTAs (background), breadcrumbs, image-slider
   chevrons, story-carousel chevrons, faculty-carousel chevrons, FAQ
   "Show More Questions" toggle, admission card titles + icons,
   minor + course + faculty + related-major links, textlinks ("View
   All Courses"), ghost CTAs, image-caption hyperlinks, gold
   dividers / checks (already covered by --mt-accent above), and the
   focus ring tint. Single source of truth — no per-component
   overrides. */
.majors-template--conservatory {
  --mt-accent:       #A20067;   /* Conservatory Fuchsia */
  --mt-accent-soft:  #D27FB5;
  --mt-link:         #A20067;   /* was Burnt Orange #BF4200 */
  --mt-link-hover:   #92005D;   /* was Deep Burnt Orange #A13F00 */
  --mt-link-visited: #6B0042;   /* was Deeper Burnt #8A2F00 — darker fuchsia for visited */
  --mt-focus-ring:   0 0 0 3px rgba(162, 0, 103, 0.35);  /* fuchsia-tinted glow */
}


/* ---------------------------------------------------------------------------
   Specificity overrides — fight back against existing bw.edu CSS
   ---------------------------------------------------------------------------
   The live site has aggressive #main h1 / #main p / a {…} rules in
   redesign.css and bw_main_css.css. Their #main element selectors
   outrank our plain class selectors, so we prefix critical rules
   with #main.majors-template to match-and-beat their specificity,
   and use !important on a small set of visual properties (color,
   text-transform, text-decoration) that they aggressively own.
   --------------------------------------------------------------------------- */

#main.majors-template h1,
#main.majors-template h2,
#main.majors-template h3,
#main.majors-template h4,
#main.majors-template h5,
#main.majors-template h6 {
  text-transform: none !important;
  letter-spacing: normal;
  margin-top: 0;
}

#main.majors-template h1 {
  font-family: var(--mt-font-display) !important;
  color: var(--mt-heading);
}

#main.majors-template h2 {
  font-family: var(--mt-font-heading) !important;
  font-size: var(--mt-fs-h2) !important;
  font-weight: 400 !important;
  /* Per Dan 6/16/26 (new — multi-line H tag spacing): "When text goes
     to multiple lines, increase spacing between lines. Try 4 px for
     H2..." 1.2 → 1.3 at the 40-44px H2 size adds ~4-4.4px between
     lines (44 × 0.1 = 4.4). */
  line-height: 1.3;
  color: var(--mt-heading);
}

#main.majors-template h3 {
  font-family: var(--mt-font-heading) !important;
  font-size: var(--mt-fs-h3) !important;
  font-weight: 400 !important;
  /* Per Dan 6/16/26 (new — multi-line H tag spacing): "...and 2 px
     for H3." 1.4 → 1.5 at the 28px H3 size adds ~2.8px between
     lines (28 × 0.1 = 2.8). */
  line-height: 1.5;
  color: var(--mt-heading);
}

#main.majors-template h4 {
  font-family: var(--mt-font-body) !important;   /* Roboto, not Oswald — Oswald reads cramped at H4 size; Dan/Copilot 6/8/26 */
  font-size: var(--mt-fs-h4) !important;
  font-weight: 500 !important;
  color: var(--mt-heading);
}

#main.majors-template p,
#main.majors-template li {
  font-family: var(--mt-font-body) !important;
  font-size: var(--mt-fs-body) !important;
  line-height: var(--mt-lh-relaxed);
  color: var(--mt-text);
}

#main.majors-template span:not([class*="fa-"]):not([class*="show-for-"]) {
  font-family: var(--mt-font-body);
  color: var(--mt-text);
}

/* Pull quote — explicitly PT Serif (serif) at 24px with airy line-height,
   matching UX Pilot. Without these overrides bw.edu's #main p rule wins
   and forces Roboto sans-serif at body size. */
#main.majors-template .mt-pullquote {
  font-family: var(--mt-font-display) !important;
  font-size: var(--mt-fs-pullquote) !important;
  line-height: 1.58;
  font-weight: 400;
  color: var(--mt-text);
  padding: 1rem 1.5rem 1rem 2rem;
  margin: 0 0 1.5rem;
}

#main.majors-template a {
  color: var(--mt-link);
}

/* Hero — force white text + display font over any inherited bw.edu rule.
   Sizes locked per UX Pilot reference: 42 / 52 / 58px at small/medium/large. */
#main.majors-template .mt-hero__title {
  color: var(--mt-text-invert) !important;
  font-family: var(--mt-font-display) !important;
  font-weight: 500 !important;
  font-size: 2.625rem !important;    /* 42px mobile */
  line-height: 1.15;
  margin: 0 0 2.5rem !important;     /* 40px below — UX Pilot mb-8 */
  text-transform: none !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

@media (min-width: 640px) {
  #main.majors-template .mt-hero__title {
    font-size: 3.25rem !important;   /* 52px tablet */
  }
}

@media (min-width: 1024px) {
  #main.majors-template .mt-hero__title {
    font-size: 3.625rem !important;  /* 58px desktop */
  }
}

/* Compact hero title modifier — opt-in escape hatch for genuinely long
   major names that would otherwise wrap to 3+ lines at the default size
   (e.g., "Music Performance: Woodwinds, Brass, Percussion"). Drops the
   size roughly 30% across all breakpoints so long titles fit in 2 lines.
   Apply by adding `mt-hero__title--compact` alongside `mt-hero__title`. */
#main.majors-template .mt-hero__title--compact {
  font-size: 2rem !important;        /* 32px mobile */
}

@media (min-width: 640px) {
  #main.majors-template .mt-hero__title--compact {
    font-size: 2.25rem !important;   /* 36px tablet */
  }
}

@media (min-width: 1024px) {
  #main.majors-template .mt-hero__title--compact {
    font-size: 2.5rem !important;    /* 40px desktop */
  }
}

#main.majors-template .mt-hero__lead {
  color: var(--mt-text-invert) !important;
}

/* CTAs — force white text over the inherited link color (otherwise the
   text disappears against the orange button) */
#main.majors-template .mt-cta,
#main.majors-template .mt-cta:link,
#main.majors-template .mt-cta:visited {
  color: var(--mt-text-invert) !important;
  text-decoration: none !important;
}

#main.majors-template .mt-cta:hover,
#main.majors-template .mt-cta:focus {
  color: var(--mt-text-invert) !important;
  text-decoration: none !important;
}

#main.majors-template .mt-cta--ghost,
#main.majors-template .mt-cta--ghost:link,
#main.majors-template .mt-cta--ghost:visited {
  color: var(--mt-link) !important;
}

#main.majors-template .mt-cta--ghost:hover,
#main.majors-template .mt-cta--ghost:focus {
  color: var(--mt-text-invert) !important;
}

/* Faculty / story / minor / admit card link titles — these wrap headings
   inside <a>, and bw.edu's #main a rules can win — keep them orange */
#main.majors-template .mt-story__title,
#main.majors-template .mt-minor__name a,
#main.majors-template .mt-faculty-card__name,
#main.majors-template .mt-admit-card__title,
#main.majors-template .mt-related-card a,
#main.majors-template .mt-course h4 a {
  color: var(--mt-link) !important;
}


/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
.majors-template {
  font-family: var(--mt-font-body);
  font-size: var(--mt-fs-body);
  line-height: var(--mt-lh-relaxed);
  color: var(--mt-text);
  background: var(--mt-bg);
}

.majors-template *,
.majors-template *::before,
.majors-template *::after {
  box-sizing: border-box;
}

.majors-template h1,
.majors-template h2,
.majors-template h3,
.majors-template h4,
.majors-template h5,
.majors-template h6 {
  /* Heading bottom margin is font-relative (0.4em of the heading's own
     size) so each heading scales its own breathing room. Replaces the
     fixed 0.75rem we had — keeps the heading visually tethered to the
     paragraph that follows. Per Dan / Copilot 6/8/26. */
  margin: 0 0 0.4em;
  line-height: var(--mt-lh-tight);
  font-weight: 500;
  color: var(--mt-heading);
}

.majors-template h1 {
  font-family: var(--mt-font-display);
  font-size: var(--mt-fs-h1);
  font-weight: 700;
}

.majors-template h2,
.majors-template h3,
.majors-template h4 {
  font-family: var(--mt-font-heading);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.majors-template h2 { font-size: var(--mt-fs-h2); }
.majors-template h3 { font-size: var(--mt-fs-h3); }
.majors-template h4 { font-size: var(--mt-fs-h4); }

.majors-template p {
  margin-top: 0;          /* explicit — was implicit via shorthand */
  margin-bottom: 1rem;
}

.majors-template p:last-child {
  margin-bottom: 0;
}

/* Heading → paragraph spacing: when a paragraph immediately follows a
   heading, kill the paragraph's top margin so the heading stays visually
   tethered to its body copy. Fixes margin-collapse inconsistencies and
   prevents "floating heading" feel. Per Dan / Copilot 6/8/26. */
#main.majors-template h1 + p,
#main.majors-template h2 + p,
#main.majors-template h3 + p,
#main.majors-template h4 + p,
#main.majors-template h5 + p,
#main.majors-template h6 + p {
  margin-top: 0 !important;
}

/* Paragraph / list → heading spacing (inverse of the rule above).
   Per Matt 6/16/26 (punch list 1.8): "H tags in the copy need a small
   additional space above. The copy here is too tight against the H3
   top." When an in-copy H3/H4 follows a paragraph or list, add 12px
   margin-top so the heading reads as a clear section break rather
   than crowding the previous block. Scoped to body-copy contexts
   (.mt-overview__copy, .mt-experiences__copy) so it doesn't fight
   the existing tight H2/H3 rhythm in other components (Brag Cards,
   Alumni, Admission cards, etc. where headings sit with their own
   structured spacing).
   .mt-experiences__copy p+h3 deliberately omitted — Experiences H3
   already has an explicit 2rem (32px) margin-top set on every H3,
   which is the intended Topic-Block rhythm; we don't want to undo
   that with a smaller adjacency value. */
/* Broadened 7/23/26 (HH QA 7.1) — ancestor is now .mt-overview__grid
   (parent that contains BOTH columns) so the adjacency rule fires
   whether the H4 sits in the left copy column or the right side column.
   Production pages match identically because the left column is still
   inside the grid; new coverage only kicks in for rearranged content. */
#main.majors-template .mt-overview__grid p + h4,
#main.majors-template .mt-overview__grid ul + h4,
#main.majors-template .mt-overview__grid ol + h4,
#main.majors-template .mt-experiences__copy p + h4,
#main.majors-template .mt-experiences__copy ul + h4,
#main.majors-template .mt-experiences__copy ol + h4 {
  /* 20px — was 12px (then briefly 16px); per Matt 6/25/26 needs a real
     +4px above the previous block. Note the margin-collapse: preceding
     <p> already carries margin-bottom: 1rem (16px), so the visible gap
     equals max(prev-bottom, this-top). 16px h4 top collapsed to 16px and
     looked identical to the prior state — bumping to 20px wins the
     collapse and gives a true +4px lift. */
  margin-top: 1.25rem !important;
}
/* Overview h3 adjacency rules removed 6/23/26 — Overview now shares
   the same Topic-Block blanket H3 rule as Experiences (32px above /
   16px below). See the .mt-overview__copy h3 / .mt-experiences__copy
   h3 selector pair below. */

.majors-template a {
  color: var(--mt-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.majors-template a:hover,
.majors-template a:focus {
  color: var(--mt-link-hover);
  text-decoration-thickness: 2px;
}

.majors-template a:focus-visible {
  outline: 0;
  box-shadow: var(--mt-focus-ring);
  border-radius: 2px;
}

/* Body-copy lists — generic <ul>/<ol> inside content blocks.
   Same font/size/color as body paragraphs (inherited via the
   #main.majors-template p, li rule above). Traditional disc/decimal
   markers — forced explicitly because bw.edu's redesign.css strips
   list-style in places. Row spacing is comfortable (0.75rem between
   items) to fix the cramped feel of the current bw.edu lists. Indent
   is intentionally tight; nested lists inherit the same indent depth
   so they don't drift further right. Component lists with their own
   visual treatment (.mt-check-list, .mt-faq__list, .mt-highlights__list,
   etc.) override these defaults via their own class rules. */
.majors-template ul,
.majors-template ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

/* Apply disc/decimal markers only to "plain" lists *inside body-copy
   contexts* (Overview, Experiences, Callouts). The earlier broader
   rule — `ul:not([class])` site-wide — caught unclassed ULs inside
   components like .mt-alumni-card, producing a default browser disc
   on top of the component's custom ::before bullet (Matt's 6/14/26
   bug report). Scoping to known body-copy ancestors solves that and
   defensively keeps the same bug from re-appearing in any new
   component Hannon Hill adds whose author forgets to class the UL. */
/* Broadened 7/23/26 (HH QA 7.1) — .mt-overview__grid instead of
   .mt-overview__copy so plain lists get body-copy markers in either
   Overview column. */
#main.majors-template .mt-overview__grid ul:not([class]),
#main.majors-template .mt-experiences__copy ul:not([class]),
#main.majors-template .mt-callout ul:not([class]) {
  list-style: disc !important;
}

#main.majors-template .mt-overview__grid ol:not([class]),
#main.majors-template .mt-experiences__copy ol:not([class]),
#main.majors-template .mt-callout ol:not([class]) {
  list-style: decimal !important;
}

.majors-template li {
  margin-bottom: 0.75rem;        /* was 0.5rem — Dan / Copilot 6/8/26 */
}

.majors-template li:last-child {
  margin-bottom: 0;
}

/* Body-copy list rhythm (HH QA 7.11, 8/26/26)
   -------------------------------------------
   Dan K asked for the gap between bullets to match the line spacing
   inside a paragraph; Dan felt that went too far for readability and
   suggested splitting the difference. Measured on the live build:

     paragraph line-to-line ....... 28.8px  (18px × 1.6)
     between bullets (12px margin)  40.8px
     split the difference ......... 34.8px  → 6px margin

   So this drops the body-copy bullet margin 12px → 6px, landing exactly
   between Dan K's target and the previous value.

   Deliberately scoped to UNCLASSED lists inside the two body-copy
   containers. Per Dan: "we don't need to adjust line spacing in the
   other bulleted list styles" — so .mt-check-list, .mt-alumni-card
   lists, and every other component list keep their own spacing. The
   `:not([class])` filter is what protects them.

   Note on the companion request — "spacing between multiple lines of a
   bullet point will need to be reduced, but not less than the spacing
   between lines in a paragraph": within-bullet line spacing is ALREADY
   28.8px, identical to paragraph line spacing, because <p> and <li>
   share the same line-height token. There's no room to reduce it
   without dropping below the floor Dan set, so it's intentionally left
   alone. */
#main.majors-template .mt-overview__grid ul:not([class]) > li,
#main.majors-template .mt-overview__grid ol:not([class]) > li,
#main.majors-template .mt-experiences__copy ul:not([class]) > li,
#main.majors-template .mt-experiences__copy ol:not([class]) > li {
  margin-bottom: 0.375rem;       /* 6px — 34.8px baseline-to-baseline */
}

.majors-template li > ul,
.majors-template li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.majors-template img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ---------------------------------------------------------------------------
   Section frame
   ---------------------------------------------------------------------------
   .mt-section  — the OUTER wrapper. One <section class="mt-section"> = one
                  Cascade Content Section (atomic unit Cascade authors can
                  reorder or omit). Carries the aria-labelledby pointing at
                  the section's primary heading. No visual styling of its own
                  — it's a logical grouping.

   .mt-row      — the INNER visual row. Each <div class="mt-row"> is one
                  strip of content with padding + background. Most Cascade
                  atoms have ONE inner .mt-row. The Alumni atom is the only
                  one (so far) with TWO inner .mt-row divs (Alumni Success +
                  alumni-extra companion content — currently Team NEO).
                  Modifier classes (--alt, --flush-top, --flush-bottom,
                  --tall, --tight, --faq, --related) sit on the inner row.

   Refactored 6/25/26 (5.0.2 Step 1). The previous structure had .mt-row
   directly on the <section> element. Splitting them gives us a clean
   Cascade-atom / visual-row separation that Step 3's positional CSS
   (alternating backgrounds) can target without ambiguity.
   --------------------------------------------------------------------------- */
.mt-row {
  position: relative;
  padding: var(--mt-row-py) var(--mt-row-px);
  background: var(--mt-bg);
}

/* Section background — class-based selection.
   Per HH (Elisabeth 6/30): background choice is manual per section
   (not auto-alternated). Cascade authors add .mt-section--bg-alt to
   the outer <section class="mt-section"> to render sandstone; without
   it, the section renders on the default white background.
   Card / callout / pullquote / testimonial backgrounds inside a
   sandstone section flip to white for contrast — see the parallel
   .mt-section--bg-alt .X rules further down in this file. */
.mt-section--bg-alt > .mt-row {
  background: var(--mt-bg-alt) !important;
}

.mt-row__inner {
  max-width: var(--mt-container);
  margin: 0 auto;
  width: 100%;
}

/* Tall row modifier — extra padding around tall sections (Overview).
   Removed the 990px min-height; with content now near 990px naturally,
   the min-height was adding too much bottom slack. Just explicit padding
   keeps spacing predictable. */
@media (min-width: 768px) {
  main#main.majors-template .mt-row.mt-row--tall {
    padding-top: 2.25rem !important;  /* 36px — tightened from 48px per Dan
                                         iteration on 2.3 (6/14/26): "tighten
                                         up a little more by 10-14px" the gap
                                         from hero CTAs into the first H2 */
    padding-bottom: 4rem !important;  /* 64px */
  }
}

/* Mobile equivalent of the desktop 2.3 tightening — bring Overview's top
   padding down from the default ~40px clamp to 28px so the mobile gap
   between hero CTAs and the first H2 also reads ~12px tighter. */
@media (max-width: 767px) {
  main#main.majors-template .mt-row.mt-row--tall {
    padding-top: 1.75rem !important;  /* 28px — was ~40px from --mt-row-py */
  }
}

/* Tight row modifier — for sections UX Pilot intentionally tightens.
   Testimonials uses pt-[calc(5rem-10px)] = 70px and the H2 has
   mb-[calc(4rem-36px)] = 28px instead of the typical 48px. */
@media (min-width: 768px) {
  main#main.majors-template .mt-row.mt-row--tight {
    padding-top: 4rem !important;     /* 64px */
    padding-bottom: 4.5rem !important;/* 72px */
  }
}

#main.majors-template .mt-row--tight .mt-row__title {
  margin-bottom: 1.75rem !important; /* 28px — UX Pilot mb-[calc(4rem-36px)] */
}

/* Flush modifiers — for sections that UX Pilot intentionally butts up
   against the next section (e.g. Alumni → Team NEO callout, where the
   callout is a visual continuation of the Alumni block). Tighter than
   default row padding but enough breathing room to feel intentional.
   Tightened from 2rem (32px) to 1rem (16px) per Dan / punch list 4.7.4
   desktop (6/14/26): with both sides flush, the gap between sections
   is now 16 + 16 = 32px, matching the 32px horizontal gap between
   Alumni cards in the row above. */
@media (min-width: 768px) {
  main#main.majors-template .mt-row.mt-row--flush-bottom {
    padding-bottom: 1rem !important;       /* 16px — was 32px */
  }
  main#main.majors-template .mt-row.mt-row--flush-top {
    padding-top: 1rem !important;          /* 16px — was 32px */
  }

  /* Team NEO callout — special case. The flush-top continues from Alumni
     (intentional visual pairing) but the flush-bottom transitions to a
     new content row (Spotlight Stories), which needs more trailing
     space than the global 16px. Bumps the bottom side back up to 48px
     just for the Team NEO inner row, without affecting any other
     flush-bottom usage. Per Matt's 6/14/26 note: "needs to be a bit
     more trailing space after that block now."
     Selector retargeted 6/25/26 (5.0.2 Step 1): Team NEO is now an
     inner .mt-row inside the Alumni Cascade atom (no longer carries
     its own aria-labelledby). Target the last inner row of Alumni
     that has flush-bottom — that's Team NEO on Eng/Hist/Music
     Performance (Biology's Team NEO omits flush-bottom, so the rule
     correctly does not match there). */
  main#main.majors-template .mt-section--alumni > .mt-row--flush-bottom:last-child {
    padding-bottom: 3rem !important;       /* 48px */
  }

  /* Spotlight Stories — desktop bottom override. Stories carries
     mt-row--flush-bottom historically, but it isn't actually paired
     with anything below it (the next section, Admission, has no
     flush-top). The global 16px flush-bottom leaves the Stories cards
     uncomfortably close to the bottom edge — Matt 6/26/26 review:
     "Stories needs a little more space on the bottom. It's very
     crowded and one of the only sections this crowded at the bottom."
     Restore the default --mt-row-py clamp (40–80px) just for Stories
     on desktop. Mobile keeps its existing 22px override (Dan 6/16/26). */
  main#main.majors-template .mt-section--stories > .mt-row.mt-row--flush-bottom {
    padding-bottom: var(--mt-row-py) !important;
  }
}

/* Mobile flush — extends the flush modifier to narrow viewports. Per
   Dan / punch list 4.7.4 (6/8/26): on mobile the gap between two
   flush-adjacent sections (e.g. Alumni's "Graduate Schools" card and
   the Team NEO "Biology Careers" callout) was reading as 80px (40px
   bottom + 40px top of the default --mt-row-py clamp). 12px + 12px
   = 24px matches the alumni card gap and the in-section card cadence
   Dan called out. */
@media (max-width: 767px) {
  main#main.majors-template .mt-row.mt-row--flush-bottom {
    padding-bottom: 0.75rem !important;    /* 12px */
  }
  main#main.majors-template .mt-row.mt-row--flush-top {
    padding-top: 0.75rem !important;       /* 12px */
  }

  /* Spotlight Stories — special case. The 12px mobile flush-bottom
     reads too tight against the following Admission section per Dan
     6/15/26 (punch list 4.8.2): "Increase spacing on mobile between
     the Admission and Spotlight Stories section." Restore Stories'
     bottom so the Stories→Admission transition has room to breathe.
     Per Dan 6/16/26 (punch list 1.2 iteration): "Decrease padding at
     the bottom of the Spotlight Stories section. Try deleting 10 px."
     32px → 22px. Other flush-bottom sections on mobile stay at 12px. */
  /* Selector retargeted 6/25/26 (5.0.2 Step 1): aria-labelledby now lives
     on the outer .mt-section wrapper; target the inner .mt-row inside. */
  main#main.majors-template .mt-section--stories > .mt-row.mt-row--flush-bottom {
    padding-bottom: 1.375rem !important;   /* 22px — was 32px (-10px) */
  }

  /* Faculty — mobile top bump. Per Dan 6/16/26 (punch list 1.2
     iteration): "Increase padding at the top of the Faculty section.
     Try adding 10 px." Faculty otherwise inherits the global mobile
     flush-top of 12px; this raises just Faculty's top to 22px without
     affecting the other flush-top section (Team NEO). */
  /* Selector retargeted 6/25/26 (5.0.2 Step 1): aria-labelledby now lives
     on the outer .mt-section wrapper; target the inner .mt-row inside. */
  main#main.majors-template .mt-section--faculty > .mt-row.mt-row--flush-top {
    padding-top: 1.375rem !important;      /* 22px — was 12px (+10px) */
  }

  /* Stories intro paragraph — when followed by the stories carousel
     on mobile, halve the gap from 48px to 24px per Dan 6/15/26
     (punch list 4.8.3): "On mobile, decrease spacing between intro
     text and spotlight story (cut current space in half)." */
  #main.majors-template .mt-row__intro:has(+ .mt-stories-carousel) {
    margin-bottom: 1.5rem !important;      /* 24px — was 48px (--mt-gap-lg) */
  }
}

#main.majors-template .mt-row__title {
  text-align: center;
  /* Was --mt-gap-lg (48px). Dropped to 2rem (~32px) per Dan / Copilot
     6/8/26 — section titles felt floaty against their content below. */
  margin: 0 0 2rem !important;
}

/* Overview section ("Why Study X at BW") H2 — left-aligned per the
   client's request (6/5/26). Applies at all viewport widths; other
   sections' H2s stay centered for now pending client confirmation
   on whether to standardize. See Open Items on the spec sheet. */
#main.majors-template .mt-row--tall .mt-row__title {
  text-align: left !important;
}

/* Intro paragraph — high specificity + !important so bw.edu's #main p
   rules can't override the max-width / centering / text-align. */
#main.majors-template .mt-row__intro {
  text-align: center !important;
  max-width: 32rem !important;          /* 512px — UX Pilot max-w-lg (default) */
  margin: 0 auto var(--mt-gap-lg) !important;
  width: auto !important;
}

/* Wider intro variant — UX Pilot uses max-w-3xl for Alumni and Related
   Majors intros (more text fits per line). */
#main.majors-template .mt-row__intro--wide {
  max-width: 48rem !important;          /* 768px — UX Pilot max-w-3xl */
}

/* When a row intro follows the H2, tighten the gap between them
   (UX Pilot wraps H2 + intro in a flex container with gap-4 = 16px). */
#main.majors-template .mt-row__title:has(+ .mt-row__intro) {
  margin-bottom: 1rem !important;   /* 16px — UX Pilot gap-4 */
}

/* HH QA 7.4 (7/23/26): when the intro (or title) is directly followed
   by an empty grid container — e.g. a Cascade author populated the
   heading + intro of an Alumni row but omitted all alumni cards, or
   the same pattern on any other card-based section — zero the intro's
   bottom margin so the empty grid doesn't leave a large blank space.
   [class*="__grid"] matches every BEM grid container in the template
   (.mt-alumni__grid, .mt-outcomes__grid, .mt-minors__grid,
   .mt-courses__grid, .mt-testimonials__grid, etc.). */
#main.majors-template .mt-row__intro:has(+ [class*="__grid"]:empty),
#main.majors-template .mt-row__title:has(+ [class*="__grid"]:empty) {
  margin-bottom: 0 !important;
}


/* ---------------------------------------------------------------------------
   Components — buttons / CTAs
   --------------------------------------------------------------------------- */
.mt-cta {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  font-family: var(--mt-font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  color: var(--mt-text-invert);
  background: var(--mt-link);
  border: 2px solid currentColor;
  border-color: var(--mt-text-invert);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.mt-cta:hover,
.mt-cta:focus {
  background: var(--mt-link-hover);
  color: var(--mt-text-invert);
  text-decoration: none;
}

.mt-cta:focus-visible {
  outline: 0;
  box-shadow: var(--mt-focus-ring);
}

.mt-cta--ghost {
  background: transparent;
  color: var(--mt-link);
  border-color: var(--mt-link);
}

.mt-cta--ghost:hover,
.mt-cta--ghost:focus {
  background: var(--mt-link);
  color: var(--mt-text-invert);
}

/* Solid CTA — filled orange button WITHOUT the white border (the base
   .mt-cta gets a white border for use over the hero image; in other
   contexts like the FAQ "Show More" button, we want a clean solid). */
#main.majors-template .mt-cta--solid {
  border-color: transparent !important;
  background: var(--mt-link) !important;
  color: var(--mt-text-invert) !important;
  font-size: 1.25rem !important;        /* 20px — UX Pilot text-xl */
  padding: 0.875rem 2rem !important;    /* UX Pilot px-8 py-3 */
}

#main.majors-template .mt-cta--solid:hover,
#main.majors-template .mt-cta--solid:focus {
  background: var(--mt-link-hover) !important;
  color: var(--mt-text-invert) !important;
}

/* Force any inline children (the <span> label, the chevron <i>) inside
   ANY .mt-cta variant to inherit the button's color. Without this, the
   generic #main.majors-template span rule above forces the span to brown
   and the label text disappears against the orange. */
#main.majors-template .mt-cta > *,
#main.majors-template .mt-cta span,
#main.majors-template .mt-cta i {
  color: inherit !important;
}

.mt-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mt-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* No arrow-translate on hover. Per Dan / punch list 5.6.1 (6/15/26):
   "Arrow is moving on bold underline, which is odd because text to
   the left doesn't move on bold underline." Arrow stays put now;
   any hover affordance comes from underline / color treatment that
   applies to the whole link, so the arrow and text move (or don't
   move) together. */


/* ---------------------------------------------------------------------------
   Components — cards & callouts
   --------------------------------------------------------------------------- */
.mt-card {
  background: var(--mt-bg-alt);       /* HH QA 7.3 (7/23/26): base is
                                         sandstone so the card contrasts
                                         with a default (white) section.
                                         The .mt-section--bg-alt .mt-card
                                         flip rule further down in this
                                         file inverts it to white when
                                         the parent section is sandstone
                                         (production Biology Pride Points
                                         renders white cards on sandstone
                                         exactly as before). Matches the
                                         .mt-minor / .mt-alumni-card /
                                         .mt-admit-card default-sandstone-
                                         flip-to-white pattern used across
                                         the template. */
  padding: 2rem;
}

.mt-card--alt {
  background: var(--mt-bg-alt);
}

.mt-card--top-accent {
  border-top: var(--mt-bar) solid var(--mt-accent);
}

.mt-card--left-accent {
  border-left: var(--mt-bar) solid var(--mt-accent);
}

.mt-callout {
  background: var(--mt-bg-alt);
  border-left: var(--mt-bar) solid var(--mt-accent);
  padding: 2rem;                  /* UX Pilot p-8 */
  margin-bottom: 2rem;            /* 32px — HH QA 7.1 (7/23/26): if a
                                     Cascade author drops a body-copy
                                     block below the callout (h3,
                                     paragraph, video, another
                                     callout), the box needs its own
                                     breathing room. Zeroed on
                                     .mt-callout--centered below since
                                     Team NEO's row manages its own
                                     bottom padding. */
}

/* Team NEO callout — row-managed spacing, no self-margin. */
#main.majors-template .mt-callout--centered {
  margin-bottom: 0 !important;
}

/* Lock the first/last child margins inside .mt-callout to zero so the
   visible top space exactly equals padding-top and the visible bottom
   space exactly equals padding-bottom. Without these, browser /
   bw.edu shell defaults add an h3 margin-top above and the body-copy
   ul rule adds 16px below the ul, making the bottom read taller than
   the top — Dan's 4.1.1 6/15/26 note: "Padding below checkmarks is
   still greater than above." */
#main.majors-template .mt-callout > h3 {
  margin-top: 0 !important;
}

#main.majors-template .mt-callout > ul,
#main.majors-template .mt-callout > ol {
  margin-bottom: 0 !important;
}

.mt-callout--centered {
  text-align: center;
  padding: 2rem 3rem;             /* UX Pilot px-12 py-8 */
}

/* Constrain the paragraph inside centered callouts to UX Pilot's
   max-w-3xl (48rem) so the copy reads at a comfortable line length
   regardless of how wide the callout itself becomes. */
#main.majors-template .mt-callout--centered > p {
  max-width: 48rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mt-pullquote {
  font-family: var(--mt-font-display);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--mt-text);
  background: var(--mt-bg-alt);
  border-left: var(--mt-bar) solid var(--mt-accent);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
}

/* High specificity + !important so the body-copy
   `.majors-template ul { padding-left: 1.5rem }` rule above doesn't
   sneak a 24px indent onto the checklist — that was the cause of
   the indent Dan flagged in 4.1.1: "left-align the checkmarks with
   the H3." (6/15/26 iteration.) */
#main.majors-template .mt-check-list {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

.mt-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;            /* 12px — UX Pilot gap-3 */
  margin-bottom: 1rem;     /* 16px — UX Pilot space-y-4 */
}

.mt-check-list li:last-child {
  margin-bottom: 0;
}

.mt-check-list li i {
  flex-shrink: 0;
  color: var(--mt-accent);
  font-size: 1.25rem;      /* 20px — UX Pilot text-xl */
  /* No explicit line-height or margin-top: the icon inherits the
     parent's line-height so it always matches the adjacent text
     glyph at flex-start. Per Dan 6/15/26 4.1.1 follow-up: "copy
     next to the checkmark has bumped up and appears out of
     alignment with the checkmark" — caused by the mobile rule
     setting li/span line-height to 1.4 while the icon still
     carried the 1.6 desktop default. */
}


/* ---------------------------------------------------------------------------
   Row 1 — Hero
   ---------------------------------------------------------------------------
   Structure (matching UX Pilot reference):
   - Hero is 400 / 500 / 550px tall (small / medium / large).
   - Image occupies the right 75% only; left 25% is intentionally blank
     (the hero's #000 background shows through) — gives the text a clean
     dark area regardless of the photo's content.
   - Image object-position: center top anchors the top of the photo to
     the top of the hero so faces remain visible.
   - Gradient overlay on top of the whole thing is solid black for the
     first 25%, then fades through 30% to fully transparent.
   --------------------------------------------------------------------------- */
.mt-hero {
  position: relative;
  min-height: 25rem;                /* 400px mobile */
  padding: 0;
  display: flex;
  flex-direction: column;           /* stack content (title) above ctas */
  justify-content: center;          /* vertically center the title+ctas group */
  overflow: hidden;
  background: #000;
}

@media (min-width: 640px) {
  .mt-hero { min-height: 31.25rem; } /* 500px tablet */
}

@media (min-width: 1024px) {
  .mt-hero { min-height: 34.375rem; } /* 550px desktop */
}

.mt-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 25%;
  z-index: 0;
}

.mt-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.mt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgb(0, 0, 0) 0%,
    rgb(0, 0, 0) 25%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Hero content + CTAs both carry the `row` class in the HTML so Foundation's
   .row max-width / centering takes over — this aligns the hero with the bw.edu
   header's content edge (BW logo column). We drop our own max-width / margin
   here so .row wins; horizontal padding matches Foundation's .columns padding
   (0.9375rem / 15px) so the title aligns with the BW logo's left edge. */
.mt-hero__content {
  position: relative;
  z-index: 2;
  padding: 3.5rem 0.9375rem;
}

/* Neutralize Foundation's clearfix pseudo-elements on the hero's .row
   wrappers — they're meant for floated layouts (not our flex/block content)
   and otherwise eat ~one line-height of vertical space each, pushing the
   title and CTAs apart. */
.mt-hero__content.row::before,
.mt-hero__content.row::after,
.mt-hero__ctas.row::before,
.mt-hero__ctas.row::after {
  content: none !important;
  display: none !important;
}

.mt-hero__inner {
  max-width: 34rem;
}

.mt-hero__title {
  color: var(--mt-text-invert);
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.mt-hero__lead {
  color: var(--mt-text-invert);
  font-size: 1.125rem;
  line-height: var(--mt-lh-snug);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  margin: 0 0 1.5rem;
}

/* CTAs are now a direct sibling of .mt-hero__content (not nested inside
   .mt-hero__inner) so they get the same horizontal placement as the title.
   The HTML carries a `row` class so Foundation's .row max-width / centering
   takes over and aligns the wrapper with the bw.edu header's content edge.
   We drop our own max-width / margin and keep the padding for narrow-viewport
   gutters. position+z-index match .mt-hero__content so the CTAs stack above
   the absolutely-positioned .mt-hero__media (z-index: 0) and its scrim. */
.mt-hero__ctas {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;                          /* 16px — UX Pilot gap-4 */
  padding: 0 0.9375rem;               /* match Foundation .columns 15px padding so CTAs left-align with the BW logo */
  align-items: flex-start;            /* left-align the button column */
}

/* Hero CTAs are full-width within their 320px constraint, larger padding,
   bigger text, and a subtle shadow — matches UX Pilot exactly. */
.mt-hero__ctas .mt-cta {
  width: 100%;
  max-width: 20rem;                   /* 320px — UX Pilot max-w-xs */
  padding: 0.875rem 2rem;             /* 14px 32px — UX Pilot px-8 py-3 */
  font-size: 1.25rem;                 /* 20px — UX Pilot text-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25),
              0 4px 6px -4px rgba(0, 0, 0, 0.2);
}

/* Desktop hero — anchor CTAs to the bottom of the hero so the title can
   grow or wrap without pushing them around. The title remains vertically
   centered (it becomes the only flex child once the CTAs leave the flow).
   Mobile (<768px) has its own layout where the CTAs sit below the image
   on a white row; that's unaffected. */
@media (min-width: 768px) {
  /* Reserve bottom padding for the absolute CTAs. The flex content area
     shrinks from the bottom, which shifts the title's vertical-center
     point upward into the visually-balanced "upper-center" position
     (matches where the title used to sit when it was grouped with the
     CTAs in the flex flow). */
  .mt-hero {
    padding-bottom: 9rem;
  }

  .mt-hero__ctas {
    position: absolute;
    left: 50%;
    bottom: 3.5rem;                   /* sits inside the reserved padding zone */
    transform: translateX(-50%);
    width: 100%;
    /* Keep the same Foundation .row constraints so horizontal alignment
       with the BW logo and the title remains intact. */
  }
}


/* Narrow-desktop padding bump.
   At desktop widths the .row is centered inside its 1000px max-width. At
   viewports >=~1080px the natural side gutter is generous enough that the
   title sits comfortably away from the screen edge with only 15px padding.
   But below that — down to where mobile rules take over at 768px — the
   gutter shrinks or disappears entirely, and our 15px padding leaves the
   title kissing the screen edge. Bump it to 40px in that range so the
   hero content reads with comfortable breathing room.

   Placed AFTER the .mt-hero__content and .mt-hero__ctas base rules so its
   longhand padding-left/padding-right wins against their shorthand padding
   inside this media-query range. !important added defensively so any later
   shorthand rule in cascade-order can't undo the bump. */
@media (min-width: 768px) and (max-width: 1199px) {
  .mt-hero__content,
  .mt-hero__ctas {
    padding-left: 2.5rem !important;   /* 40px */
    padding-right: 2.5rem !important;
  }
}


/* ---------------------------------------------------------------------------
   Hero — mobile (< 768px)
   --------------------------------------------------------------------------- *
   The desktop hero is an image-overlay layout with title + CTAs sitting on a
   dark left strip. On mobile that doesn't fit. Instead:
     - The image becomes the full-width top of the hero with its own bounded
       height.
     - The title overlays the lower-left corner of the image (white text,
       soft bottom gradient for legibility — no full-frame scrim).
     - The CTAs flow below the image as a row of 3 equal-width solid buttons
       on a white background.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mt-hero {
    display: block;
    min-height: 0;
    background: #fff;
  }

  /* Image becomes a bounded element that takes natural flow.
     12rem (~192px) matches the design's tighter crop — shorter than the
     desktop hero, and the title overlay still has room to breathe. */
  .mt-hero__media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 12rem;
  }

  /* Replace the full-width left-to-right scrim with a soft bottom-only
     gradient just under the title for legibility. */
  .mt-hero::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.25) 40%,
      rgba(0, 0, 0, 0) 70%
    );
    /* Constrain the gradient to only sit over the image, not the CTAs row */
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 12rem;             /* matches .mt-hero__media height */
  }

  /* Title overlay: position absolute at bottom-left within the hero block,
     within the image area (matches .mt-hero__media height). */
  .mt-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: auto;
    top: 0;
    height: 12rem;             /* matches .mt-hero__media */
    padding: 0 1rem 0.75rem;   /* anchor to bottom-left with side breathing room */
    display: flex;
    align-items: flex-end;     /* push inner to the bottom of the image area */
    margin: 0;
  }

  .mt-hero__inner {
    max-width: none;
    width: 100%;
  }

  /* Override the desktop rule's 40px bottom margin so the title actually
     sits flush to the bottom of the image area, with only the container
     padding-bottom below it. Size dialed back so the title doesn't dominate
     the now-shorter image. */
  #main.majors-template .mt-hero__title {
    margin: 0 !important;
    font-size: 2rem !important;       /* ~32px — proportional to the shorter image */
    line-height: 1.1 !important;
  }

  /* CTAs row: flows below the image, on white. Three equal-width solid
     buttons in a tight row with a small gap. Drop the desktop white outline
     so the buttons read as solid blocks (matches the mobile design). */
  .mt-hero__ctas {
    position: relative;
    flex-direction: row;
    gap: 0.5rem;
    max-width: none;
    width: auto;
    margin: 0;                      /* override desktop's margin: 0 auto */
    padding: 1rem;
    background: #fff;
    align-items: stretch;           /* override desktop's flex-start so the 3 buttons match height */
  }

  .mt-hero__ctas .mt-cta {
    flex: 1 1 0;               /* equal-width distribution */
    width: auto;
    padding: 1.25rem 0.5rem;   /* generous vertical padding for tall, comfortable hit targets */
    font-size: 1rem;           /* ~16px — design uses a slightly smaller, balanced button label */
    line-height: 1.2;
    box-shadow: none !important;
    text-align: center;

    /* Center the label vertically. The row stretches all buttons to match
       the tallest (2-line) sibling, so single-line buttons need this so the
       label doesn't sit top-aligned in a tall button. */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Solid-button override: remove the white outline used over the desktop
     hero image and let the BW orange fill speak for itself on mobile. */
  #main.majors-template .mt-hero__ctas .mt-cta {
    border: 0 !important;
  }

  /* Breadcrumbs — hidden entirely on mobile per Matt's call (6/5/26).
     The desktop site shell already provides a back-navigation pattern via
     the hamburger menu and the four-level breadcrumb trail eats too much
     vertical real estate on a narrow viewport. */
  #main.majors-template .mt-breadcrumbs {
    display: none !important;
  }

  /* -------------------------------------------------------------------------
     Mobile typography — reduce section headings, lead text, and topic
     subheadings to match the design's tighter mobile scale. Alignment of
     section H2 stays centered on mobile per Matt's call (5/30/26); the
     design itself was inconsistent on H2 alignment so it's flagged in the
     spec doc's parking lot for the next client meeting.
     ------------------------------------------------------------------------- */

  /* Section H2 — down from clamp(40px, 3vw, 44px) to ~32px on mobile.
     Tighter margin-bottom too (was 48px / --mt-gap-lg) so the H2 sits
     closer to whatever follows (Lead Text, intro paragraph, grid). */
  #main.majors-template .mt-row__title {
    font-size: 2rem !important;             /* ~32px */
    line-height: 1.15 !important;
    margin: 0 0 1rem !important;            /* 16px below — was 48px */
  }

  /* Body paragraphs and list items — down from 18px to ~16px on mobile.
     Matches the design's tighter mobile reading scale (typical mobile
     body sizes are 15-16px). */
  #main.majors-template p,
  #main.majors-template li {
    font-size: 1rem !important;             /* ~16px */
  }

  /* Lead Text (.mt-pullquote) — keep PT Serif font (design uses sans-serif
     here, but per Matt we hold on the font change). Reduce size from 24px
     to ~19px to match the design's mobile scale. */
  #main.majors-template .mt-pullquote {
    font-size: 1.1875rem !important;        /* ~19px */
    line-height: 1.45 !important;
    padding: 0.875rem 1rem 0.875rem 1.25rem !important;
  }

  /* Topic Block headings (H3 inside copy blocks) — down a notch from 28px
     to ~24px on mobile so they read as supporting subheads rather than
     competing with the section H2. Also covers callout headings (e.g.
     "BW Biology Leads You To:") since their h3 lives in .mt-callout
     rather than .mt-overview__copy. */
  #main.majors-template .mt-overview__grid h3,
  #main.majors-template .mt-experiences__copy h3,
  #main.majors-template .mt-callout h3,
  #main.majors-template .mt-topic__title,
  #main.majors-template .mt-row__inner > h3 {
    font-size: 1.5rem !important;           /* ~24px */
    line-height: 1.2 !important;
  }

  /* Checklist items — tighten the vertical spacing between items on mobile.
     Design has the items packed close together; the desktop 16px between
     each item reads too generous on a narrow viewport. */
  .mt-check-list li {
    margin-bottom: 0.5rem;                  /* 8px — was 16px */
  }

  #main.majors-template .mt-check-list li,
  #main.majors-template .mt-check-list li span {
    line-height: 1.4 !important;            /* tighter than the desktop 1.6 */
  }

  /* Highlights callout box — tighten top/bottom padding on mobile per
     Dan / punch list 4.1.1 (6/8/26). "Space below is especially too
     much" on the "BW Biology Leads You To:" box. Side padding kept a
     touch more generous so the copy isn't crowded against the gold
     accent bar on the left. */
  #main.majors-template .mt-callout {
    margin-bottom: 1.25rem;                 /* 20px mobile — HH QA 7.1
                                               (7/23/26). Scaled down from
                                               the 32px desktop to match
                                               tighter mobile rhythm. */
    padding: 1rem 1.5rem;                   /* 16px top/bottom, 24px sides.
                                               Equalized per Dan / punch list
                                               4.1.1 6/15/26 iteration: top
                                               and bottom should match.
                                               Combined with the
                                               h3 / ul margin resets above,
                                               visible top space = 16px and
                                               visible bottom space = 16px. */
  }
}


/* ---------------------------------------------------------------------------
   Row 2 — Breadcrumbs
   --------------------------------------------------------------------------- */
.mt-breadcrumbs {
  padding: 1rem var(--mt-row-px);
  background: var(--mt-bg);
  font-size: var(--mt-fs-small);
}

.mt-breadcrumbs__inner {
  max-width: var(--mt-container);
  margin: 0 auto;
}

.mt-breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.mt-breadcrumbs li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mt-breadcrumbs li + li::before {
  content: "›";
  color: var(--mt-text-muted);
  font-weight: 700;
  margin-right: 0.25rem;
}

.mt-breadcrumbs a {
  color: var(--mt-link);
}

.mt-breadcrumbs [aria-current="page"] {
  color: var(--mt-text);
  font-weight: 700;
}


/* ---------------------------------------------------------------------------
   Row 3 — Overview
   --------------------------------------------------------------------------- */
.mt-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap-lg);
  margin-top: var(--mt-gap);
}

/* Mobile — Overview section. Per Dan 6/23/26: "vertical padding between
   content from the left column and right column should be minimized.
   Now the padding consistent with padding between sections." On mobile
   the two-column overview stacks; the 48px grid gap plus the last
   paragraph's 16px bottom margin = ~64px of vertical space between
   copy and photo, which reads as a section break. Mirror what
   Experiences does (mobile 4.6.1 pattern): drop the grid gap to 24px
   and zero the last paragraph's bottom margin. Total gap on mobile
   becomes 24px — clearly part of the same section. */
@media (max-width: 767px) {
  #main.majors-template .mt-overview__grid {
    gap: 1.5rem;                          /* 24px — was 48px (--mt-gap-lg) */
  }
  #main.majors-template .mt-overview__copy p:last-child {
    margin-bottom: 0 !important;
  }
}

/* Wrapper for the overview image. Now a <figure> with two classes:
   .mt-overview__media (section-specific) + .mt-image (reusable Image
   component). Height moved from the wrapper to the <img> itself so the
   figure can also contain a <figcaption> below the image without it being
   clipped by overflow. */
#main.majors-template .mt-overview__media {
  margin: 0 0 1.5rem;
  padding: 0;
}

#main.majors-template .mt-overview__media img {
  /* Native-ratio photo treatment — Per Matt 6/16/26 (punch list 5.3.2,
     extending the 3.1 principle from Faculty to the Overview body photo).
     Photo height follows the source aspect ratio. Was h-80 fixed (320px)
     + object-fit:cover crop; now width:100% + height:auto so the Overview
     image renders at its native proportions and scales with column width.
     If a content author uploads a portrait-oriented image, the Overview
     row becomes taller; landscape stays shorter. Author owns framing. */
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Reusable Image component — figure wrapper that holds an <img> +
   optional <figcaption>. Per the native-ratio rule (3.1), the image
   fills its container width and lets height come from the source
   aspect ratio — no crop, no fixed slot. Used today on the Overview
   photo (Biology / variants) and the Engineering Experiences right
   column (5.8.1 single-photo + caption variant); Hannon Hill /
   Cascade authors can drop this same pattern anywhere a single
   captioned image is the right tool. */
#main.majors-template .mt-image img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Reusable Image component caption — small text, muted gray, sitting tight
   below the image with a thin top spacing. Applies anywhere .mt-image is
   used (Overview today, Slider once captions are confirmed).
   Per Dan / punch list 1.4 (6/16/26 — Approved): "Let's try the caption as
   Small text (16px / 1.5 Roboto)." Was 14px italic; now 16px Roboto 400,
   line-height 1.5, no italic — matches the "Small" supporting-copy
   treatment used elsewhere on the page. */
#main.majors-template .mt-image__caption {
  font-family: var(--mt-font-body) !important;
  font-size: 1rem !important;                 /* 16px — was 14px (--mt-fs-mini) */
  font-style: normal !important;              /* dropped italic per 1.4 */
  font-weight: 400 !important;
  line-height: 1.5 !important;                /* was 1.4 */
  color: var(--mt-text-muted) !important;
  margin: 0.5rem 0 0 !important;              /* 8px gap above caption */
  padding: 0 !important;
  text-align: left !important;
}

/* Caption hyperlinks — Per Dan / punch list 3.2 (6/16/26): captions
   need their own link treatment so the link doesn't dominate the
   caption visually. Inherits the caption's font-size (16px) and
   weight (400); takes the body-link Burnt Orange so it reads as a
   link against the muted-brown caption color. Underline is 1px at
   rest (matching body links), thickens to 2px on hover. Offset is
   2px so the underline sits tight against descenders without
   colliding with line-height 1.5. */
#main.majors-template .mt-image__caption a,
#main.majors-template .mt-image__caption a:link,
#main.majors-template .mt-image__caption a:visited {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: var(--mt-link) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#main.majors-template .mt-image__caption a:hover,
#main.majors-template .mt-image__caption a:focus {
  color: var(--mt-link-hover) !important;
  text-decoration-thickness: 2px;
}

#main.majors-template .mt-image__caption a:focus-visible {
  outline: 0;
  box-shadow: var(--mt-focus-ring);
}

/* Video Embed component — responsive 16:9 iframe wrapper that drops into
   the same media slot as .mt-image. Uses aspect-ratio for clean scaling
   so the embed sizes to whatever column width it lands in.
   Visual treatment is starter-grade — pending Hannon Hill's final build. */
.mt-video {
  margin: 0 0 1.5rem;
  padding: 0;
}

.mt-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;     /* black backdrop while the iframe loads */
}

#main.majors-template .mt-video__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* When .mt-video sits inside .mt-overview__media (Overview's media slot),
   it inherits the same bottom margin pattern as the image variant. The
   aspect-ratio container handles its own height so we don't need to
   force the 20rem image height here. */
#main.majors-template .mt-overview__media.mt-video {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (min-width: 900px) {
  .mt-overview__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* HH QA 7.2 (7/23/26): if a Cascade author leaves one Overview column
     with no content, collapse the grid to a single column so the
     populated column takes full width instead of stranding half the row.
     :empty matches an element with no children (no elements, text, or
     whitespace). As soon as the author drops anything into the empty
     column, the two-column layout returns automatically. */
  #main.majors-template .mt-overview__grid:has(> .mt-overview__copy:empty),
  #main.majors-template .mt-overview__grid:has(> .mt-overview__side:empty) {
    grid-template-columns: 1fr;
  }
}

#main.majors-template .mt-overview__more {
  text-align: center;
  margin: 3rem 0 0 !important;     /* 48px — UX Pilot mt-12 */
}

#main.majors-template .mt-overview__more a,
#main.majors-template .mt-overview__more a:link,
#main.majors-template .mt-overview__more a:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: var(--mt-fs-body);
  color: var(--mt-link) !important;       /* Burnt Orange #BF4200 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#main.majors-template .mt-overview__more a:hover,
#main.majors-template .mt-overview__more a:focus {
  color: var(--mt-link-hover) !important; /* Deep Burnt Orange #A13F00 */
  text-decoration-thickness: 2px;
}

/* Force the chevron icons to the same brick-red color so they don't
   render in bw.edu's default link color or an inherited brown. */
#main.majors-template .mt-overview__more a i {
  color: var(--mt-link) !important;
}

#main.majors-template .mt-overview__more a:hover i,
#main.majors-template .mt-overview__more a:focus i {
  color: var(--mt-link-hover) !important;
}


/* ---------------------------------------------------------------------------
   Row 4 — Outcomes
   --------------------------------------------------------------------------- */
.mt-outcomes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap);             /* 24px mobile */
}

@media (min-width: 640px) {
  .mt-outcomes__grid {
    gap: 2rem;                    /* 32px tablet — UX Pilot gap-8 */
  }
}

@media (min-width: 900px) {
  .mt-outcomes__grid {
    gap: 3rem;                    /* 48px desktop — UX Pilot lg:gap-12 */
  }
}

.mt-outcome {
  text-align: center;
}

/* Optional icon slot at the top of each Brag Card. Per Dan / punch list
   5.4.1 + Matt 6/16/26 clarification: "icon only, above the H tag in
   the block. New optional element above the brag stat." Pattern mirrors
   Alumni / Admission card icons — gold accent color, centered, sized
   slightly smaller than Alumni's 48px so it doesn't crowd the eyebrow
   beneath. Author-opt-in per card: omit the wrapper if no icon needed. */
.mt-outcome__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;                  /* 16px gap above eyebrow */
}

#main.majors-template .mt-outcome__icon i {
  color: var(--mt-accent) !important;   /* Gold; Conservatory variant inherits fuchsia */
  font-size: 2.5rem !important;         /* 40px */
  line-height: 1 !important;
}

/* Eyebrow + title sizes are inverted in UX Pilot: eyebrow (~29px) is
   bigger than the title (~22px). High specificity + !important needed
   because our own #main.majors-template p / h3 rules would otherwise
   force body type / default h3 size onto these elements. */
#main.majors-template .mt-outcome__eyebrow {
  font-family: var(--mt-font-heading) !important;
  font-size: 1.8125rem !important;       /* 29px — UX Pilot text-[29px] */
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--mt-accent) !important;
  margin: 0 0 0.5rem !important;
}

#main.majors-template .mt-outcome__title {
  font-family: var(--mt-font-heading) !important;
  font-size: 1.375rem !important;        /* 22px — UX Pilot text-[22px] */
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--mt-heading) !important;
  margin: 0 0 1rem !important;
}

@media (min-width: 640px) {
  .mt-outcomes__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile — tighten Pride Point card vertical padding. Per Dan / punch
   list 4.2.2 (6/8/26): "Reduce the space in the box above and below
   the copy." 32px → 20px top/bottom, side padding unchanged. */
@media (max-width: 767px) {
  #main.majors-template .mt-outcome {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}


/* ---------------------------------------------------------------------------
   Row 5 — Testimonials
   --------------------------------------------------------------------------- */
.mt-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;                       /* 48px — UX Pilot gap-12 (desktop) */
}

/* Mobile — tighten the vertical gap between stacked testimonials per
   Dan / punch list 4.3.3 (6/14/26): "we need to reduce the space
   between Testimonials if there is more than one." 48px reads too
   airy when cards stack vertically on a phone. */
@media (max-width: 767px) {
  #main.majors-template .mt-testimonials__grid {
    gap: 1.5rem !important;        /* 24px — half the desktop gap */
  }
}

.mt-testimonial {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--mt-bg-alt);
  border-left: var(--mt-bar) solid var(--mt-accent);
  padding: 2.5rem;                 /* 40px — UX Pilot p-10 */
}

.mt-testimonial__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mt-testimonial__photo {
  flex: 0 0 8rem;
  width: 8rem;                     /* 128px — UX Pilot w-32 */
  height: 8rem;                    /* 128px — UX Pilot h-32 */
  border-radius: 50%;
  overflow: hidden;
}

.mt-testimonial__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content takes remaining width — without this the inner div shrinks
   to its content and breaks the layout. UX Pilot uses flex-1 here. */
.mt-testimonial__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Content wrapper — force block flow so its children stack vertically
   regardless of any inherited flex/grid/float rules from bw.edu. */
#main.majors-template .mt-testimonial__content {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
}

#main.majors-template .mt-testimonial__content > * {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
}

/* Italics on testimonial quotes are author-driven, not CSS-driven, per
   Dan / punch list 5.5.2 (6/14/26): "let's make sure we can be flexible
   and eliminate italics if desired." Content authors wrap the quote
   body in <em> (or use the Cascade italic toggle) when they want
   italic emphasis; otherwise the quote renders roman. This gives
   authors per-testimonial control and supports partial italicization
   without a special class. */
#main.majors-template .mt-testimonial__quote {
  font-size: var(--mt-fs-body) !important;
  line-height: var(--mt-lh-relaxed) !important;
  color: var(--mt-text) !important;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#main.majors-template .mt-testimonial__cite {
  margin: 0 !important;
  padding: 0 !important;
}

#main.majors-template .mt-testimonial__name {
  font-weight: 500 !important;
  font-size: var(--mt-fs-body) !important;
  color: var(--mt-heading) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

#main.majors-template .mt-testimonial__role {
  color: var(--mt-text-muted) !important;
  font-size: var(--mt-fs-small) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

@media (min-width: 640px) {
  .mt-testimonial__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;                   /* 24px — UX Pilot gap-6 */
  }
}

@media (min-width: 900px) {
  .mt-testimonials__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* 3-testimonial layout: 2 cards on top, 3rd card centered on its own row.
     The --centered modifier on the 3rd card makes it span both grid columns
     and constrains its width to match a single card, centered. */
  .mt-testimonial--centered {
    grid-column: 1 / -1;
    max-width: calc(50% - 1.5rem);   /* match single-card width given gap-12 (3rem) */
    justify-self: center;
  }
}

/* Mobile — testimonials section tighter. Per Dan / punch list 4.3 (6/8/26):
   reduce gap below the H2 (16px → 12px on .mt-row--tight) and reduce
   testimonial card top/bottom padding (40px → 24px). Side padding stays
   so the portrait + quote layout doesn't crowd. */
@media (max-width: 767px) {
  #main.majors-template .mt-row--tight .mt-row__title {
    margin-bottom: 0.75rem !important;     /* 12px */
  }

  #main.majors-template .mt-testimonial {
    padding-top: 1.5rem !important;        /* 24px */
    padding-bottom: 1.5rem !important;     /* 24px */
  }
}


/* ---------------------------------------------------------------------------
   Row 6 — Curriculum
   --------------------------------------------------------------------------- */
.mt-curriculum__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap-lg);
}

.mt-curriculum__intro h2 { text-align: left; }

.mt-courses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap);
}

.mt-course {
  background: var(--mt-bg-alt);       /* HH QA 7.5 (7/23/26): base is
                                         sandstone so course cards
                                         contrast with a default (white)
                                         section. The
                                         .mt-section--bg-alt .mt-course
                                         flip rule further down in this
                                         file inverts it to white when
                                         the parent section is sandstone,
                                         so production Curriculum renders
                                         white cards on sandstone exactly
                                         as before. Same
                                         default-sandstone-flip-to-white
                                         pattern as .mt-card / .mt-minor
                                         / .mt-alumni-card / etc. */
  padding: 1.25rem 1.5rem;
  /* 2px transparent border-left kept so the card's content alignment
     doesn't shift if a hover treatment is ever added back. */
  border-left: 2px solid transparent;
}

.mt-section--bg-alt .mt-course { background: var(--mt-bg) !important; }

/* No hover gold bar — defensively locked to transparent per Matt's
   6/15/26 review (new 4.4.5). Same direction as 4.5.5 (Minors) and
   4.12.4 (Related Majors): card hovers stay clean; the underline-
   thickens-on-hover behavior on the course title link is the only
   intended interactive cue. */
#main.majors-template .mt-course:hover,
#main.majors-template .mt-course:focus,
#main.majors-template .mt-course:focus-within {
  border-left-color: transparent !important;
}

.mt-course h4 {
  margin: 0 0 0.5rem;
  font-family: var(--mt-font-body);
  color: var(--mt-link);
}

.mt-course h4 a { color: inherit; }

/* Course name weight — defaults to 400 (normal). Per Dan / punch list
   4.4.4 (6/15/26): "Name of minor [course] should not be in bold.
   Underline changes to bold on hover and that's correct." The previous
   font-weight: 500 lost on specificity to bw.edu's #main h4 bold
   default, so the course name was rendering full-bold. High-specificity
   override with !important ensures it stays normal weight regardless.
   The italicized course code (.mt-course__code) inherits weight from
   the parent <a>/<h4>, so it stays in sync. Hover state (underline
   thickens to 2px) is untouched per Dan's note. */
#main.majors-template .mt-course h4,
#main.majors-template .mt-course h4 a {
  font-weight: 400 !important;
  /* 18px — Per Dan 5.0.4 small-block typography standard, applied via
     Matt 6/16/26 Tier-3 rollout (punch list 5.6.2). Was 20px from the
     global --mt-fs-h4. Scoped to .mt-course so other h4 usage is
     untouched. */
  font-size: 1.125rem !important;
}

.mt-course__code {
  font-style: italic;
  /* No font-size or color — inherits from parent <a> / <h4> so the code
     reads at the same size and burnt-orange color as the course name,
     matching UX Pilot's <i>BIO 110</i> pattern exactly. */
}

/* Course blurb — 16px Roboto 400 (matches .mt-minor__blurb). Per Dan's
   6/17/26 canonical typography spec: "Add a style for the course blurb.
   The blurb is currently using the text body <p> tag at 18px. The size
   for the course blurb should be 16px. See mt-minor__blurb as example."
   Targeting any <p> inside .mt-course (the only <p> in a course article
   is the blurb — no HTML class changes needed). */
#main.majors-template .mt-course p {
  font-family: var(--mt-font-body) !important;
  font-size: 1rem !important;              /* 16px — was 18px from global p rule */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--mt-text) !important;
}

@media (min-width: 640px) {
  .mt-courses__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .mt-curriculum__grid {
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 4rem;                 /* 64px — UX Pilot lg:gap-16 */
  }
}

/* Mobile — tighten Popular Courses section. Per Dan / punch list 4.4
   (6/8/26): less gap above the H3, less padding inside each card, less
   gap between cards. */
@media (max-width: 767px) {
  #main.majors-template .mt-curriculum__grid {
    gap: 1.5rem;                          /* 24px — was 48px (--mt-gap-lg) */
  }

  #main.majors-template .mt-courses__grid {
    gap: 0.75rem;                         /* 12px — was 24px (--mt-gap) */
  }

  #main.majors-template .mt-course {
    padding-top: 0.875rem !important;     /* 14px — was 20px */
    padding-bottom: 0.875rem !important;
  }
}


/* ---------------------------------------------------------------------------
   Row 7 — Complementary Minors
   --------------------------------------------------------------------------- */
.mt-minors__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap);
}

.mt-minor {
  background: var(--mt-bg-alt);
  padding: 2rem;
  border: 2px solid transparent;     /* UX Pilot border-2 border-transparent */
}

.mt-section--bg-alt .mt-minor { background: var(--mt-bg) !important; }

/* Explicit no-hover-treatment per Dan / punch list 4.5.5 (6/15/26):
   "Remove gold bar on left on hover state." Minor cards keep a
   transparent border on hover/focus so no shell CSS or other rule can
   sneak in an accent stripe. Distinct from course cards (which
   intentionally light up a gold left border on hover) and related-major
   cards (which light up a full gold outline). */
#main.majors-template .mt-minor:hover,
#main.majors-template .mt-minor:focus,
#main.majors-template .mt-minor:focus-within {
  border-color: transparent !important;
}

/* High specificity + !important so the generic #main.majors-template p
   rule (forces 18px / weight 500) doesn't override these. */
#main.majors-template .mt-minor__name {
  font-family: var(--mt-font-body) !important;
  /* 18px — second sample of Dan's 5.0.4 small-block typography
     standard ("Roboto, normal weight, 18" for headlines). Applied
     to Minors per Matt 6/16/26 punch list 5.7.1, extending the
     Related Majors preview (5.14.1). Was 20px (UX Pilot text-[20px]).
     Line-height stays at 1.4 — already reads well at the smaller
     size since the original was tight at 20px. */
  font-size: 1.125rem !important;      /* 18px — was 20px */
  font-weight: 400 !important;         /* UX Pilot font-normal */
  line-height: 1.4 !important;
  color: var(--mt-link);
  margin: 0 0 0.5rem !important;
}

#main.majors-template .mt-minor__name a {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: var(--mt-link) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#main.majors-template .mt-minor__name a:hover {
  text-decoration-thickness: 2px;
}

#main.majors-template .mt-minor__blurb {
  font-family: var(--mt-font-body) !important;
  font-size: 1rem !important;          /* 16px — UX Pilot text-[16px] */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--mt-text) !important;
  margin: 0 !important;
}

@media (min-width: 640px) { .mt-minors__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mt-minors__grid { grid-template-columns: repeat(4, 1fr); } }

/* Mobile — tighten Complementary Minors section. Per Dan / punch list 4.5
   (6/8/26): less gap between intro and the grid, less padding inside each
   minor card, less gap between cards.
   - Intro→grid uses :has() so we only tighten the row__intro that's
     directly followed by a minors grid (no spillover into other sections). */
@media (max-width: 767px) {
  #main.majors-template .mt-row__intro:has(+ .mt-minors__grid) {
    margin-bottom: 1.5rem !important;     /* 24px — was 48px (--mt-gap-lg) */
  }

  #main.majors-template .mt-minors__grid {
    gap: 0.75rem;                         /* 12px — was 24px (--mt-gap) */
  }

  #main.majors-template .mt-minor {
    padding-top: 0.875rem !important;     /* 14px — matches mobile course card
                                              padding per Dan / punch list
                                              4.5.4 (6/15/26): "Emulate /
                                              match spacing in cards for
                                              courses." */
    padding-bottom: 0.875rem !important;
  }
}

/* Mobile — Beyond the Classroom (Experiences) section. Per Dan / punch
   list 4.6.1 (6/8/26): slightly reduce space above the stacked photo
   on mobile. On single-column mobile layout, the photo sits below the
   copy column; the 48px grid gap reads too generous. */
@media (max-width: 767px) {
  #main.majors-template .mt-experiences__grid {
    gap: 1.5rem;                          /* 24px — was 48px (--mt-gap-lg) */
  }
}


/* ---------------------------------------------------------------------------
   Row 8 — Experiences (with slider)
   --------------------------------------------------------------------------- */
.mt-experiences__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap-lg);
}

/* Vertical rhythm inside the Experiences left column, matching UX Pilot:
   H2 mb-8 (32px), then space-y-6 (24px) between children, with each H3
   getting mb-4 (16px) and the SECOND H3 getting mt-8 (32px). */
#main.majors-template .mt-experiences__copy h2 {
  font-size: 2.75rem !important;      /* 44px — UX Pilot lg:text-[44px] */
  line-height: 1.15 !important;
  margin-bottom: 2rem !important;     /* 32px — UX Pilot mb-8 */
}

/* Topic-Block H3 rhythm — shared by Overview and Experiences so the
   two body-copy sections read with the same vertical cadence. Per
   Dan 6/23/26: "Copy spacing (h tags and paragraphs) is different
   when comparing the overview section with the experience section.
   Can these be made consistent?" Overview was at 12px via adjacency
   (1.8 rule), Experiences was at 32px — bringing Overview up to
   match Experiences.
   FOLLOW-UP (Dan 6/23/26 review pass 2): "The sections appear
   consistent, but now a bit too airy. Maybe we discuss on our
   next call." Both sides agreed the cadence is uniform — open
   question is whether to dial 32/16 back to something between
   12px and 32px (e.g., 20-24px top, 12px bottom). Revisit after
   that call. */
/* Broadened 7/23/26 (HH QA 7.1) — target H3s that sit DIRECTLY inside
   a column of the Overview grid (either .mt-overview__copy or
   .mt-overview__side), not H3s nested inside a component like
   .mt-callout. The `> * > h3` shape matches H3 whose parent is a
   direct child of .mt-overview__grid — i.e., an H3 sitting one level
   deep in a column, but not a grandchild inside a callout box.
   Production pages match identically (left column H3s are still
   direct children of .mt-overview__copy); new coverage kicks in
   when Cascade authors drop a body-copy H3 into the right column. */
#main.majors-template .mt-overview__grid > * > h3,
#main.majors-template .mt-experiences__copy h3 {
  margin-top: 2rem !important;        /* 32px — UX Pilot mt-8 on 2nd+ H3 */
  margin-bottom: 0.75rem !important;  /* 12px — was 16px; trimmed 4px per Matt 6/23/26
                                         to tighten H3 → paragraph gap. Part of the
                                         broader "too airy" 1.9 conversation. */
}

#main.majors-template .mt-overview__grid > * > h3:first-of-type,
#main.majors-template .mt-experiences__copy h3:first-of-type {
  margin-top: 0 !important;
}

#main.majors-template .mt-experiences__copy p {
  margin-bottom: 1.5rem !important;   /* 24px — UX Pilot space-y-6 */
}

#main.majors-template .mt-experiences__copy p:last-child {
  margin-bottom: 0 !important;
}

/* Slider container — native-ratio photo treatment per Matt 6/16/26
   (punch list 4.6.2, extending the 3.1 photo principle to the
   Experiences "Beyond the Classroom" slider). Was a fixed 600px-tall
   container with object-fit: cover cropping each slide; now slides
   render at their native upload ratio and the slider container
   expands to whichever slide is tallest (flex default
   align-items: stretch keeps all slides the same display height).
   For typical content (3 slides at similar aspect ratios from the
   same author), the visual reads uniform. If authors upload widely
   different ratios in the same slider, shorter slides will sit
   inside a taller frame — acceptable trade-off per the principle
   ("author controls framing by what they upload"). */
#main.majors-template .mt-slider {
  position: relative;
  /* no fixed height — slider sizes to its contents */
  /* NOTE (HH QA 7.10, 8/26/26): `overflow: hidden` moved down to
     .mt-slider__viewport. The slider box now also contains the dots and
     the caption stack, and clipping at this level would cut off a focus
     ring on the dots. */
}

/* Viewport — the image area only. Two jobs:
   1. Clips the horizontally-translating track (`overflow: hidden`).
   2. Acts as the positioning context for the prev/next arrows, so their
      `top: 50%` centers them on the IMAGE rather than on the whole
      slider (which now includes the dots and caption below).
   Added 8/26/26 as part of the image → dots → caption restructure. */
#main.majors-template .mt-slider__viewport {
  position: relative;
  overflow: hidden;
}

#main.majors-template .mt-slider__track {
  display: flex;
  transition: transform 0.4s ease;
  /* no fixed height — flex track sized by content (tallest slide) */
}

#main.majors-template .mt-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  /* no fixed height — slide sized by its image */
}

#main.majors-template .mt-slider__slide img {
  width: 100% !important;
  height: auto !important;              /* native ratio per 3.1 principle */
  max-width: 100% !important;
  display: block;
}

/* Nav buttons — locked to 48x48 circles. bw.edu's button rules add
   padding/min-width that stretches these to ovals; defending with
   explicit width/height/min/max + padding 0. */
#main.majors-template .mt-slider__nav {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3rem !important;              /* 48px — UX Pilot w-12 */
  height: 3rem !important;             /* 48px — UX Pilot h-12 */
  min-width: 3rem !important;
  min-height: 3rem !important;
  max-width: 3rem !important;
  max-height: 3rem !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: var(--mt-link) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 1.125rem;
  transition: background 0.15s ease;
}

.mt-slider__nav:hover { background: #fff; }

.mt-slider__nav:focus-visible {
  outline: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), var(--mt-focus-ring);
}

.mt-slider__nav--prev { left: 1rem; }
.mt-slider__nav--next { right: 1rem; }

/* HH QA 7.10 (8/26/26): dots moved from absolute-over-the-image into
   normal flow, so the rendered order is image → dots → caption per Dan
   8/25/26. Previously `position: absolute; bottom: 1rem` measured from
   the bottom of .mt-slider — fine when the slider contained only images,
   but once per-slide captions were added the dots landed on top of the
   caption text.

   Related markup change: captions move OUT of the individual
   .mt-slider__slide elements and into a .mt-slider__captions container
   placed after this list. See the slider block in majors.js for the
   full markup contract. */
#main.majors-template .mt-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0 !important;   /* 12px below the image */
  padding: 0;
  list-style: none;
  line-height: 0;                   /* kill inherited leading on the row */
}

/* Collapse inherited spacing on the dot list items.
   Measured on the live Cascade build 8/26/26: the dots row was rendering
   52px tall for what should be a 10px row —
     • the <button> picks up a 20px bottom margin from bw.edu's shell
       button styling, and
     • the <li> picks up 12px from our own `.majors-template li` rule.
   Invisible while the dots were absolutely positioned over the image;
   real vertical space now that they sit in normal flow. */
#main.majors-template .mt-slider__dots li {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}

#main.majors-template .mt-slider__dots li::marker { content: none; }

.mt-slider__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  /* HH QA 7.6 (7/23/26): palette flipped from semi-transparent white
     to semi-transparent burnt orange (matches the chevron arrows in the
     same slider). Semi-transparent white was invisible whenever the
     dots ended up on a light background — e.g. when the slider frame
     extended past a short image and the dots landed on the row
     background. Burnt orange contrasts on both light (row bg) and
     dark (image) backgrounds and is visually consistent with the
     surrounding nav controls. */
  background: rgba(191, 66, 0, 0.35);
  border: 0;
  padding: 0;
  /* bw.edu's shell puts a 20px bottom margin on <button>; zero it so the
     dots row is exactly dot-height (HH QA 7.10). */
  margin: 0 !important;
  display: block;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mt-slider__dot[aria-current="true"] { background: var(--mt-link); }

.mt-slider__dot:focus-visible {
  outline: 0;
  box-shadow: var(--mt-focus-ring);
}

/* Slider captions (HH QA 7.10) — sit below the dots, outside the track.
   All captions are stacked into a single grid cell so the container is
   sized to the TALLEST caption and the layout doesn't jump as the user
   moves between slides. Only the active one is visible; `visibility`
   (rather than `display`) preserves the reserved height and also removes
   inactive captions from the accessibility tree.

   Trade-off worth knowing: with wildly uneven caption lengths, shorter
   captions leave some empty space below them. That's the cost of a
   stable slider height — preferable to the page shifting under the
   reader every time the slide changes. */
.mt-slider__captions {
  display: grid;
  margin-top: 0.75rem;              /* 12px below the dots */
  margin-bottom: 2rem;              /* 32px below the caption — roughly
                                       double the internal gaps, so
                                       image + dots + caption reads as one
                                       group and separates cleanly from
                                       whatever follows the slider
                                       (Dan 8/25/26). */
}

.mt-slider__caption {
  grid-area: 1 / 1;                 /* every caption shares one cell */
  visibility: hidden;
}

.mt-slider__caption.is-active {
  visibility: visible;
}

/* Uncaptioned sliders keep their own bottom spacing, since there's no
   .mt-slider__captions block to carry it. */
.mt-slider:not(:has(.mt-slider__captions)) .mt-slider__dots {
  margin-bottom: 2rem;
}

@media (min-width: 900px) {
  .mt-experiences__grid {
    grid-template-columns: 1fr 1fr;
    /* Top-aligned columns per Matt 6/16/26 (punch list 5.8.3):
       "The sliders in the right column need to be aligned top, not
       middle-oriented." Was align-items: center, which centered the
       (now shorter, native-ratio) slider against the left column's
       longer content. Top alignment puts the slider's top edge in
       line with the H2 / H3 of the copy column. */
    align-items: start;
    gap: 4rem;                         /* 64px — UX Pilot lg:gap-16 */
  }
}


/* ---------------------------------------------------------------------------
   Row 9 — Alumni Success
   --------------------------------------------------------------------------- */
.mt-alumni__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap);
}

.mt-alumni-card {
  background: var(--mt-bg-alt);
  padding: 2.5rem;                  /* 40px — UX Pilot p-10 */
  border-top: var(--mt-bar) solid var(--mt-accent);
}

.mt-section--bg-alt .mt-alumni-card { background: var(--mt-bg) !important; }

.mt-alumni-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;              /* 32px — UX Pilot mb-8 */
}

/* Force icon size on the actual <i> element — bw.edu's FA rules can
   override font-size set on the wrapper div. */
#main.majors-template .mt-alumni-card__icon i {
  color: var(--mt-accent) !important;
  font-size: 3rem !important;       /* 48px — UX Pilot text-5xl */
  line-height: 1 !important;
}

#main.majors-template .mt-alumni-card__title {
  text-align: center;
  /* 22px — Per Matt 6/16/26 (punch list 5.9.4): "Match the H3 in
     Alumni Succeed to the Brag Cards. Alumni Succeed H3 in cards
     have gotten too small." Bumped up from the Tier-3 5.0.4 drop
     (which had taken this from 26px to 18px) to match the Brag Card
     title size (.mt-outcome__title = 22px Oswald). Alumni is an
     intentional exception to the 5.0.4 18/16 standard because the
     full horizontal block layout reads with more visual weight than
     a 4-up small block.
     Font-family is Oswald (inherited from base
     #main.majors-template h3); color BW Blue (also from base h3
     rule). Matches Brag Card title. */
  font-size: 1.375rem !important;   /* 22px — was 18px (was 26px before Tier-3) */
  margin: 0 0 1.5rem !important;    /* 24px — UX Pilot mb-6 */
}

/* Alumni card list items — inherit the global body-li 18px rule.
   Previously dropped to 16px on 6/16/26 as part of the 5.0.4
   Tier-3 small-block rollout, then reverted to 18px per Dan
   6/23/26 ("5.9.4: Please switch back to 18px"). With no override
   here, the global #main.majors-template li { font-size:
   var(--mt-fs-body) } at 18px applies, which is what Dan wants. */

.mt-alumni-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#main.majors-template .mt-alumni-card li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.75rem !important;/* 12px — UX Pilot space-y-3 */
}

#main.majors-template .mt-alumni-card li:last-child {
  margin-bottom: 0 !important;
}

.mt-alumni-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mt-accent);
}

@media (min-width: 640px) {
  .mt-alumni__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;                       /* 32px — UX Pilot gap-8 */
  }
}

/* Mobile — tighten Alumni Succeed section. Per Dan / punch list 4.7
   (6/8/26):
   - 4.7.1: less gap between intro paragraph and the cards
   - 4.7.3: less top/bottom padding inside each card; less gap between
            the centered icon and the H3 card title */
@media (max-width: 767px) {
  #main.majors-template .mt-row__intro:has(+ .mt-alumni__grid) {
    margin-bottom: 1.5rem !important;     /* 24px — was 48px (--mt-gap-lg) */
  }

  #main.majors-template .mt-alumni-card {
    padding-top: 1.75rem !important;      /* 28px — was 40px */
    padding-bottom: 1.75rem !important;
  }

  #main.majors-template .mt-alumni-card__icon {
    margin-bottom: 1.25rem !important;    /* 20px — was 32px */
  }
}


/* ---------------------------------------------------------------------------
   Row 10 — Team NEO callout
   --------------------------------------------------------------------------- */
.mt-callout-logo {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.mt-callout-logo img {
  max-height: 4rem;
  width: auto;
}


/* ---------------------------------------------------------------------------
   Row 11 — Spotlight Stories
   --------------------------------------------------------------------------- */
.mt-stories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap);
}

.mt-story {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mt-story__media {
  overflow: hidden;
  margin-bottom: 1rem;
}

.mt-story__media img {
  width: 100%;
  /* Fixed 4:3 aspect ratio at every viewport — Per Dan 6/16/26
     (punch list 4.8.1 follow-up): "resizing of the story photos
     should maintain aspect ratio when resizing for all screen
     widths." Was a fixed 14rem (224px) height, which produced
     ~4:3 at desktop 4-up but ~16:9 at tablet 2-up. 4:3 matches
     the desktop look that's already been approved. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.mt-story:hover .mt-story__media img,
.mt-story:focus .mt-story__media img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* Story title — high specificity + !important so the generic
   #main.majors-template h3 (28px Oswald) doesn't override.
   UX Pilot uses text-lg (18px) Roboto, font-normal (400), with
   a tight specific line-height of 26px (~1.44). */
#main.majors-template .mt-story__title {
  font-family: var(--mt-font-body) !important;
  font-size: 1rem !important;            /* 16px — Per Dan / punch list 5.10.4
                                            (6/14/26): "I think text should be
                                            Roboto, normal weight, 16." Was 18px. */
  font-weight: 400 !important;           /* UX Pilot font-normal */
  line-height: 1.5 !important;           /* tightened proportionally with size drop */
  color: var(--mt-link) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin: 0 !important;
}

.mt-story:hover .mt-story__title {
  text-decoration-thickness: 2px;
}

@media (min-width: 640px) { .mt-stories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mt-stories__grid { grid-template-columns: repeat(4, 1fr); } }


/* -----------------------------------------------------------------------------
   Spotlight Stories — mobile carousel (single card with arrow buttons)
   -----------------------------------------------------------------------------
   Per Dan / punch list 4.8.1 (6/8/26): on mobile, the Spotlight Stories
   block becomes a single-card horizontal carousel. User taps an arrow
   button (or swipes) to see additional stories. Arrows hide at the edges.

   The carousel uses CSS scroll-snap for native swipe support; majors.js
   wires the arrow buttons to scrollBy() and toggles their hidden state
   at the start/end of the track.

   Desktop (>= 768px): controls are hidden, grid behaves as before
   (4-up at 900+, 2-up at 640-899 via the tablet carousel block).
   --------------------------------------------------------------------------- */
.mt-stories-carousel {
  position: relative;
}

/* Controls block layout — flex centering for both buttons, common to all
   viewports. Visibility is toggled by the rules below: hidden by default,
   shown on mobile (always) and on desktop only when the grid is in
   --scroll mode (5+ stories overflow the visible row). */
.mt-stories-carousel__controls {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;                               /* 12px between the two buttons */
  margin-top: 1.25rem;                        /* 20px below the track */
  /* Reserve row height so the layout doesn't jump when buttons are
     disabled. 44px = WCAG AA touch target. */
  min-height: 2.75rem;
}

/* Button styling — available at every viewport. The buttons only render
   when .mt-stories-carousel__controls is visible (see rules above /
   below). Color scheme uses the Burnt Orange action palette per Dan
   6/15/26 (punch list 4.8.1): "use our orange colors to represent
   action: #BF4200 > #A13F00." Default state = Burnt Orange border +
   chevron; hover/focus inverts to Deep Burnt Orange background + bg
   chevron. */
.mt-stories-carousel__btn {
  width: 2.75rem;                             /* 44px — WCAG AA touch target */
  height: 2.75rem;
  border: 2px solid var(--mt-link);           /* Burnt Orange #BF4200 */
  background: transparent;
  color: var(--mt-link);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mt-stories-carousel__btn i {
  font-size: 1rem;                            /* chevron sized to icon button */
  line-height: 1;
}

.mt-stories-carousel__btn:hover,
.mt-stories-carousel__btn:focus {
  background-color: var(--mt-link-hover);     /* Deep Burnt Orange #A13F00 */
  border-color: var(--mt-link-hover);
  color: var(--mt-bg);
  outline: none;
}

.mt-stories-carousel__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

/* JS toggles :disabled at the edges of the track — both arrows stay
   visible at all times, but the inactive one renders in muted gray so
   the user sees they've reached the start or end. */
.mt-stories-carousel__btn:disabled,
.mt-stories-carousel__btn:disabled:hover,
.mt-stories-carousel__btn:disabled:focus {
  border-color: #c4c4c4;                      /* muted gray */
  color: #c4c4c4;
  background-color: transparent;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Mobile — convert the grid into a horizontal scroll-snap track and
     always show controls (every Stories carousel becomes a 1-up
     swipeable carousel below 768px). */
  #main.majors-template .mt-stories-carousel .mt-stories__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--mt-gap);                       /* 24px between cards */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Hide the scrollbar for a cleaner look; native swipe still works */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Don't clip the focus ring on the first/last card */
    padding: 2px;
    margin: -2px;
  }

  #main.majors-template .mt-stories-carousel .mt-stories__grid::-webkit-scrollbar {
    display: none;
  }

  #main.majors-template .mt-stories-carousel .mt-story {
    flex: 0 0 100%;                           /* exactly one card visible */
    scroll-snap-align: center;
  }

  /* Show controls on every Stories carousel on mobile */
  .mt-stories-carousel .mt-stories-carousel__controls {
    display: flex;
  }

  /* Slightly more breathing room between the section H2 and the
     carousel track on mobile. Per Matt's mobile review (6/14/26):
     "the space between this H3 and the images in this scroll could
     increase just a bit." Scoped via :has() so only Spotlight Stories
     H2s are affected, and only when the H2 is the direct sibling of
     the carousel wrapper (i.e. no intro paragraph in between). */
  #main.majors-template .mt-row__title:has(+ .mt-stories-carousel) {
    margin-bottom: 2.75rem !important;        /* 44px — was 2rem (32px) */
  }
}

/* -----------------------------------------------------------------------------
   Spotlight Stories — tablet 2-up carousel (768-1023px)
   -----------------------------------------------------------------------------
   Per Dan / punch list 4.8.1 follow-up (6/16/26): "the stories display 2 per
   row with continuing rows until the stories are completed (I may have
   suggested this). I think we should go 2 for the single row and then use the
   chevron arrows to show additional stories." So at tablet, the grid becomes
   a 2-up horizontal scroll-snap carousel (mirroring the mobile single-card
   pattern, just 2 cards visible per page). Controls are always visible;
   majors.js disables the inactive arrow at the start/end of the track.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 899px) {
  #main.majors-template .mt-stories-carousel .mt-stories__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--mt-gap);                       /* 24px between cards */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Don't clip the focus ring on the first/last card */
    padding: 2px;
    margin: -2px;
  }

  #main.majors-template .mt-stories-carousel .mt-stories__grid::-webkit-scrollbar {
    display: none;
  }

  #main.majors-template .mt-stories-carousel .mt-story {
    flex: 0 0 calc((100% - var(--mt-gap)) / 2);   /* exactly 2 visible */
    scroll-snap-align: start;
  }

  /* Show controls on every Stories carousel at tablet */
  .mt-stories-carousel .mt-stories-carousel__controls {
    display: flex;
  }
}

/* Desktop — show carousel controls only when the grid is in --scroll
   mode (5+ stories overflow the visible row). Per Dan / punch list
   5.10.3 (6/14/26): "Add arrows (or some other icon) to indicate there
   are more stories." When stories fit visibly (1-4 cards on the
   standard grid), no arrows render. */
@media (min-width: 900px) {
  .mt-stories-carousel:has(.mt-stories__grid--scroll) .mt-stories-carousel__controls {
    display: flex;
  }
}

/* Spotlight Stories — scroll variant (applied when story count >= 5).
   Switches the grid to a horizontal-scroll flex track at large widths.
   4 cards visible at once; additional cards are reached via native horizontal
   scroll (trackpad / touch / drag of the scrollbar). Scroll-snap keeps cards
   aligned to the visible edge so the row never reads as half a card.
   Phase-2 enhancement: dedicated prev/next arrow buttons in markup + JS to
   advance the scroll position by 2 cards per click (per spec). */
@media (min-width: 900px) {
  .mt-stories__grid--scroll {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--mt-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;     /* visual breathing room above scrollbar */
  }

  .mt-stories__grid--scroll .mt-story {
    flex: 0 0 calc((100% - 3 * var(--mt-gap)) / 4);   /* exactly 4 visible */
    scroll-snap-align: start;
  }
}


/* ---------------------------------------------------------------------------
   Row 12 — Admission Info
   --------------------------------------------------------------------------- */
.mt-admission__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-gap);                /* 24px between cards */
  margin-bottom: var(--mt-gap);      /* 24px below the row to match the horizontal
                                        card gap. Per Dan / punch list 4.9.4 (mobile)
                                        + Matt's 6/14/26 note (desktop): vertical and
                                        horizontal spacing should be equal. Was
                                        var(--mt-gap-lg) (48px). */
}

.mt-admit-card {
  background: var(--mt-bg-alt);
  padding: 1.75rem;
  text-align: center;
}

.mt-section--bg-alt .mt-admit-card { background: var(--mt-bg) !important; }

.mt-admit-card__icon {
  font-size: 2.25rem;
  color: var(--mt-link);
  margin-bottom: 1rem;
}

/* High specificity + !important so the generic p / a rules
   (and my own #main.majors-template p 18px override) don't
   override these. UX Pilot: title text-lg/font-normal (18px/400),
   blurb text-base (16px). */
#main.majors-template .mt-admit-card__title {
  font-family: var(--mt-font-body) !important;
  /* 17px — Per Dan's 6/17/26 canonical typography spec: 16px → 17px.
     (16px came from the 6/16 Tier-3 rollout where we dropped from the
     original 18px per Dan 5.0.4 "Admission and Faculty text sizes may
     need to be 1-2 notches smaller due to spacing limitations" — 17px
     is the final settled size in the 5-card row.) Hover state: existing
     thicker-underline behavior holds per Matt 6/18/26 — "keep the
     existing behavior." */
  font-size: 1.0625rem !important;      /* 17px — was 16px */
  font-weight: 400 !important;          /* UX Pilot font-normal */
  line-height: 1.4 !important;
  color: var(--mt-link) !important;
  display: block;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin: 0 0 0.75rem !important;       /* 12px — UX Pilot mb-3 */
}

/* Admit card title hover/focus — thicker underline only. Text stays
   at normal weight. Per Dan 6/23/26 (follow-up clarification): "only
   bold the underline on hover. The text remains normal on hover."
   (Initial 6/23 read was that Dan wanted font-weight bumped; he
   later clarified — underline thickness only.) */
#main.majors-template .mt-admit-card__title:hover,
#main.majors-template .mt-admit-card__title:focus {
  text-decoration-thickness: 2px;
}

/* WYSIWYG-safe: the blurb may be authored either as a bare <p> (our
   original markup) OR as a <div> wrapper containing WYSIWYG-generated
   children (Nate 8/26/26 — Cascade requires a <div> wrapper because a
   WYSIWYG field emits its own block-level tags, and <p> can't nest
   inside <p>). Targeting the descendants as well as the element itself
   means the 15px blurb typography applies in either shape. */
#main.majors-template .mt-admit-card__blurb,
#main.majors-template .mt-admit-card__blurb p,
#main.majors-template .mt-admit-card__blurb li {
  font-family: var(--mt-font-body) !important;
  /* 15px — Per Dan's 6/17/26 canonical typography spec: 14px → 15px.
     (14px came from the 6/16 Tier-3 rollout per Dan 5.0.4 "1-2 notches
     smaller." 15px is the final settled size pairing with the 17px
     title.) */
  font-size: 0.9375rem !important;      /* 15px — was 14px */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--mt-text) !important;
}

#main.majors-template .mt-admit-card__blurb {
  margin: 0 !important;
}

/* Multi-block WYSIWYG content — collapse the outer margins so the card's
   padding still defines the visible top/bottom space, but keep spacing
   between paragraphs if an author enters more than one. */
#main.majors-template .mt-admit-card__blurb > :first-child {
  margin-top: 0 !important;
}

#main.majors-template .mt-admit-card__blurb > :last-child {
  margin-bottom: 0 !important;
}

#main.majors-template .mt-admit-card__blurb p {
  margin: 0 0 0.75rem;                  /* 12px between stacked paragraphs */
}

/* Links inside the WYSIWYG blurb inherit the blurb's size rather than
   the global 18px body-link treatment. */
#main.majors-template .mt-admit-card__blurb a {
  font-size: inherit !important;
  color: var(--mt-link) !important;
}

@media (min-width: 640px) { .mt-admission__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mt-admission__grid { grid-template-columns: repeat(5, 1fr); } }

/* Mobile — tighten BW Admission Information section. Per Dan / punch
   list 4.9 (6/8/26):
   - 4.9.3: less top/bottom padding inside each admit card; less gap
            between the icon and the H3 card title

   Note: 4.9.4 (normalize grid → callout gap) was originally a
   mobile-only override here, but the desktop equivalent was added
   on 6/14/26 by promoting the change to the base
   .mt-admission__grid rule. Mobile now inherits that base value
   naturally, no override needed. */
@media (max-width: 767px) {
  /* Admission intro → cards gap on mobile. Match the Alumni pattern
     (24px) per Dan 6/15/26 (punch list 4.9.1): "Spacing still too
     much between intro copy and first card on mobile. Preferred
     spacing: see Alumni Succeed section." Scoped via :has() so only
     Admission's intro is affected. */
  #main.majors-template .mt-row__intro:has(+ .mt-admission__grid) {
    margin-bottom: 1.5rem !important;     /* 24px — was 48px (--mt-gap-lg) */
  }

  #main.majors-template .mt-admit-card {
    padding-top: 0.875rem !important;     /* 14px — Dan's 6/15/26 iteration on
                                              4.9.3: "Inside cards, reduce space
                                              above icons by ~6px." Was 20px. */
    padding-bottom: 1.25rem !important;
  }

  #main.majors-template .mt-admit-card__icon {
    margin-bottom: 0.625rem !important;   /* 10px — was 16px (1rem) */
  }
}

/* Admission Info — wide variant (applied when card count is 4 instead of 5).
   Cards expand to fill the container at large widths — explicit deviation
   from the no-stretch pattern used in Pride Points / Alumni Success. Per
   the spec, this is allowed here for visual balance of the 4-card row. */
@media (min-width: 900px) {
  .mt-admission__grid--wide { grid-template-columns: repeat(4, 1fr); }
}


/* ---------------------------------------------------------------------------
   Row 13 — Faculty
   --------------------------------------------------------------------------- */
.mt-faculty__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mt-gap);
}

.mt-faculty-card {
  text-align: center;
}

.mt-faculty-card__photo {
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.mt-faculty-card__photo img {
  /* Native-ratio photo treatment — Per Matt 6/16/26 (punch list 4.10.3 +
     4.10.5): "delivered on screen at the proportion they are uploaded
     and then scaled up and down. Not looking to have a fixed space
     where the image is serving as a 'filled' background." Photo height
     follows the source aspect ratio (Faculty source uploads are 350×420
     = 5:6, so cards in a row will be uniform; if an author uploads a
     different ratio in the future, the page will respect that ratio
     rather than crop it). Faculty section is the first section to
     adopt this rule; rolling to other sections section-by-section. */
  width: 100%;
  height: auto;
  transition: filter 0.3s ease;
}

.mt-faculty-card:hover .mt-faculty-card__photo img,
.mt-faculty-card:focus-within .mt-faculty-card__photo img {
  filter: brightness(1.06);
}

.mt-faculty-card__name {
  font-family: var(--mt-font-body);
  /* 16px — Faculty "follows Admission scaling" per Dan 5.0.4 + Matt
     6/16/26 Tier-3 rollout (punch list 5.12.3). Was 18px; dropped to
     16px to match Admission's new sizing (5 cards in a row need a
     little less type weight). The title (15px) and degree (13px)
     below already sit in the smaller-block range, so they're
     unchanged. */
  font-size: 1rem;              /* 16px — was 1.125rem (18px) */
  font-weight: 400;             /* Was 500. Per Dan / punch list 4.10.1 (6/8/26):
                                   remove bold from professor names sitewide. */
  color: var(--mt-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  display: block;
  margin-bottom: 0.25rem;
}

.mt-faculty-card__name:hover { text-decoration-thickness: 2px; }

/* High specificity + !important so the generic
   #main.majors-template p (18px) override doesn't force these up. */
#main.majors-template .mt-faculty-card__title {
  font-family: var(--mt-font-body) !important;
  font-size: 0.9375rem !important;     /* 15px — UX Pilot text-[15px] */
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--mt-text) !important;
  margin: 0 0 0.25rem !important;       /* 4px — UX Pilot mb-1 */
}

#main.majors-template .mt-faculty-card__degree {
  font-family: var(--mt-font-body) !important;
  /* 14px — Per Dan's 6/17/26 canonical typography spec: 13px → 14px.
     Faculty degree now reads at 14px against the 16px name + 15px
     title — small clean cascade. */
  font-size: 0.875rem !important;      /* 14px — was 13px */
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--mt-text) !important;
  margin: 0 !important;
}

@media (min-width: 640px) { .mt-faculty__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .mt-faculty__grid { grid-template-columns: repeat(5, 1fr); } }


/* -----------------------------------------------------------------------------
   Faculty — sub-400px single-card carousel
   -----------------------------------------------------------------------------
   Per Dan / punch list 4.10.2 (6/8/26): "Can we convert to a single professor
   at < 400px? And with one professor per line, I'd like to make this a
   carousel where the user clicks on an arrow to see additional faculty."

   Mirrors the Spotlight Stories carousel pattern: at sub-400px the
   faculty grid converts to a horizontal scroll-snap track with one card
   100% wide, and arrow buttons appear below. Above 400px the existing
   grid layout (2 / 3 / 5 cols) is unchanged.

   Logic is shared with the Stories carousel in majors.js via the
   [data-carousel] selector; only the CSS differs (different breakpoint
   and different card class).
   --------------------------------------------------------------------------- */
.mt-faculty-carousel {
  position: relative;
}

.mt-faculty-carousel__controls {
  display: none;                              /* default — controls hidden above 400px */
}

@media (max-width: 399px) {
  /* Convert the 2-col grid into a horizontal scroll-snap track */
  #main.majors-template .mt-faculty-carousel .mt-faculty__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;              /* belt-and-suspenders — neutralize grid */
    gap: var(--mt-gap);                       /* 24px between cards */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px;
    margin: -2px;
  }

  #main.majors-template .mt-faculty-carousel .mt-faculty__grid::-webkit-scrollbar {
    display: none;
  }

  #main.majors-template .mt-faculty-carousel .mt-faculty-card {
    flex: 0 0 100%;                           /* exactly one card visible */
    scroll-snap-align: center;
  }

  /* Show controls at sub-400px */
  .mt-faculty-carousel__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    min-height: 2.75rem;
  }

  /* Same Burnt Orange action palette as the Stories carousel arrows.
     Per Dan 6/15/26 (punch list 4.10.4): "Use orange colors for action:
     #BF4200 > #A13F00." */
  .mt-faculty-carousel__btn {
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--mt-link);         /* Burnt Orange #BF4200 */
    background: transparent;
    color: var(--mt-link);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .mt-faculty-carousel__btn i {
    font-size: 1rem;
    line-height: 1;
  }

  .mt-faculty-carousel__btn:hover,
  .mt-faculty-carousel__btn:focus {
    background-color: var(--mt-link-hover);   /* Deep Burnt Orange #A13F00 */
    border-color: var(--mt-link-hover);
    color: var(--mt-bg);
    outline: none;
  }

  .mt-faculty-carousel__btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
  }

  /* Disabled (start / end of track) — muted gray, matches Stories pattern */
  .mt-faculty-carousel__btn:disabled,
  .mt-faculty-carousel__btn:disabled:hover,
  .mt-faculty-carousel__btn:disabled:focus {
    border-color: #c4c4c4;
    color: #c4c4c4;
    background-color: transparent;
    cursor: default;
    pointer-events: none;
  }
}


/* ---------------------------------------------------------------------------
   Row 14 — FAQ
   ---------------------------------------------------------------------------
   UX Pilot spec for this section:
   - Section: 66px / 70px top/bottom padding (pt-[calc(5rem-14px)] / pb-[calc(5rem-10px)])
   - H2 → list gap: 16px (mb-4)
   - Between items: 20px (space-y-5)
   - Item padding: 24px all around (p-6)
   - Item bg: #F6F4F2 with cool-gray neutral-300 border (#d4d4d4)
   --------------------------------------------------------------------------- */

/* Tighten section vertical padding. UX Pilot literal values are 66/70px,
   but its fixed h-[544px] absorbs that into vertical centering so the
   visible gap between Show More and the next section reads tighter than
   our padding-based render. Bottom padding pulled in to 32px to bring
   the Related Majors section visually closer (matches the screenshot
   feel of UX Pilot). */
@media (min-width: 768px) {
  main#main.majors-template .mt-row.mt-row--faq {
    padding-top: 4.125rem !important;    /* 66px — UX Pilot pt-[calc(5rem-14px)] */
    padding-bottom: 2rem !important;     /* 32px — tightened from UX Pilot 70px */
  }
}

/* Title gap inside the FAQ section is just 16px to the list, not the
   default 48px from .mt-row__title. UX Pilot uses mb-4. */
#main.majors-template .mt-row--faq .mt-row__title {
  margin: 0 0 1rem !important;           /* 16px — UX Pilot mb-4 */
}

.mt-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                          /* 20px — UX Pilot space-y-5 */
  margin: 0 auto 2rem;                   /* 32px below — UX Pilot mb-8 before button, centered */
  max-width: 56rem;                      /* 896px — narrower than the 1152px container
                                            so items don't stretch full-width at wider viewports */
  width: 100%;
}

/* Variable FAQ visible-count pattern. Author sets
   `data-mt-faq-visible-count="N"` on .mt-faq__list. CSS hides every
   FAQ item beyond the Nth child by default. When the toggle button
   is clicked, JS adds `data-mt-faq-expanded` to the list and the
   override rule below reveals every item. Supports N from 1-9 — if
   a page ever needs more, extend the selector list. Per Matt
   6/15/26: "We need the number of FAQs that are showing variable.
   We need it something that is defined directly in the HTML / JS /
   CSS on the page." */
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="1"] > .mt-faq-item:nth-child(n + 2),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="2"] > .mt-faq-item:nth-child(n + 3),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="3"] > .mt-faq-item:nth-child(n + 4),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="4"] > .mt-faq-item:nth-child(n + 5),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="5"] > .mt-faq-item:nth-child(n + 6),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="6"] > .mt-faq-item:nth-child(n + 7),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="7"] > .mt-faq-item:nth-child(n + 8),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="8"] > .mt-faq-item:nth-child(n + 9),
#main.majors-template .mt-faq__list[data-mt-faq-visible-count="9"] > .mt-faq-item:nth-child(n + 10) {
  display: none !important;
}

/* Expanded state — override the hidden default with the item's natural
   display (flex column). The selector chains both data attributes plus
   :nth-child(n) to bump specificity above the visible-count rule above
   (which carries :nth-child(n + N) and would otherwise win on ties). */
#main.majors-template .mt-faq__list[data-mt-faq-expanded][data-mt-faq-visible-count] > .mt-faq-item:nth-child(n) {
  display: flex !important;
}

/* Center the "Show More Questions" button row to match the narrower list */
.mt-faq__more {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

/* FAQ toggle — same chevron-link style as the old Overview "Read More"
   (chevron · label · chevron, BW orange, underlined). Button retains
   semantic button role for the JS toggle while looking like a link. */
#main.majors-template .mt-faq__toggle,
#main.majors-template .mt-faq__toggle:link,
#main.majors-template .mt-faq__toggle:visited {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.25rem 0.5rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mt-font-body) !important;
  font-size: var(--mt-fs-body) !important;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mt-link) !important;          /* Burnt Orange */
  text-decoration: none !important;          /* Underline scoped to the
                                                label span only — see
                                                rule below. Per Dan
                                                (6/14/26): "doesn't want
                                                an underline under the
                                                arrows." */
  cursor: pointer;
}

/* Underline lives on the label span, not the button, so the chevron
   icons don't get caught by the parent's text-decoration.
   Also force color: inherit so the global
   `#main.majors-template span:not([class*="fa-"])` rule (which
   sets all unclassed spans to body brown) doesn't override the
   Burnt Orange color set on the parent button. Per Matt 6/16/26
   punch list 5.13.4: "Show More/Fewer color should match View all
   Courses" — same fix that lets .mt-textlink keep its orange. */
#main.majors-template .mt-faq__toggle [data-mt-faq-toggle-label] {
  color: inherit !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#main.majors-template .mt-faq__toggle:hover,
#main.majors-template .mt-faq__toggle:focus,
#main.majors-template .mt-faq__toggle:active {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mt-link-hover) !important;    /* Deep Burnt Orange */
}

#main.majors-template .mt-faq__toggle:hover [data-mt-faq-toggle-label],
#main.majors-template .mt-faq__toggle:focus [data-mt-faq-toggle-label],
#main.majors-template .mt-faq__toggle:active [data-mt-faq-toggle-label] {
  text-decoration-thickness: 2px;
}

/* Force chevron color to match the label. */
#main.majors-template .mt-faq__toggle i {
  color: inherit !important;
  transition: transform 0.2s ease;
}

/* Flip both chevrons up when the FAQ is expanded — CSS handles this
   driven by the aria-expanded attribute, so the JS doesn't need to
   touch the icons. */
#main.majors-template .mt-faq__toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Flex-column + padding 0 forces the item to size to its visible
   children (the trigger button + optionally the answer). Defeats any
   shell rule that might add padding to a generic div inside #main. */
#main.majors-template .mt-faq-item {
  background: var(--mt-bg-alt);
  border: 1px solid #d4d4d4;             /* UX Pilot border-neutral-300 */
  overflow: hidden;
  transition: background 0.15s ease;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

.mt-faq-item:hover {
  background: #efece8;                   /* UX Pilot hover:bg-[#efece8] */
}

.mt-section--bg-alt .mt-faq-item { background: var(--mt-bg) !important; }

/* High specificity + !important on background/border because bw.edu's
   #main button styling (Foundation 5 + redesign.css) gives <button>
   elements a teal/blue background by default, and a different bg on
   :focus / :active. We want a fully transparent button so the FAQ item
   panel's own background shows through cleanly. */
#main.majors-template .mt-faq-item__trigger,
#main.majors-template .mt-faq-item__trigger:link,
#main.majors-template .mt-faq-item__trigger:visited {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0.875rem 1.5rem !important;   /* 14px top/bottom, 24px sides.
                                            Was 24px all. Per Dan / punch list
                                            4.11.2 (6/15/26): "Accordion tabs
                                            still too tall (desktop and mobile).
                                            Intended height visible on
                                            hover/mouseout on mobile — that
                                            height feels right." */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  cursor: pointer !important;
  font: inherit;
  color: inherit !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
}

#main.majors-template .mt-faq-item__trigger:hover {
  background: rgba(0, 0, 0, 0.025) !important;
  background-color: rgba(0, 0, 0, 0.025) !important;
  color: inherit !important;
}

#main.majors-template .mt-faq-item__trigger:focus,
#main.majors-template .mt-faq-item__trigger:active {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#main.majors-template .mt-faq-item__trigger:focus-visible {
  outline: 0 !important;
  box-shadow: inset var(--mt-focus-ring) !important;
}

/* High specificity + !important so the generic h3 (28px) doesn't
   override. UX Pilot: text-[22px], font-normal, Oswald. */
#main.majors-template .mt-faq-item__question {
  font-family: var(--mt-font-heading) !important;
  font-size: 1.375rem !important;       /* 22px — UX Pilot text-[22px] */
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--mt-heading) !important;
  margin: 0 !important;
}

.mt-faq-item__icon {
  flex-shrink: 0;
  color: var(--mt-heading);
  font-size: 1.125rem;
  transition: transform 0.25s ease;
}

.mt-faq-item__trigger[aria-expanded="true"] .mt-faq-item__icon {
  transform: rotate(180deg);
}

.mt-faq-item__answer {
  padding: 0 1.5rem 1.5rem;              /* 24px sides + 24px bottom — UX Pilot px-6 pb-6 */
}

/* Belt-and-suspenders on the collapsed-answer state. The earlier
   `display: none !important` rule was right but the strip kept
   coming back on desktop — bw.edu shell may force the div to render.
   Reset every dimension property so even if `display: none` loses
   the cascade somehow, the answer can't occupy visible space. Per
   Matt's 6/15/26 5.13.1 follow-up. */
#main.majors-template .mt-faq-item__answer[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Trigger button — defeat any shell `button { min-height: ... }`
   default that would force the button taller than its content. Also
   explicitly lock line-height so a shell-inherited 1.5+ line-height
   on buttons can't inflate the button's natural height. And zero
   out margin — bw.edu's shell adds a default `margin: 0 0 20px` to
   all buttons (the strip Matt saw in 5.13.1 was the button's own
   bottom margin escaping past the FAQ item box). */
#main.majors-template .mt-faq-item__trigger {
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

#main.majors-template .mt-faq-item__icon {
  line-height: 1 !important;
}

.mt-faq__more {
  text-align: center;
}


/* ---------------------------------------------------------------------------
   Row 15 — Related Majors
   ---------------------------------------------------------------------------
   UX Pilot spec for this section:
   - Section pt 50px / pb 76px (pt-[calc(5rem-30px)] / pb-[calc(5rem-4px)])
   - H2 → intro gap: 16px (mb-4)
   - Intro: max-w-3xl (768px), mb 46px (mb-[calc(4rem-18px)])
   - Grid: 4 cols, gap-8 (32px), mb-10 (40px)
   - Card: p-10 (40px), border-2 border-neutral-200 (#e5e5e5)
   - Card link: text-[22px], Roboto, font-normal, decoration-1
   --------------------------------------------------------------------------- */

/* Tighten section vertical padding to match UX Pilot 50/76. */
@media (min-width: 768px) {
  main#main.majors-template .mt-row.mt-row--related {
    padding-top: 3.125rem !important;     /* 50px — UX Pilot pt-[calc(5rem-30px)] */
    padding-bottom: 4.75rem !important;   /* 76px — UX Pilot pb-[calc(5rem-4px)] */
  }
}

/* H2 → intro gap inside Related Majors. UX Pilot mb-4 = 16px. */
#main.majors-template .mt-row--related .mt-row__title {
  margin: 0 0 1rem !important;
}

/* Intro paragraph spacing inside Related Majors. UX Pilot uses
   mb-[calc(4rem-18px)] = 46px, max-w-3xl is already applied via the
   --wide modifier class on the <p>. */
#main.majors-template .mt-row--related .mt-row__intro {
  margin: 0 auto 2.875rem !important;   /* 46px — UX Pilot mb-[calc(4rem-18px)] */
}

.mt-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;                            /* 32px — UX Pilot gap-8 */
  margin-bottom: 2.5rem;                /* 40px — UX Pilot mb-10 */
}

.mt-related-card {
  background: var(--mt-bg-alt);         /* HH QA 7.5 (7/23/26): flipped
                                           to sandstone-base so Related
                                           Majors cards read as bounded
                                           cards on a default (white)
                                           section. The
                                           .mt-section--bg-alt
                                           .mt-related-card flip rule
                                           below inverts to white on
                                           sandstone rows (production
                                           canonical rendering). */
  padding: 2.5rem;                      /* 40px — UX Pilot p-10 */
  text-align: center;
  border: 2px solid #e5e5e5;            /* UX Pilot border-neutral-200 */
  transition: border-color 0.15s ease;
}

.mt-section--bg-alt .mt-related-card { background: var(--mt-bg) !important; }

/* No hover outline change. Per Dan / punch list 4.12.4 (6/15/26):
   "Remove gold outline on card hover state." Defensive transparent
   lock so no shell CSS or stray rule can sneak in an accent border.
   Same direction as 4.5.5 (Minors) and 4.4.5 (Courses). */
#main.majors-template .mt-related-card:hover,
#main.majors-template .mt-related-card:focus,
#main.majors-template .mt-related-card:focus-within {
  border-color: #e5e5e5 !important;     /* original UX Pilot border-neutral-200 */
}

#main.majors-template .mt-related-card a {
  font-family: var(--mt-font-body) !important;
  /* 18px — preview of Dan's 5.0.4 small-block typography standard
     ("Roboto, normal weight, 18" for headlines). Applied to Related
     Majors as a single-section preview per Matt 6/16/26 punch list
     5.14.1 — Dan reacts to one section at the proposed size before
     we roll the standard across the other 8 affected blocks. Was
     22px (UX Pilot text-[22px]). Line-height bumped 1.3 → 1.4 since
     a tighter line-height reads cramped once the font drops. */
  font-size: 1.125rem !important;       /* 18px — was 22px */
  font-weight: 400 !important;          /* UX Pilot font-normal */
  line-height: 1.4 !important;
  color: var(--mt-link) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#main.majors-template .mt-related-card a:hover { text-decoration-thickness: 2px; }

.mt-related__footer { text-align: center; }

@media (min-width: 640px) { .mt-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mt-related__grid { grid-template-columns: repeat(4, 1fr); } }

/* Mobile — tighten Related Majors section. Per Dan / punch list 4.12
   (6/8/26):
   - 4.12.1: less gap between intro paragraph and the cards
   - 4.12.2: less top/bottom padding inside each related-major card */
@media (max-width: 767px) {
  #main.majors-template .mt-row--related .mt-row__intro {
    margin-bottom: 1.5rem !important;     /* 24px — was 46px (UX Pilot custom) */
  }

  #main.majors-template .mt-related-card {
    padding-top: 1.5rem !important;       /* 24px — was 40px (2.5rem) */
    padding-bottom: 1.5rem !important;
  }

  /* Mobile gap between Related Majors cards — match the Minors
     pattern (12px) per Dan 6/15/26 (punch list 4.12.3): "Reduce
     space between cards. See Minors for preferred spacing." Was
     32px from the base rule. */
  #main.majors-template .mt-related__grid {
    gap: 0.75rem !important;              /* 12px — matches mobile .mt-minors__grid */
  }
}


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


/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */
@media print {
  .majors-template { background: #fff; color: #000; }
  .mt-hero__media,
  .mt-hero__media::after,
  .mt-slider__nav,
  .mt-slider__dots { display: none; }
  .mt-hero { min-height: auto; padding: 1rem 0; }
  .mt-hero__title,
  .mt-hero__lead { color: #000; text-shadow: none; }
  .mt-row { padding: 1rem 0; break-inside: avoid; }
}


/* =============================================================================
   5.0.2 — Section background (class-based) — additional card flips
   =============================================================================
   Per HH (Elisabeth 6/30): background choice is manual per section via
   .mt-section--bg-alt on the outer <section class="mt-section">.
   The primary card-inversion rules for .mt-course, .mt-minor,
   .mt-alumni-card, .mt-admit-card, .mt-faq-item, .mt-related-card sit
   next to each component's base styles earlier in this file. The block
   below covers the additional components whose base backgrounds also
   need to flip against a sandstone parent (mt-card / mt-callout /
   mt-pullquote / mt-testimonial).

   Previous state (deleted 7/1/26): a positional :nth-of-type auto-
   alternation system scoped to .majors-template--altbg. Removed at
   BW's request — a few use cases came up that conflicted with
   automatic switching, so background choice is now explicit per
   section. See punch list 5.0.2 for the direction reversal.
   ============================================================================= */

.mt-section--bg-alt .mt-card,
.mt-section--bg-alt .mt-pullquote,
.mt-section--bg-alt .mt-callout,
.mt-section--bg-alt .mt-testimonial {
  background: var(--mt-bg) !important;
}

/* Full-bleed body image — content-row variant for 5.0.7 (hero-sized photo
   in the body). The row drops its padding and background entirely so the
   image extends edge-to-edge regardless of the alternation behind it. Not
   scoped to sandbox so it's reusable elsewhere as a component variant. */
.mt-row--bleed {
  padding: 0 !important;
  background: transparent !important;
}
.mt-row--bleed img {
  display: block;
  width: 100%;
  /* Clamp to a wide cinematic band so a portrait-ish source photo doesn't
     dominate the page. ~16:5 (3.2:1) reads as a hero strip rather than a
     full hero. object-fit: cover crops excess instead of letterboxing. */
  aspect-ratio: 16 / 5;
  height: auto;
  object-fit: cover;
}

/* Honor / Recognition band — a compact full-width strip designed to live
   inside a .mt-row--bleed. BW Blue field with gold top/bottom rails for
   a ceremonial "ribbon" feel, a gold award icon on the left, and a
   three-line eyebrow / title / source stack on the right. Used on the
   5.0.2 alt-bg sandbox as the position-2 spacer that shifts the
   downstream alternation, but reusable anywhere a major-page honor
   callout would fit. */
.mt-honor-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--mt-heading);                /* BW Blue */
  color: #fff;
  padding: 2.25rem 1.5rem;
  border-top: 4px solid var(--mt-accent);       /* Gold rail (top) */
  border-bottom: 4px solid var(--mt-accent);    /* Gold rail (bottom) */
  text-align: left;
}
#main.majors-template .mt-honor-band__icon {
  font-size: 2.5rem;
  color: var(--mt-accent) !important;
  flex-shrink: 0;
}
.mt-honor-band__text {
  max-width: 56rem;
}
#main.majors-template .mt-honor-band__eyebrow {
  font-family: var(--mt-font-heading) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500 !important;
  color: var(--mt-accent) !important;
  margin: 0 0 0.25rem !important;
}
#main.majors-template .mt-honor-band__title {
  font-family: var(--mt-font-heading) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin: 0 !important;
}
#main.majors-template .mt-honor-band__source {
  font-family: var(--mt-font-body) !important;
  font-size: 0.9375rem !important;
  color: #fff !important;
  opacity: 0.85;
  margin: 0.375rem 0 0 !important;
}
@media (max-width: 767px) {
  .mt-honor-band {
    flex-direction: column;
    gap: 0.875rem;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  #main.majors-template .mt-honor-band__title {
    font-size: 1.1875rem !important;
  }
}