/**
 * Cross-link blocks, on the same boutique system as the size guide.
 *
 * Tokens are scoped to .afw-xl, not :root - see the note at the top of size-guide.css. The two
 * files carry the same values on purpose: one of them loading without the other must still look
 * right, and a shared token file would be a third HTTP request for 40 lines of variables.
 */

.afw-xl {
	--afw-ground: #fbfafc;
	--afw-card: #ffffff;
	--afw-ink: #1c1a22;
	--afw-soft: #6d645c;
	--afw-faint: #736759;
	--afw-line: #e7dfd6;
	--afw-hair: #f0eae3;
	--afw-accent: #a8443b;
	--afw-shadow: 0 1px 2px rgba(28, 26, 34, 0.05), 0 10px 28px rgba(28, 26, 34, 0.06);
	--afw-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--afw-sans: "Segoe UI", system-ui, -apple-system, sans-serif;

	font: 15px/1.65 var(--afw-sans);
	color: var(--afw-ink);
	margin: 52px 0 8px;
	padding: 34px 0 0;
	border-top: 1px solid var(--afw-line);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .afw-xl {
		--afw-ground: #16130f;
		--afw-card: #201b16;
		--afw-ink: #f0e9e1;
		--afw-soft: #b3a89c;
		--afw-faint: #8a7f73;
		--afw-line: #332b23;
		--afw-hair: #2a231c;
		--afw-accent: #e08a7e;
		--afw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.4);
	}
}

:root[data-theme="dark"] .afw-xl {
	--afw-ground: #16130f;
	--afw-card: #201b16;
	--afw-ink: #f0e9e1;
	--afw-soft: #b3a89c;
	--afw-faint: #8a7f73;
	--afw-line: #332b23;
	--afw-hair: #2a231c;
	--afw-accent: #e08a7e;
	--afw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.4);
}

/* ── heading ───────────────────────────────────────────────────────────────── */

.afw-xl__head {
	margin: 0 0 20px;
	max-width: 62ch;
}

.afw-xl__eyebrow {
	margin: 0 0 7px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--afw-faint);
}

.afw-xl__heading {
	font-family: var(--afw-serif);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	color: var(--afw-ink);
	text-wrap: balance;
}

.afw-xl__intro {
	margin: 9px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--afw-soft);
}

/* the measured figure is the reason the block is trustworthy, so it reads as data */
.afw-xl__intro b {
	color: var(--afw-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.afw-xl__intro a {
	color: var(--afw-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── the cards ─────────────────────────────────────────────────────────────── */

/**
 * auto-fill with a 168px floor, so a block holding 1 card does not stretch it across the row
 * and a block holding 4 fills the row exactly. Nothing here is a fixed column count.
 */
.afw-xl__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 18px;
}

.afw-xl-card {
	display: flex;
	flex-direction: column;
	background: var(--afw-card);
	border: 1px solid var(--afw-line);
	border-radius: 13px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}

.afw-xl-card:hover,
.afw-xl-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--afw-shadow);
	border-color: #d9cec2;
}

.afw-xl-card__media {
	display: block;
	background: #fff;
	line-height: 0;
}

/* a square well, so a tall dragon and a wide croissant sit on the same baseline */
.afw-xl-card__img,
.afw-xl-card__noimg {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: #fff;
}

.afw-xl-card__noimg {
	background: var(--afw-ground);
}

.afw-xl-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 13px 13px;
	flex: 1;
}

.afw-xl-card__name {
	font-family: var(--afw-serif);
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--afw-ink);
}

.afw-xl-card__note {
	font-size: 11.5px;
	color: var(--afw-faint);
	font-variant-numeric: tabular-nums;
}

.afw-xl-card__price {
	margin-top: auto;
	padding-top: 7px;
	font-size: 14px;
	color: var(--afw-ink);
	font-variant-numeric: tabular-nums;
}

/* WooCommerce wraps prices in its own spans, which inherit the theme's sizing otherwise */
.afw-xl-card__price .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
}

.afw-xl-card__price del {
	color: var(--afw-faint);
	margin-right: 5px;
	font-size: 0.88em;
}

.afw-xl-card__price ins {
	text-decoration: none;
}

/* ── the tail link ─────────────────────────────────────────────────────────── */

.afw-xl__more {
	margin: 18px 0 0;
	font-size: 13.5px;
}

.afw-xl__more a {
	color: var(--afw-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.14s;
}

.afw-xl__more a:hover,
.afw-xl__more a:focus-visible {
	border-bottom-color: currentColor;
}

.afw-xl__more span {
	display: inline-block;
	margin-left: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.afw-xl-card {
		transition: none;
	}
	.afw-xl-card:hover,
	.afw-xl-card:focus-visible {
		transform: none;
	}
}

@media (max-width: 767px) {
	.afw-xl {
		margin-top: 36px;
		padding-top: 26px;
	}

	.afw-xl__heading {
		font-size: 20px;
	}

	.afw-xl__grid {
		grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
		gap: 13px;
	}

	.afw-xl-card__body {
		padding: 9px 11px 11px;
	}

	.afw-xl-card__name {
		font-size: 13.5px;
	}
}