/**
 * Module: Programs
 *
 * A filter row above a three-up grid of program cards, matching the ladder `projects` uses —
 * 3 / 2 / 1. Explicit tracks rather than `var(--grid)`: that token is the full twelve-column
 * template, so nesting it inside repeat() resolves to a single column.
 */

.module.programs .intro {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	margin-bottom: var(--text-spacing-large);
	max-width: 990px;
}

/* The eyebrow stands off the heading further than the deck sits under it. */
.module.programs .intro > .eyebrow {
	margin-bottom: var(--text-spacing-xxsmall);
}

/* Everything in the lockup is spaced by the flex gap, so nothing may bring a margin of its own
   — the eyebrow and the deck's paragraphs are <p>, and the UA's 1em was landing on top of it. */
.module.programs .intro > *,
.module.programs .intro .description > * {
	margin: 0;
}

.module.programs .intro .description > * + * {
	margin-top: var(--text-spacing-xsmall);
}

/* A grid rather than a row, so the selects share one width instead of each shrink-wrapping its
   own longest term — `1fr` tracks in a shrink-to-fit container all take the widest of them. The
   label sits in the one explicit track and keeps its own. */
.module.programs .filters-bar {
	align-items: center;
	column-gap: var(--text-spacing-xsmall);
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	grid-template-columns: auto;
	margin-bottom: var(--module-spacing-medium);
	row-gap: var(--text-spacing-xsmall);
	width: max-content;
}

.module.programs .filters-bar > .eyebrow {
	color: var(--charcoal);
	margin: 0;
}

/* The results list by its Jazzy attribute, not `.results ul`: the pager Jazzy prints beside it
   is a <ul> too, and the card grid was landing on it — three columns, no top margin, and the
   global rule that hides a one-page pager overruled by this display. */
.module.programs .results > [jx-form-results-items] {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/*** Card ***/

.module.programs {
	/* The comp draws this headline in the body colour (#3d443e), not the programme's
	   heading colour. */
	--heading-color: currentColor;
}

.module.programs .card.program {
	/* The comp fills the card rather than leaving it white. --tea-green-pale is a step lighter
	   than the fill it draws (#f2f5e8 against #e6ebd9), so the value is stated here until a
	   token answers for it. It belongs to the card rather than to a programme, so it holds
	   under every palette. */
	background: #e6ebd9;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	text-decoration: none;
	transition: background-color var(--motion) var(--ease-out);
}

/* A step up from the fill rather than a tint of it — the comp's own, like the fill itself. */
.module.programs .card.program:hover,
.module.programs .card.program:focus-visible {
	background: #edf0e4;
}

.module.programs .card.program .content {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	padding: var(--text-spacing-medium);
}

.module.programs .card.program .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.module.programs .card.program .article-title {
	margin: 0;
}

.module.programs .card.program .meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.programs .card.program .meta li + li::before {
	background: var(--charcoal-25, rgb(from var(--charcoal) r g b / .25));
	content: '';
	display: inline-block;
	height: 12px;
	margin-right: var(--text-spacing-xxsmall);
	vertical-align: -1px;
	width: 2px;
}

.module.programs .card.program .location {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
	margin: 0;
}

.module.programs .card.program .meta .eyebrow {
	color: var(--charcoal);
}

/* The three facts under the title lift together, the way a card's own copy does elsewhere.
   A translate rather than a margin: the card's height and the arrow it holds must not move. */
.module.programs .card.program :is(.meta, .location, .deck) {
	transition: transform var(--motion) var(--ease-out);
}

.module.programs .card.program:hover :is(.meta, .location, .deck),
.module.programs .card.program:focus-visible :is(.meta, .location, .deck) {
	transform: translateY(-4px);
}

.module.programs .card.program .location .icon {
	flex-shrink: 0;
}

.module.programs .card.program .deck p {
	margin: 0;
}

/* No rule above the button and no visible label — the comp keeps "View program & request
   info" in the component at zero opacity, as a spacer holding the arrow to the right edge.
   The template hides it the accessible way instead, so the link keeps the phrase. */
.module.programs .card.program .bottom {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xsmall);
	justify-content: space-between;
	padding: 0 var(--text-spacing-xsmall) var(--text-spacing-xsmall) var(--text-spacing-medium);
}

/* Flush left with the copy above it, on the tertiary button's cut — which is the eyebrow's
   small cut to the value. Held in flow at rest so the arrow does not travel when it arrives. */
.module.programs .card.program .bottom .label {
	color: var(--charcoal);
	opacity: 0;
	transition: opacity var(--motion) var(--ease-out);
}

.module.programs .card.program:hover .bottom .label,
.module.programs .card.program:focus-visible .bottom .label {
	opacity: 1;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	.module.programs .results > [jx-form-results-items] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.programs .results > [jx-form-results-items] {
		gap: 20px;
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked: one column, and the label leads it. */
	.module.programs .filters-bar {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		width: auto;
	}

	/* The title and the row that reads off it are one thought; the rows below keep the stack's own
	   step, so only that pair closes. */
	.module.programs .card.program .text > .article-title + .meta {
		margin-top: calc(var(--text-spacing-xxsmall) - var(--text-spacing-xsmall));
	}

}

/* The card's pill and heading, per the comp.

   The global `.pill` is `--tea-green` on `--charcoal`; this card's is filled `--fern` with the
   text reversed out. And the heading is the body colour, not the programme's heading colour —
   under IBT that would turn it green, where the comp keeps it dark — pill #637a36 on
   #ffffff, heading #3d443e. */

.module.programs .card.program .pill {
	background: var(--fern);
	color: var(--white);
}

.module.programs .card.program .text > :is(h2, h3, h4) {
	color: var(--charcoal);
	transition: color var(--motion) var(--ease-out);
}

/* The arrow answers to the card, not to itself: it is the card's affordance and the whole card
   is the link, so hovering anywhere in it is what lights the arrow. */
.module.programs .card.program:hover .text > :is(h2, h3, h4),
.module.programs .card.program:focus-visible .text > :is(h2, h3, h4) {
	color: var(--card-hover-color);
}

.module.programs .card.program:hover .btn.secondary .arrow,
.module.programs .card.program:focus-visible .btn.secondary .arrow {
	background: var(--sun-light);
}