/**
 * Promotion row: .mk-promotion-row (templates/components/promotion-row.php).
 *
 * Mobile: one column, picture on top (358:350), stretched. From 48rem:
 * picture and content in two equal centred columns (620:350), `--reverse`
 * puts the picture on the right; `--no-image` is content only. Padding-block
 * 24 → 40 → 64, column gap 16 → 24 → 40, content gap 12 → 16 → 24.
 * Subtitle label-large accent, title heading-3 → heading-2, text body-large.
 * Tokens: theme.json `custom.promotionRow` (mobile / tablet / desktop).
 */

.mk-promotion-row {
	--mk-promotion-row-padding: var(
		--wp--custom--promotion-row--mobile--padding-block
	);
	--mk-promotion-row-gap: var(
		--wp--custom--promotion-row--mobile--column-gap
	);
	--mk-promotion-row-content-gap: var(
		--wp--custom--promotion-row--mobile--content-gap
	);
	--mk-promotion-row-ratio: var(
		--wp--custom--promotion-row--mobile--image-ratio
	);

	display: grid;
	gap: var(--mk-promotion-row-gap);
	padding-block: var(--mk-promotion-row-padding);
}

.mk-promotion-row__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--mk-promotion-row-ratio);
	border-radius: var(--wp--custom--promotion-row--radius);
	object-fit: cover;
}

.mk-promotion-row__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mk-promotion-row-content-gap);
	min-inline-size: 0;
}

.mk-promotion-row__subtitle,
.mk-promotion-row__title,
.mk-promotion-row__text,
.mk-promotion-row__note {
	margin: 0;
}

.mk-promotion-row__subtitle {
	color: var(--wp--custom--color--text--accent);
	font-family: var(--wp--custom--text--label-large--font-family);
	font-size: var(--wp--custom--text--label-large--font-size);
	font-weight: var(--wp--custom--text--label-large--font-weight);
	line-height: var(--wp--custom--text--label-large--line-height);
	letter-spacing: var(--wp--custom--text--label-large--letter-spacing);
}

.mk-promotion-row__title {
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--heading-3--font-family);
	font-size: var(--wp--custom--text--heading-3--font-size);
	font-weight: var(--wp--custom--text--heading-3--font-weight);
	line-height: var(--wp--custom--text--heading-3--line-height);
	letter-spacing: var(--wp--custom--text--heading-3--letter-spacing);
}

.mk-promotion-row__text {
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--body-large--font-family);
	font-size: var(--wp--custom--text--body-large--font-size);
	font-weight: var(--wp--custom--text--body-large--font-weight);
	line-height: var(--wp--custom--text--body-large--line-height);
	letter-spacing: var(--wp--custom--text--body-large--letter-spacing);
}

.mk-promotion-row__note {
	color: var(--wp--custom--color--text--secondary);
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
}

@media (min-width: 48rem) {
	.mk-promotion-row {
		--mk-promotion-row-padding: var(
			--wp--custom--promotion-row--tablet--padding-block
		);
		--mk-promotion-row-gap: var(
			--wp--custom--promotion-row--tablet--column-gap
		);
		--mk-promotion-row-content-gap: var(
			--wp--custom--promotion-row--tablet--content-gap
		);
		--mk-promotion-row-ratio: var(
			--wp--custom--promotion-row--tablet--image-ratio
		);

		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
	}

	.mk-promotion-row--no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.mk-promotion-row--reverse .mk-promotion-row__image {
		order: 1;
	}

	/* heading-2: the same family, weight and spacing as heading-3. */
	.mk-promotion-row__title {
		font-size: var(--wp--custom--text--heading-2--font-size);
		line-height: var(--wp--custom--text--heading-2--line-height);
	}
}

@media (min-width: 64rem) {
	.mk-promotion-row {
		--mk-promotion-row-padding: var(
			--wp--custom--promotion-row--desktop--padding-block
		);
		--mk-promotion-row-gap: var(
			--wp--custom--promotion-row--desktop--column-gap
		);
		--mk-promotion-row-content-gap: var(
			--wp--custom--promotion-row--desktop--content-gap
		);
	}
}