/**
 * Category banner: template-parts/archive/hero.php.
 * Frames (1280 wide): Flowers 2156:641, Pens 2160:6355, Extracts 2160:6354,
 * Superior 2160:6356: 16px under the breadcrumb, 340px card, radius 32,
 * 48 / 64px padding, Display/L title, Body/L text (486px), the swirl at the
 * right with color-burn, the mascot standing on the bottom edge with its
 * head above the card.
 * From 480 the banner keeps the frame's proportions: its height, padding,
 * swirl and mascot scale with the banner width (cqw of the container,
 * whose content box is the banner), exact at a 1280px banner (1660 screen).
 * Below 480 (not designed, homepage promo banner pattern 2288:1382):
 * radius 28, 28 / 20px padding, the mascot in a 240px space under the text.
 */

/* 16px under the breadcrumb, as framed. The space the mascot needs above
 * the card is added above the breadcrumb (base.css). */
.archive-hero {
	padding-top: var(--space-sm);
}

.archive-hero > .container {
	container-type: inline-size;
}

.archive-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 28px 20px;
	border-radius: var(--radius-section);
	color: var(--color-white);
	isolation: isolate;
}

.archive-hero__card--mascot {
	padding-bottom: 240px;
}

/* The Shop page and categories without a background photo: the green
 * gradient sampled from the Flowers render. */
.archive-hero__bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	background: var(--gradient-category);
	isolation: isolate;
}

/* The Figma background photo, cover-cropped as framed. The .archive-hero
 * prefix beats WooCommerce's ".woocommerce-page img { height: auto }". */
.archive-hero .archive-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Vector 10 (2160:6330): 696 x 501, turned 169.31deg, its left side 737px
 * from the card's right edge, 69px above it, at 1280; scaled with the card. */
.archive-hero .archive-hero__swirl {
	position: absolute;
	top: -5.39cqw;
	left: calc(100% - 57.58cqw);
	width: 54.38cqw;
	max-width: none;
	height: 39.14cqw;
	transform: rotate(169.31deg);
	mix-blend-mode: color-burn;
}

.archive-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.archive-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-display-l);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-l);
	line-height: var(--leading-display-l);
}

.archive-hero__text {
	max-width: 486px;
	text-wrap: pretty;
	margin: 0;
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

/* Framing from xat_archive_hero(): --mascot-k (width in % of a 1280px
 * banner), --mascot-right (share of the banner width) and --mascot-crop
 * (share of the image below the banner's bottom edge, cut off with its
 * shadow, as the frames clip it). Defaults fit an uploaded category image. */
.archive-hero__mascot {
	position: absolute;
	z-index: -1;
	right: 16px;
	bottom: 0;
	/* Below 480: a 230px tall figure (--mascot-ratio = width / figure
	 * height), in the 240px space under the text. */
	width: calc(230px * var(--mascot-ratio, 0.8));
	max-width: none;
	height: auto;
	filter: drop-shadow(12px 5px 10px rgb(0 0 0 / 30%));
	clip-path: inset(-150px -150px var(--mascot-crop, 0%) -150px);
	transform: translateY(var(--mascot-crop, 0%));
	pointer-events: none;
}

@media (min-width: 480px) {
	/* 340 / 1280 high, 48 / 64 of 1280 padding, never less than the phone
	 * padding; the text in the left half, beside the mascot. */
	.archive-hero__card,
	.archive-hero__card--mascot {
		min-height: 26.56cqw;
		padding: max(28px, 3.75cqw) max(20px, 5cqw);
	}

	.archive-hero__card--mascot .archive-hero__copy {
		max-width: 48%;
	}

	.archive-hero__mascot {
		right: var(--mascot-right, 14.22%);
		width: calc(var(--mascot-k, 25) * 1cqw);
	}
}

@media (min-width: 1280px) {
	.archive-hero__card,
	.archive-hero__card--mascot {
		border-radius: var(--radius-xl);
	}
}

/* Without a mascot (the Shop page, categories without an image; not
 * designed) the card is only as tall as its text. */
.archive-hero__card:not(.archive-hero__card--mascot) {
	min-height: 0;
}