/**
 * Curriculum explorer — W3 / P-24. Plugin v0.3.3.
 *
 * P-16.2's card declarations, with one deliberate change: the `opacity` is gone from
 * `.esls-cc-code` and `.esls-cc-credits`. Opacity composites the text against the card
 * fill, so the token's own 5.27:1 arrived on screen as 2.89:1 and 3.50:1 — both AA
 * failures on the two smallest lines in the widget. Removing it costs nothing visually
 * on a 12px mono code. This is V-17, and the shortcode's own sheet is patched to match
 * in the same release so the BBA page is not inconsistent with itself.
 *
 * Tokens only. No hardcoded hex outside the white card fill P-16.2 specifies, no
 * external request, no font family beyond the three already loaded (C-8).
 */

/* -------------------------------------------------------------------------
   Root
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer {
	text-align: left;
}

.esls-curriculum-explorer__heading {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	color: var(--esls-text-primary);
	margin: 0 0 12px;
}

.esls-curriculum-explorer__intro {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--esls-text-secondary);
	margin: 0 0 24px;
	max-width: 62ch;
}

/* Screen-reader-only. Local to this widget, following the W1 precedent;
   `.esls-hidden` in the token sheet is the F-B fallback mechanism, a different job. */

.esls-curriculum-explorer .esls-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The filter bar, the count and the toggles all ship `hidden` and are revealed by the
   script. Belt to that braces: `display: none` wins even where a later rule sets a
   flex or grid display on the same element. */

.esls-curriculum-explorer [hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Filters (§4.8 — they wrap, they are never a horizontal scroll rail)
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	margin: 0 0 16px;
}

.esls-curriculum-explorer__filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.esls-curriculum-explorer__filter {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--esls-text-primary);
	background: #FFFFFF;
	/* Not `--esls-border-warm`. That token measures 1.65:1 on white, which is fine for
	   the card — a decorative separator around a block that is already distinguished by
	   fill and padding — and not fine for a control, where the boundary is what
	   identifies the component (1.4.11, 3:1). `--esls-text-tertiary` scores 5.27:1 on
	   the button's own white fill and 4.50:1 against the cream section behind it. */
	border: 1px solid var(--esls-text-tertiary);
	border-radius: var(--radius-md);
	/* 44px minimum touch target: 13px + 13px + 18px line box. */
	padding: 13px 16px;
	min-height: 44px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.esls-curriculum-explorer__filter:hover {
	border-color: var(--esls-blue-800);
}

.esls-curriculum-explorer__filter[aria-pressed="true"] {
	background: var(--esls-blue-800);
	border-color: var(--esls-blue-800);
	color: #FFFFFF;
}

.esls-curriculum-explorer__count {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 14px;
	color: var(--esls-text-secondary);
	margin: 0 0 20px;
	min-height: 1.4em; /* No reflow when the string changes length. */
}

/* -------------------------------------------------------------------------
   Grid — P-16.3
   ------------------------------------------------------------------------- */

.esls-curriculum-grid {
	display: grid;
	grid-template-columns: repeat(var(--esls-course-cols, 3), 1fr);
	gap: 32px;
	text-align: left;
}

.esls-curriculum-explorer .esls-year-col {
	display: flex;
	flex-direction: column;
	/* Tight stacking is the pattern — a list of records, not a card grid.
	   Unchanged at every breakpoint. */
	gap: 2px;
}

.esls-curriculum-explorer .esls-cc-year {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--esls-text-tertiary);
	margin: 0 0 10px;
}

/* A year credential — "Certificate of Higher Education in Business Administration
   (CertHE-BA)" — cannot carry .14em uppercase at 187px of tablet column. The modifier
   relaxes the tracking and drops the caps; the short `Year 3` fallback keeps P-16.3's
   own typography exactly. */

.esls-curriculum-explorer .esls-cc-year--long {
	letter-spacing: .02em;
	text-transform: none;
	font-size: 13px;
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
   Card — P-16.2, minus the opacity (V-17)
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer .esls-course-card {
	background: #FFFFFF;
	border: 1px solid var(--esls-border-warm);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	text-align: left;
}

.esls-curriculum-explorer .esls-course-card p {
	margin: 0;
}

.esls-curriculum-explorer .esls-course-card .esls-cc-code {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--esls-text-tertiary);
	margin-bottom: 2px;
}

.esls-curriculum-explorer .esls-course-card .esls-cc-title {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--esls-text-primary);
	margin-bottom: 2px;
}

.esls-curriculum-explorer .esls-course-card .esls-cc-credits {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 12px;
	color: var(--esls-text-tertiary);
}

/* -------------------------------------------------------------------------
   Disclosure
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--esls-blue-800);
	background: none;
	border: 0;
	/* Negative inline margin keeps the label optically flush with the card text while
	   the hit area still clears 44px. */
	margin: 6px 0 0 -8px;
	padding: 12px 8px;
	min-height: 44px;
	cursor: pointer;
}

.esls-curriculum-explorer__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.esls-curriculum-explorer__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.esls-curriculum-explorer__toggle:hover .esls-curriculum-explorer__toggle-label {
	text-decoration: underline;
}

.esls-curriculum-explorer__body {
	margin-top: 4px;
}

.esls-curriculum-explorer__summary,
.esls-curriculum-explorer__content {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--esls-text-secondary);
}

.esls-curriculum-explorer__content > * {
	margin: 0 0 8px;
}

.esls-curriculum-explorer__content > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Capstone
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer__capstone {
	margin-top: 32px;
	max-width: 520px;
}

.esls-curriculum-explorer .esls-course-card--capstone {
	background: var(--esls-cream-warm);
	border-color: var(--esls-blue-800);
}

/* -------------------------------------------------------------------------
   Editor-only notice (§4.7 `empty`)
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer--notice {
	font-family: "Source Sans 3", system-ui, sans-serif;
	border: 1px dashed var(--esls-border-warm);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	background: var(--esls-cream-alt);
}

.esls-curriculum-explorer__notice-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--esls-text-tertiary);
	margin: 0 0 8px;
}

.esls-curriculum-explorer__notice-body {
	font-size: 15px;
	color: var(--esls-text-primary);
	margin: 0 0 8px;
}

.esls-curriculum-explorer__notice-foot {
	font-size: 13px;
	color: var(--esls-text-secondary);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Focus — §1.7
   Orange fails the 3:1 non-text minimum on this palette (2.96:1 on white,
   2.79:1 on cream). Blue-800 scores 9.76:1 on cream and carries focus here.
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer :focus-visible {
	outline: 2px solid var(--esls-blue-800);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Responsive — §4.8. Settles P-16.4's open tablet question at two columns.
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.esls-curriculum-explorer .esls-curriculum-grid {
		grid-template-columns: repeat(var(--esls-course-cols-md, 2), 1fr);
	}
}

@media (max-width: 767px) {
	.esls-curriculum-explorer .esls-curriculum-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.esls-curriculum-explorer__filters {
		gap: 16px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.esls-curriculum-explorer__filter,
	.esls-curriculum-explorer__toggle::after {
		transition: none;
	}
}

/* §9 (v0.3.7) — filter hover, defended against theme button styles.

   The base `:hover` rule below §80 changes only `border-color`, on the assumption
   that nothing else claims `button`. On this build something does: an unhovered
   filter is correct, and hovering paints it with a colour from outside the ESLS
   palette entirely. A bare element selector (`button:hover`) beats a single class,
   and Elementor Pro Theme Styles ship `!important`, so neither specificity alone
   nor a plain declaration is reliable here.

   Same reasoning as esls-theme-customizer.css §10: `!important` is the house answer
   when the competing rule also uses it. The unpressed hover is white fill with a
   blue-800 border; the pressed hover stays blue-800 so the active filter does not
   flicker back to white under the cursor. */

.esls-curriculum-explorer .esls-curriculum-explorer__filter:hover,
.esls-curriculum-explorer .esls-curriculum-explorer__filter:focus,
.esls-curriculum-explorer .esls-curriculum-explorer__filter:focus-visible,
.esls-curriculum-explorer .esls-curriculum-explorer__filter:active {
	background-color: #FFFFFF !important;
	border-color: var(--esls-blue-800) !important;
	color: var(--esls-text-primary) !important;
}

.esls-curriculum-explorer .esls-curriculum-explorer__filter[aria-pressed="true"]:hover,
.esls-curriculum-explorer .esls-curriculum-explorer__filter[aria-pressed="true"]:focus,
.esls-curriculum-explorer .esls-curriculum-explorer__filter[aria-pressed="true"]:focus-visible,
.esls-curriculum-explorer .esls-curriculum-explorer__filter[aria-pressed="true"]:active {
	background-color: var(--esls-blue-800) !important;
	border-color: var(--esls-blue-800) !important;
	color: #FFFFFF !important;
}

/* -------------------------------------------------------------------------
   X-6 — flat-programme column fix (v0.3.9, P2)
   A flat programme (group_by none) renders ONE unlabelled `.esls-year-col`
   wrapping every card, but the grid still lays out `repeat(N, 1fr)` tracks —
   the whole course list lands in track 1 at 1/N width. Grouped programmes
   (BBA: three year columns) fill their tracks and never exposed it; the MBA
   was the first flat render. The lone column spans all tracks and becomes a
   balanced CSS multi-column flow: column-major reading order matching the
   BBA year columns, 2px record stacking preserved (margin replaces the flex
   gap, which a block flow drops). Grouped markup is untouched — three
   siblings can never match :only-child.
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer .esls-curriculum-grid > .esls-year-col:only-child {
	display: block;
	grid-column: 1 / -1;
	column-count: var(--esls-course-cols, 3);
	column-gap: 32px;
}
.esls-curriculum-explorer .esls-curriculum-grid > .esls-year-col:only-child .esls-course-card {
	break-inside: avoid;
	margin-bottom: 2px;
}
@media (max-width: 1024px) {
	.esls-curriculum-explorer .esls-curriculum-grid > .esls-year-col:only-child {
		column-count: var(--esls-course-cols-md, 2);
	}
}
@media (max-width: 767px) {
	.esls-curriculum-explorer .esls-curriculum-grid > .esls-year-col:only-child {
		column-count: 1;
	}
}

/* -------------------------------------------------------------------------
   P-34 — All-programmes staircase (catalogue mode, v0.3.15, session P6)

   The site's staircase device applied to structure: each programme tread steps
   right of the one before it along a blue-to-orange rail. Server sets
   `data-step` (0–2); the indent is a presentation of registry order, so it
   flattens wherever it would fight the content for room — tablet widths, and
   under an active filter (a lone surviving tread must not float mid-page).

   Contrast, measured against the cream-alt tread fill (#F2EDE0):
     row index      blue-600  5.55:1   (blue-400 measured 3.38 — small-text fail)
     capstone row   orange-800 7.37:1  (orange-600 measured 3.96 — fail)
     tread meta     text-tertiary 4.50:1
     tread accents  blue-400 3.38 / orange-600 3.96 — both clear the 3:1
                    non-text minimum (orange-400 measured 2.53 and does not)
   The mockup's blue-400 indices and orange-600 capstone shift one stop darker
   here; that is the gate deciding, not a design change.
   ------------------------------------------------------------------------- */

.esls-curriculum-explorer__stair {
	position: relative;
	padding-left: 26px;
}

.esls-curriculum-explorer__stair::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(var(--esls-blue-400), var(--esls-orange-600));
}

.esls-curriculum-explorer__tread {
	background: var(--esls-cream-alt);
	border: 1px solid var(--esls-border-warm);
	border-left: 4px solid var(--esls-blue-400);
	padding: 26px 30px;
	margin: 0 0 40px 0;
}

.esls-curriculum-explorer__tread[data-step="1"] {
	margin-left: 64px;
}

.esls-curriculum-explorer__tread[data-step="2"] {
	margin-left: 128px;
}

.esls-curriculum-explorer__tread--dba {
	/* Orange-400 measures 2.53:1 on the tread fill and fails the 1.4.11 3:1
	   non-text minimum; orange-600 passes at 3.96. */
	border-left-color: var(--esls-orange-600);
}

/* An active filter flattens the staircase. The step attribute stays in the DOM;
   only its presentation yields. */

.esls-curriculum-explorer--stair[data-state="filtered"] .esls-curriculum-explorer__tread {
	margin-left: 0;
}

.esls-curriculum-explorer__tread-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 14px;
}

.esls-curriculum-explorer__tread-head p {
	margin: 0;
}

.esls-curriculum-explorer__tread-name {
	font-family: "Fraunces", Georgia, serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--esls-blue-900);
}

.esls-curriculum-explorer__tread-meta {
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	color: var(--esls-text-tertiary);
}

.esls-curriculum-explorer__tread-full {
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--esls-text-secondary);
	flex-basis: 100%;
}

.esls-curriculum-explorer__tread-list {
	column-count: 2;
	column-gap: 36px;
}

.esls-curriculum-explorer__row {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 7px 0;
	break-inside: avoid;
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--esls-text-primary);
}

.esls-curriculum-explorer__row-index {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	line-height: 1.8;
	color: var(--esls-blue-600);
	min-width: 22px;
	flex-shrink: 0;
}

.esls-curriculum-explorer__row--capstone,
.esls-curriculum-explorer__row--capstone .esls-curriculum-explorer__row-index {
	color: var(--esls-orange-800);
}

.esls-curriculum-explorer__row--capstone .esls-curriculum-explorer__row-title {
	font-weight: 600;
}

@media (max-width: 1024px) {
	.esls-curriculum-explorer__tread[data-step="1"] {
		margin-left: 32px;
	}

	.esls-curriculum-explorer__tread[data-step="2"] {
		margin-left: 64px;
	}
}

@media (max-width: 767px) {
	.esls-curriculum-explorer__stair {
		padding-left: 18px;
	}

	.esls-curriculum-explorer__tread {
		padding: 20px 18px;
	}

	.esls-curriculum-explorer__tread[data-step="1"],
	.esls-curriculum-explorer__tread[data-step="2"] {
		margin-left: 0;
	}

	.esls-curriculum-explorer__tread-list {
		column-count: 1;
	}
}