/* ==========================================================================
   Wayvo — "Frogger" brand grid  [wayvo_frogger]

   Enqueued by the shortcode only, so this sheet is not in the global
   $child_stylesheets list in functions.php.

   ── WHAT IT IS NOW ──────────────────────────────────────────────────────────
   A two-column section: copy on the left, a static three-column grid of every
   featured brand on the right. The copy is position: sticky and centred in the
   viewport, so as the page scrolls the cards travel past it — the same effect
   as the sticky card on the gift card product page (giftCardProduct.css).

   It used to be an animated backdrop: viewport-height, overflow hidden, cloned
   card sets on a translate loop. None of that survives. The section is as tall
   as its longest column and there is no animation at all, so there is nothing
   to pause, no reduced-motion tier, and nothing for the JS to do after it has
   dealt the cards.

   ── ON THE NUMBERS ──────────────────────────────────────────────────────────
   Built from the Figma export for "Frame 648", a 1440-wide frame; the design
   PNG (designs/frogger2.png) is 2880 wide — exactly 2x — so scale is 1.0 and
   the export's values go in literally.

   The card values are odd (196.94 x 262.59, 18.7564 padding, 15.0051 radius,
   37.51 gap, 30.0103 name, 14.8792 pill) because the card is a 262.6 x 350
   component placed as a 0.75 instance. On the 1440 canvas it genuinely IS
   ~197 x 263 — the PNG confirms it — so those placed values are what is built
   to, rounded to the half-pixel.

   ── --wvf-scale IS A LENGTH, AND THAT IS THE WHOLE POINT ────────────────────
   "How many rendered px per design px." The literals it multiplies are
   therefore UNITLESS Figma measurements: calc(197 * var(--wvf-scale)), not
   calc(197px * ...). Same convention as wayvo-how-it-works.css and
   customHeader.css, and for the same reason: a Figma frame is exactly one
   width and a browser is every width. A fixed 197px card is 13.7% of the 1440
   frame but 16.4% of a 1200 container — the same CSS, a visibly different
   design. The old build had three hand-set breakpoint tiers for exactly this;
   the scale replaces all of them.

       --wvf-scale: clamp(0.6px, calc(100cqw / 1440), 1.334px)

   100cqw is the container's own width, so at 1440 the scale is exactly 1px
   and every value is the design's. The wrapper is full-bleed (see below), so
   in practice that container IS the viewport — but it is still read off the
   wrapper rather than with vw, so if the breakout is ever removed the section
   scales to whatever box it is given instead of overflowing it.

   THE TWO LIMITS: the cap at 1.334 is 1920/1440, past which the section stops
   growing (a 75px heading on an ultrawide is not what anybody drew). The floor
   at 0.6 is 864/1440, the point below which the 24px body copy would drop
   under 14.4px. Below 864 the design is wider than its container, and it is
   the COPY column that gives: the grid is a fixed (scaled) width and the copy
   is 1fr, so it narrows and wraps. That is the intended trade at tablet sizes.
   Under 768 the mobile tier takes over with its own scale — see the bottom of
   this file.

   ── STICKY IS FRAGILE ───────────────────────────────────────────────────────
   position: sticky is cancelled by ANY ancestor with overflow other than
   visible, silently — devtools shows the rule applied and it simply does not
   stick. This sheet cannot reset ancestors it does not know about (the
   Elementor section, the OceanWP wrappers, the customizer's inline styles). If
   the copy scrolls away with the cards, that is where to look first — an
   Elementor section with Overflow set to Hidden is the usual culprit.
   ========================================================================== */

/* The section cannot be its own container query container, so the scale is
   read from this wrapper. Everything else lives on .wv-frogger.

   CAPPED AT THE CONTENT WIDTH (2026-10-21): the break-out below now stops at
   --wv-content-max, so past 1440 the scale stays 1 and the section sits
   centred, its white painted to the screen edges by the border-image on
   .wv-frogger. The rest of this note is from when it ran the full 100vw.

   FULL-BLEED. The shortcode lands inside a boxed content container, and the
   design's 40px inset is measured from the SCREEN edge — inside a box it was
   the box's margin plus 40 again, which put both the copy and the grid well
   short of the edges. So the wrapper breaks out to the viewport: 100vw wide,
   pulled left by the difference between its parent's centre and the screen's.
   In a container that is already full-width this is a no-op.

   Two consequences: the scale now reads the VIEWPORT width, so a 1440 screen
   renders the frame 1:1 whatever the container is set to; and on a platform
   with a classic (non-overlay) scrollbar, 100vw is the scrollbar's width wider
   than the page, which shows as ~17px of horizontal scroll. If that bites,
   the alternative is to set the Elementor section to full width with no
   gaps and drop the two lines below. */
.wv-frogger-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-frogger {
	/* Rendered px per design px. See the note at the top before changing it. */
	--wvf-scale: clamp(0.6px, calc(100cqw / 1440), 1.334px);

	/* Geist is loaded outside this theme (Elementor / the customizer), so the
	   family name lives here as the single place to correct it. */
	--wv-frogger-font: "Geist", "Geist Sans", sans-serif;

	--wvf-ink: var(--wv-ink, #101011);
	--wvf-white: var(--wv-white, #ffffff);

	/* ── Section ── Frame 648: padding 400/40 in the export, but the columns are
	   absolutely placed from y=61 and the middle one ends 56 above the frame's
	   bottom. The 400 is only where the copy happened to be drawn; the grid's
	   real inset is ~60. */
	--wvf-pad-y: calc(60 * var(--wvf-scale));
	--wvf-pad-x: calc(40 * var(--wvf-scale));

	/* The copy's right edge is 595 and the grid starts at 733: 138 between
	   them. Declared as the MINIMUM gap; the copy column is 1fr so at 1440 it
	   comes to 138 by itself. */
	--wvf-gutter: calc(60 * var(--wvf-scale));

	/* ── Grid ── three columns at 733 / 967.94 / 1202.88: pitch 234.94, so the
	   column gap is 38 against the row gap's 37.51. One number for both. */
	--wvf-card-w: calc(196.94 * var(--wvf-scale));
	--wvf-card-h: calc(262.59 * var(--wvf-scale));
	--wvf-gap: calc(37.5 * var(--wvf-scale));

	/* Column tops are 61 / 246 / 151, so relative to the first: 0 / 185 / 90.
	   Left column starts highest, middle lowest, right between them. */
	--wvf-stagger-2: calc(185 * var(--wvf-scale));
	--wvf-stagger-3: calc(90 * var(--wvf-scale));

	/* ── Card ── */
	--wvf-card-pad: calc(18.75 * var(--wvf-scale));
	--wvf-card-radius: calc(15 * var(--wvf-scale));
	--wvf-pill-h: calc(22.5 * var(--wvf-scale));
	--wvf-pill-pad: calc(7.5 * var(--wvf-scale));
	--wvf-pill-fs: calc(14.88 * var(--wvf-scale));
	--wvf-name-fs: calc(30 * var(--wvf-scale));

	/* ── Copy ── Frame 649: 555 wide; H2 56/100%, P2 24/140%; 16 between them,
	   40 to the button.

	   THE COPY STOPS GROWING AT THE DESIGN SIZE. The cards follow --wvf-scale
	   up to 1.334 on a wide monitor, but at that cap the heading was 75px and
	   the body 32px — too big. --wvf-copy-scale is the same scale capped at
	   1px, so the copy tops out at the Figma text styles (56 / 24), the same
	   ceiling as the featured brands section's heading. It drives the width
	   and gaps too, so the block shrinks in proportion, not just the font.
	   Below 1440 the two scales are identical. The phone tier sets its own
	   copy sizes and is unaffected. */
	--wvf-copy-scale: min(var(--wvf-scale), 1px);
	--wvf-copy-w: calc(555 * var(--wvf-copy-scale));
	--wvf-heading-fs: calc(56 * var(--wvf-copy-scale));
	--wvf-text-fs: calc(24 * var(--wvf-copy-scale));
	--wvf-copy-gap: calc(16 * var(--wvf-copy-scale));
	--wvf-cta-gap: calc(40 * var(--wvf-copy-scale));

	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--wvf-gutter);
	align-items: start;

	box-sizing: border-box;
	width: 100%;
	padding: var(--wvf-pad-y) var(--wvf-pad-x);

	background: var(--wvf-white);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wvf-white), var(--wvf-white)) fill 0 / 0 / 0 100vmax;
	font-family: var(--wv-frogger-font);
}

/* --------------------------------------------------------------------------
   Copy — the sticky half
   -------------------------------------------------------------------------- */

/* The column itself is a plain grid item that stretches to the row's height —
   the grid's height — which is what gives the sticky child room to travel. */
.wv-frogger__copy {
	align-self: stretch;
	min-width: 0;
}

/* Sticky at the top, one viewport tall, contents centred: the copy sits in the
   middle of the screen for the whole time the cards are scrolling past, without
   this sheet needing to know how tall the copy is. giftCardProduct.css does the
   same with `top: calc(50vh - height/2)` because its card height is known;
   this one is not. */
.wv-frogger__copy-inner {
	position: sticky;
	top: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	box-sizing: border-box;
	height: 100vh;
	max-width: var(--wvf-copy-w);
}

.wv-frogger__heading {
	margin: 0;

	font-family: var(--wv-frogger-font);
	font-size: var(--wvf-heading-fs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wvf-ink);
}

.wv-frogger__text {
	margin: var(--wvf-copy-gap) 0 0;

	font-family: var(--wv-frogger-font);
	font-size: var(--wvf-text-fs);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--wvf-ink);
}

/* The export's Button is the 46px tier — 16px type, 15/20 padding — which is
   NOT the site default (tokens.css explains why the default is the compact
   34px pill). Opted into the same way giftCardProduct.css does: by overriding
   the tokens on the element, not by restyling the button. */
.wv-frogger__cta {
	--wv-btn-pad-y: 15px;
	--wv-btn-pad-x: 20px;
	--wv-btn-min-h: 46px;
	--wv-btn-size: 16px;
	--wv-btn-font: var(--wv-frogger-font);

	margin-top: var(--wvf-cta-gap);
}

/* --------------------------------------------------------------------------
   Stage and columns
   -------------------------------------------------------------------------- */

/* grid-auto-flow: column, so the stage takes however many columns the JS deals
   and needs no matching count here. Anchored to the end: the design's grid sits
   flush with the section's right padding, and the copy column is the one that
   flexes. */
.wv-frogger__stage {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--wvf-card-w);
	column-gap: var(--wvf-gap);
	align-items: start;
	justify-content: end;
}

.wv-frogger__column {
	display: flex;
	flex-direction: column;
	row-gap: var(--wvf-gap);
	min-width: 0;
}

/* The stagger, as top padding rather than margin so the column's box still
   starts at the row's top and the section's height stays honest. */
.wv-frogger__column:nth-child(2) {
	padding-top: var(--wvf-stagger-2);
}

.wv-frogger__column:nth-child(3) {
	padding-top: var(--wvf-stagger-3);
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.wv-frogger-card {
	position: relative;
	flex: 0 0 auto;
	width: var(--wvf-card-w);
	height: var(--wvf-card-h);
	border-radius: var(--wvf-card-radius);
	overflow: hidden;

	/* The scrim and the content are stacked with z-index below; isolating
	   keeps that stack local to the card. */
	isolation: isolate;

	/* Shows through until the lazy image decodes. */
	background-color: #e9eaec;
}

/* Pinned to the card's edges rather than sized in flow. OceanWP sets a global
   `img { max-width: 100%; height: auto }`, which beat a plain `height: 100%`
   and let landscape images collapse to their own aspect ratio at the top of the
   card. Absolute offsets make the box the card itself, and the !important
   settles the parent theme's rule for good. Losing most of a wide image is
   fine and expected. */
.wv-frogger-card__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;

	object-fit: cover;
	object-position: center;
}

/* The export's Gradient Overlay: transparent to 30% ink, top to bottom, drawn
   43 below the card's bottom edge so the card itself reaches ~25%. Over the
   full card here — the difference is not visible and it keeps the pseudo the
   size of its box. Sits above the image and below the content. */
.wv-frogger-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(16, 16, 17, 0) 0%, rgba(16, 16, 17, 0.3) 100%);
	pointer-events: none;
}

/* Pill top, name bottom, both inset from the card edge by the same padding. */
.wv-frogger-card__content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	/* Keeps the pill to the width of its own text rather than the full card. */
	align-items: flex-start;

	padding: var(--wvf-card-pad);

	font-family: var(--wv-frogger-font);
	font-weight: 500;
}

/* The fill comes from the card's inline --wv-pill-bg, which PHP reads from the
   Wayvo Card Categories registry — nothing per-category is hardcoded here. The
   text is a fixed near-black on every category. */
.wv-frogger-card__pill {
	/* Fixed height with the label centred on it, rather than a height built out
	   of padding and line-height — the pill is too shallow to land the text
	   accurately any other way. */
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;

	height: var(--wvf-pill-h);
	padding: 0 var(--wvf-pill-pad);
	border-radius: 9999px;

	font-family: var(--wv-frogger-font);
	font-size: var(--wvf-pill-fs);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	font-feature-settings: 'tnum' on, 'lnum' on;
	white-space: nowrap;

	background-color: var(--wv-pill-bg, #6b7280);
	color: #101011;
}

.wv-frogger-card__name {
	/* Full width of the padded box, so long names wrap rather than truncate. */
	align-self: stretch;

	font-family: var(--wv-frogger-font);
	font-size: var(--wvf-name-fs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wvf-white);
}

/* ==========================================================================
   Mobile tier  (< 768px)

   MUST MATCH MOBILE_QUERY in wayvo-frogger-grid.js — it is the one thing
   repeated across the two files, because the CSS needs it to lay the tier out
   and the JS needs it to know which build to run.

   There is no mobile design. The sizes are inferred from the desktop export,
   drawn to a 390 frame, and the scale below reads that frame off the container
   the same way the desktop one reads 1440 — clamped tightly, because a 320
   phone should only shrink a little and a 430 phone only grow a little.

   THE LAYOUT: copy on top, centred, no longer sticky. Under it the stage is a
   horizontal swipe-scroller — real overflow scrolling, not a transform — with
   three rows that move as one block and are staggered by their left padding.
   The JS renders each row three times and keeps the scroller in the middle
   copy, so it never runs out in either direction. The rows are as wide as
   their content; the scroller is what clips them, and it bleeds to the screen
   edges through the section's side padding.

   The card proportions: 132 x 176 is the desktop card at 0.67, keeping its
   3:4. The stagger keeps the desktop ratios — 185 and 90 against a 300 pitch
   are 0.62 and 0.30, so against a 144 pitch they are 88 and 44. Three rows
   come to 552 tall, which with the copy is a phone screen's worth.
   ========================================================================== */

@media (max-width: 767px) {

	.wv-frogger {
		--wvf-scale: clamp(0.85px, calc(100cqw / 390), 1.15px);

		--wvf-pad-y: calc(32 * var(--wvf-scale));
		--wvf-pad-x: calc(20 * var(--wvf-scale));

		/* Copy to rows. */
		--wvf-gutter: calc(32 * var(--wvf-scale));

		--wvf-card-w: calc(132 * var(--wvf-scale));
		--wvf-card-h: calc(176 * var(--wvf-scale));
		--wvf-gap: calc(12 * var(--wvf-scale));

		--wvf-stagger-2: calc(88 * var(--wvf-scale));
		--wvf-stagger-3: calc(44 * var(--wvf-scale));

		--wvf-card-pad: calc(12.5 * var(--wvf-scale));
		--wvf-card-radius: calc(10 * var(--wvf-scale));
		--wvf-pill-h: calc(16 * var(--wvf-scale));
		--wvf-pill-pad: calc(5.5 * var(--wvf-scale));
		--wvf-pill-fs: calc(10.5 * var(--wvf-scale));
		--wvf-name-fs: calc(20 * var(--wvf-scale));

		--wvf-copy-w: 100%;
		--wvf-heading-fs: calc(36 * var(--wvf-scale));
		--wvf-text-fs: calc(17 * var(--wvf-scale));
		--wvf-copy-gap: calc(12 * var(--wvf-scale));
		--wvf-cta-gap: calc(28 * var(--wvf-scale));

		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wvf-gutter);
	}

	/* Not sticky, not a viewport tall: an ordinary block, left-aligned like
	   the desktop copy (Paul, 2026-10-21 — was centred). */
	.wv-frogger__copy-inner {
		position: static;
		height: auto;
		align-items: flex-start;
		text-align: left;
		margin: 0;
	}

	/* The swipe-scroller. Bleeds through the section's side padding so the
	   rows run edge to edge; the scrollbar is hidden because the strip is
	   endless and a bar would only misreport where it is. overscroll-behavior
	   keeps a hard swipe from turning into the browser's back gesture. */
	.wv-frogger__stage {
		display: block;
		margin: 0 calc(-1 * var(--wvf-pad-x));

		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.wv-frogger__stage::-webkit-scrollbar {
		display: none;
	}

	/* Sized by content so the scroller has something to scroll. */
	.wv-frogger__block {
		display: flex;
		flex-direction: column;
		row-gap: var(--wvf-gap);
		width: max-content;
	}

	/* A row is a single flex line of cards, three copies long. The gap is the
	   same between copies as within one, which is what makes the period a
	   clean multiple the JS can measure. */
	.wv-frogger__row {
		display: flex;
		flex-direction: row;
		column-gap: var(--wvf-gap);
		width: max-content;
	}

	/* The stagger, as left padding: it shifts a row's phase without changing
	   its period, so the loop stays seamless. */
	.wv-frogger__row:nth-child(2) {
		padding-left: var(--wvf-stagger-2);
	}

	.wv-frogger__row:nth-child(3) {
		padding-left: var(--wvf-stagger-3);
	}
}

/* ── 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-frogger {
		--wvf-pill-fs: max(15px, calc(10.5 * var(--wvf-scale)));
	}
}