/* BUILD 2026-redesign-1029_3 */
/* ===================================================================== SLCC 2026 Redesign — Program Page Brand-guide aligned (2026-09-17): SLCC Blue ramp + SLCC Gold, Inter, sentence-case headings, 30px card radius. One bold element: the deep-blue "At a Glance" card;
 everything else quiet. Every pairing here is WCAG AA or better;
 ratios noted where non-obvious. ===================================================================== */
 .program {
	 color: var(--body-ink);
}
 .program .content-heading {
	 margin-top: 0;
}
/* ---------- Intro grid ---------- */
 .program-intro {
	 padding: 32px 0 72px;
}
 .program-intro-grid {
	 display: grid;
	 grid-template-columns: minmax(0, 1fr);
	 grid-template-areas: "meta" "glance" "body";
	 gap: 28px;
}
 @media (min-width: 992px) {
	 .program-intro-grid {
		 grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
		 grid-template-areas: "meta glance" "body glance";
		 grid-template-rows: auto 1fr;
		 column-gap: 64px;
		 row-gap: 20px;
	}
}
 .program-intro-meta {
	 grid-area: meta;
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 gap: 12px 20px;
}
 .program-intro-body {
	 grid-area: body;
	 max-width: 72ch;
	 align-self: start;
}
 .program-glance {
	 grid-area: glance;
	 align-self: start;
}
/* Credential bug. Filled with the program's school colour (2026-10-01). Program Page 2026 sets --school-bug-bg and --school-bug-ink inline, from school-map fields 3 and 5, and only when it has BOTH. Without them (Arts, SLCC, an unmapped school) the bug falls back to yellow with --on-gold text, 8.10:1. 17px/700 is not large text, so every pairing needs 4.5:1: Business white 5.86 | Health #002433 6.68 | Humanities white 13.45 | Tech #002433 4.77 | STEM white 7.08. Never set one variable without the other. */
 .program-credential {
	 margin: 0;
	 padding: 6px 18px;
	 border-radius: 999px;
	 background: var(--school-bug-bg, var(--yellow));
	 color: var(--school-bug-ink, var(--on-gold));
	 font-size: 17px;
	 font-weight: 700;
	 line-height: 1.3;
}
 .program-school {
	 margin: 0;
	 font-size: 19px;
	 font-weight: 600;
	 color: var(--school-accent-ink, var(--primary-color));
	/* 5.01:1 default */
}
/* ---------- At a Glance ---------- */
 .program-glance {
	 background: var(--primary-deep);
	 color: var(--on-deep);
	/* 12.16:1 */
	 border-radius: 30px;
	 padding: 32px 32px 28px;
}
 @media (min-width: 992px) {
	 .program-glance {
		 position: sticky;
		 top: 24px;
	}
}
 .program-glance h2 {
	 color: var(--on-deep);
	 font-size: 26px;
	 font-weight: 600;
	 letter-spacing: var(--tracking-heading);
	 margin: 0 0 8px;
}
 .program-glance dl {
	 margin: 0 0 16px;
}
 .program-glance dl > div {
	 padding: 16px 0;
	 border-bottom: 1px solid var(--rule-on-dark-soft);
}
 .program-glance dt {
	 font-size: 16px;
	 font-weight: 600;
	 color: var(--on-deep-muted);
	 margin-bottom: 2px;
}
/* 9.01:1 */
 .program-glance dd {
	 margin: 0;
	 font-size: 22px;
	 font-weight: 700;
	 line-height: 1.25;
	 color: var(--on-deep);
}
 .program-glance .program-glance-figure {
	 font-size: 44px;
	 line-height: 1;
	 color: var(--yellow);
}
/* 8.10:1 on deep */
 .program-locations {
	 list-style: none;
	 margin: 0;
	 padding: 0;
}
 .program-locations li + li {
	 margin-top: 2px;
}
 .program-glance .btn-yellow {
	 font-size: 19px;
}
 .program-glance a:focus-visible {
	 outline: 3px solid var(--focus-ring-on-dark);
	 outline-offset: 3px;
}
/* Secondary resource buttons in the card (Program Website, Catalog). Same pill and width as Apply Now, outlined instead of filled, Title Case instead of uppercase, one step down in size. Three cues of hierarchy, so they never read as a second primary action. Replaces the old .program-glance-links text list, which Mark flagged as looking like an afterthought. Nothing emits that class any more. Being a button also settles the underline question: a bordered pill is an unambiguous affordance, so it does not depend on an underline the way a link inside prose does (WCAG 1.4.1). Border is white on --primary-deep, 12.16:1, well past the 3:1 minimum for a UI boundary. */
 .btn-glance-resource {
	 font-size: 17px;
	 letter-spacing: 0;
	 margin-top: 8px;
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 gap: 8px;
}
/* Extra air between Apply Now and the resource group, so the card reads as "one primary action, then two references" rather than three equal pills. Spacing is set here rather than with Bootstrap's .mt-* utilities because those carry !important and cannot be tuned per position. */
 .program-glance .btn-yellow + .btn-glance-resource {
	 margin-top: 18px;
}
 .btn-glance-icon {
	 flex: 0 0 auto;
}
/* ---------- Rich text from WYSIWYG fields ---------- */
 .program-rich > :last-child {
	 margin-bottom: 0;
}
 .program-rich p, .program-rich li {
	 font-size: 1.15625rem;
	 line-height: 1.55;
	 color: var(--body-ink);
}
 .program-rich a {
	 color: var(--primary-color);
	 text-underline-offset: 3px;
}
 .program-rich ul {
	 padding-left: 1.25em;
}
/* Author headings inside a WYSIWYG field. The Format's #richText macro lands them at h3 under the section h2;
 without these rules legacy global.css styles them at 28px/700 Roboto Condensed. Same scale as .page-content in redesign-cascade.css. */
 .program-rich h3 {
	 color: var(--primary-color);
	 font-weight: 600;
	 font-size: 25px;
	 letter-spacing: var(--tracking-heading);
	 line-height: 1.2;
	 text-transform: none;
	 margin: 32px 0 10px;
}
 .program-rich h4 {
	 color: var(--heading-ink);
	 font-weight: 600;
	 font-size: 21px;
	 line-height: 1.25;
	 text-transform: none;
	 margin: 24px 0 8px;
}
 .program-rich > h3:first-child, .program-rich > h4:first-child {
	 margin-top: 0;
}
 .program-intro-body .program-rich > p:first-child {
	 font-size: 1.375rem;
	 line-height: 1.45;
}
/* ---------- Outcomes ---------- */
/* Soft band. Granite Gray body text is only 4.32:1 here, so this band's text switches to the deep ink (11.14:1) - see redesign-cascade.css. */
 .program-outcomes {
	 background: var(--fast-facts-bg-color);
	 padding: 72px 0;
}
 .program-outcomes .program-rich p, .program-outcomes .program-rich li {
	 color: var(--band-ink);
}
 .program-outcomes-list ul {
	 list-style: none;
	 padding: 0;
	 margin: 24px 0 0;
	 display: grid;
	 gap: 14px 48px;
}
 @media (min-width: 992px) {
	 .program-outcomes-list ul {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
 .program-outcomes-list li {
	 position: relative;
	 margin: 0;
	 padding: 4px 0 4px 22px;
	 line-height: 1.4;
}
 .program-outcomes-list li::before {
	 content: "";
	 position: absolute;
	 left: 0;
	 top: 8px;
	 bottom: 8px;
	 width: 5px;
	 border-radius: 3px;
	 background: var(--school-accent, var(--brand-blue));
}
/* ---------- Transfer + Cost ---------- */
 .program-details {
	 padding: 72px 0 24px;
}
 .program-card {
	 height: 100%;
	 padding: 32px;
	 border-radius: 30px;
	 border: 2px solid var(--light-blue);
	 background: var(--white);
}
 .program-card-heading {
	 font-size: 26px;
	 font-weight: 600;
	 letter-spacing: var(--tracking-heading);
	 color: var(--primary-color);
	 margin: 0 0 14px;
}
/* ---------- Career outlook ---------- */
/* Width cap (build 1008_3): the Lightcast widget is responsive INSIDE the iframe, but its two-column layout (career list + detail card) stops growing at about 660px, so a full-width frame left half the box empty on desktop. The frame is capped at that width and centred, and the Career Outlook heading is centred over it (Mark, 2026-10-08). Below the cap it is 100% wide, so tablet/phone are unchanged and the widget switches to its own one-column layout by itself (frame under about 600px). If a sliver of white shows at the right on desktop, lower --cc-max a few px;
 do not go under ~620px or desktop gets the phone layout. Tried and reverted (1008_2): Transfer + Cost on the left, Career on the right at >= 1200px. Pages with little Transfer/Cost text (Engineering APE: one line of cost) left a near-empty left column beside the ~800px-tall widget. Not worth revisiting unless the left side gets content that is the same size on every page. */
 .program-career {
	 padding: 72px 0 24px;
}
 .program-career .content-heading {
	 text-align: center;
}
 .program-career-frame {
	 --cc-max: 664px;
	 max-width: var(--cc-max);
	 margin-top: 20px;
	 margin-left: auto;
	 margin-right: auto;
	 border-radius: 30px;
	 overflow: hidden;
	 border: 2px solid var(--light-blue);
}
/* The Lightcast widget self-sizes: its scripts.js sets an inline height on the iframe in response to a postMessage from inside the frame. So this stylesheet must not set a height here. `min-height: 720px` used to be on this iframe and was removed 2026-09-17. min-height is a separate property from height, so it wins over the script's inline height whenever the widget is shorter than 720px - the frame would have been stuck tall with dead space below the content. `height: auto` lets the inline value govern. If scripts.js fails to load or the resize message never arrives, the iframe falls back to the HTML default of 150px - a loud, obvious failure rather than a silent layout bug. Verify on a real page. */
 .program-career-frame iframe {
	 display: block;
	 width: 100%;
	 height: auto;
	 border: 0;
}
/* Career Outlook caveat (2026-10-08, build 1008_4). Lightcast lists careers by occupation, so some need more education than this program provides (Business showed bachelor's-level salaries). Width matches the capped widget frame. Granite Gray body ink on white: 4.75:1. */
 .program-career-note {
	 max-width: 664px;
	 margin: 12px auto 0;
	 text-align: center;
	 font-style: italic;
	 font-size: 1rem;
	 line-height: 1.5;
	 color: var(--body-ink);
}
/* ---------- Additional ---------- */
 .program-additional {
	 padding: 72px 0 24px;
}
 .program-additional .program-rich {
	 max-width: 72ch;
}
/* ---------- Closing band ---------- */
/* Inset deep-blue card on white, so the CTA reads as the close of the page rather than the start of the blue footer. The footer link band is --primary-color;
 this card is --primary-deep, two steps darker. */
 .program-next {
	 padding: 72px 0 96px;
	 background: var(--white);
}
 .program-next-card {
	 background: var(--primary-deep);
	 border-radius: 30px;
	 padding: 48px 56px;
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 justify-content: space-between;
	 gap: 24px 40px;
	 border-bottom: 8px solid var(--yellow);
}
 .program-next h2 {
	 color: var(--on-deep);
	 font-size: 36px;
	 font-weight: 600;
	 letter-spacing: var(--tracking-heading);
	 margin: 0;
}
 .program-ctas {
	 display: flex;
	 flex-wrap: wrap;
	 gap: 16px;
}
 .program-ctas .btn {
	 font-size: 19px;
}
/* The band is now Apply-only. A lone pill at the old size looked stranded in a full-width band, so a single button gets more presence. Written as :only-child rather than a new class so the band recovers its old proportions automatically if a second CTA is ever added back. min-width, not padding: Bootstrap's .px-4 carries !important. */
 .program-ctas--band .btn:only-child {
	 font-size: 21px;
	 min-width: 240px;
}
 .btn-program-outline {
	 --bs-btn-color: var(--white);
	 --bs-btn-border-color: var(--white);
	 --bs-btn-hover-bg: var(--white);
	 --bs-btn-hover-color: var(--primary-color);
	 --bs-btn-hover-border-color: var(--white);
	 --bs-btn-active-bg: var(--on-deep-muted);
	 --bs-btn-active-color: var(--primary-deep);
	 border-width: 2px;
}
 @media (max-width: 600px) {
	 .program-intro {
		 padding: 36px 0 48px;
	}
	 .program-glance {
		 padding: 26px 22px;
	}
	 .program-glance .program-glance-figure {
		 font-size: 38px;
	}
	 .program-outcomes {
		 padding: 48px 0;
	}
	 .program-next {
		 padding: 48px 0 64px;
	}
	 .program-next-card {
		 padding: 32px 24px;
	}
	 .program-next h2 {
		 font-size: 28px;
	}
	 .program-ctas .btn {
		 width: 100%;
	}
}
/* ---------- SLCC Tech badge (2026-10-06, build 1006_1 + 1007_1) ---------- Outlined, so it never reads as a second credential bug next to the school-coloured fill (STPS bugs are Tech orange too). #B34700 is Tech orange darkened, same hue: 5.50:1 on white for text, border and icon. Raw Tech orange #E06837 is 3.38:1 and fails as text. */
 .program-tech {
	 margin: 0;
	 display: inline-flex;
	 align-items: center;
	 gap: 8px;
	 padding: 4px 16px;
	 border: 2px solid #B34700;
	 border-radius: 999px;
	 background: #fff;
	 color: #B34700;
	 font-size: 17px;
	 font-weight: 700;
	 line-height: 1.3;
}
 .program-tech-icon {
	 font-size: 1em;
	 line-height: 1;
}
/* ---------- At a Glance list row (2026-10-07, build 1007_1) ---------- Disciplines / Emphases / Pathways from program-keywords. A list can run to nine items, so it drops from the 22px/700 figure style to body size. Colour unchanged: --on-deep on --primary-deep, 12.16:1. */
 .program-glance dd.program-glance-list {
	 font-size: 17px;
	 font-weight: 600;
	 line-height: 1.45;
}