/* ==========================================================================
   [wayvo-welcome-certifications] — see shortcodes/wayvoWelcomeCertifications.php
   for the design and how the logos were cut.

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

   --wvwc-l is the LOGO unit: what one drawn px of a logo renders at. On
   laptop it is u. On phones the grid is four across and the cells are far
   narrower than the design's 169.75, so it is the phone cell width over
   169.75 — every logo shrinks by the same factor and the widest (RSPO, 123)
   still fits its cell.

   Each logo carries its drawn size inline (--wvwc-w / --wvwc-h, laptop px).

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

.wv-wc-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-wc {
	--wvwc-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvwc-l: var(--wvwc-u);
	--wvwc-pad: min(80px, max(calc(40 * var(--wvwc-u)), calc(100cqw / 12 - 80px)));

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

.wv-wc__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(20 * var(--wvwc-u));
}

/* "Every brand on Wayvo / has earned its place.": 627 wide at 56px. */
.wv-wc h2.wv-wc__title {
	max-width: 11.3em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvwc-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Two lines at ~695 wide, breaking after "made, and". */
.wv-wc p.wv-wc__text {
	max-width: 29em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvwc-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── The logos: eight equal columns, two rows of 110 ─────────────────────── */
.wv-wc ul.wv-wc__logos {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-auto-rows: calc(110 * var(--wvwc-l));
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-wc li.wv-wc__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-wc li.wv-wc__logo::before,
.wv-wc li.wv-wc__logo::marker {
	content: none;
}

.wv-wc img.wv-wc__img {
	display: block;
	width: calc(var(--wvwc-w) * var(--wvwc-l));
	height: calc(var(--wvwc-h) * var(--wvwc-l));
	max-width: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: contain;
}

/* UK CHARITY, drawn: 132.75 x 36 in the design, 1.38 border, 16.6 type. */
.wv-wc__charity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: calc(36 * var(--wvwc-l));
	padding: 0 calc(13.85 * var(--wvwc-l));
	border: max(1px, calc(1.38 * var(--wvwc-l))) solid var(--wv-ink, #101011);
	border-radius: 9999px;
	color: var(--wv-ink, #101011);
	font-size: calc(16.6 * var(--wvwc-l));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile frame; see the shortcode header. Four across, four rows, 8 px
   between rows; the logo unit is the cell width over the design's 169.75. */
@media (max-width: 767px) {

	.wv-wc {
		--wvwc-pad: 20px;
		--wvwc-l: calc((100cqw - 40px) / 4 / 169.75);
		gap: 32px;
		padding: 80px var(--wvwc-pad);
	}

	.wv-wc__copy {
		gap: 12px;
	}

	.wv-wc h2.wv-wc__title {
		font-size: 32px;
		line-height: 1.05;
	}

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

	.wv-wc ul.wv-wc__logos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 8px;
	}
}