/**
 * Feature Columns — centered heading + icon-benefit row.
 *
 * GENERATED from Figma `fleur-homepage / seo-info-section` (measured).
 * Consumes tokens only; section padding + bg on the outer group attribute.
 *
 * @package wp-design-library/components
 */

.wpdl-feature-columns {
	text-align: center;
}

/* Heading stack — margin below = section gap 60 (space.60) */
.wpdl-feature-columns__head {
	max-inline-size: 50rem; /* 800px measured heading column */
	margin-inline: auto;
	margin-block-end: var(--wp--custom--space--60);
}

.wpdl-feature-columns__head > * {
	margin-block: 0 !important;
}

.wpdl-feature-columns__eyebrow {
	margin: 0 0 var(--wp--custom--space--4) !important;
	color: var(--wp--custom--semantic--color--accent--secondary);
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--typography--size--sm, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wpdl-feature-columns__heading {
	margin: 0 0 var(--wp--custom--space--4) !important;
	color: var(--wp--custom--semantic--color--text--primary);
	font-family: var(--wp--custom--font--family--display);
	font-size: clamp(2rem, 1.3rem + 2.1vw, 2.5rem); /* → 40px @1440 */
	font-weight: 400;
	line-height: 1.15;
}

.wpdl-feature-columns__intro {
	margin: 0;
	color: var(--wp--custom--semantic--color--text--secondary);
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--typography--size--base, 0.9375rem);
	line-height: 1.7;
}

/* Benefits grid — 3 columns, gap 48 (space.9) */
.wpdl-feature-columns__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--space--9);
}

.wpdl-feature-columns__grid > * {
	margin-block: 0 !important;
}

/* One column — icon-box + text, gap 16 (space.4), centered */
.wpdl-feature-columns__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--space--4);
}

.wpdl-feature-columns__col > * {
	margin-block: 0 !important;
}

/* Icon box — 48px circle, light-rose fill (Figma #f5ecef) */
.wpdl-feature-columns__icon {
	inline-size: 3rem; /* 48 measured */
	block-size: 3rem;
	border-radius: var(--wp--custom--radius--full);
	background: color-mix(in srgb, var(--wp--custom--semantic--color--accent--primary) 12%, #fff);
	color: var(--wp--custom--semantic--color--accent--primary);
	flex: 0 0 auto;
}

.wpdl-feature-columns__icon .wpdl-icon,
.wpdl-feature-columns__icon svg {
	inline-size: 1.5rem; /* 24 measured */
	block-size: 1.5rem;
}

/* Text box — title + desc, gap 8 (space.2) */
.wpdl-feature-columns__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--2);
}

.wpdl-feature-columns__text > * {
	margin-block: 0 !important;
}

.wpdl-feature-columns__col-title {
	margin: 0;
	color: var(--wp--custom--semantic--color--text--primary);
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--typography--size--lg, 1.25rem);
	font-weight: 600;
	line-height: 1.2;
}

.wpdl-feature-columns__col-desc {
	margin: 0;
	color: var(--wp--custom--semantic--color--text--secondary);
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--typography--size--sm, 0.875rem);
	line-height: 1.55;
}

/* 4-column variant (shop trust row) */
.wpdl-feature-columns--4 .wpdl-feature-columns__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Responsive — 2-col tablet, 1-col mobile */
@media (width < 64em) {
	.wpdl-feature-columns--4 .wpdl-feature-columns__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 48em) {
	.wpdl-feature-columns__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--custom--space--8);
	}
}