/* ==========================================================================
   [wayvo-business-clients-large] — see shortcodes/wayvoBusinessClientsLarge.php
   for the design, the logo sizing (shared with the small strip) and how the
   column count is chosen.

   Same unit as the other sections: --wvbcl-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.

   Each logo's laptop width comes from PHP as --wvbcl-w (a plain number) and
   is drawn at that x the unit; its height follows from the file's ratio.

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

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

	display: flex;
	flex-direction: column;
	gap: calc(40 * var(--wvbcl-u));
	box-sizing: border-box;
	padding: calc(180 * var(--wvbcl-u)) min(80px, max(calc(40 * var(--wvbcl-u)), calc(100cqw / 12 - 80px)));
	background-color: var(--wv-ink, #101011);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wv-ink, #101011), var(--wv-ink, #101011)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-white, #ffffff);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

.wv-bcl__head {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--wvbcl-u));
}

/* 744 wide at 56px = 13.3em: "Trusted by 150+ businesses / for certified
   green gifting." */
.wv-bcl h2.wv-bcl__title {
	max-width: 13.3em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvbcl-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* 695 wide at 24px = 28.96em. */
.wv-bcl p.wv-bcl__text {
	max-width: 28.96em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvbcl-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── The grid ──────────────────────────────────────────────────────────── */
.wv-bcl ul.wv-bcl__grid {
	display: grid;
	grid-template-columns: repeat(var(--wvbcl-cols, 8), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-bcl ul.wv-bcl__grid li.wv-bcl__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: calc(110 * var(--wvbcl-u));
	margin: 0;
	padding: calc(10 * var(--wvbcl-u)) calc(15 * var(--wvbcl-u));
}

.wv-bcl ul.wv-bcl__grid li.wv-bcl__cell::before,
.wv-bcl ul.wv-bcl__grid li.wv-bcl__cell::marker {
	content: none;
}

.wv-bcl img.wv-bcl__logo {
	display: block;
	width: calc(var(--wvbcl-w, 100) * var(--wvbcl-logo-u));
	max-width: 100%;
	height: auto;
	margin: 0;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile design: the type steps of the other sections' phone frames, and
   the logos three to a row at 0.62 of their laptop size (the widest, 138,
   comes to ~86 in a ~107 cell). */
@media (max-width: 767px) {

	.wv-bcl {
		--wvbcl-logo-u: 0.62px;
		gap: 40px;
		padding: 120px 20px;
	}

	.wv-bcl__head {
		gap: 14.22px;
	}

	.wv-bcl h2.wv-bcl__title {
		max-width: none;
		font-size: 40px;
		line-height: 1.1;
	}

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

	.wv-bcl ul.wv-bcl__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wv-bcl ul.wv-bcl__grid li.wv-bcl__cell {
		height: 78px;
		padding: 8px 10px;
	}

	/* exclude_mobile (Moonpig by default): 16 in threes leaves one over. */
	.wv-bcl ul.wv-bcl__grid li.wv-bcl__cell--no-phone {
		display: none;
	}
}