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

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

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

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

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

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

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

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

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

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

.pg-hero h1 {
  font-size: clamp(2.5rem, 5.1vw, 4.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.034em;
  color: var(--white);
}
/* Degree abbreviation as a set-apart line rather than "(MS)" wrapping
   onto its own orphan line inside the h1. */
.pg-degree-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}
.pg-degree-line .deg {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.24);
  padding: 4px 12px;
  color: var(--white);
  letter-spacing: 0.04em;
}

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

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

/* ==========================================================================
   2. STICKY JUMP BAR
   --pg-header-h is measured at runtime by program.js. The site header is
   sticky and its height changes at 768px (the centennial ribbon hides), so
   a hard-coded offset pins this bar underneath it at one breakpoint or the
   other.
   ========================================================================== */
.pg-jump {
  position: sticky;
  top: var(--pg-header-h, 0px);
  z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E6EBEE;
  margin-top: 40px;
}
.pg-jump-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pg-jump-links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pg-jump-links::-webkit-scrollbar { display: none; }
.pg-jump-links a {
  flex-shrink: 0;
  padding: 17px 15px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  /* Colour only — NOT `all`. With the border transitioning, the outgoing
     link's rule fades out while the incoming one fades in, so mid-scroll
     two links read as active and the bar smears. */
  transition: color 0.2s ease;
}
.pg-jump-links a:hover { color: var(--ub-purple); border-bottom-color: #D5DDE2; }
.pg-jump-links a.current {
  color: var(--ub-purple);
  border-bottom-color: var(--ub-blue);
}
.pg-jump-act { flex-shrink: 0; display: flex; gap: 9px; }
.pg-jump-act .btn { padding: 10px 20px; font-size: 0.88rem; }

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

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

/* A light section after a white one (or the reverse) keeps its full pad: the
   tint boundary is doing visible work and needs the room to read as a break. */
.pg-sec + .pg-path,
.pg-sec + .pg-recog,
.pg-sec + .pg-admit,
.pg-sec + .pg-more,
.pg-sec + .pg-sec--light,
.pg-path + .pg-sec,
.pg-recog + .pg-sec,
.pg-admit + .pg-sec,
.pg-more + .pg-sec,
.pg-sec--light + .pg-sec { padding-top: var(--section-pad); }

/* Two tinted sections in a row are the same-background case again. These win by
   coming later in source order at equal specificity (0,2,0). */
.pg-path + .pg-recog,
.pg-path + .pg-admit,
.pg-path + .pg-more,
.pg-recog + .pg-path,
.pg-recog + .pg-admit,
.pg-recog + .pg-more,
.pg-admit + .pg-path,
.pg-admit + .pg-recog,
.pg-admit + .pg-more,
.pg-more + .pg-path,
.pg-more + .pg-recog,
.pg-more + .pg-admit,
.pg-sec--light + .pg-sec--light { padding-top: 0; }
.pg-head { max-width: 47rem; margin-bottom: 44px; }
.pg-head .display-lg + .section-lede { margin-top: 18px; }

/* Anchor targets sit under the sticky header + jump bar; scroll-margin
   keeps a jumped-to heading from hiding behind both. */
.pg-anchor { scroll-margin-top: calc(var(--pg-header-h, 0px) + 74px); }

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

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

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

.pg-conc-panels { padding: 40px 44px 44px; position: relative; }
.pg-conc-panel[hidden] { display: none; }
.pg-conc-panel h3 {
  font-size: 1.86rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ub-purple);
  margin-bottom: 14px;
}
.pg-conc-panel > p {
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--text-light);
  max-width: 40rem;
}
.pg-conc-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 32px;
}
.pg-conc-col h4 {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ub-blue);
  margin-bottom: 15px;
  display: inline-block;
}
.pg-conc-col ul { display: grid; gap: 9px; }
.pg-conc-col li {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--text-main);
  display: flex;
  gap: 10px;
}
.pg-conc-col li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ub-purple);
  flex-shrink: 0;
  margin-top: 8px;
}
.pg-conc-roles {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #EDF1F3;
}
.pg-conc-roles h4 {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 13px;
}
.pg-role-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pg-role-chip {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ub-purple-dark);
  background: var(--bg-light);
  border-left: 3px solid var(--ub-blue);
  padding: 8px 14px;
}
.pg-conc-note {
  margin-top: 28px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-light);
  background: var(--bg-light);
  border-left: 3px solid var(--ub-purple);
  padding: 14px 18px;
}

/* ==========================================================================
   5. CURRICULUM PATH
   ========================================================================== */
.pg-path { background: var(--bg-light); }
.pg-path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pg-step {
  background: var(--white);
  padding: 0 0 28px;
  border: 1px solid #E1E7EA;
  position: relative;
}
/* Wedge-cut corner: the hero's diagonal, reduced to a corner detail. */
.pg-step::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 22px 22px;
  border-color: transparent transparent var(--ub-blue) transparent;
}
.pg-step-head {
  background: var(--ub-purple);
  color: var(--white);
  padding: 18px 24px 16px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.pg-step:nth-child(2) .pg-step-head { background: #4E2673; }
.pg-step:nth-child(3) .pg-step-head { background: var(--ub-purple-dark); }
.pg-step:nth-child(4) .pg-step-head { background: var(--ub-purple-deep); }
.pg-step-head .stage {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.pg-step-head .num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
  margin-top: 2px;
}
.pg-step-body { padding: 22px 24px 0; }
.pg-step-body h3 {
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.26;
  color: var(--ub-purple);
  margin-bottom: 11px;
}
.pg-step-body p {
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--text-light);
}
.pg-path-note {
  margin-top: 30px;
  background: var(--white);
  border-left: 4px solid var(--ub-blue);
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pg-path-note i { color: var(--ub-blue-text); font-size: 1.15rem; margin-top: 3px; }
.pg-path-note p { font-size: 0.97rem; line-height: 1.66; color: var(--text-main); }
.pg-path-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 13px; }

/* ==========================================================================
   6. LABS & COMPUTE (dark band)
   ========================================================================== */
.pg-labs {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: var(--section-pad) 0;
  overflow: hidden;
}
.pg-labs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 38%;
  background: linear-gradient(160deg, rgba(89,45,130,0.55) 0%, rgba(89,45,130,0) 72%);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
  pointer-events: none;
}
.pg-labs > .container { position: relative; z-index: 2; }
.pg-labs .eyebrow-rule { color: #7FD9F5; }
.pg-labs .display-lg { color: var(--white); }
.pg-labs .section-lede { color: rgba(255,255,255,0.74); }

.pg-labs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pg-lab {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-top: 3px solid var(--ub-blue);
  padding: 32px 28px 30px;
  transition: var(--transition);
}
.pg-lab:hover { background: rgba(255,255,255,0.09); transform: translateY(-3px); }
.pg-lab i {
  font-size: 1.5rem;
  color: #7FD9F5;
  margin-bottom: 18px;
  display: block;
}
.pg-lab h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.26;
  color: var(--white);
  margin-bottom: 11px;
}
.pg-lab .abbr {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 6px;
}
.pg-lab p { font-size: 0.95rem; line-height: 1.68; color: rgba(255,255,255,0.72); }

/* ---------- Video facade ----------
   The iframe is not loaded until clicked: it keeps the third-party request
   (and its cookies) off first paint, and it avoids the dead black rectangle
   an unloaded YouTube embed leaves behind. */
.pg-video {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
}
.pg-video-copy h3 {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--white);
  margin-bottom: 14px;
}
.pg-video-copy p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.74);
  margin-bottom: 24px;
}
.pg-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ub-purple) 0%, var(--ub-purple-deep) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  overflow: hidden;
}
.pg-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pg-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--white);
  font-family: inherit;
  transition: var(--transition);
}
.pg-video-play:hover { background: rgba(0,0,0,0.16); }
.pg-video-play .disc {
  width: 74px;
  height: 74px;
  border-radius: 50%;   /* inherently circular — the radius exception */
  background: var(--ub-blue);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding-left: 5px;
  transition: var(--transition);
}
.pg-video-play:hover .disc { transform: scale(1.07); }
.pg-video-play .cap {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.pg-video-play:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: -3px; }

/* ==========================================================================
   7. OUTCOMES
   ========================================================================== */
.pg-out { background: var(--white); }
.pg-out-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 46px;
  align-items: start;
}
.pg-out-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #E1E7EA;
  border: 1px solid #E1E7EA;
}
.pg-out-role {
  background: var(--white);
  padding: 22px 22px 20px;
}
.pg-out-role .t {
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ub-purple);
}
.pg-out-role .d {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-light);
  margin-top: 7px;
}
.pg-opt {
  background: var(--ub-purple);
  color: var(--white);
  padding: 34px 32px 32px;
  position: relative;
  overflow: hidden;
}
.pg-opt::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent var(--ub-blue) transparent;
}
.pg-opt .tag {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  background: var(--ub-blue);
  color: var(--ink);
  padding: 5px 11px;
  margin-bottom: 16px;
}
.pg-opt h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 13px;
}
.pg-opt p { font-size: 0.97rem; line-height: 1.7; color: rgba(255,255,255,0.84); }
.pg-opt p + p { margin-top: 13px; }
.pg-opt a { color: #7FD9F5; text-decoration: underline; text-underline-offset: 3px; }
.pg-opt a:hover { color: var(--white); }

/* Figures Institutional Research has not signed off on are visibly marked
   rather than invented. */
.pg-slot {
  margin-top: 22px;
  border: 2px dashed #C3CDD3;
  background: var(--bg-light);
  padding: 18px 20px;
}
.pg-slot .k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Was #8A97A0: 2.78:1 on bg-light, fails WCAG AA for normal text. */
  color: var(--text-light);
  margin-bottom: 6px;
}
.pg-slot p { font-size: 0.9rem; line-height: 1.58; color: var(--text-light); }

/* ==========================================================================
   8. RECOGNITION
   ========================================================================== */
.pg-recog { background: var(--bg-light); }
.pg-recog-inner {
  background: var(--white);
  border: 1px solid #E1E7EA;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: stretch;
}
/* No badge, no badge column. Without this the copy is auto-placed into the
   220px track reserved for the image and the whole panel becomes a column of
   two-word lines — which is what a program with no award looks like, and every
   program starts that way. The renderer sets the class; it is not left to the
   browser to infer. */
.pg-recog-inner--nobadge { grid-template-columns: 1fr; }
.pg-recog-badge {
  background: var(--ub-purple-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
}
.pg-recog-badge img { width: 152px; height: auto; display: block; }
.pg-recog-copy { padding: 42px 44px 40px; }
.pg-recog-copy h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--ub-purple);
  margin-bottom: 16px;
}
.pg-recog-copy p { font-size: 1.02rem; line-height: 1.72; color: var(--text-light); }
.pg-recog-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #EDF1F3;
}
.pg-recog-marks > div { border-top: 3px solid var(--ub-blue); padding-top: 12px; }
.pg-recog-marks .n {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ub-purple);
}
.pg-recog-marks .l {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.4;
}
.pg-footnote,
.pg-recog-copy .pg-footnote {   /* outranks .pg-recog-copy p, which set 1.02rem */
  margin-top: 22px;
  font-size: 0.83rem;
  font-style: italic;
  /* Was #8A97A0: 3.76:1 on white, fails WCAG AA for normal text. */
  color: var(--text-light);
}

/* ==========================================================================
   9. VOICES
   ========================================================================== */
.pg-voices { background: var(--white); }
.pg-voices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.pg-voice {
  background: var(--bg-light);
  border-left: 4px solid var(--ub-purple);
  padding: 36px 34px 32px;
  position: relative;
}
.pg-voice::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  right: 24px;
  font-size: 6rem;
  line-height: 1;
  font-weight: 800;
  color: rgba(89,45,130,0.1);
  pointer-events: none;
}
.pg-voice blockquote p {
  font-size: 1.13rem;
  line-height: 1.66;
  font-weight: 500;
  color: var(--text-main);
  position: relative;
  z-index: 1;
}
.pg-voice-by {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #DFE6EA;
}
.pg-voice-by img {
  width: 58px;
  height: 58px;
  border-radius: 50%;   /* inherently circular — the radius exception */
  object-fit: cover;
  flex-shrink: 0;
}
.pg-voice-by .who { font-size: 1rem; font-weight: 700; color: var(--ub-purple); }
.pg-voice-by .what { font-size: 0.85rem; color: var(--text-light); margin-top: 2px; }

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

/* Deadline timeline: the rule is the spine, the squares are the dates. */
.pg-dates { display: grid; gap: 0; }
.pg-date {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #EDF1F3;
  align-items: baseline;
}
.pg-date:last-child { border-bottom: 0; }
.pg-date .d {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ub-purple);
  border-left: 3px solid var(--ub-blue);
  padding-left: 12px;
}
.pg-date .t { font-size: 0.97rem; font-weight: 600; color: var(--text-main); }
.pg-date .s { font-size: 0.87rem; color: var(--text-light); margin-top: 3px; }
.pg-admit-card .btn { margin-top: 26px; }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.pg-faq { background: var(--white); }
.pg-faq-list { max-width: 56rem; border-top: 1px solid #E1E7EA; }
.pg-faq details { border-bottom: 1px solid #E1E7EA; }
.pg-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 46px 22px 0;
  position: relative;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-main);
  transition: var(--transition);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary:hover { color: var(--ub-purple); }
.pg-faq summary::after {
  content: '\002B';
  position: absolute;
  right: 8px;
  top: 22px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ub-blue-text);
  transition: transform 0.25s ease;
}
.pg-faq details[open] summary { color: var(--ub-purple); }
.pg-faq details[open] summary::after { content: '\2212'; }
.pg-faq summary:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: 2px; }
.pg-faq-a { padding: 0 46px 26px 0; }
.pg-faq-a p {
  font-size: 1rem;
  line-height: 1.74;
  color: var(--text-light);
  max-width: 46rem;
}
.pg-faq-a p + p { margin-top: 12px; }

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

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

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

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .pg-facts-inner { grid-template-columns: repeat(3, 1fr); }
  /* With 5 items on a 3-column grid, items 4 and 5 form the last row; the
     right border on item 3 would then be an orphan edge. */
  .pg-fact:nth-child(3) { border-right: 0; }
  .pg-fact:nth-child(n+4) { border-top: 1px solid #E6EBEE; }

  .pg-onramp-grid { grid-template-columns: 1fr; }
  .pg-conc-shell { grid-template-columns: 1fr; }
  .pg-conc-rail {
    border-right: 0;
    border-bottom: 1px solid #E1E7EA;
    min-width: 0;
    overflow: hidden;   /* contains the tabs' horizontal scroll */
  }
  .pg-conc-tabs {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pg-conc-tabs::-webkit-scrollbar { display: none; }
  /* The rail is a horizontal strip here, so there is no leftover column for
     the nudge to fill. The section note and the sticky CTA carry it. */
  .pg-conc-aside { display: none; }
  .pg-conc-tab {
    flex-shrink: 0;
    min-width: 210px;
    border-bottom: 0;
    border-left: 0;
    border-top: 4px solid transparent;
    border-right: 1px solid #E1E7EA;
    padding: 18px 20px 16px;
  }
  .pg-conc-tab[aria-selected="true"] { border-left-color: transparent; border-top-color: var(--ub-blue); }
  .pg-conc-panels { padding: 32px 28px 36px; }
  .pg-path-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-labs-grid { grid-template-columns: 1fr; }
  .pg-video { grid-template-columns: 1fr; gap: 28px; }
  .pg-out-layout { grid-template-columns: 1fr; gap: 34px; }
  .pg-recog-inner { grid-template-columns: 1fr; }
  .pg-recog-badge { padding: 30px; }
  .pg-voices-grid { grid-template-columns: 1fr; }
  .pg-admit-grid { grid-template-columns: 1fr; }
  .pg-more-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pg-hero-inner { padding-left: 20px; max-width: none; }
  .pg-hero-ctas .btn, .pg-hero-ctas .btn-ghost { width: 100%; text-align: center; }
  .pg-facts-inner { grid-template-columns: 1fr; }
  .pg-fact { border-right: 0; border-top: 1px solid #E6EBEE; }
  .pg-fact:first-child { border-top: 0; }
  .pg-fact:nth-child(3) { border-right: 0; }

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

  .pg-conc-cols { grid-template-columns: 1fr; gap: 24px; }
  .pg-path-grid { grid-template-columns: 1fr; }
  .pg-out-roles { grid-template-columns: 1fr; }
  .pg-recog-copy { padding: 30px 26px 28px; }
  .pg-voice { padding: 28px 24px 26px; }
  .pg-admit-card { padding: 28px 24px 26px; }
  .pg-more-grid { grid-template-columns: 1fr; }
  /* .pg-cta responsive rules moved to style.css with the rest of the variant. */
}