/* ==========================================================================
   [wayvo-betterChoice-2] — see shortcodes/wayvoBetterChoice2.php for the
   three designs and the icons.

   Same unit as the other new sections: --wvbc2-u is rendered px per laptop
   px (100cqw / 1440, stopping at 1.333).

   The side padding is NOT the other sections' 40 -> 80 gutter: this one is
   inset, 154 at 1440 and 228 at 1920, linear between (15.417cqw - 68px),
   154 * u below. The heading-to-columns gap is 80 -> 120 as in
   [wayvo-1-1000].

   Vendor fights: h2 / h3 / p / ul rules at (0,2,1), over Elementor's and
   the kit's (0,1,1).
   ========================================================================== */

.wv-bc2-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-bc2 {
	--wvbc2-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvbc2-side: min(228px, max(calc(154 * var(--wvbc2-u)), calc(15.417cqw - 68px)));
	--wvbc2-gap: min(120px, max(calc(80 * var(--wvbc2-u)), calc(100cqw / 12 - 40px)));

	display: flex;
	flex-direction: column;
	gap: var(--wvbc2-gap);
	padding: calc(180 * var(--wvbc2-u)) var(--wvbc2-side);
	background-color: var(--wv-white, #ffffff);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wv-white, #ffffff), var(--wv-white, #ffffff)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* The Impact page's copy: its other sections run to the 40 -> 80 gutter
   (wayvo-impact.css --wvimp-pad), so this one does too, title and columns
   alike, rather than the shared 154 inset (Paul, 2026-10-23). Phones keep the
   phone rule below. */
.wv-bc2.wv-bc2--impact {
	--wvbc2-side: min(80px, max(calc(40 * var(--wvbc2-u)), calc(100cqw / 12 - 80px)));
}

/* ── Heading + intro ───────────────────────────────────────────────────── */
.wv-bc2__head {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--wvbc2-u));
	max-width: calc(827 * var(--wvbc2-u));
}

.wv-bc2 h2.wv-bc2__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(40px, calc(56 * var(--wvbc2-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: none;
}

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

/* ── The three points ──────────────────────────────────────────────────── */
.wv-bc2 ul.wv-bc2__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(60 * var(--wvbc2-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-bc2__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(16 * var(--wvbc2-u));
	margin: 0;
	padding: 0;
}

.wv-bc2__item::before,
.wv-bc2__item::marker {
	content: none;
}

/* The SVGs are 43 x 43 boxes holding Google's 24dp glyph at the same insets,
   so drawn at 32 they match the design's 32px icon. */
.wv-bc2__icon {
	flex: none;
	display: block;
	width: max(22.76px, calc(32 * var(--wvbc2-u)));
	height: auto;
	aspect-ratio: 1;
	color: var(--wv-ink, #101011);
}

.wv-bc2__item-copy {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--wvbc2-u));
}

/* 32 on laptop AND monitor — the monitor frame does not scale it. Shrinks
   below 1440 so it still fits a narrow column. */
.wv-bc2 h3.wv-bc2__item-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: clamp(20px, calc(32 * var(--wvbc2-u)), 32px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-bc2 p.wv-bc2__item-text {
	margin: 0;
	padding: 0;
	color: var(--wv-grey-500, #8d8b8b);
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvbc2-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* {words|url} links in the grey line: the line's own colour, underlined,
   black on hover. 0,2,1 so the customizer's link colour does not win. */
.wv-bc2 .wv-bc2__item-text a.wv-bc2__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.2s ease-in-out;
}

.wv-bc2 .wv-bc2__item-text a.wv-bc2__link:hover,
.wv-bc2 .wv-bc2__item-text a.wv-bc2__link:focus-visible {
	color: var(--wv-black, #101011);
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame: one column, title and text the same size. */
@media (max-width: 767px) {

	.wv-bc2 {
		gap: 80px;
		padding: 128px 40px;
	}

	/* On the same 40 as the three points under it (Paul, 2026-10-23). It
	   was pulled out to 20 on 2026-10-21, which left the title and intro on a
	   different edge from the icons. */
	.wv-bc2__head {
		gap: 10px;
		max-width: none;
	}

	.wv-bc2 h2.wv-bc2__title {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	.wv-bc2 p.wv-bc2__text {
		font-size: 20px;
		letter-spacing: -0.01em;
	}

	.wv-bc2 ul.wv-bc2__items {
		grid-template-columns: minmax(0, 1fr);
		gap: 42.67px;
	}

	.wv-bc2__item {
		gap: 10px;
	}

	.wv-bc2__icon {
		width: 22.76px;
	}

	.wv-bc2__item-copy {
		gap: 2.84px;
	}

	.wv-bc2 h3.wv-bc2__item-title,
	.wv-bc2 p.wv-bc2__item-text {
		font-size: 17.07px;
	}
}