/**
 * Feature card section — theme lives on the pattern wrapper; cards consume
 * these variables. Card component styles ship with the ya-plugin/feature-card block.
 *
 * Themes: default (`.ya-features`), beige (`.is-style-ya-features-beige`),
 * blue (`.is-style-ya-features-blue`). Switch on the section Group, not each card.
 */

.ya-features {
	--ya-feature-card-background: var(--wp--custom--color--card-feature-default-background);
	--ya-feature-card-border: var(--wp--custom--color--card-feature-default-border);
	--ya-feature-card-border-hover: var(--wp--custom--color--card-feature-default-border-hover);
	--ya-feature-card-text: var(--wp--custom--color--text-primary);
	--ya-feature-card-link: var(--wp--custom--color--link-primary);
	--ya-feature-card-link-hover: var(--wp--custom--color--link-primary-hover);
	--ya-feature-card-symbol-background: var(--wp--preset--color--yellow-400);
	--ya-feature-card-symbol-color: var(--wp--custom--color--icon-primary);
	--ya-feature-card-symbol-hover-scale: 1.1333333333;

	box-sizing: border-box;
	width: 100%;
	margin-block: 0;
	padding-inline: var(--wp--custom--spacing--padding-inline, clamp(1rem, -1.486rem + 8.304vi, 2.5rem));
	margin-block: var(--wp--custom--spacing--padding-block, clamp(3rem, 1.004rem + 4.163vi, 6rem));
	background-color: transparent;
	color: var(--wp--custom--color--text-primary);
}

.ya-features.is-style-ya-features-beige {
	--ya-feature-card-background: var(--wp--custom--color--card-feature-beige-background);
	--ya-feature-card-border: var(--wp--custom--color--card-feature-beige-border);
	--ya-feature-card-border-hover: var(--wp--custom--color--card-feature-beige-border-hover);
	--ya-feature-card-text: var(--wp--custom--color--text-primary);
	--ya-feature-card-link: var(--wp--custom--color--link-primary);
	--ya-feature-card-link-hover: var(--wp--custom--color--link-primary-hover);
	--ya-feature-card-symbol-background: var(--wp--preset--color--gray-500);
	--ya-feature-card-symbol-color: var(--wp--custom--color--icon-inverse);
}

.ya-features.is-style-ya-features-blue {
	--ya-feature-card-background: var(--wp--custom--color--card-feature-blue-background);
	--ya-feature-card-border: var(--wp--custom--color--card-feature-blue-border);
	--ya-feature-card-border-hover: var(--wp--preset--color--gray-600);
	--ya-feature-card-text: var(--wp--custom--color--text-inverse);
	--ya-feature-card-link: var(--wp--preset--color--yellow-400);
	--ya-feature-card-link-hover: var(--wp--preset--color--yellow-500);
	--ya-feature-card-symbol-background: var(--wp--preset--color--gray-200);
	--ya-feature-card-symbol-color: var(--wp--custom--color--icon-primary);
}

.ya-features__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 90rem);
	margin-inline: auto;
}

/* Intro: heading + description; 8px between them; max width from pattern contract. */
.ya-features__intro {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 44.25rem;
	margin-block: 0;
}

.ya-features__title {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--sora, inherit);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--wp--custom--color--text-primary);
}

.ya-features__description {
	margin-block: 0 !important;
	font-family: var(--wp--preset--font-family--figtree, inherit);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--wp--custom--color--text-primary);
	overflow-wrap: anywhere;
}

.ya-features__cards.row {
	width: 100%;
	/* Pattern text↔cards gap: 32px mobile, 40px from 480px. */
	margin-block: 2rem 0;
	margin-inline: auto;
}

@media (min-width: 480px) {
	.ya-features__cards.row {
		margin-block-start: 2.5rem;
	}
}

/* Stretch equal-height cards inside the shared row grid. */
.ya-features__cards > .ya-feature-card,
.ya-features__cards > .wp-block-ya-plugin-feature-card {
	height: 100%;
}