/* ==========================================================================
   [wayvo-brand-grid] — see shortcodes/wayvoBrandGrid.php for the design and
   where the logos come from (the plugin's [wayvo_logo_set]).

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

   The logo sizes, rows and gaps are the plugin's (inline styles from the
   set's settings), not this file's: only the placement and the blend here.

   Vendor fights: h2 / p rules at (0,2,1).
   ========================================================================== */

.wv-bgr-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-bgr {
	--wvbgr-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(80 * var(--wvbgr-u));
	box-sizing: border-box;
	padding: calc(180 * var(--wvbgr-u)) min(80px, max(calc(40 * var(--wvbgr-u)), calc(100cqw / 12 - 80px)));
	border-radius: calc(8 * var(--wvbgr-u));
	background-color: var(--wvbgr-bg, #ffffff);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wvbgr-bg, #ffffff), var(--wvbgr-bg, #ffffff)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
	text-align: center;
	/* The darken blend below mixes with this band, not the page behind. */
	isolation: isolate;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.wv-bgr__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(20 * var(--wvbgr-u));
}

/* 620 wide at 56px = 11.07em: "All the brands / they can choose from". */
.wv-bgr h2.wv-bgr__title {
	max-width: 11.1em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvbgr-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	text-align: center;
	text-transform: none;
}

/* 678 wide at 24px = 28.25em, two lines. */
.wv-bgr p.wv-bgr__text {
	max-width: 28.25em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvbgr-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
	text-align: center;
}

/* ── The plugin's logo set ───────────────────────────────────────────────── */
.wv-bgr__grid {
	align-self: stretch;
	min-width: 0;
}

/* The export's mix-blend-mode: darken: a logo's white box takes the band's
   colour, so the grid works on any background. On each logo, not each row:
   on narrow screens the plugin dissolves the rows (display: contents), and a
   box that isn't drawn can't blend. */
.wv-bgr .wv-bgr__grid .wayvo-logo-set__logo {
	mix-blend-mode: darken;
}

/* ── Button: the export's 46px tier, scaled ──────────────────────────────── */
.wv-bgr .wv-bgr__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvbgr-u)));
	--wv-btn-min-h: max(32.71px, calc(46 * var(--wvbgr-u)));
	--wv-btn-size: max(12px, calc(16 * var(--wvbgr-u)));
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile design: the type steps of the other sections' phone frames. The
   plugin's rows wrap and its logos shrink with the screen by themselves. */
@media (max-width: 767px) {

	.wv-bgr {
		gap: 40px;
		padding: 120px 20px;
		border-radius: 0;
	}

	.wv-bgr__head {
		gap: 14.22px;
	}

	.wv-bgr h2.wv-bgr__title {
		max-width: 9em;
		font-size: 40px;
		line-height: 1.1;
	}

	.wv-bgr p.wv-bgr__text {
		max-width: none;
		font-size: 20px;
		letter-spacing: -0.01em;
	}

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