/* ==========================================================================
   [wayvo-about-hero] — see shortcodes/wayvoAboutHero.php for the design and
   where the images come from.

   --wvah-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. The photo
   band runs from the very top of the page, under the floating header (the
   120 top padding is the header's room, as drawn).

   The card is placed by its CENTRE: the export's left/top are its unrotated
   box, which do not match the PNG once turned. Measured from the PNG, the
   turned card's bounds are 955 -> 1334 x 377 -> 632, centre (1144.5, 504.5),
   so the unrotated 363.24 x 227.74 box sits at 963 / 391 and turns about its
   middle.

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

.wv-ah-wrap {
	container-type: inline-size;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wv-ah {
	/* --wv-cw, not 100cqw (2026-10-21): the photo band stays full-bleed, the
	   title, card and white block stop at the content width (tokens.css). */
	--wvah-u: clamp(0.5px, calc(var(--wv-cw, 100cqw) / 1440), 1.3334px);
	--wvah-pad: min(80px, max(calc(40 * var(--wvah-u)), calc(var(--wv-cw, 100cqw) / 12 - 80px)));
	--wvah-side: calc(var(--wvah-pad) + var(--wv-content-gutter, 0px));
	--wvah-photo-h: calc(472 * var(--wvah-u));
	--wvah-card-w: calc(363.24 * var(--wvah-u));
	--wvah-card-h: calc(var(--wvah-card-w) * 1078 / 1720);

	position: relative;
	background-color: var(--wv-white, #ffffff);
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* ── The photo band ──────────────────────────────────────────────────────── */
.wv-ah__intro {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	box-sizing: border-box;
	height: var(--wvah-photo-h);
	padding: calc(120 * var(--wvah-u)) var(--wvah-side) calc(40 * var(--wvah-u));
	overflow: hidden;
	background-color: #5d6b3a;
	isolation: isolate;
}

.wv-ah .wv-ah__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	/* The design crops ~300 off the top of the 1440 x 960 photo. */
	object-position: 50% 62%;
}

/* The design's photo darkens towards the bottom-left, under the title. */
.wv-ah__intro::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 55%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 50%);
	pointer-events: none;
}

/* "One card. A world of good / brands worth discovering.": 715 at 56px. */
.wv-ah h1.wv-ah__title {
	max-width: 12.8em;
	margin: 0;
	padding: 0;
	color: var(--wv-white, #ffffff);
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvah-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: none;
}

.wv-ah__title-muted {
	color: rgba(255, 255, 255, 0.5);
}

/* ── The card, over the band's lower edge ────────────────────────────────── */
.wv-ah .wv-ah__card {
	position: absolute;
	z-index: 1;
	top: calc(391 * var(--wvah-u));
	left: calc(var(--wv-content-gutter, 0px) + 963 * var(--wvah-u));
	display: block;
	width: var(--wvah-card-w);
	height: var(--wvah-card-h);
	max-width: none;
	margin: 0;
	border-radius: calc(10.14 * var(--wvah-u));
	overflow: hidden;
	/* The card is the container for its own type: 1cqw = 1% of its width. */
	container-type: inline-size;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	transform: rotate(-4.85deg);
	transform-origin: 50% 50%;
	pointer-events: none;
}

/* The artwork: halftone, wordmark and B Corp, all vector (card.svg). */
.wv-ah .wv-ah__card-art {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

/* "Giftcard" under the wordmark's right end: the PNG's 1369 -> 1593 x 426,
   13.52 / 363.24 of the card in the export. */
.wv-ah__card-label {
	position: absolute;
	top: 38.9%;
	right: 7.4%;
	font-size: 3.72cqw;
	white-space: nowrap;
}

/* The design's strapline, 21.97 / 363.24 of the card, breaking after "A
   world" as drawn (51%: "One card. A world" is 47.6% of the card at this
   size; the export's 202.54 box would let "of" up onto the first line). */
.wv-ah__card-line {
	position: absolute;
	left: 5.8%;
	bottom: 8.6%;
	max-width: 51%;
	color: rgba(16, 16, 17, 0.5);
	font-size: 6.05cqw;
}

.wv-ah__card-line-lead {
	color: var(--wv-ink, #101011);
}

/* ── The white block ─────────────────────────────────────────────────────── */
.wv-ah__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(16 * var(--wvah-u));
	box-sizing: border-box;
	padding: calc(180 * var(--wvah-u)) var(--wvah-side);
}

/* Three lines at ~597 wide at 56px, breaking after "brilliant" / "doing". */
.wv-ah h2.wv-ah__heading {
	max-width: 10.7em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wvah-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* 670 wide, three lines. */
.wv-ah p.wv-ah__text {
	max-width: 27.9em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvah-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   No mobile frame; see the shortcode header. Photo 480 tall; the card 33.6%
   of the width, 20 from the right, its centre a little below the photo's
   edge as on laptop (0.14 of its height); the white block starts clear of
   the card's bottom corner (the turn adds ~0.08 of the width below it). */
@media (max-width: 767px) {

	.wv-ah {
		--wvah-pad: 20px;
		--wvah-photo-h: 480px;
		--wvah-card-w: 33.6cqw; /* 40% smaller than the first 56cqw (Paul, 2026-10-20). */
	}

	.wv-ah__intro {
		padding: 120px var(--wvah-pad) 32px;
	}

	.wv-ah .wv-ah__photo {
		/* 720 wide at this height: keeps the two faces in frame. */
		object-position: 30% 50%;
	}

	.wv-ah h1.wv-ah__title {
		max-width: 10em;
		font-size: 36px;
		line-height: 1.02;
	}

	.wv-ah .wv-ah__card {
		top: calc(var(--wvah-photo-h) - 0.36 * var(--wvah-card-h));
		left: auto;
		right: var(--wvah-pad);
		border-radius: calc(var(--wvah-card-w) * 10.14 / 363.24);
	}

	.wv-ah__body {
		gap: 12px;
		padding: calc(0.64 * var(--wvah-card-h) + 0.08 * var(--wvah-card-w) + 40px) var(--wvah-pad) 80px;
	}

	.wv-ah h2.wv-ah__heading {
		font-size: 32px;
		line-height: 1.05;
	}

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