/*
 * Feature / benefit card. design/DESIGN-SYSTEM.md §4.4, hover inventory §6.1.
 *
 * Image well, the card's signature 3px red rule, then the body. Body padding is
 * 26px, the standardised card padding from §8 row 3 (the prototype's 24px is a
 * documented inconsistency).
 *
 * .sp-feature-grid is the 3-up grid this card is always laid out in. The
 * minmax() floor is 290px per §3.4; the max() term caps the track count at 3 so
 * a longer list wraps 3 + 3 instead of over-columnising (§3.6 / KNOWN-ISSUES).
 */

.sp-feature-grid {
	display: grid;
	gap: var(--sp-grid-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(max(290px, (100% - 2 * var(--sp-grid-gap)) / 3), 1fr)
	);
}

.sp-feature {
	background: var(--sp-surface);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	overflow: hidden;
	transition:
		transform var(--sp-dur-base) var(--sp-ease),
		border-color var(--sp-dur-base) var(--sp-ease);
}

.sp-feature:hover,
.sp-feature:focus-within {
	transform: translateY(-6px);
	border-color: var(--sp-line-hover);
}

.sp-feature__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.sp-feature__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-feature__rule {
	height: 3px;
	background: var(--sp-red);
}

.sp-feature__body {
	padding: var(--sp-10);
}

.sp-feature__title {
	margin: 0 0 10px;
	font-size: var(--sp-fs-xl);
	font-weight: 800;
	line-height: var(--sp-lh-tight);
}

.sp-feature__text {
	margin: 0;
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}