/**
 * Component: Feature Cards — styles
 * Scoped to .feature-cards (BEM root). All rules confined to this component —
 * no global/site-wide selectors. Site-wide tokens from style.css via var(--*).
 *
 * A rounded panel inset from the page edges, washed with a diagonal
 * white-to-blue-grey gradient, holding a three-column card row. Stacks to one
 * column below 900px.
 */

/* ── Root: page-edge inset ────────────────────────────────────── */
.feature-cards {
	background: var(--color-bg);
	padding-inline: clamp(var(--space-lg), 2.8vw, 2.5rem);
	padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

/* ── Panel ────────────────────────────────────────────────────── */
.feature-cards__panel {
	max-width: 1360px;
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6.5rem) clamp(1.5rem, 5.5vw, 5rem);
	border-radius: 2.5rem;
	background: linear-gradient(160deg, var(--color-bg) 0%, var(--color-bg-2) 30%, var(--color-panel-bottom) 85%);
}

.feature-cards__heading {
	margin: 0;
	font-family: var(--font-title);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-align: center;
	color: var(--color-text-pri);
}

/* ── Card row ─────────────────────────────────────────────────── */
.feature-cards__list {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 5.5vw, 5rem);
	max-width: 1200px;
}

.feature-cards__item {
	margin: 0;
}

.feature-cards__image {
	display: block;
	width: 100%;
	height: auto;
}

.feature-cards__title {
	margin: var(--space-2xl) 0 0;
	font-family: var(--font-title);
	font-size: clamp(1.25rem, 1.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-text-pri);
}

.feature-cards__body {
	margin: var(--space-lg) 0 0;
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	line-height: 1.75;
	color: var(--color-text-sec);
}

/* ── Tablet ≤900px — single column ────────────────────────────── */
@media (max-width: 900px) {
	.feature-cards__panel {
		border-radius: var(--radius-6xl);
	}

	.feature-cards__list {
		grid-template-columns: 1fr;
		max-width: 420px;
		gap: var(--space-3xl);
	}

	.feature-cards__item {
		text-align: center;
	}
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.feature-cards__panel {
		border-radius: 1.5rem;
		padding-inline: var(--space-lg);
	}

	.feature-cards__title {
		margin-top: var(--space-xl);
	}

	.feature-cards__body {
		font-size: var(--text-body);
	}
}

/* ── Scroll-in reveal ─────────────────────────────────────────── */
/* Same approach as how_it_works: CSS scroll-driven fade-up per card, no JS.
   Unsupported browsers and reduced-motion users get the static layout. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes feature-cards-rise {
			from { opacity: 0; transform: translateY(24px); }
		}

		.feature-cards__heading,
		.feature-cards__item {
			animation: feature-cards-rise linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 80%;
		}
	}
}