/**
 * Category description bento: template-parts/archive/description.php.
 * From 1280 (2159:649): 96px under the grid; card 01 (560 of 1280) beside a
 * column with card 02 on top and cards 03 + 04 below, 24px gaps, radius 32.
 * Card 01: 50px padding, H2 48px, Body/L text; cards 02-04: 30px padding,
 * H3 28px, Body/M text, pills. With two feature cards (Pens, Extracts,
 * Superior) the bottom card runs the full width. Card 01 is as tall as its
 * content or the right column, whichever is taller.
 * Per layout (.cat-desc--layout-*, the term's "Bento layout"; values from
 * the frames): Flowers mascot
 * in card 01, text 291px; Pens (2192:1056) mascot over the right column,
 * text 423px; Extracts (2195:1056) columns 726 / 530, mascot in card 01,
 * text 298px; Superior (2196:1056) mascot on the last card, rising into card
 * 02. The mascot's left edge and width are shares of its card or column
 * (--m-left, --m-width), so it scales with them; --m-crop is the share of
 * the image cut off below the bottom edge.
 * 768-1279 (not designed): card 01 full width with the mascot on the right,
 * the feature cards below.
 * Below 768 (not designed, homepage patterns): stacked cards, radius 20,
 * 20px side padding, every card shown.
 * Card 01's background is the hero photo, framed with CSS (its Figma fill
 * transform does not export). The other backgrounds have rounded corners
 * baked in, so they are scaled up to let the card radius show (as the promo
 * banners).
 */

.cat-desc {
	padding-top: var(--section-space-m);
}

.cat-desc__bento {
	display: grid;
	gap: 12px;
}

.cat-desc__main,
.cat-desc__card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 20px; /* phones (client); 768+ below */
	color: var(--color-white);
	isolation: isolate;
}

.cat-desc__main {
	gap: 20px;
	padding: 28px 20px 300px;
}

.cat-desc__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* .cat-desc prefix: WooCommerce sets ".woocommerce-page img { height: auto }". */
.cat-desc .cat-desc__bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.cat-desc__main .cat-desc__bg {
	object-position: 100% 50%;
}

.cat-desc__card .cat-desc__bg {
	scale: 1.25;
}

.cat-desc__index {
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 10%);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

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

.cat-desc__text {
	margin: 0;
	text-wrap: pretty;
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

.cat-desc__text a,
.cat-desc__card-text a {
	color: inherit;
	white-space: nowrap; /* "Shipping & Returns" stays on one line */
}

/* Below 1280: in card 01's bottom right corner, a 280px tall visible figure
 * (--m-ratio = image width per pixel of visible height), the cropped part
 * below the card's edge. The shadow is a CSS drop shadow instead of the
 * frames' blurred copy. */
.cat-desc .cat-desc__mascot {
	position: absolute;
	z-index: -1;
	right: 16px;
	bottom: 0;
	width: calc(280px * var(--m-ratio, 0.75));
	max-width: none;
	height: auto;
	filter: drop-shadow(9px 9px 20px rgb(0 0 0 / 30%));
	transform: translateY(var(--m-crop, 0%));
	pointer-events: none;
}

.cat-desc .cat-desc__mascot--side {
	display: none;
}

.cat-desc__side {
	display: grid;
	gap: 12px;
}

.cat-desc__card {
	gap: 16px;
	padding: 24px 20px;
}

.cat-desc__top {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
}

.cat-desc__copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.cat-desc__card-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

.cat-desc__card-text {
	max-width: 527px;
	margin: 0;
	text-wrap: pretty;
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.cat-desc__chips,
.cat-desc__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-desc__pills {
	margin-top: 10px;
}

.cat-desc__chip,
.cat-desc__pill {
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	white-space: nowrap;
}

/* Card 02 chips (2159:662): cream with a coloured dot. */
.cat-desc__chip {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	background: var(--color-cream);
}

.cat-desc__chip::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-green-dark);
	content: "";
}

.cat-desc__chip:nth-child(2)::before {
	background: var(--color-green);
}

.cat-desc__chip:nth-child(3)::before {
	background: var(--color-yellow);
}

/* Card 03 sizes (2159:680): the first pill is dark. */
.cat-desc__card--2 .cat-desc__pill:first-child {
	background: var(--color-black);
	color: var(--color-white);
}

@media (min-width: 768px) {
	.cat-desc__main,
	.cat-desc__card {
		border-radius: var(--radius-section);
	}

	.cat-desc__bento,
	.cat-desc__side {
		gap: var(--space-md);
	}

	.cat-desc__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cat-desc__card--1,
	.cat-desc__side--2 .cat-desc__card--2 {
		grid-column: 1 / -1;
	}

	.cat-desc__main {
		min-height: 460px;
		padding: 40px;
	}

	.cat-desc__main > :not(.cat-desc__bg, .cat-desc__mascot) {
		max-width: 50%;
	}

	.cat-desc .cat-desc__mascot {
		right: 6%;
		width: calc(400px * var(--m-ratio, 0.75));
	}

	.cat-desc__card {
		padding: 30px;
	}

	.cat-desc__card--2,
	.cat-desc__card--3 {
		gap: 20px;
	}
}

@media (min-width: 1280px) {
	.cat-desc__bento {
		grid-template-columns: minmax(0, 560fr) minmax(0, 696fr);
	}

	.cat-desc__main,
	.cat-desc__card {
		border-radius: var(--radius-xl);
	}

	.cat-desc__main {
		min-height: 0;
		padding: 50px;
	}

	.cat-desc__main > :not(.cat-desc__bg, .cat-desc__mascot) {
		max-width: none;
	}

	/* Mascot in card 01 (Flowers 2153:3131, Extracts 2194:6368): placed from
	 * the card's left edge, cut by its right and bottom edges. */
	.cat-desc .cat-desc__mascot {
		right: auto;
		left: var(--m-left);
		width: var(--m-width);
	}

	/* Mascot over the right column (Pens 2194:6362, Superior 2194:6388): the
	 * copy in card 01 hides, the one in the column stands on its bottom
	 * edge, above the cards, cut below that edge. */
	.cat-desc--mascot-side .cat-desc__main .cat-desc__mascot {
		display: none;
	}

	/* The image runs past the column's right edge (transparent, and the
	 * mascot's hand); the frames clip it there. */
	.cat-desc--mascot-side .cat-desc__side {
		position: relative;
		overflow-x: clip;
		container-type: inline-size;
	}

	.cat-desc .cat-desc__mascot--side {
		z-index: 1;
		display: block;
		clip-path: inset(-200px -200px var(--m-crop) -200px);
	}

	/* Flowers (2159:650). */
	.cat-desc--layout-flowers .cat-desc__text {
		max-width: 291px;
	}

	/* Pens (2192:1056): 57px under the number. The card texts keep their
	 * framed widths but stop 16px before the figure (which starts at 64% of
	 * the column at card 02's text, 59% at card 03's), so they stay clear
	 * of it as the mascot scales with the column. */
	.cat-desc--layout-pens .cat-desc__main {
		gap: 57px;
	}

	.cat-desc--layout-pens .cat-desc__title {
		max-width: 368px;
	}

	.cat-desc--layout-pens .cat-desc__text {
		max-width: 423px;
	}

	.cat-desc--layout-pens .cat-desc__card--1 .cat-desc__card-text {
		max-width: min(387px, 64.07cqw - 46px);
	}

	.cat-desc--layout-pens .cat-desc__card--2 .cat-desc__card-text {
		max-width: min(394px, 58.89cqw - 46px);
	}

	/* Extracts (2195:1056): 726 / 530 columns, 100px under the number. */
	.cat-desc--layout-extracts .cat-desc__bento {
		grid-template-columns: minmax(0, 726fr) minmax(0, 530fr);
	}

	.cat-desc--layout-extracts .cat-desc__main {
		gap: 100px;
	}

	/* A third feature card in the narrow 530 column: the cards stack. */
	.cat-desc--layout-extracts .cat-desc__side--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.cat-desc--layout-extracts .cat-desc__title {
		max-width: 443px;
	}

	.cat-desc--layout-extracts .cat-desc__text {
		max-width: 298px;
	}

	.cat-desc--layout-extracts .cat-desc__card--1 .cat-desc__card-text {
		max-width: 366px;
	}

	.cat-desc--layout-extracts .cat-desc__card--2 .cat-desc__card-text {
		max-width: 379px;
	}

	/* Superior (2196:1056): 123px under the number; card 02 30px between its
	 * top row and the text; the last card's text 325px wide, beside the
	 * mascot. Both texts stop 16px before the figure (72% and 62% of the
	 * column at their height). */
	.cat-desc--layout-superior .cat-desc__main {
		gap: 123px;
	}

	.cat-desc--layout-superior .cat-desc__title {
		max-width: 389px;
	}

	.cat-desc--layout-superior .cat-desc__text {
		max-width: 380px;
	}

	.cat-desc--layout-superior .cat-desc__card--1 {
		gap: 30px;
	}

	.cat-desc--layout-superior .cat-desc__card--1 .cat-desc__copy {
		gap: 16px;
	}

	/* One line at 1660 as framed; narrower, where one line would run under
	 * the hat, two balanced lines. */
	.cat-desc--layout-superior .cat-desc__card--1 .cat-desc__card-text {
		max-width: 527px;
		text-wrap: balance;
	}

	.cat-desc--layout-superior .cat-desc__card--2 .cat-desc__copy {
		max-width: min(325px, 62.23cqw - 46px);
	}

	.cat-desc--layout-superior .cat-desc__card--2 .cat-desc__card-title {
		max-width: 217px;
	}
}

@media (min-width: 1280px) and (max-width: 1659px) {
	.cat-desc--layout-superior .cat-desc__card--1 .cat-desc__card-text {
		max-width: min(527px, 71.77cqw - 46px);
	}
}