/* ==========================================================================
   [wayvo-about-great-brands] — see shortcodes/wayvoAboutGreatBrands.php for
   the design, the swipe row and the images.

   --wvagb-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.

   Vendor fights: h2 / h3 / p / ul / li / 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-agb-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-agb {
	--wvagb-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvagb-pad: min(80px, max(calc(40 * var(--wvagb-u)), calc(100cqw / 12 - 80px)));

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

/* ── The copy, centred ───────────────────────────────────────────────────── */
.wv-agb__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(16 * var(--wvagb-u));
	max-width: calc(670 * var(--wvagb-u));
	text-align: center;
}

.wv-agb h2.wv-agb__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvagb-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-align: center;
	text-transform: none;
}

.wv-agb__title-muted {
	color: var(--wv-grey-500, #8d8b8b);
}

/* Four lines at 670, as drawn. */
.wv-agb p.wv-agb__lede {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvagb-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
	text-align: center;
}

/* ── The cards: a centred 1130 row of three ──────────────────────────────── */
.wv-agb ul.wv-agb__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(24 * var(--wvagb-u));
	width: calc(1130 * var(--wvagb-u));
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-agb li.wv-agb__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	aspect-ratio: 360.67 / 540;
	margin: 0;
	padding: calc(40 * var(--wvagb-u));
	overflow: hidden;
	border-radius: calc(8 * var(--wvagb-u));
	background-color: var(--wv-grey-500, #8d8b8b);
	color: var(--wv-white, #ffffff);
	list-style: none;
	isolation: isolate;
}

.wv-agb li.wv-agb__card::before,
.wv-agb li.wv-agb__card::marker {
	content: none;
}

/* The export's scrim, 0 -> 30% black, over the photo and under the type. */
.wv-agb li.wv-agb__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
	pointer-events: none;
}

.wv-agb .wv-agb__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.wv-agb__pill {
	flex: none;
	padding: max(2px, calc(2 * var(--wvagb-u))) max(6px, calc(8 * var(--wvagb-u)));
	border-radius: 9999px;
	background-color: var(--wv-white, #ffffff);
	color: var(--wv-ink, #101011);
	font-size: max(12px, calc(13.79 * var(--wvagb-u)));
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	font-feature-settings: "tnum" on, "lnum" on;
	white-space: nowrap;
}

/* Pinned to the foot even without a pill. */
.wv-agb__foot {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--wvagb-u));
	max-width: calc(325 * var(--wvagb-u));
	margin-top: auto;
}

.wv-agb h3.wv-agb__name {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(24px, calc(40 * var(--wvagb-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.027em; /* the export's -1.08px at 40 */
	text-transform: none;
}

/* Each card links to its brand page (Paul, 2026-10-23). The name is the
   link and its ::after covers the card, so the whole card is the target. */
.wv-agb h3.wv-agb__name a.wv-agb__link {
	color: inherit;
	text-decoration: none;
}

.wv-agb a.wv-agb__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.wv-agb a.wv-agb__link:focus-visible {
	outline: none;
}

.wv-agb a.wv-agb__link:focus-visible::after {
	outline: 2px solid var(--wv-white, #ffffff);
	outline-offset: -6px;
}

.wv-agb .wv-agb__img {
	transition: transform 0.6s ease-in-out;
}

@media (hover: hover) {

	.wv-agb li.wv-agb__card:has(.wv-agb__link):hover .wv-agb__img {
		transform: scale(1.03);
	}
}

.wv-agb p.wv-agb__text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(14px, calc(16 * var(--wvagb-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* Site button system, ink, the export's 46px tier, scaled. */
.wv-agb .wv-agb__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvagb-u)));
	--wv-btn-min-h: max(36px, calc(46 * var(--wvagb-u)));
	--wv-btn-size: max(14px, calc(16 * var(--wvagb-u)));
}

/* ── Tablets and phones: the swipe row ───────────────────────────────────────
   Below 1024 three across get too narrow for their type. The row breaks out
   of the section padding to run edge to edge, scroll-snaps card by card,
   and pads its ends so the first and last cards line up with the copy. */
@media (max-width: 1023px) {

	.wv-agb {
		--wvagb-card-w: min(340px, calc((100cqw - 2 * var(--wvagb-pad)) * 0.82));
	}

	.wv-agb ul.wv-agb__cards {
		display: flex;
		gap: 12px;
		width: auto;
		max-width: none;
		align-self: stretch;
		margin: 0 calc(-1 * var(--wvagb-pad));
		padding: 0 var(--wvagb-pad);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wvagb-pad);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.wv-agb ul.wv-agb__cards::-webkit-scrollbar {
		display: none;
	}

	.wv-agb li.wv-agb__card {
		flex: 0 0 var(--wvagb-card-w);
		padding: 24px;
		border-radius: 8px;
		scroll-snap-align: start;
	}

	.wv-agb__foot {
		gap: 8px;
		max-width: none;
	}

	.wv-agb h3.wv-agb__name {
		font-size: 30px;
	}

	.wv-agb p.wv-agb__text {
		font-size: 15px;
	}
}

@media (max-width: 767px) {

	.wv-agb {
		--wvagb-pad: 20px;
		gap: 40px;
		padding: 80px var(--wvagb-pad);
	}

	.wv-agb__copy {
		gap: 12px;
		max-width: none;
	}

	.wv-agb h2.wv-agb__title {
		font-size: 32px;
		line-height: 1.05;
	}

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

	.wv-agb .wv-agb__cta {
		--wv-btn-pad-x: 18px;
		--wv-btn-min-h: 40px;
		--wv-btn-size: 14px;
	}
}

/* ── 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-agb__pill {
		font-size: 15px;
	}

	.wv-agb p.wv-agb__text {
		font-size: 15px;
	}
}