/**
 * Dynamic Programs Archive Block Styles
 *
 * BEM naming. Design-system variables only — no hardcoded values,
 * no CSS fallback duplicates.
 *
 * @package TMW\Programs
 * @since 1.3.0
 */

/* ============================================================
   Section header
   ============================================================ */

.programs-filter__section-header.section-header {
	margin-bottom: 0;
	text-align: center;
}

.programs-filter__section-title.section-title {
	color: var(--color-heading);
}

.programs-filter__section-subtitle.section-subtitle {
	max-width: var(--max-width-content-xl);
}

/* ============================================================
   Grid — uses theme .row / .col-* CSS Grid system
   ============================================================ */

.programs-filter__grid {
	padding: var(--space-xl) var(--space-md) var(--space-xs);
	margin-block-end: var(--space-md);
}

/* Equal-height cards — stretch cols so all cards in a row match height */
.programs-filter__grid .row {
	align-items: stretch;
}

.programs-filter__grid.is-list-view .row {
	--row-gap: 5px;
}

/* Row gap matches column gap (--row-gap is 20px from child theme :root) */
.programs-filter__grid .program-card-col {
	margin-block-end: var(--row-gap);
}

/* No-results spans the full 12-column row */
.programs-filter__no-results {
	grid-column: 1 / -1;
	font-size: var(--font-size-lg);
	opacity: 0.65;
	padding-block: var(--space-2xl);
	text-align: center;
}

.programs-filter__no-results[hidden] {
	display: none;
}

/* ============================================================
   Program cards
   ============================================================ */

.program-card {
	background-color: var(--color-white);
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	--row-gap: var(--space-sm);
	height: 100%;
	padding: var(--space-md);
	transition: box-shadow 0.2s ease;
}

.program-card:hover {
	box-shadow: var(--shadow-md);
}

.program-card-col.is-hidden,
.program-card-col.is-paged-out {
	display: none;
}

.program-card__eyebrow.eyebrow-text {
	margin-bottom: var(--space-xs);
}

.program-card__title {
	color: var(--color-heading);
	font-size: var(--font-size-h4);
	margin: 0 0 var(--space-xs) 0;
	text-wrap: balance;
}

/* Badge wrap: list-view circle — hidden in card view */
.program-card__badge-wrap {
	display: none;
}

/* Badge pill: inline in title for card view */
.program-card__badge {
	background-color: var(--color-secondary);
	border-radius: var(--radius-full);
	color: var(--color-white);
	display: inline-block;
	font-size: var(--font-size-small);
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-body);
	margin-inline-start: var(--space-xs);
	padding: 2px var(--space-sm);
	vertical-align: middle;
	white-space: nowrap;
}


.program-card__excerpt {
	margin: 0 0 var(--space-sm) 0;
}

.program-card__stats {
	border-top: 1px solid var(--color-border-light);
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-sm);
	margin: 0;
	margin-block-start: auto;
	margin-block-end: var(--space-xs);
	min-width: 0;
	padding-block-start: var(--space-md);
	padding-block-end: var(--space-2xs);
	width: 100%;
}

.program-card__stat {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-inline-end: 0;
}

.program-card__stat:last-child {
	padding-inline-end: 0;
}

.program-card__stat-value {
	color: var(--color-secondary);
	font-weight: var(--font-weight-medium);
	hyphens: auto;
	line-height: var(--line-height-tight);
	margin: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.program-card__stat-label {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	hyphens: auto;
	line-height: var(--line-height-tight);
	margin-block-start: var(--space-2xs);
	overflow-wrap: break-word;
	text-transform: uppercase;
}

/* ── Expanded card elements ──────────────────────────────── */

.program-card__career-outcomes {}

.program-card__career-outcomes ul {
	margin-inline-start: calc(-1 * var(--space-2xs));
}

.program-card__career-outcomes-heading {
	font-weight: var(--font-weight-semibold);
	margin: 0 0 var(--space-xs);
	color: var(--color-secondary);
}

.program-card__career-outcomes p {
	margin-block-end: var(--space-xs);
}

.program-card__career-outcomes p:last-child {
	margin-block-end: 0;
}

/* Inline bullet list — items wrap like text, separated by • */
.program-card__career-outcomes ul,
.program-card__career-outcomes ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 var(--space-xs);
	padding: 0;
}

.program-card__career-outcomes ul:last-child,
.program-card__career-outcomes ol:last-child {
	margin-block-end: 0;
}

.program-card__career-outcomes li {
	align-items: baseline;
	display: flex;
	margin-bottom: 0;
	padding-bottom: var(--space-sm);
	margin-inline-end: var(--space-xs);
}

.program-card__career-outcomes li::before {
	content: "•";
	margin-inline-start: 0;
	margin-inline-end: var(--space-2xs);
	color: var(--color-secondary);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
}

.program-card__related-links {
	border-top: 1px solid var(--color-border);
	font-size: var(--font-size-small);
	padding-block-start: var(--space-sm);
	margin-top: var(--space-md);
}

.program-card__related-links a {
	display: block;
	padding-block: 2px;
	font-weight: var(--font-weight-medium) !important;
	text-decoration: none;
}

.program-card__related-links a:hover {
	text-decoration: underline;
}

.program-card__related-links p {
	margin: 0;
}

/* ── CTA ────────────────────────────────────────────────── */

.program-card__cta {
	align-self: stretch;
	margin-block-start: auto;
	text-align: center;
}

/* ============================================================
   Load More / Pagination
   ============================================================ */

.programs-archive__load-more {
	padding-block-end: 0;
	text-align: center;
}

.programs-archive__load-more-btn {
	min-width: 200px;
}

.programs-archive__pagination {
	padding-block-end: var(--space-3xl);
	text-align: center;
}

.programs-archive__page-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.programs-archive__page-btn {
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--font-size-sm);
	min-width: 2.5rem;
	padding: var(--space-xs) var(--space-sm);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.programs-archive__page-btn:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.programs-archive__page-btn.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	font-weight: var(--font-weight-bold);
}

/* ============================================================
   List view — applied via JS when view toggle switches to list
   ============================================================ */

.programs-filter__grid.is-list-view .program-card-col {
	grid-column: span 12;
}

.programs-filter__grid.is-list-view .program-card {
	display: grid;
	gap: 0 var(--space-md);
	grid-template-columns: 80px 2fr 4fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"badge body   excerpt cta"
		"badge stats  stats   cta";
	padding: var(--space-md) var(--space-lg);
}

/* Badge column — pill badge in its own column in list view */
.programs-filter__grid.is-list-view .program-card__badge-wrap {
	align-items: center;
	align-self: center;
	display: flex;
	grid-area: badge;
	grid-row: 1 / -1;
	justify-content: center;
}

/* Hide the duplicate pill badge inside the title in list view */
.programs-filter__grid.is-list-view .program-card__title .program-card__badge {
	display: none;
}

.programs-filter__grid.is-list-view .program-card__body {
	align-self: center;
	gap: var(--space-2xs);
	grid-area: body;
	padding-block-end: var(--space-sm);
}

.programs-filter__grid.is-list-view .program-card__eyebrow {
	margin: 0;
}

.programs-filter__grid.is-list-view .program-card__title {
	font-size: var(--font-size-h5);
	margin-bottom: 0;
}

.programs-filter__grid.is-list-view .program-card__excerpt {
	align-self: end;
	grid-area: excerpt;
	flex-grow: unset;
	margin: 0;
	padding-block-end: var(--space-sm);
}

.programs-filter__grid.is-list-view .program-card__stats {
	align-items: flex-start;
	border-top: 1px solid var(--color-border-light);
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--space-lg);
	grid-area: stats;
	margin-block-start: 0;
	padding-block-start: var(--space-sm);
	padding-block-end: var(--space-md);
}

.programs-filter__grid.is-list-view .program-card__stat {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: baseline;
	gap: var(--space-2xs);
	padding-inline-end: 0;
}

.programs-filter__grid.is-list-view .program-card__stat-value {
	font-size: var(--font-size-body);
}

.programs-filter__grid.is-list-view .program-card__stat-label {
	font-size: var(--font-size-small);
	margin-top: 0;
}

.programs-filter__grid.is-list-view .program-card__cta {
	align-self: center;
	grid-area: cta;
	grid-row: 1 / -1;
	margin-block-start: 0;
	min-width: 140px;
	white-space: nowrap;
}

/* ============================================================
   Responsive
   Col breakpoints handled by theme grid classes:
   .col-4 col-md-6 col-sm-12 (basic)  and  .col-6 col-sm-12 (expanded)
   ============================================================ */

@media (width <= 768px) {
	.program-card {
		padding: var(--space-lg);
	}
}