/* Wayvo About Us featured brands — [wayvo_about_featured_brands]
 *
 * One rounded banner: fixed copy top left, a brand photo behind it, a small
 * brand card bottom right, arrows bottom left. The photo and the card's
 * contents swipe left to the next brand together.
 *
 * Enqueued by the shortcode only.
 *
 * ── THE SCALE ───────────────────────────────────────────────────────────────
 * Two scales, both from the CONTAINER width (the 1440 Figma frame = 1px):
 *
 *   --afb-g  the outer gutter. min(100cqw/1440, 1px), no floor, so the banner
 *            always fits the page.
 *   --afb-s  everything inside the banner. Floored at 0.75px, so copy and the
 *            card stay readable on a tablet. The banner itself is width: 100%
 *            and only holds the design's 1360:820 as an aspect-ratio — where
 *            the floored content needs more height than that, the banner grows
 *            to fit rather than overflowing. (That only works because the
 *            BANNER is overflow: visible; the clipping is on .wv-afb-bgs.)
 *
 * The pill and the arrows do not scale: same call as the All Brands section,
 * where a scaled 14px pill stopped being readable first.
 *
 * ── THE PHONE LAYOUT ────────────────────────────────────────────────────────
 * At the bottom, on a VIEWPORT query, because the <picture> source for the
 * portrait image can only test the viewport. Same number as
 * WAYVO_AFB_MOBILE_MAX in the shortcode — keep them together.
 */

.wv-afb-wrap {
	container-type: inline-size;
	width: 100%;
}

.wv-afb {
	--afb-g: min(calc(100cqw / 1440), 1px);
	--afb-s: clamp(0.75px, calc(100cqw / 1440), 1px);

	--wv-afb-font: "Geist", "Geist Sans", sans-serif;
	--afb-ink: #101011;
	--afb-card-ground: var(--wv-grey-200, #f5f5f5);

	/* Fallback pill fill for a brand with no category colour. */
	--wv-afb-pill: #6b7280;

	/* The swipe's length. The JS reads it from here, so this is the only place
	   to change it. */
	--afb-swipe: 700ms;

	box-sizing: border-box;
	width: 100%;
	padding: calc(40 * var(--afb-g));
}

/* ── The banner ──────────────────────────────────────────────────────────── */

.wv-afb-frame {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	gap: calc(20 * var(--afb-s));

	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
	aspect-ratio: 1360 / 820;
	padding: calc(40 * var(--afb-s));
	border-radius: calc(8 * var(--afb-s));

	/* Under the photo while it loads, and the whole banner if a brand has no
	   image at all — the white copy stays readable either way. */
	background-color: var(--afb-ink);

	/* Vertical scrolling stays the browser's; a horizontal drag is a swipe
	   (handled in the JS). */
	touch-action: pan-y;
}

/* ── Background slides ───────────────────────────────────────────────────── */

.wv-afb-bgs {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
}

/* NOT IN THE EXPORT. A soft shade at the top so the white copy holds up over
   a pale photo — the photos come from the admin and can be anything. The All
   Brands section's weak scrim is an open issue; this is the one number to
   change if this one is too weak or too strong. */
.wv-afb-bgs::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

/* Every slide sits in place at full size; only the shown one(s) are visible.
   In place rather than translated away, so their lazy images load. */
.wv-afb-bg {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* Kept at 0,1,0 and out of the main .wv-afb-mini rule, which needs 0,2,0 to
   beat link styles — at that weight it would also beat [data-state] below. */
.wv-afb-mini {
	opacity: 0;
}

/* COVER, CENTRED, AND AT 0,2,0. Elementor's `.elementor img` (0,1,1) sets
   height: auto and max-width: 100%, which beats a one-class rule and leaves the
   photo at its natural height instead of filling the banner. Same for the card
   picture below. */
.wv-afb .wv-afb-bg-media {
	display: block;
	width: 100%;
	height: 100%;
}

.wv-afb .wv-afb-bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* ── The swipe ───────────────────────────────────────────────────────────────
 * data-state on a slide: "active" is the one on show; during a change the old
 * one is "out" and the new one "in", both visible, the new one on top. Shared
 * by the background slides and the card's contents.
 *
 * The MOVEMENT is not here. The JS runs it with element.animate() on every
 * step. It used to be CSS keyframes keyed on data-state, and Paul saw the
 * last-to-first wrap as a straight swap with no slide (2026-10-10). The cause
 * was not pinned down from the code; a JS-started animation runs on every
 * step regardless of what the element's style was a moment before. The JS
 * reads the length from --afb-swipe. */

.wv-afb-bg[data-state],
.wv-afb-mini[data-state] {
	opacity: 1;
}

.wv-afb-bg[data-state="active"],
.wv-afb-mini[data-state="active"],
.wv-afb-bg[data-state="out"],
.wv-afb-mini[data-state="out"] {
	z-index: 1;
}

.wv-afb-bg[data-state="in"],
.wv-afb-mini[data-state="in"] {
	z-index: 2;
}

/* ── Copy ────────────────────────────────────────────────────────────────── */

.wv-afb-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(16 * var(--afb-s));
}

/* OceanWP and the customizer both style headings and paragraphs, so every
   property the design gives is set here rather than inherited and hoped for. */
.wv-afb .wv-afb-title {
	margin: 0;
	padding: 0;
	max-width: calc(419 * var(--afb-s));

	font-family: var(--wv-afb-font);
	font-size: calc(56 * var(--afb-s));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
	color: #ffffff;
}

.wv-afb .wv-afb-sub {
	margin: 0;
	padding: 0;
	max-width: calc(386 * var(--afb-s));

	font-family: var(--wv-afb-font);
	font-size: calc(24 * var(--afb-s));
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #ffffff;
}

/* ── Foot: arrows left, card right ───────────────────────────────────────── */

.wv-afb-foot {
	position: relative;
	z-index: 1;
	display: flex;
	/* DOM order is card, arrows — the phone's order. Reversed here. */
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-end;
	gap: calc(20 * var(--afb-s));
}

.wv-afb-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	flex: none;
}

/* ── Arrows ──────────────────────────────────────────────────────────────────
 * On .wv-btn.wv-btn-arrow from tokens.css. The design inverts the default ink
 * circle to a white one with a dark glyph; hover swaps them back. 40px fixed,
 * a touch target that should not shrink with the scale. */

.wv-afb {
	--wv-btn-min-h: 40px;
}

.wv-afb .wv-btn.wv-btn-arrow {
	background-color: #ffffff;
	color: var(--afb-ink);
	border-color: transparent;
}

.wv-afb .wv-btn.wv-btn-arrow:hover:not(:where([disabled], [aria-disabled="true"])) {
	background-color: var(--afb-ink);
	color: #ffffff;
	border-color: transparent;
}

/* Stroked, not filled — tokens.css fills arrow glyphs, which would paint this
   path as a solid lozenge. */
.wv-afb .wv-btn-arrow > svg {
	width: 16px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wv-afb .wv-afb-arrow-prev > svg {
	transform: rotate(180deg);
}

/* ── The card ────────────────────────────────────────────────────────────────
 * The grey box stays put; its contents (.wv-afb-mini, one per brand) are
 * stacked in one grid cell and swipe inside it. */

.wv-afb-card {
	position: relative;
	isolation: isolate;
	display: grid;
	/* ONE cell, pinned to the card's own size. Without this the row is auto
	   and grows to fit its content — and the card picture's natural height
	   (a 145-wide portrait is easily 220+) counted as content, so the row
	   outgrew the 218 card and overflow: hidden cropped the bottom padding off,
	   leaving the content sitting low. The picture is also taken out of flow
	   below, so it cannot size anything. */
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr);
	flex: none;
	box-sizing: border-box;
	width: calc(350 * var(--afb-s));
	height: calc(218 * var(--afb-s));
	border-radius: calc(8 * var(--afb-s));
	overflow: hidden;
	background-color: var(--afb-card-ground);
}

.wv-afb .wv-afb-mini {
	grid-area: 1 / 1;
	box-sizing: border-box;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: calc(20 * var(--afb-s));
	width: 100%;
	height: 100%;
	padding: calc(20 * var(--afb-s));

	/* Its own ground, so the outgoing brand does not show through the
	   incoming one mid-swipe. */
	background-color: var(--afb-card-ground);
	color: var(--afb-ink);
	text-decoration: none;
}

.wv-afb .wv-afb-mini:hover,
.wv-afb .wv-afb-mini:focus,
.wv-afb .wv-afb-mini:visited {
	color: var(--afb-ink);
	text-decoration: none;
}

.wv-afb .wv-afb-mini:focus-visible {
	outline: 2px solid var(--afb-ink);
	outline-offset: -4px;
}

.wv-afb-mini-media {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	border-radius: calc(8 * var(--afb-s));
	overflow: hidden;
	background-color: #e5e5e5;
}

.wv-afb .wv-afb-mini-img {
	/* Absolute, so the photo fills the box the layout gives it and never
	   feeds its own height back into that layout. */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform 400ms ease;
}

.wv-afb .wv-afb-mini:hover .wv-afb-mini-img {
	transform: scale(1.04);
}

.wv-afb-mini-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.wv-afb-mini-text {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--afb-s));
	min-width: 0;
	width: 100%;
}

.wv-afb-mini-name {
	font-family: var(--wv-afb-font);
	/* Floored at 16px: the phone card runs at 0.65 scale, where the design's
	   24 would be 15.6. */
	font-size: max(calc(24 * var(--afb-s)), 16px);
	font-weight: 500;
	line-height: 0.9;
	color: var(--afb-ink);
	overflow-wrap: anywhere;
}

/* Floored at 12px: the design's 13.79 at the 0.75 floor is 10px. Three lines
   at most — the card is a fixed height and the pill has to stay in it. */
.wv-afb-mini-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;

	font-family: var(--wv-afb-font);
	font-size: max(calc(13.79 * var(--afb-s)), 12px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--afb-ink);
}

/* Does not scale. The colour is the category's, from the registry, carried as
   an inline custom property — not the export's #609DF9. */
.wv-afb-pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	flex: none;
	max-width: 100%;
	min-height: 23px;
	padding: 2px 8px;
	border-radius: 9999px;

	font-family: var(--wv-afb-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	font-feature-settings: "tnum" on, "lnum" on;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	background-color: var(--wv-afb-pill);
	color: var(--afb-ink);
}

@media (prefers-reduced-motion: reduce) {
	.wv-afb .wv-afb-mini-img {
		transition: none;
	}

	.wv-afb .wv-afb-mini:hover .wv-afb-mini-img {
		transform: none;
	}
}

/* ── Phone ───────────────────────────────────────────────────────────────────
 * No phone design in the export; Paul's direction (2026-10-10): copy at the
 * top, the card under it on the LEFT at a fixed size, the arrows at
 * the bottom. The banner's height and the copy sizes are my choices. Same
 * number as WAYVO_AFB_MOBILE_MAX.
 *
 * The scale is pinned to 1px here, and the card overrides it with its own
 * 0.65 (35% smaller than the design). Everything else that would follow the
 * scale is restated in px below. On a phone too narrow for the card it gives
 * way (max-width) rather than overflowing. */

@media (max-width: 767px) {

	.wv-afb {
		--afb-s: 1px;
		padding: 20px;
	}

	.wv-afb-frame {
		aspect-ratio: auto;
		min-height: 600px;
		padding: 24px;
		gap: 24px;
	}

	.wv-afb .wv-afb-title {
		max-width: none;
		font-size: 36px;
	}

	.wv-afb .wv-afb-sub {
		max-width: none;
		font-size: 18px;
	}

	.wv-afb-foot {
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 20px;
	}

	/* 35% smaller than the design's card (Paul, 2026-10-10): 0.65 scale, so
	   about 228 x 142 with 13px padding and gaps. Scoped to the card, so
	   it and everything in it shrink and nothing else does. Text inside has
	   floors so it stops shrinking before it gets unreadable: name 16px,
	   description 12px. The pill does not scale anyway. */
	/* Then 15% back (Paul, 2026-10-21: small for the 15px phone type):
	   0.65 x 1.15 = 0.7475, about 262 x 163. Both banners — About and the
	   Impact page's --impact — share this rule. */
	.wv-afb-card {
		--afb-s: 0.7475px;
		max-width: 100%;
	}

	.wv-afb-nav {
		justify-content: flex-start;
	}
}

/* ── The About banner on wide screens (Paul, 2026-10-24) ─────────────────────
 * 20 shorter than the space under the menu bar: the window's height, less ~70
 * for the fixed header (20 inset + its ~48 bar, the same 70 the other sections
 * use), less 20, and less the admin bar when logged in. It does not follow the
 * design's 1360:820. That ratio on its own caps it at 820 when it's 1360 wide,
 * which Paul found too short.
 *
 * From 1024 up only. Below that the 1360:820 ratio above still holds; a tablet
 * held upright would otherwise get a tall, narrow banner. min-height:
 * min-content keeps the old "grow rather than overflow" promise if a short
 * window can't fit the copy and card. 360 is the floor, as on Impact. */
@media (min-width: 1024px) {

	.wv-afb:not(.wv-afb--impact) .wv-afb-frame {
		aspect-ratio: auto;
		height: max(360px, calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 70px - 20px));
		min-height: min-content;
	}
}

/* ── [wayvo-impact-featured-brands] ──────────────────────────────────────────
 * The Impact page's copy-less banner (2026-10-20): on a white band, the card
 * and arrows at the foot, and no top shade — it was only there for the copy.
 *
 * It sits between the page's other new sections, so it takes their gutter
 * (40 -> 80 from 1440 to 1920) and runs the full width rather than stopping
 * at 1360. And it FITS THE SCREEN (Paul: too tall on a wide screen): the
 * design's 1360:820, but never taller than the window less the admin bar,
 * ~70 for the floating header and its own top and bottom gutter. */

.wv-afb--impact {
	/* --wv-cw, not 100cqw (2026-10-21): the banner stops at the content
	   width (tokens.css), centred by the frame's auto margins. */
	--afb-impact-u: clamp(0.5px, calc(var(--wv-cw, 100cqw) / 1440), 1.3334px);
	--afb-impact-pad: min(80px, max(calc(40 * var(--afb-impact-u)), calc(var(--wv-cw, 100cqw) / 12 - 80px)));

	padding: calc(40 * var(--afb-g)) var(--afb-impact-pad);
	background-color: var(--wv-white, #ffffff);
}

.wv-afb--impact .wv-afb-frame {
	justify-content: flex-end;
}

@media (min-width: 768px) {

	.wv-afb--impact .wv-afb-frame {
		max-width: calc(var(--wv-content-max, 1440px) - 2 * var(--afb-impact-pad));
		aspect-ratio: auto;
		height: max(
			360px,
			min(
				calc((var(--wv-cw, 100cqw) - 2 * var(--afb-impact-pad)) * 820 / 1360),
				calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 70px - 80 * var(--afb-g))
			)
		);
	}
}

.wv-afb--impact .wv-afb-bgs::after {
	content: none;
}

/* Each brand's own copy (2026-10-23), top left of its slide, so it swipes
   with the photo. The About banner's shade comes back for it, but inside the
   slide and UNDER the copy — on the shared wrapper it would sit over the
   text. The frame's padding is restated, as the slide fills the frame. */
.wv-afb--impact .wv-afb-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.wv-afb--impact .wv-afb-copy--slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	box-sizing: border-box;
	padding: calc(40 * var(--afb-s));
}

@media (max-width: 767px) {

	.wv-afb--impact {
		padding: 20px;
	}

	.wv-afb--impact .wv-afb-copy--slide {
		padding: 24px;
	}
}

/* ── 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-afb-mini-desc {
		font-size: max(15px, calc(13.79 * var(--afb-s)));
	}

	.wv-afb-pill {
		font-size: 15px;
	}
}