/**
 * Hero value-props row — Home hero (front-page.php, $fr_hero_props).
 * ---------------------------------------------------------------------------
 * Owner addition 2026-11-04 — hero value-props row replacing the design's chip pills.
 *
 * OWNER LAYER, not ported design CSS. Three items (icon tile + bold title +
 * one-line description) laid out side by side and centred under the hero
 * buttons. The icon tile is the DS fractal_feature_icon() helper (inline
 * styles), so only the row, item and text are styled here. Lives OUTSIDE
 * assets/css/design/ so that tree stays pristine per CLAUDE.md.
 *
 * All sizing is rem/clamp so the row inherits the fluid 1440→4K root from
 * assets/css/scale.css. px appears only inside @media conditions.
 */

/* ---------- Row ---------- */
.fr-hero-props {
	list-style: none;
	margin: var(--space-7) 0 0;
	padding: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 3rem);
}

/* ---------- Item ---------- */
.fr-hero-prop {
	flex: 0 1 auto;
	max-width: 22.25rem;
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	text-align: left;
}

.fr-hero-prop__body { min-width: 0; padding-top: 0.125rem; }

/* Class selectors beat base.css's h3 element rule (display font, fs-h3,
   text-strong); reset every property it sets. */
.fr-hero-prop__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--on-dark);
}

.fr-hero-prop__desc {
	margin: 0.25rem 0 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--on-dark-muted);
}

/* ---------- ≤ 900px: wrap to two, then one column ---------- */
@media (max-width: 900px) {
	.fr-hero-props {
		flex-wrap: wrap;
		gap: 1.5rem 2rem;
	}
	.fr-hero-prop { flex: 0 1 16rem; }
}

/* ---------- ≤ 560px: stacked, left-aligned inside a centred block ---------- */
@media (max-width: 560px) {
	.fr-hero-props {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 1.25rem;
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
	}
	.fr-hero-prop { flex: none; width: 100%; }
}