/**
 * Meridian Sections — Featured Projects
 *
 * Figma 1:1137. A horizontally scrolling track of project cards with prev/next
 * paging and a range counter.
 *
 * The card is the Market Projects project card at a smaller size —
 * market-projects.css is a declared dependency and the four values that differ
 * are set as custom properties below, so the two treatments cannot drift.
 *
 * Scrolling is native: scroll-snap on a grid track. The buttons only drive
 * scrollLeft, so touch, trackpad and keyboard all work whether or not the
 * script runs — which is why the nav starts hidden and JS reveals it.
 */

.md-section.md-fp {
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 2.5rem);
	background-color: var(--md-white, #fff);
}

/* 48px between the head and the cards, per the comp's pt-48 wrapper. Only when
 * a head precedes them. */
.md-fp__head + .md-fp__track {
	margin-block-start: var(--md-space-xl, 3rem);
}

/* --- Track --------------------------------------------------------------- */
.md-fp__track {
	/*
	 * Column count is a custom property so the breakpoints and the editor
	 * control both feed the same formula. The gaps are subtracted before
	 * dividing — forgetting that is what silently collapses a track to fewer
	 * cards than asked for.
	 */
	--md-fp-visible: 1.15;

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--md-fp-visible) - 1) * var(--md-fp-gap, 1.25rem)) /
			var(--md-fp-visible)
	);
	gap: var(--md-fp-gap, 1.25rem); /* 20px */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/*
	 * Room for the focus ring on a card, which would otherwise be clipped by the
	 * scroll container, and for the scrollbar gutter.
	 */
	padding-block-end: var(--md-space-2xs, 0.5rem);
}

.md-fp__item {
	scroll-snap-align: start;
	/* A grid item defaults to stretch, which is what makes every card in the
	 * row the same height as the tallest. */
	min-width: 0;
}

/* --- Card ---------------------------------------------------------------- */
.md-fp__card {
	/*
	 * 337.66 × 450.22 in the comp — 3:4. Stated as a ratio rather than a height
	 * so the card keeps its proportion at every column count.
	 */
	aspect-ratio: 3 / 4;

	/* The four values that differ from the Market Projects card. */
	--md-pc-pad: var(--md-fp-gap, 1.25rem); /* 20px */
	/*
	 * 100%, not 0.
	 *
	 * The Market Projects card sets a 287px floor here; this one takes its height
	 * from the ratio above and so needs no floor of its own — but zero was the wrong
	 * way to say that. It overrode the shared `min-height: 100%` on
	 * .md-mp__card-body, collapsing the body to the height of its own text, which
	 * left `justify-content: flex-end` no free space to push into. Measured: an 83.6px
	 * body sitting at the TOP of a 622.2px card with 538.6px of nothing under it.
	 *
	 * 100% fills the card without imposing a pixel floor, which is what "height comes
	 * from the ratio" was meant to mean, and the meta and title land on the bottom
	 * edge as the comp draws them.
	 */
	--md-pc-body-min: 100%;
	--md-pc-title: 0.9375rem; /* 15px */
	--md-pc-title-gap: var(--md-space-2xs, 0.5rem); /* 8px */
	--md-pc-disc: 2.25rem; /* 36px */
}

/* --- Nav ---------------------------------------------------------------- */
.md-fp__nav {
	display: flex;
	align-items: center;
	gap: var(--md-space-sm, 1rem); /* 16px */
	margin-block-start: var(--md-space-lg, 2rem);
}

.md-fp__btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem; /* 40px */
	height: 2.5rem;
	padding: 0;
	border: 2px solid var(--md-blue, #006bb6);
	border-radius: var(--md-radius-pill, 999px);
	background-color: transparent;
	color: var(--md-blue, #006bb6);
	cursor: pointer;
	transition: background-color var(--md-transition, 200ms ease),
		border-color var(--md-transition, 200ms ease),
		color var(--md-transition, 200ms ease);
}

.md-fp__btn svg {
	width: 1rem; /* 16px */
	height: 1rem;
	fill: none;
}

.md-fp__btn:hover:not(:disabled) {
	background-color: var(--md-blue, #006bb6);
	color: var(--md-white, #fff);
}

/*
 * The comp's disabled prev: grey border, grey glyph. A disabled control is
 * exempt from the 1.4.11 contrast minimum, which is what lets this grey be as
 * quiet as drawn.
 */
.md-fp__btn:disabled {
	border-color: var(--md-color-border, #d9d9d9);
	color: var(--md-color-border, #d9d9d9);
	cursor: default;
}

.md-fp__count {
	margin: 0;
	color: var(--md-blue, #006bb6);
	font-size: 0.875rem; /* 14px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.4286; /* 20 / 14 */
}

.md-fp__empty {
	margin: 0;
	padding-block: var(--md-space-2xl, 4rem);
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	text-align: center;
}

.md-fp__notice {
	margin: 0;
	padding: var(--md-space-md, 1.5rem);
	border: var(--md-border-width, 1px) dashed var(--md-color-border, #d9dde3);
	border-radius: var(--md-radius-md, 0.5rem);
	color: var(--md-color-text-muted, rgba(10, 22, 40, 0.7));
	text-align: center;
}

/* --- Column counts ------------------------------------------------------- */
/*
 * A stack on a phone — see the block below; two cards from 768px; the editor's
 * choice once there is room for the comp's three.
 *
 * The two-card step starts at 48em rather than 36em so each range is set exactly
 * once. Overlapping it with the stacking query would leave two single-class rules
 * on .md-fp__track deciding by source order, which is the sort of thing that
 * silently reverses when a file is reordered.
 */
@media (min-width: 48em) {
	.md-fp__track {
		--md-fp-visible: 2;
	}
}

@media (min-width: 62em) {
	.md-fp__track {
		--md-fp-visible: var(--md-fp-cols, 3);
	}
}

/* --- Stacked ------------------------------------------------------------- */
/*
 * On a phone the cards stack and the carousel stops being a carousel: a
 * horizontal track on a 390px screen shows one and a sliver, and paging through
 * it by thumb is worse than scrolling the page.
 *
 * The nav goes with it. It is rendered hidden and only revealed by
 * featured-projects.js when the track actually overflows, so a stack would drop
 * the arrows on its own — but it is switched off here as well so the behaviour
 * does not depend on the script running, and cannot flash in before it does.
 */
@media (max-width: 47.9375em) {
	.md-fp__track {
		/* Rows, not columns. grid-auto-columns is left over from the track and
		 * would size a column that no longer exists. */
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: minmax(0, 1fr);
		/* Nothing overflows now, so the scroll container and its snap points go. */
		overflow-x: visible;
		scroll-snap-type: none;
		/* That padding was gutter for the scrollbar and the focus ring. */
		padding-block-end: 0;
	}

	.md-fp__item {
		scroll-snap-align: none;
	}

	.md-fp__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-fp__track {
		scroll-behavior: auto;
	}

	.md-fp__btn {
		transition: none;
	}
}