/* ==========================================================================
   [wayvo-b-corp] — see shortcodes/wayvoBCorp.php for the three designs.

   Same scaling scheme as the other new sections (wayvo-grassy-section.css):
   --wvbk-u is rendered px per laptop px (100cqw / 1440, stopping at 1.333),
   --wvbk-pad is the screen gutter, 40 at 1440 and 80 at 1920.

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

.wv-bcorp-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-bcorp {
	--wvbk-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvbk-pad: min(80px, max(calc(40 * var(--wvbk-u)), calc(100cqw / 12 - 80px)));

	/* No top padding: it sits 20px under [wayvo-1-1000], which supplies the
	   20. space_above="yes" for anywhere else. */
	padding: 0 var(--wvbk-pad) var(--wvbk-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;
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

.wv-bcorp--space-above {
	padding-top: var(--wvbk-pad);
}

/* ── The band ──────────────────────────────────────────────────────────────
   Row, pushed right (justify flex-end) with the design's lopsided padding:
   115 on the left, 344 on the right. */
.wv-bcorp__band {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: calc(80 * var(--wvbk-u));
	padding: calc(80 * var(--wvbk-u)) calc(344 * var(--wvbk-u)) calc(80 * var(--wvbk-u)) calc(115 * var(--wvbk-u));
	overflow: hidden;
	border-radius: calc(8 * var(--wvbk-u));
	background-color: #d1e83b;
	color: var(--wv-ink, #101011);
	isolation: isolate;
}

.wv-bcorp .wv-bcorp__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

.wv-bcorp__badge {
	flex: none;
	display: block;
	line-height: 0;
}

/* Sized by height. The tight SVG is the mark alone, so 160 tall comes out at
   ~95 wide: the design's 96 x 160 (the old padded file only reached ~130
   of the 160 in ink). Crop measured in a browser canvas, not QuickLook,
   whose SVG thumbnails add their own margin. */
.wv-bcorp .wv-bcorp__logo {
	display: block;
	width: auto;
	height: max(114.44px, calc(160 * var(--wvbk-u)));
	max-width: none;
}

a.wv-bcorp__badge:focus-visible {
	outline: 2px solid var(--wv-ink, #101011);
	outline-offset: 4px;
}

/* ── Copy + button ─────────────────────────────────────────────────────── */
.wv-bcorp__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(40 * var(--wvbk-u));
	min-width: 0;
	max-width: calc(725 * var(--wvbk-u));
}

.wv-bcorp__copy {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvbk-u));
}

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

/* 568 wide at 18px in the design, in em so the breaks hold at every scale. */
.wv-bcorp p.wv-bcorp__text {
	max-width: 31.56em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(12.8px, calc(18 * var(--wvbk-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* The export's 46px tier, scaled; tokens overridden on the element. */
.wv-bcorp .wv-bcorp__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvbk-u)));
	--wv-btn-min-h: max(32.71px, calc(46 * var(--wvbk-u)));
	--wv-btn-size: max(12px, calc(16 * var(--wvbk-u)));
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame: a column, padding 40, everything left-aligned. */
@media (max-width: 767px) {

	.wv-bcorp {
		padding: 0 20px 20px;
	}

	.wv-bcorp--space-above {
		padding-top: 20px;
	}

	.wv-bcorp__band {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 40px;
		padding: 40px;
		border-radius: 5.69px;
	}

	.wv-bcorp .wv-bcorp__logo {
		height: 114.44px;
	}

	.wv-bcorp__body {
		align-self: stretch;
		gap: 28.44px;
		max-width: none;
	}

	.wv-bcorp__copy {
		gap: 10px;
	}

	.wv-bcorp h2.wv-bcorp__title {
		font-size: 28.44px;
	}

	.wv-bcorp p.wv-bcorp__text {
		max-width: none;
		font-size: 12.8px;
	}

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

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