/* ===========================================================================
   Programmes index.

   Five rows, all the same shape. That uniformity is the point and not a lack of
   invention: every row carries the same five facts — category, who it is for,
   what is included, what it costs, how to start — and this page's job is to let
   someone compare them and pick one. Alternating the image side would read as a
   marketing narrative and make the comparison harder.
   =========================================================================== */

.fts-progs-list {
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2.4vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Row ------------------------------------------------------------------ */

.fts-prow {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	border: 1px solid var(--fts-line);
	border-radius: 0.9rem;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.fts-prow:hover {
	border-color: var(--fts-mist);
	box-shadow: 0 18px 44px -20px rgba(22, 48, 94, 0.45);
}

/* The image needs a frame it can fill absolutely. `height: 100%` on an <img>
   that is itself the grid item resolves against a grid whose height is
   content-driven — so it computes to auto, the image falls back to its intrinsic
   ratio, and it ends up shorter than the row: measured 387px of photograph in a
   481px row, with 94px of white under it. A block-level div stretches to the row
   without any of that. */
.fts-prow__frame {
	position: relative;
	min-height: 17rem;
	background: var(--fts-paper);
}

.fts-prow__shot {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The subject sits above centre in the cockpit shots; without this the crop
	   takes the yoke and loses the panel. */
	object-position: center 42%;
}

.fts-prow__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.4rem, 3.2vw, 2.25rem);
}

/* --- Badges --------------------------------------------------------------- */

.fts-prow__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

/* Two badge types, told apart by fill rather than by text colour: the draft set
   the category in --fts-blue on pale blue, which measures 4.45:1 and misses AA
   for 11px text. Navy on the same pale blue is 11.2:1, slate on neutral grey is
   5.5:1, and the blue/neutral fills still separate them at a glance. */
.fts-tag {
	padding: 0.32rem 0.72rem;
	border-radius: 100px;
	background: #f0f2f6;
	font-family: var(--fts-font);
	font-weight: 700;
	font-size: 0.68rem;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fts-slate);
	white-space: nowrap;
}

.fts-tag--cat {
	background: var(--fts-pale);
	color: var(--fts-navy);
}

/* --- Row type ------------------------------------------------------------- */

.fts-prow__h {
	margin: 0 0 0.5rem;
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.4vw, 2.1rem);
	line-height: 1.02;
	letter-spacing: -0.005em;
	color: var(--fts-navy);
	text-wrap: balance;
}

.fts-prow__lede {
	margin: 0 0 1.1rem;
	font-size: clamp(0.94rem, 1.7vw, 0.98rem);
	line-height: 1.62;
	color: var(--fts-slate);
	text-wrap: pretty;
}

.fts-prow .fts-ticks { width: 100%; }

/* --- Price and action ----------------------------------------------------- */

/* `margin-top: auto` pins this to the bottom of the body, so the price and the
   button sit on one line across all five rows however much copy is above them.
   That alignment is what makes the set scannable as a comparison. */
.fts-prow__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.85rem 1.1rem;
	width: 100%;
	margin-top: auto;
	padding-top: 1.25rem;
}

.fts-price { margin: 0; display: grid; }

.fts-price__label {
	font-size: 0.76rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
	/* --fts-slate-soft, not the draft's #98a0ae, which measured 2.4:1 here. */
	color: var(--fts-slate-soft);
}

.fts-price__val {
	font-family: var(--fts-font-cond);
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 1.85rem);
	line-height: 1.1;
	letter-spacing: 0.005em;
	color: var(--fts-navy);
	/* Prices are compared down the column, so the digits have to line up. */
	font-variant-numeric: tabular-nums;
}

.fts-prow__foot .fts-btn { flex: none; gap: 0.5rem; }

/* --- Breakpoints ---------------------------------------------------------- */

/* One column below 48rem. The photograph keeps a fixed band height here rather
   than matching the body, which at this width would be a 500px-tall image
   before a single word of the programme. */
@media (max-width: 48rem) {
	.fts-prow { grid-template-columns: 1fr; }

	.fts-prow__frame {
		height: clamp(11rem, 42vw, 14rem);
		min-height: 0;
	}
}

/* On the narrowest phones the price and the button stop fitting side by side;
   stacking them full-width beats letting the button shrink under 44px. */
@media (max-width: 25rem) {
	.fts-prow__foot { flex-direction: column; align-items: stretch; }
	.fts-prow__foot .fts-btn { justify-content: center; }
}