/* ==========================================================================
   [wayvo-welcome-ender] — see shortcodes/wayvoWelcomeEnder.php for the
   design, where the cards come from and the motion.

   --wvwe-u is rendered px per laptop px (100cqw / 1440, 0.5 -> 1.333); outer
   padding 40 -> 80 from 1440 to 1920, as the other new sections.

   The cards are the frogger grid's (.wv-frogger-card, styled by
   wayvo-frogger-grid.css, which reads its sizes from --wvf-* custom
   properties). Those are set here on the stage, so the cards take this
   section's size without touching the frogger section.

   Vendor fights: h2 / p / img rules at (0,2,1)+, over Elementor's and the
   kit's (0,1,1); `.elementor img { height: auto }` is why the photo rule
   carries two classes.
   ========================================================================== */

.wv-we-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-we {
	/* WIDTH unit: drives the padding, which must not depend on --wvwe-u
	   below (it is part of that sum). */
	--wvwe-uw: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvwe-pad: min(80px, max(calc(40 * var(--wvwe-uw)), calc(100cqw / 12 - 80px)));
	/* THE WHOLE SECTION FITS THE SCREEN (Paul, 2026-10-20). u is the smaller
	   of the width unit and what lets 780u + the top and bottom padding fit
	   the window, less the admin bar and ~70 for the floating header that
	   sits over the top of the screen. Without it a wide screen drew the
	   section ~1200 tall. When height wins, the panels keep their full width
	   and only get shorter; the photo crops, the cards keep their width and
	   show a little less of the column. */
	--wvwe-screen: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 70px);
	--wvwe-u: clamp(0.5px, min(var(--wvwe-uw), calc((var(--wvwe-screen) - 2 * var(--wvwe-pad)) / 780)), 1.3334px);
	--wvwe-h: calc(780 * var(--wvwe-u));

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

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

/* ── The photo panel ─────────────────────────────────────────────────────── */
.wv-we__panel--photo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(16 * var(--wvwe-u));
	padding: calc(40 * var(--wvwe-u));
	background-color: #e58fc8;
	color: var(--wv-white, #ffffff);
	isolation: isolate;
}

.wv-we .wv-we__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	/* The design shows the top of the photo, the lips on the top edge. */
	object-position: 50% 30%;
}

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

/* "Redeem your / gift card": 421 wide at 56px. */
.wv-we h2.wv-we__title {
	max-width: 7.6em;
	margin: 0;
	padding: 0;
	color: var(--wv-white, #ffffff);
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvwe-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Two lines at ~539 wide, breaking after "love,". */
.wv-we p.wv-we__text {
	max-width: 22.6em;
	margin: 0;
	padding: 0;
	color: var(--wv-white, #ffffff);
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvwe-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* Site button system, white variant, the export's 46px tier, scaled. */
.wv-we .wv-we__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvwe-u)));
	--wv-btn-min-h: max(36px, calc(46 * var(--wvwe-u)));
	--wv-btn-size: max(14px, calc(16 * var(--wvwe-u)));
}

/* ── The cards panel ─────────────────────────────────────────────────────────
   Three equal columns 25 apart, flush to the panel's sides; each column's
   track is moved by the script. Cards ~207 x 285 at 1440 (1 : 1.38), 25
   apart. The --wvf-* sizes are the frogger card's, scaled to this card: the
   frogger draws a 197-wide card, so its type and pill carry over at about
   1.05x. */
.wv-we__panel--cards {
	background-color: var(--wv-white, #ffffff);
}

.wv-we__stage {
	--wvwe-gap: calc(25 * var(--wvwe-uw));
	--wvf-card-w: 100%;
	/* Card sizes run off the WIDTH unit (uw): the card's own size comes from
	   the column width, so its type must too, or a height-capped section
	   would shrink the text inside full-size cards. */
	/* One column: half the section's content width less the 20 between the
	   panels, less the two column gaps, over three. 206.7 at 1440. */
	--wvwe-col: calc(((100cqw - 2 * var(--wvwe-pad) - 20 * var(--wvwe-u)) / 2 - 2 * var(--wvwe-gap)) / 3);
	--wvf-card-h: calc(var(--wvwe-col) * 1.38);
	--wvf-card-pad: calc(19.7 * var(--wvwe-uw));
	--wvf-card-radius: calc(15.75 * var(--wvwe-uw));
	--wvf-pill-h: calc(23.6 * var(--wvwe-uw));
	--wvf-pill-pad: calc(7.9 * var(--wvwe-uw));
	--wvf-pill-fs: calc(15.6 * var(--wvwe-uw));
	--wvf-name-fs: calc(31.5 * var(--wvwe-uw));
	--wvf-white: var(--wv-white, #ffffff);
	--wv-frogger-font: var(--wv-btn-font, "Geist", sans-serif);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wvwe-gap);
	height: 100%;
}

.wv-we__col {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.wv-we__track {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wvwe-gap);
	width: 100%;
	will-change: transform;
}

/* The design's stagger, so the three never line up: the first column shows
   the bottom of a card at the top of the panel, the third sits a third of a
   card down. Applied to the column, not the track, so the script's
   transform is untouched. */
.wv-we__col:first-child .wv-we__track {
	top: calc(-0.77 * (var(--wvf-card-h) + var(--wvwe-gap)));
}

.wv-we__col--late .wv-we__track {
	top: calc(-0.35 * (var(--wvf-card-h) + var(--wvwe-gap)));
}

.wv-we .wv-frogger-card {
	width: 100%;
}

/* ── [wayvo-impact-ender] ────────────────────────────────────────────────────
   White band, grey card panel, no bottom padding (the newsletter under it
   brings the 20). One centred column of the How it works Discover cards
   (.wayvo-hiw-brand, styled by wayvo-how-it-works.css from --hiw-* values,
   set here): 286 x 316, 23 apart, a card centred in the panel as in How it
   works. Their size runs off the WIDTH unit, as the welcome cards do, so a
   screen-capped panel shows less of the column rather than smaller cards. */
.wv-we--impact {
	padding-bottom: 0;
	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;
}

.wv-we--impact .wv-we__panel--cards {
	background-color: var(--wv-grey-200, #f5f5f5);
}

/* cards_url (Impact, 2026-10-23): the whole cards panel is a link to
   /brands/. Over the moving cards, under nothing. */
.wv-we__panel--cards a.wv-we__cards-link {
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
	cursor: pointer;
}

.wv-we__panel--cards a.wv-we__cards-link:focus-visible {
	outline: 2px solid var(--wv-black, #101011);
	outline-offset: -4px;
}

.wv-we--impact .wv-we__photo {
	object-position: 50% 50%;
}

/* "Send a gift / card now": 368 wide at 56px; three lines at ~319. */
.wv-we--impact h2.wv-we__title {
	max-width: 6.6em;
}

.wv-we--impact p.wv-we__text {
	max-width: 13.4em;
}

.wv-we--impact .wv-we__stage--single {
	--hiw-scale: var(--wvwe-uw);
	--hiw-card-w: calc(286 * var(--hiw-scale));
	--hiw-card-h: calc(316 * var(--hiw-scale));
	--hiw-surface: #ffffff;
	--hiw-ink: #101011;
	--hiw-badge-idle: #e5e5e5;
	--wvwe-gap: calc(23 * var(--hiw-scale));

	display: flex;
	justify-content: center;
}

.wv-we--impact .wv-we__stage--single .wv-we__col {
	flex: none;
	width: var(--hiw-card-w);
	height: 100%;
}

/* Outranks the welcome stagger (.wv-we__col:first-child …, also 0,3,0) by
   coming later. */
.wv-we--impact .wv-we__stage--single .wv-we__track {
	top: calc((100% - var(--hiw-card-h)) / 2);
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile frame; see the shortcode header. The panels stack: photo 480,
   cards 520, 14.22 apart, 20 gutters. Still three columns of moving cards,
   smaller (the frogger's own phone tier, scaled to this column width). */
@media (max-width: 767px) {

	.wv-we {
		--wvwe-pad: 20px;
		grid-template-columns: 1fr;
		gap: 14.22px;
	}

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

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

	.wv-we__copy {
		gap: 8px;
	}

	.wv-we h2.wv-we__title {
		font-size: 32px;
	}

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

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

	.wv-we__panel--cards {
		--wvwe-h: 520px;
	}

	.wv-we__stage {
		--wvwe-gap: 10px;
		--wvwe-col: calc((100cqw - 40px - 2 * var(--wvwe-gap)) / 3);
		--wvf-card-pad: 8px;
		--wvf-card-radius: 8px;
		--wvf-pill-h: 14px;
		--wvf-pill-pad: 5px;
		--wvf-pill-fs: 9.5px;
		--wvf-name-fs: 15px;
	}

	/* One column in a 520 panel: about 215 x 237. */
	.wv-we--impact .wv-we__stage--single {
		--hiw-scale: 0.75px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wv-we__track {
		transition: none !important;
	}
}

/* ── 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-we__stage {
		--wvf-pill-fs: 15px;
	}
}