/**
 * Promotion banner: .mk-promotion-banner (templates/components/promotion-banner.php).
 *
 * Height of its content, padding 24, radius 10; the photo as a cover layer
 * over the brand gradient, the overlay over both, then title, description and
 * link in the inverse text colour (the link inherits it). Description margin
 * 8 above / 24 below. Title heading-3 below 48rem, heading-2 from 48rem.
 * Tokens: theme.json `custom.promotionBanner`, `custom.color.promotionBanner`.
 */

.mk-promotion-banner {
	--mk-promotion-banner-title-size: var(
		--wp--custom--text--heading-3--font-size
	);
	--mk-promotion-banner-title-line: var(
		--wp--custom--text--heading-3--line-height
	);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--wp--custom--promotion-banner--padding);
	overflow: hidden;
	border-radius: var(--wp--custom--promotion-banner--radius);
	background-image: linear-gradient(
		var(--wp--custom--promotion-banner--gradient-angle),
		var(--wp--custom--color--promotion-banner--gradient-start),
		var(--wp--custom--color--promotion-banner--gradient-end)
	);
	color: var(--wp--custom--color--promotion-banner--text);
	isolation: isolate;
}

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

/* Photo, then the overlay over it (both below the content). */
.mk-promotion-banner__image,
.mk-promotion-banner::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: 100%;
	block-size: 100%;
}

.mk-promotion-banner__image {
	object-fit: cover;
}

.mk-promotion-banner::after {
	content: "";
	background-color: var(--wp--custom--color--promotion-banner--overlay);
}

.mk-promotion-banner__title {
	margin: 0;
	color: inherit;
	font-family: var(--wp--custom--text--heading-2--font-family);
	font-size: var(--mk-promotion-banner-title-size);
	font-weight: var(--wp--custom--text--heading-2--font-weight);
	line-height: var(--mk-promotion-banner-title-line);
	letter-spacing: var(--wp--custom--text--heading-2--letter-spacing);
	overflow-wrap: break-word;
}

.mk-promotion-banner__description {
	margin-block: var(--wp--custom--promotion-banner--description-gap-top)
		var(--wp--custom--promotion-banner--description-gap-bottom);
	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);
}

/* Without a description the link keeps the same distance from the title. */
.mk-promotion-banner__title + .mk-promotion-banner__link {
	margin-block-start: var(
		--wp--custom--promotion-banner--description-gap-bottom
	);
}