/* ==========================================================================
   [wayvo-about-values] — see shortcodes/wayvoAboutValues.php for the design,
   the pill colours and the images.

   --wvav-u is rendered px per laptop px (100cqw / 1440, 0.5 -> 1.333);
   padding 40 -> 80 from 1440 to 1920, as the other new sections.

   The left column is sticky. Sticky caveat as in wayvo-frogger-grid.css: an
   ancestor with overflow other than visible cancels it silently (it then
   just scrolls, which still reads fine).

   Vendor fights: h2 / h3 / p / ul / li / img rules at (0,2,1)+, over
   Elementor's and the kit's (0,1,1); `.elementor img { height: auto }` is
   why the image rule carries two classes.
   ========================================================================== */

.wv-av-wrap {
	container-type: inline-size;
	/* Capped at the content width, centred on the page; the background is
	   painted past it below. See --wv-content-max in tokens.css. */
	width: min(100vw, var(--wv-content-max, 1440px));
	margin-left: calc(50% - min(50vw, var(--wv-content-max, 1440px) / 2));
}

.wv-av {
	--wvav-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvav-pad: min(80px, max(calc(40 * var(--wvav-u)), calc(100cqw / 12 - 80px)));
	/* Where the sticky column pins: clear of the floating header. */
	--wvav-pin: 110px;

	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: calc(20 * var(--wvav-u));
	box-sizing: border-box;
	padding: var(--wvav-pad);
	background-color: var(--wv-grey-200, #f5f5f5);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wv-grey-200, #f5f5f5), var(--wv-grey-200, #f5f5f5)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* ── Left: heading, copy, button ─────────────────────────────────────────────
   737 tall as drawn, button at the foot; never taller than the screen below
   the pin, so the button is always in view while pinned. */
.wv-av__aside {
	position: sticky;
	top: var(--wvav-pin);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	box-sizing: border-box;
	height: min(calc(737 * var(--wvav-u)), calc(100svh - var(--wvav-pin) - var(--wvav-pad)));
}

.wv-av__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(16 * var(--wvav-u));
}

/* "If it's here, it / belongs here.": 446 wide at 56px. */
.wv-av h2.wv-av__title {
	max-width: 8.2em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvav-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Five lines at ~348 wide. */
.wv-av p.wv-av__lede {
	max-width: 14.6em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvav-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* Site button system, ink, the export's 46px tier, scaled. */
.wv-av .wv-av__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvav-u)));
	--wv-btn-min-h: max(36px, calc(46 * var(--wvav-u)));
	--wv-btn-size: max(14px, calc(16 * var(--wvav-u)));
}

/* ── Right: the four values ──────────────────────────────────────────────── */
.wv-av ul.wv-av__list {
	display: flex;
	flex-direction: column;
	gap: calc(40 * var(--wvav-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-av li.wv-av__item {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--wvav-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-av li.wv-av__item::before,
.wv-av li.wv-av__item::marker {
	content: none;
}

/* 670 x 400 at every width. */
.wv-av__media {
	position: relative;
	aspect-ratio: 670 / 400;
	overflow: hidden;
	border-radius: calc(8 * var(--wvav-u));
	background-color: var(--wv-grey-300, #e5e5e5);
}

.wv-av .wv-av__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* The certification grid: whole, on white, a little in from the sides. */
.wv-av__media--contain {
	background-color: var(--wv-white, #ffffff);
}

.wv-av .wv-av__media--contain .wv-av__img {
	inset: 0 calc(8 * var(--wvav-u));
	width: calc(100% - 16 * var(--wvav-u));
	object-fit: contain;
}

.wv-av__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(10 * var(--wvav-u));
}

.wv-av__pill {
	display: inline-block;
	padding: max(2px, calc(2 * var(--wvav-u))) max(6px, calc(8 * var(--wvav-u)));
	border-radius: 9999px;
	background-color: var(--wvav-pill, #c0b6ff);
	color: var(--wv-ink, #101011);
	font-size: max(12px, calc(13.79 * var(--wvav-u)));
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	font-feature-settings: "tnum" on, "lnum" on;
	white-space: nowrap;
}

.wv-av h3.wv-av__heading {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(24px, calc(40 * var(--wvav-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-av p.wv-av__text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(18 * var(--wvav-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile frame; see the shortcode header. One column: heading and copy,
   the values, then the button last — the aside dissolves (display:
   contents) so its button can be ordered after the list. */
@media (max-width: 767px) {

	.wv-av {
		--wvav-pad: 20px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		padding: 80px var(--wvav-pad);
	}

	.wv-av__aside {
		display: contents;
	}

	.wv-av__copy {
		gap: 12px;
	}

	.wv-av h2.wv-av__title {
		font-size: 32px;
		line-height: 1.05;
	}

	.wv-av p.wv-av__lede {
		max-width: none;
		font-size: 16px;
		letter-spacing: -0.01em;
	}

	.wv-av ul.wv-av__list {
		gap: 40px;
	}

	.wv-av li.wv-av__item {
		gap: 16px;
	}

	.wv-av__media {
		border-radius: 6px;
	}

	.wv-av__body {
		gap: 8px;
	}

	.wv-av h3.wv-av__heading {
		font-size: 24px;
		line-height: 1.05;
	}

	.wv-av p.wv-av__text {
		font-size: 16px;
		letter-spacing: -0.01em;
	}

	.wv-av .wv-av__cta {
		order: 1;
		align-self: flex-start;
		--wv-btn-pad-x: 18px;
		--wv-btn-min-h: 40px;
		--wv-btn-size: 14px;
	}
}

/* ── Phones: no copy under 15px (Paul, 2026-10-21) ───────────────────────────
   The same size as the phone buttons (tokens.css). max() so anything already
   bigger keeps its size; same selectors as above, later, so they win. */
@media (max-width: 767px) {

	.wv-av__pill {
		font-size: 15px;
	}
}