/* ==========================================================================
   [wayvo-gift-better] — see shortcodes/wayvoGiftBetter.php for the design.

   Same unit as the other new sections: --wvgb-u is rendered px per laptop px
   (100cqw / 1440, stopping at 1.333). Side padding goes 40 -> 80 from 1440
   to 1920.

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

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

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

.wv-gb__panel {
	position: relative;
	box-sizing: border-box;
	height: var(--wvgb-h);
	overflow: hidden;
	border-radius: calc(8 * var(--wvgb-u));
}

/* ── The deck box ────────────────────────────────────────────────────────────
   White, the deck filling it top to bottom.

   The deck's height can't be handed --wvgb-h: a custom property carries its
   cqw unresolved, and inside the deck cqw means the deck's own wrapper (the
   panel, ~670 wide), not the page, so it came out at about half the box
   (Paul, 2026-10-19). Instead the wrapper becomes a SIZE container as tall as
   the panel and the deck reads its height as 100cqh. 86cqw, the deck's own
   width cap, still works: a size container answers both axes. The custom
   property beats the deck's inline --wvdv-height only because it is
   !important. */
.wv-gb__panel--deck {
	background-color: var(--wv-white, #ffffff);
}

.wv-gb__panel--deck .wv-deck-v-wrap {
	container-type: size;
	height: 100%;
}

.wv-gb__panel--deck .wv-deck-v {
	--wvdv-height: 100cqh !important;
}

/* ── The photo box ───────────────────────────────────────────────────────────
   Photo behind, the home section's light 270deg scrim over it, copy top-left
   and the button bottom-left. */
.wv-gb__panel--photo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(16 * var(--wvgb-u));
	padding: calc(40 * var(--wvgb-u));
	background-color: #e58fc8;
	color: var(--wv-white, #ffffff);
	isolation: isolate;
}

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

/* [wayvo-about-ender]: the yellow coat, framed as its design — the zip pull
   at the top, the daisy just under the middle. */
.wv-gb--about .wv-gb__photo {
	object-position: 50% 10%;
}

.wv-gb__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-gb__copy {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvgb-u));
}

/* Two lines in the design: "Ready to / gift better?" at 48px. */
.wv-gb h2.wv-gb__title {
	max-width: 6.2em;
	margin: 0;
	padding: 0;
	color: var(--wv-white, #ffffff);
	font-family: inherit;
	font-size: max(32px, calc(48 * var(--wvgb-u)));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* ~500 wide at 24px: breaks after "spend,". */
.wv-gb p.wv-gb__text {
	max-width: 21em;
	margin: 0;
	padding: 0;
	color: var(--wv-white, #ffffff);
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvgb-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* Site button system, the export's 46px tier, scaled; tokens overridden on
   the element as the home better-choice section does. */
.wv-gb .wv-gb__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvgb-u)));
	--wv-btn-min-h: max(32.71px, calc(46 * var(--wvgb-u)));
	--wv-btn-size: max(12px, calc(16 * var(--wvgb-u)));
}

/* Straight under [wayvo-about-story-team] on the same grey, which drops its
   bottom padding there (wayvo-about-story-team.css): the top padding becomes
   the panels' own gap (Paul, 2026-10-24). Phones already match: 14.22 both. */
.elementor-element:has(.wv-ast-wrap) + .elementor-element .wv-gb {
	padding-top: calc(20 * var(--wvgb-u));
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile frame was supplied; see the shortcode header. */
@media (max-width: 767px) {

	.wv-gb {
		grid-template-columns: 1fr;
		gap: 14.22px;
		padding: 14.22px 28.44px 0;
	}

	.elementor-element:has(.wv-ast-wrap) + .elementor-element .wv-gb {
		padding-top: 14.22px;
	}

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

	.wv-gb__panel--deck {
		--wvgb-h: 420px;
	}

	.wv-gb__panel--photo {
		--wvgb-h: 480px;
		gap: 12px;
		padding: 28.44px 20px;
	}

	.wv-gb__copy {
		gap: 8px;
	}

	.wv-gb h2.wv-gb__title {
		font-size: 32px;
	}

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

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