/**
 * Promotion card: .mk-promotion-card (templates/components/promotion-card.php).
 *
 * Fixed height, photo as a cover layer, content pinned to the bottom in the
 * inverse text colour (inherited by the link). Title size per breakpoint from
 * theme.json `custom.promotionCard.{mobile,tablet,desktop}` (48rem / 64rem).
 * The card is a size container: in a narrow slot (a catalog grid cell) it
 * switches to `custom.promotionCard.compact` (smaller padding and title),
 * whatever the screen size. Container queries cannot read custom properties,
 * so the 20rem below = `compact.maxWidth`.
 */

.mk-promotion-card {
	--mk-promotion-title-size: var(
		--wp--custom--promotion-card--mobile--font-size
	);
	--mk-promotion-title-line: var(
		--wp--custom--promotion-card--mobile--line-height
	);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	block-size: var(--wp--custom--promotion-card--height);
	overflow: hidden;
	border-radius: var(--wp--custom--promotion-card--radius);
	background-color: var(--wp--custom--color--action--primary--default);
	color: var(--wp--custom--color--text--inverse);
	isolation: isolate;
	container: mk-promotion-card / inline-size;
}

.mk-promotion-card__content {
	padding: var(--wp--custom--promotion-card--padding);
}

@media (min-width: 48rem) {
	.mk-promotion-card {
		--mk-promotion-title-size: var(
			--wp--custom--promotion-card--tablet--font-size
		);
		--mk-promotion-title-line: var(
			--wp--custom--promotion-card--tablet--line-height
		);
	}
}

@media (min-width: 64rem) {
	.mk-promotion-card {
		--mk-promotion-title-size: var(
			--wp--custom--promotion-card--desktop--font-size
		);
		--mk-promotion-title-line: var(
			--wp--custom--promotion-card--desktop--line-height
		);
	}
}

.mk-promotion-card__image {
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.mk-promotion-card__title {
	margin-block: 0 var(--wp--custom--promotion-card--title-gap);
	color: inherit;
	font-family: var(--wp--custom--promotion-card--title-font-family);
	font-size: var(--mk-promotion-title-size);
	font-weight: var(--wp--custom--promotion-card--title-font-weight);
	line-height: var(--mk-promotion-title-line);
	letter-spacing: var(--wp--custom--promotion-card--title-letter-spacing);
	overflow-wrap: break-word;
	hyphens: auto;
}

.mk-promotion-card__description {
	margin-block: 0 var(--wp--custom--promotion-card--description-gap);
	font-family: var(--wp--custom--text--label-medium--font-family);
	font-size: var(--wp--custom--text--label-medium--font-size);
	font-weight: var(--wp--custom--text--label-medium--font-weight);
	line-height: var(--wp--custom--text--label-medium--line-height);
	letter-spacing: var(--wp--custom--text--label-medium--letter-spacing);
}

.mk-promotion-card .mk-link {
	align-self: flex-start;
}

@container mk-promotion-card (max-width: 20rem) {
	.mk-promotion-card__content {
		padding: var(--wp--custom--promotion-card--compact--padding);
	}

	.mk-promotion-card__title {
		font-size: var(--wp--custom--promotion-card--compact--font-size);
		line-height: var(--wp--custom--promotion-card--compact--line-height);
	}
}