/* ==========================================================================
   [wayvo-1-1000] — see shortcodes/wayvoOneThousand.php for the three designs.

   Same scaling scheme as the other new sections (wayvo-grassy-section.css):
   --wv1k-u is rendered px per laptop px (100cqw / 1440, stopping at 1.333),
   --wv1k-pad is the screen gutter AND the panels' inset, 40 at 1440 and 80
   at 1920. The heading-to-panels gap does the same from 80 to 120.

   Panels are 780 tall at laptop scale, capped at --wv1k-fit so a panel fits
   the screen (Paul's rule from the grassy section). They are min-heights:
   the copy and artwork can always push them taller.

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

.wv-wv1k-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-wv1k {
	--wv1k-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wv1k-pad: min(80px, max(calc(40 * var(--wv1k-u)), calc(100cqw / 12 - 80px)));
	--wv1k-gap: min(120px, max(calc(80 * var(--wv1k-u)), calc(100cqw / 12 - 40px)));
	--wv1k-fit: 92svh;

	display: flex;
	flex-direction: column;
	gap: var(--wv1k-gap);
	/* 20 at the bottom: the gap above [wayvo-b-corp]. */
	padding: calc(180 * var(--wv1k-u)) var(--wv1k-pad) 20px;
	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);
}

/* ── Heading + button ──────────────────────────────────────────────────── */
.wv-wv1k__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(40 * var(--wv1k-u));
	text-align: center;
}

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

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

/* ── Panels ──────────────────────────────────────────────────────────────── */
.wv-wv1k__panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.wv-wv1k__panel {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	min-height: min(calc(780 * var(--wv1k-u)), var(--wv1k-fit));
	padding: var(--wv1k-pad);
	border-radius: calc(8 * var(--wv1k-u));
	background-color: var(--wv-grey-200, #f5f5f5);
}

.wv-wv1k__copy {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wv1k-u));
	/* The space before the artwork. On the copy, not the art: the art is a
	   container, and --wv1k-u used inside it would read ITS width. */
	margin-bottom: calc(40 * var(--wv1k-u));
}

.wv-wv1k h3.wv-wv1k__panel-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(28px, calc(40 * var(--wv1k-u)));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* 443 / 383 wide at 18px in the design, in em so the breaks hold. */
.wv-wv1k p.wv-wv1k__panel-text {
	max-width: 24.61em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(13px, calc(18 * var(--wv1k-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.wv-wv1k__panel--split p.wv-wv1k__panel-text {
	max-width: 21.28em;
}

/* ── Artwork: centred in what the copy leaves ──────────────────────────── */
.wv-wv1k__art {
	position: relative;
	/* The chip is sized in cqw of the table, so it scales with it exactly. */
	container-type: inline-size;
	max-width: 100%;
	margin: auto;
}

.wv-wv1k__art--table {
	width: calc(440 * var(--wv1k-u));
}

.wv-wv1k__art--split {
	width: calc(327.78 * var(--wv1k-u));
}

.wv-wv1k .wv-wv1k__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* The floating "James" chip: 103 x 46 on a 440-wide table, the design's
   size. It sits ON the James cell at every width (Paul, 2026-10-23: the laptop
   frame floated it between the James and Priya rows, which read as a fault),
   centred on that cell as measured off bulk-buy-1174.webp — the cell is
   54-234 x 309-415 of 1174, so its centre is 12.27 x 30.83 cqw. Everything in
   cqw of the table, so it stays on the cell however the table scales. */
.wv-wv1k__chip {
	position: absolute;
	left: 0.56cqw;
	top: 25.61cqw;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 23.41cqw;
	height: 10.45cqw;
	border: max(0.6px, 0.227cqw) solid #609df9;
	border-radius: 1.818cqw;
	background-color: var(--wv-white, #ffffff);
	box-shadow: 0.593cqw 0.593cqw 2.963cqw rgba(141, 139, 139, 0.1);
	color: #609df9;
	font-size: 4.091cqw;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	white-space: nowrap;
	pointer-events: none;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame. Panels stack, 554.67 / 360 of their width tall. */
@media (max-width: 767px) {

	.wv-wv1k {
		gap: 80px;
		padding: 128px 20px 20px;
	}

	.wv-wv1k__head {
		gap: 20px;
	}

	.wv-wv1k h2.wv-wv1k__title {
		font-size: 40px;
		line-height: 1.1;
	}

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

	.wv-wv1k__panels {
		grid-template-columns: 1fr;
		gap: 14.22px;
	}

	.wv-wv1k__panel {
		min-height: min(calc((100cqw - 40px) * 554.67 / 360), var(--wv1k-fit));
		padding: 40px;
		border-radius: 5.69px;
	}

	.wv-wv1k__copy {
		gap: 10px;
		margin-bottom: 28px;
	}

	.wv-wv1k h3.wv-wv1k__panel-title {
		font-size: 32px;
		line-height: 1.2;
	}

	.wv-wv1k p.wv-wv1k__panel-text,
	.wv-wv1k__panel--split p.wv-wv1k__panel-text {
		max-width: none;
		font-size: 12px;
		line-height: 1.3;
	}

	/* The design's widths on a 360 panel, scaled with the panel. */
	.wv-wv1k__art--table {
		width: calc((100cqw - 40px) * 263.88 / 360);
	}

	.wv-wv1k__art--split {
		width: calc((100cqw - 40px) * 233.09 / 360);
	}

}

/* ── 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-wv1k p.wv-wv1k__panel-text,
	.wv-wv1k__panel--split p.wv-wv1k__panel-text {
		font-size: 15px;
	}
}