/* ==========================================================================
   [wayvo_home_finisterre] — see shortcodes/wayvoHomeFinisterre.php for the
   three designs and the photos.

   ── HOW IT SCALES ───────────────────────────────────────────────────────────
   Same scheme as wayvo-grassy-section.css. --wvh-u is rendered px per laptop
   px (100cqw / 1440, stopping at 1.333 = the monitor frame). Type, button and
   card are `design px * u`.

   Padding — the white band around the panel AND the panel's own inset — is
   40 at 1440 and 80 at 1920, linear between (100cqw / 12 - 80px), 40 * u
   below. The monitor frame is not the laptop frame scaled: 40 * 1.333 would
   be 53, and it measures 80.

   The panel is 820 / 1360 of its width, as in both desktop frames, but never
   taller than --wvh-fit less the band padding, so the section fits the screen
   (Paul's rule from the grassy section — the monitor frame is 1254 tall).

   The card has its own unit, --wvh-cu: u on desktop but never below 0.711,
   which is the mobile frame's card. It stops the card shrinking past the
   design's smallest version on a narrow laptop.

   Vendor fights: img / h2 / p rules at (0,2,1), over Elementor's and the
   kit's (0,1,1).
   ========================================================================== */

/* Breaks out of the boxed container like .wv-grassy-wrap, but only as far
   as the content width (2026-10-21); the white band is painted beyond it. */
.wv-hfin-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-hfin {
	--wvh-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvh-cu: max(0.7111px, var(--wvh-u));
	--wvh-pad: min(80px, max(calc(40 * var(--wvh-u)), calc(100cqw / 12 - 80px)));
	--wvh-fit: 92svh;

	padding: var(--wvh-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;
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* ── The panel ─────────────────────────────────────────────────────────────── */
.wv-hfin__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: min(
		calc((100cqw - 2 * var(--wvh-pad)) * 820 / 1360),
		calc(var(--wvh-fit) - 2 * var(--wvh-pad))
	);
	overflow: hidden;
	border-radius: calc(8 * var(--wvh-u));
	/* Shows while the photo loads; the sky's blue-grey, as the email uses. */
	background-color: #6f8fa6;
	color: var(--wv-white, #ffffff);
	isolation: isolate;
}

.wv-hfin__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	margin: 0;
}

.wv-hfin .wv-hfin__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Centred. The landscape photo is cropped from the sides, and centred is
	   what puts the two people where the laptop frame has them. */
	object-position: 50% 50%;
}

/* The design's linear-gradient(180deg, transparent, rgba(0,0,0,.2)). */
.wv-hfin__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
	pointer-events: none;
}

.wv-hfin__inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: var(--wvh-pad);
}

/* ── Copy ──────────────────────────────────────────────────────────────────── */
.wv-hfin__copy {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--wvh-u));
}

.wv-hfin h2.wv-hfin__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(40px, calc(56 * var(--wvh-u)));
	/* 450, not the export's 500: Paul found 500 slightly heavy (2026-10-17).
	   Needs Geist loaded as a variable RANGE — see the enqueue in
	   functions.php — or it snaps back to 500. */
	font-weight: 450;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* 440 wide at 24px in the design, in em so the breaks hold at every scale. */
.wv-hfin p.wv-hfin__text {
	max-width: 18.34em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(18px, calc(24 * var(--wvh-u)));
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* ── Foot: button left, card right, bottoms aligned ──────────────────────── */
.wv-hfin__foot {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
}

/* The export's 46px tier, scaled; tokens overridden on the element as
   .wv-frogger__cta does. */
.wv-hfin .wv-hfin__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvh-u)));
	--wv-btn-min-h: max(32.71px, calc(46 * var(--wvh-u)));
	--wv-btn-size: max(12px, calc(16 * var(--wvh-u)));
}

/* ── The brand card ──────────────────────────────────────────────────────────
   350 x 218: 20 padding, 20 gap, photo and text each taking half of what is
   left (145). Fixed height so the tag sits on the bottom line whatever the
   wording. */
.wv-hfin__card {
	flex: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(20 * var(--wvh-cu));
	box-sizing: border-box;
	width: calc(350 * var(--wvh-cu));
	height: calc(218 * var(--wvh-cu));
	padding: calc(20 * var(--wvh-cu));
	border-radius: calc(8 * var(--wvh-cu));
	background-color: var(--wv-grey-200, #f5f5f5);
	color: var(--wv-ink, #101011);
	text-decoration: none;
}

a.wv-hfin__card:hover,
a.wv-hfin__card:focus {
	color: var(--wv-ink, #101011);
	text-decoration: none;
}

a.wv-hfin__card:focus-visible {
	outline: 2px solid var(--wv-white, #ffffff);
	outline-offset: 3px;
}

.wv-hfin .wv-hfin__card-photo {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: none;
	object-fit: cover;
	border-radius: calc(4 * var(--wvh-cu));
	background-color: var(--wv-grey-300, #e5e5e5);
}

.wv-hfin__card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-width: 0;
}

.wv-hfin__card-head {
	display: flex;
	flex-direction: column;
}

.wv-hfin__card-name {
	font-size: calc(32 * var(--wvh-cu));
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.wv-hfin__card-text {
	font-size: calc(16 * var(--wvh-cu));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* Tag_Medium: 2/8 padding, pill, 14/140%. Fill set inline by the shortcode
   from the category registry — Fashion's blue by default, which is now the
   brand #609DF9 the export drew. Text stays near-black on every category, as
   .wv-frogger-card__pill and the featured brands pills do. The fallback here
   is only for the registry mu-plugin going missing. */
.wv-hfin__tag {
	display: inline-block;
	padding: calc(2 * var(--wvh-cu)) calc(8 * var(--wvh-cu));
	border-radius: 9999px;
	background-color: var(--wv-hfin-tag, #609df9);
	color: var(--wv-ink, #101011);
	font-size: calc(14 * var(--wvh-cu));
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame's Figma CSS (400 x 765). Band and panel padding 20;
   H3 40/110%; P3 20/140% at 312.89 wide; 7.11 gap. The foot stacks: button
   on top, card below, both left, 20 apart. The card is the laptop card at
   0.711 with 10px padding and gap. Panel height follows 725/360 of its width,
   capped by the screen like the desktop tiers, floored so the copy and card
   never overlap. */
@media (max-width: 767px) {

	.wv-hfin {
		--wvh-cu: 0.7111px;
		padding: 20px;
	}

	.wv-hfin__panel {
		min-height: max(
			520px,
			min(calc((100cqw - 40px) * 725 / 360), calc(var(--wvh-fit) - 40px))
		);
		border-radius: 5.69px;
	}

	.wv-hfin__inner {
		padding: 20px;
	}

	.wv-hfin__copy {
		gap: 7.11px;
	}

	.wv-hfin h2.wv-hfin__title {
		font-size: 40px;
		line-height: 1.1;
	}

	.wv-hfin p.wv-hfin__text {
		max-width: 15.65em;
		font-size: 20px;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}

	.wv-hfin__foot {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 20px;
	}

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

	.wv-hfin__card {
		gap: 10px;
		padding: 10px;
		border-radius: 5.69px;
	}

	.wv-hfin .wv-hfin__card-photo {
		border-radius: 2.84px;
	}
}

/* ── 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-hfin__card-text {
		font-size: max(15px, calc(16 * var(--wvh-cu)));
	}

	.wv-hfin__tag {
		font-size: max(15px, calc(14 * var(--wvh-cu)));
	}
}