/* ==========================================================================
   [wayvo_grassy_section] — see shortcodes/wayvoGrassySection.php for the
   three designs and the photo crops.

   ── HOW IT SCALES ───────────────────────────────────────────────────────────
   --wvg-u is rendered px per laptop-design px: 100cqw / 1440, so 1 at the
   laptop frame and 1.333 at the monitor frame, where it stops. Type, logo and
   button are all `design px * u`, which reproduces the monitor PNG exactly
   (56 -> 75 heading, 24 -> 32 paragraph, 107 -> 143 logo, 46 -> 61 button).

   The PADDING does not scale with u — the monitor frame is not the laptop
   frame blown up. It goes 40 -> 80 vertically and 40 -> 240 at the sides
   between 1440 and 1920, i.e. linearly in the viewport width:

       pad-y = 100cqw / 12 - 80px          40 at 1440, 80 at 1920
       pad-x = 100cqw * 5/12 - 560px       40 at 1440, 240 at 1920

   Below 1440 both fall back to 40 * u; above 1920 the sides keep the content
   column at 1440. Every formula below meets the next at its seam, so nothing
   jumps.

   SUPERSEDED 2026-10-21 (Paul: content max 1440). The unit reads --wv-cw, so
   it stops at 1 at 1440; the padding stays 40 * u; and .wv-grassy__inner is
   capped at --wv-content-max and centred. Only the photo, and the band's
   height, still follow the full screen width.

   Vendor fights (see the memory note): Elementor's `.elementor img
   { height: auto }` and the kit/customizer heading styles are (0,1,1), so the
   img, h2 and p rules here are written at (0,2,1).
   ========================================================================== */

/* FULL-BLEED, same break-out as .wv-frogger-wrap and the same caveat: with a
   classic (non-overlay) scrollbar 100vw is ~17px wider than the page. If that
   shows as horizontal scroll, set the Elementor section to full width with no
   gaps and drop the two lines. */
.wv-grassy-wrap {
	container-type: inline-size;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wv-grassy {
	--wvg-u: clamp(0.5px, calc(var(--wv-cw, 100cqw) / 1440), 1.3334px);

	--wvg-pad-y: min(80px, max(calc(40 * var(--wvg-u)), calc(var(--wv-cw, 100cqw) / 12 - 80px)));
	--wvg-pad-x: calc(40 * var(--wvg-u));

	/* The tallest the band may be: a little under the screen, so the whole
	   section fits in one view with room for the header. The monitor frame
	   is 1040 tall — taller than a 1920x1080 browser window once the chrome
	   and site header are taken off — so the design's proportion cannot be
	   the only limit (Paul, 2026-10-17). */
	--wvg-fit: 92svh;

	position: relative;
	display: flex;
	flex-direction: column;
	/* 780 / 1440 of the width, as both desktop frames are, capped by the
	   screen height. A floor, not a fixed height, so the copy can never be
	   clipped on a short band — it grows instead. */
	min-height: min(calc(100cqw * 780 / 1440), var(--wvg-fit));
	overflow: hidden;
	color: var(--wv-white, #ffffff);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
	background-color: var(--wv-ink, #101011);
}

/* ── The photo ───────────────────────────────────────────────────────────── */
.wv-grassy__photo {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
}

.wv-grassy .wv-grassy__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ── Layout ──────────────────────────────────────────────────────────────────
   Copy top-left, logo top-right, button bottom-left. A grid rather than the
   export's two flex rows, so the phone tier can move the logo down beside the
   button by renaming areas instead of changing the markup. */
.wv-grassy__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"copy badge"
		"cta  .";
	column-gap: calc(127 * var(--wvg-u));
	row-gap: 32px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wv-content-max, 1440px);
	margin-inline: auto;
	padding: var(--wvg-pad-y) var(--wvg-pad-x);
}

.wv-grassy__copy {
	grid-area: copy;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvg-u));
}

/* Widths in em so the line breaks match the design at every scale: the
   heading box is 503 at 56px (two lines), the paragraph 522 at 24px. */
.wv-grassy h2.wv-grassy__title {
	max-width: 9em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(36px, calc(56 * var(--wvg-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.wv-grassy p.wv-grassy__text {
	max-width: 21.8em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(17px, calc(24 * var(--wvg-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── B Corp logo ─────────────────────────────────────────────────────────── */
.wv-grassy__badge {
	grid-area: badge;
	align-self: start;
	justify-self: end;
	display: block;
	width: max(72px, calc(107 * var(--wvg-u)));
	line-height: 0;
	color: inherit;
}

.wv-grassy .wv-grassy__badge img {
	display: block;
	width: 100%;
	height: auto;
}

.wv-grassy__badge:focus-visible {
	outline: 2px solid var(--wv-white, #ffffff);
	outline-offset: 4px;
}

/* ── Button ──────────────────────────────────────────────────────────────────
   Site button system, white variant (it sits on a photo). The export's 46px
   tier, scaled with everything else; opted into by overriding the tokens on
   the element, as .wv-frogger__cta does. Floors are the site's default 34px
   pill, which is also what the phone frame shows. */
.wv-grassy .wv-grassy__cta {
	grid-area: cta;
	align-self: end;
	justify-self: start;

	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(18px, calc(20 * var(--wvg-u)));
	--wv-btn-min-h: max(34px, calc(46 * var(--wvg-u)));
	--wv-btn-size: max(14px, calc(16 * var(--wvg-u)));
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame's Figma CSS (400 x 722): 28.44 padding, H3 40/110%
   -0.02em, P3 20/140% -0.01em, 11.38 gap, logo at the bottom right level
   with the S button (32.71 tall, 14.22 sides, 12px).

   HEIGHT follows the frame's 722/400 but is capped by the same --wvg-fit as
   the desktop tiers, so on a short phone the band fits the screen rather
   than running past it. The 480 floor is roughly the copy plus the logo row;
   below that the band grows rather than overlapping. */
@media (max-width: 767px) {

	.wv-grassy {
		min-height: max(480px, min(calc(100cqw * 722 / 400), var(--wvg-fit)));
	}

	.wv-grassy__inner {
		grid-template-areas:
			"copy copy"
			"cta  badge";
		column-gap: 16px;
		padding: 28.44px;
	}

	.wv-grassy__copy {
		gap: 11.38px;
	}

	.wv-grassy h2.wv-grassy__title {
		max-width: none;
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	.wv-grassy p.wv-grassy__text {
		max-width: none;
		font-size: 20px;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}

	/* Sized by HEIGHT. The design's logo box is 76 x 128, but the supplied
	   SVG is a squarer shape (137 x 200), so fitting it to the 76 WIDTH left
	   it ~13% short of the design and visibly too small. 128 tall puts it at
	   ~88 wide, the height the design shows. */
	.wv-grassy__badge {
		align-self: end;
		width: auto;
	}

	.wv-grassy .wv-grassy__badge img {
		width: auto;
		height: 128px;
	}

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