/**
 * Content pages (page-templates/): white page as the frames, breadcrumb 20px
 * above and 24px under (FAQ 2171:665), 120px under the page body.
 */

body.xat-content-page {
	background: var(--color-white);
}

.content-page > .breadcrumb {
	padding-top: 20px;
	padding-bottom: var(--space-md);
}

.content-page__body {
	padding-bottom: var(--section-space);
}

/* Section heading with an icon circle (Shipping 2174:795): 52px circle,
 * 16px gap, H2 in Heading/H2. */
.page-heading {
	display: flex;
	gap: 12px;
	align-items: center;
}

.page-heading__title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: 28px; /* phones (client, 19 Oct 2026); Heading/H2 from 768 */
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

@media (min-width: 768px) {
	.page-heading__title {
		font-size: var(--text-h2);
	}

	.page-heading {
		gap: var(--space-sm);
	}
}

/* Policy rows with a mascot in the corner (Shipping 2174:848, Payment
 * methods 2179:1217): 48px between rows, at most 860px wide; 48px icon
 * circle, 16px gap, title Heading/H3 bold, 8px to the text in Body/L muted,
 * 64px in. The mascot (its top --mascot-height shown) sits on the section's
 * bottom edge with its left edge --mascot-right before the content's right
 * edge, cut by the screen edge; its shadow is a CSS drop shadow (the frames
 * use a blurred copy).
 * Pages set --policies-bottom and the mascot size and position;
 * --mascot-overhang limits how far it may run past the screen edge (none by
 * default).
 * Below 1280 (not designed): the mascot under the rows, 360px wide.
 */
.policies {
	--policies-bottom: 96px;
	--mascot-width: 614px;
	--mascot-height: 595px;
	--mascot-right: 458px;
	--mascot-overhang: 9999px;

	overflow-x: clip;
}

.policies__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 27.3307px + 1.2451vw, 48px);
	padding-top: var(--space-md);
}

.policy {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	max-width: 860px;
}

.policy__head {
	display: flex;
	gap: 12px;
	align-items: center;
}

.policy__title {
	margin: 0;
	color: var(--color-black);
	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);
}

.policy__text {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

.policies__mascot {
	position: relative;
	align-self: flex-end;
	overflow: hidden;
	width: min(360px, 80%);
	aspect-ratio: var(--mascot-ratio, 756 / 723);
	margin-top: calc(-1 * var(--space-md));
	filter: drop-shadow(9px 14px 40px rgb(0 0 0 / 30%));
}

/* Out of the flow, so the box height comes from aspect-ratio alone (Safari
 * otherwise grows the box to the full image and loses the crop). */
.policies__mascot img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.policy__head {
		gap: var(--space-sm);
	}

	.policy__text {
		padding-left: 64px;
	}
}

@media (min-width: 1280px) {
	.policies__inner {
		min-height: calc(var(--mascot-height) - var(--policies-bottom));
		padding-bottom: var(--policies-bottom);
	}

	/* 860px at 1660; narrower below, so the text stays clear of the mascot. */
	.policy {
		max-width: min(860px, 100% - 420px);
	}

	/* 100% is the padding box (content and both gutters). */
	.policies__mascot {
		position: absolute;
		bottom: 0;
		left: min(100% - var(--container-gutter) - var(--mascot-right), 100% - var(--mascot-width) + var(--mascot-overhang));
		width: var(--mascot-width);
		height: var(--mascot-height);
		margin: 0;
		aspect-ratio: auto;
		pointer-events: none;
	}
}