/* ==========================================================================
   [wayvo_home_betterChoice] — see shortcodes/wayvoHomeBetterChoice.php for
   the three designs and the images.

   ── HOW IT SCALES ───────────────────────────────────────────────────────────
   Same scheme as the grassy and Finisterre sections. --wvbc-u is rendered px
   per laptop px (100cqw / 1440, stopping at 1.333 = the monitor frame).
   Type, logos, buttons, gaps and panel height are `design px * u`.

   --wvbc-pad is the side padding and the panels' inner padding: 40 at 1440,
   80 at 1920, linear between, 40 * u below — measured off the monitor PNG,
   where 40 * 1.333 would be 53. The 20px gap between the panels does NOT
   scale; it is 20 in both frames.

   The panels are 780 * u tall, but never taller than --wvbc-fit, so a
   monitor shows a whole panel at once (Paul's rule from the grassy section).
   min-height throughout, so content that needs more room grows the panel.

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

/* Breaks out of the boxed container like .wv-grassy-wrap, but only as far
   as the content width (2026-10-21); the white band is painted beyond it. */
.wv-wvbc-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-wvbc {
	--wvbc-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvbc-pad: min(80px, max(calc(40 * var(--wvbc-u)), calc(100cqw / 12 - 80px)));
	--wvbc-fit: 92svh;

	display: flex;
	flex-direction: column;
	gap: calc(80 * var(--wvbc-u));
	padding: calc(180 * var(--wvbc-u)) var(--wvbc-pad) var(--wvbc-pad);
	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);
}

/* ── Heading ───────────────────────────────────────────────────────────────── */
.wv-wvbc__head {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvbc-u));
	margin: 0;
	padding: 0;
}

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

/* 670 wide at 24px in the design. */
.wv-wvbc p.wv-wvbc__text {
	max-width: 27.9em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(18px, calc(24 * var(--wvbc-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── Panels ────────────────────────────────────────────────────────────────── */
.wv-wvbc__panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.wv-wvbc__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: calc(16 * var(--wvbc-u));
	box-sizing: border-box;
	min-height: min(calc(780 * var(--wvbc-u)), var(--wvbc-fit));
	padding: var(--wvbc-pad);
	overflow: hidden;
	border-radius: calc(8 * var(--wvbc-u));
}

.wv-wvbc__panel--grey {
	background-color: var(--wv-grey-200, #f5f5f5);
}

.wv-wvbc h3.wv-wvbc__panel-title,
.wv-wvbc h3.wv-wvbc__photo-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: max(32px, calc(40 * var(--wvbc-u)));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-wvbc h3.wv-wvbc__panel-title {
	color: inherit;
}

.wv-wvbc__panel-top {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvbc-u));
}

/* 459 wide at 24px. */
.wv-wvbc p.wv-wvbc__panel-text {
	max-width: 19.1em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvbc-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.wv-wvbc__panel-bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(40 * var(--wvbc-u));
}

/* 438 wide at 20px, grey-500. */
.wv-wvbc p.wv-wvbc__certs-text {
	max-width: 21.9em;
	margin: 0;
	padding: 0;
	color: var(--wv-grey-500, #8d8b8b);
	font-family: inherit;
	font-size: max(14.22px, calc(20 * var(--wvbc-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* ── Certification logos ─────────────────────────────────────────────────────
   Spread across the panel, centred on one line. Each logo is sized by HEIGHT
   to the design and keeps its own aspect; the files are transparent and
   cropped tight, so the heights below are the logos' real sizes.
   mix-blend-mode: darken is the export's — harmless with transparent files,
   and it would still drop out white if a logo on white is ever swapped in. */
.wv-wvbc__logos {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: calc(40 * var(--wvbc-u));
	align-self: stretch;
	mix-blend-mode: darken;
}

.wv-wvbc .wv-wvbc__logo {
	display: block;
	flex: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.wv-wvbc .wv-wvbc__logo--bcorp {
	height: calc(86 * var(--wvbc-u));
}

.wv-wvbc .wv-wvbc__logo--climate {
	height: calc(50.34 * var(--wvbc-u));
}

.wv-wvbc .wv-wvbc__logo--one-percent {
	height: calc(51.11 * var(--wvbc-u));
}

/* The export's outlined "UK CHARITY" pill: 1.59 border, 15.93 sides, 41.42
   tall, bold 19.12px. The file names Inter for it, which is the same Inter
   mistake as elsewhere in the exports — it is Geist at 700 here, which is why
   the Geist enqueue loads the range up to 700. */
.wv-wvbc__charity {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: calc(41.42 * var(--wvbc-u));
	padding: 0 calc(15.93 * var(--wvbc-u));
	border: calc(1.59 * var(--wvbc-u)) solid var(--wv-ink, #101011);
	border-radius: 9999px;
	color: var(--wv-ink, #101011);
	font-size: calc(19.12 * var(--wvbc-u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Site button system: primary (ink) in the grey panel, white on the photo.
   The export's 46px tier, scaled; tokens overridden on the element as
   .wv-frogger__cta does. Floors are the phone frame's S button. */
.wv-wvbc .wv-wvbc__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvbc-u)));
	--wv-btn-min-h: max(32.71px, calc(46 * var(--wvbc-u)));
	--wv-btn-size: max(12px, calc(16 * var(--wvbc-u)));
}

/* ── The photo panel ─────────────────────────────────────────────────────────
   Photo behind, the export's 270deg gradient (20% black on the LEFT, clear
   on the right) over it, heading top-left and the button bottom-left. */
.wv-wvbc__panel--photo {
	align-items: flex-start;
	background-color: #e58fc8;
	color: var(--wv-white, #ffffff);
	isolation: isolate;
}

.wv-wvbc .wv-wvbc__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* A little above centre: the lips sit on the top edge, as in both
	   desktop frames. */
	object-position: 50% 40%;
}

.wv-wvbc__panel--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
	pointer-events: none;
}

.wv-wvbc h3.wv-wvbc__photo-title {
	color: var(--wv-white, #ffffff);
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame's Figma CSS (400 x 1253). Padding 128 / 20 / 0. The
   panels stack, 14.22 apart. The grey panel stops spreading its two halves
   apart and uses a plain 80 gap; its type drops a tier (H4 32/120%, P4
   16/140%, 14.22 note) and the logos come down to ~0.47 of laptop. The photo
   panel is a 320-tall strip cropped to the middle of the photo. */
@media (max-width: 767px) {

	.wv-wvbc {
		gap: 80px;
		padding: 128px 20px 0;
	}

	.wv-wvbc__head {
		gap: 11.38px;
	}

	.wv-wvbc h2.wv-wvbc__title {
		font-size: 40px;
		line-height: 1.1;
	}

	.wv-wvbc p.wv-wvbc__text {
		max-width: none;
		font-size: 20px;
		letter-spacing: -0.01em;
	}

	.wv-wvbc__panels {
		grid-template-columns: 1fr;
		gap: 14.22px;
	}

	.wv-wvbc__panel {
		border-radius: 5.69px;
	}

	.wv-wvbc__panel--grey {
		justify-content: flex-start;
		gap: 80px;
		min-height: 0;
		padding: 20px;
	}

	.wv-wvbc__panel-top {
		gap: 11.38px;
	}

	.wv-wvbc h3.wv-wvbc__panel-title,
	.wv-wvbc h3.wv-wvbc__photo-title {
		font-size: 32px;
		line-height: 1.2;
	}

	.wv-wvbc p.wv-wvbc__panel-text {
		max-width: none;
		font-size: 16px;
		letter-spacing: -0.01em;
	}

	.wv-wvbc__panel-bottom {
		gap: 28.44px;
	}

	.wv-wvbc p.wv-wvbc__certs-text {
		max-width: none;
		font-size: 14.22px;
	}

	/* SIZED TO FILL THE ROW, not to the export. At the export's sizes the four
	   logos come to ~219px across a 320px row and read as too small and too
	   spread out (Paul, 2026-10-17). So the export's mobile sizes are
	   multiplied by --wvbc-ls, worked out from the row's own width:

	       row  = 100cqw - 80px        (20 section + 20 panel padding a side)
	       ls   = (row - 3 x 12px gap) / 219

	   which makes the four logos plus their gaps exactly the row's width —
	   1.3x the export on a 400 phone. Clamped at 1.6x so a large phone or a
	   small tablet does not blow them up. */
	.wv-wvbc__logos {
		--wvbc-ls: clamp(1px, calc((100cqw - 116px) / 219), 1.6px);
		gap: 12px;
	}

	.wv-wvbc .wv-wvbc__logo--bcorp {
		height: calc(40.4 * var(--wvbc-ls));
	}

	.wv-wvbc .wv-wvbc__logo--climate {
		height: calc(23.79 * var(--wvbc-ls));
	}

	.wv-wvbc .wv-wvbc__logo--one-percent {
		height: calc(24.15 * var(--wvbc-ls));
	}

	.wv-wvbc__charity {
		height: calc(19.57 * var(--wvbc-ls));
		padding: 0 calc(7.53 * var(--wvbc-ls));
		border-width: calc(0.75 * var(--wvbc-ls));
		font-size: calc(9.03 * var(--wvbc-ls));
	}

	.wv-wvbc .wv-wvbc__cta {
		--wv-btn-pad-x: 14.22px;
		--wv-btn-min-h: 32.71px;
		--wv-btn-size: 12px;
		--wv-btn-tracking: -0.02em;
	}

	/* The photo panel's button is a hair smaller in the export: 11.38px. */
	.wv-wvbc .wv-wvbc__cta--photo {
		--wv-btn-size: 11.38px;
		--wv-btn-tracking: -0.01em;
	}

	.wv-wvbc__panel--photo {
		min-height: 320px;
		padding: 28.44px;
	}

	.wv-wvbc .wv-wvbc__photo {
		object-position: 50% 50%;
	}
}

/* ── 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-wvbc p.wv-wvbc__certs-text {
		font-size: 15px;
	}
}