/* 3Dimge Hero — every selector prefixed dh- so the theme cannot reach in.
   1.2.1: two cards side by side, one per effect type, on the palette's mint
   ground. The layout follows the approved hero study of 20 Sep.

   The ground is now a CSS value again. The desktop card's faces are the print
   artwork with no ground baked in, so the band can be any colour; only the
   mobile MP4 and the posters carry a ground, and both were re-rendered on
   #E8F4F0 for this version. Changing --dh-ground alone would leave those two
   showing a square of the old colour — re-render them with it. */

.dh-wrap {
	/* Bound to the Blocksy palette, with the literal as the fallback so the
	   component still looks right if it is ever dropped into another theme.
	   Colour 6 is the light surface the palette reserves for exactly this. */
	--dh-ground: var(--theme-palette-color-6, #E8F4F0);
	--dh-ink: var(--theme-palette-color-3, #293532);
	--dh-ink-soft: #52635D;
	--dh-accent: var(--theme-palette-color-1, #176B68);
	--dh-accent-hover: var(--theme-palette-color-2, #10504E);
	--dh-on-accent: var(--theme-palette-color-8, #ffffff);

	/* The card's own materials. Neutralised for this version: the beige pair
	   (#E4DED0 / #CFC7B4) read as a warm patch against a mint ground. Same
	   lightness, the yellow taken out, so the back still reads as matte paper
	   and still sits clearly darker than the ground — a back within a few
	   percent of the band looks like a hole in the page, which is how the
	   original cream failed. */
	--dh-paper-top: #DEE2DD;
	--dh-paper-bot: #C8CEC8;
	--dh-lens: #E9EDE8;

	container-type: inline-size;
	background: var(--dh-ground);
	box-sizing: border-box;
	/* pulled out to the edges of the theme's card; hero.js measures how far */
	margin-inline: calc(-1 * var(--dh-out, 0px));
}

/* Full bleed, both numbers measured rather than assumed. --dh-vw comes from
   documentElement.clientWidth, which excludes the scrollbar; 100vw includes it
   and would put a horizontal scrollbar on the whole site. --dh-shift is the
   wrap's own distance from the left edge of the window, because the usual
   calc(50% - 50vw) trick assumes the container is centred in the window.
   Without JS neither variable is set and the class is never added. */
.dh-wrap.dh-bleed {
	width: var(--dh-vw);
	max-width: none;
	margin-left: var(--dh-shift, 0px);
	margin-right: 0;
}

/* ---- the band ---------------------------------------------------------- */

.dh-hero {
	display: grid;
	justify-items: center;
	max-width: 1160px;
	margin-inline: auto;
	/* The band is pulled out by --dh-out and the content pushed back in by the
	   same amount, so the tint fills the theme's card while the words stay in
	   line with the section below. 38px applies when nothing was measured. */
	padding: 33px max(var(--dh-out, 0px), 38px) 28px;
	box-sizing: border-box;
	/* also a container: the copy sizes itself against the hero's own width
	   rather than the window's, and the two differ a lot once the band bleeds */
	container-type: inline-size;
}

.dh-wrap.dh-bleed .dh-hero {
	max-width: none;
	margin-inline: 0;
	margin-left: var(--dh-col-l, auto);
	width: var(--dh-col-w, auto);
	padding-inline: 0;
}

/* ---- copy -------------------------------------------------------------- */

/* Deliberately not a heading element: the page keeps its own H1 above the band.
   1.2.1 no longer hides that H1 — the study shows both, and the keyword heading
   is the page's only real one. */
.dh-hero .dh-lead {
	margin: 0 0 30px;
	/* No ch cap: at 27px the line fits the band on one line, which is how the
	   study reads it. text-wrap balance handles the break when it does not. */
	max-width: 46ch;
	font-size: clamp(20px, 3.1cqi, 27px);
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--dh-ink);
	text-align: center;
	text-wrap: balance;
}

/* ---- the two cards ----------------------------------------------------- */

/* The gap is the interaction's, not just the layout's. Each card's whole box is
   its control rectangle, and the outer band of each drives the card out to
   +-180 deg — so at the study's 46px the two "spin" zones were adjacent and the
   cursor fell out of one card straight into the other, with no room for the one
   it left to settle back to flat. 138px is three times that: a real corridor
   where neither card is driven, while the gap stays under half a card's width,
   which is what keeps the two reading as one comparison rather than two
   unrelated pictures. */
.dh-hero .dh-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 138px;
	width: 100%;
	max-width: 778px;   /* 2 x 320 + 138 */
	padding: 10px 0 12px;
}

.dh-hero .dh-fig {
	margin: 0;
	min-width: 0;
	text-align: center;
	perspective: 1100px;
}

.dh-hero .dh-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	/* vertical scrolling stays with the browser; horizontal gestures reach the card */
	touch-action: pan-y;
}

.dh-hero .dh-cap {
	margin-top: 18px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dh-ink-soft);
}

.dh-hero .dh-poster,
.dh-hero .dh-video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* Visibility is driven by data-mode, not by the hidden attribute. The UA rule
   [hidden]{display:none} has specificity 0-1-0 and our own display rules are
   0-2-0, so they silently beat it and the video kept rendering its poster frame
   behind the card. Exactly one layer is shown at a time. */
.dh-hero [hidden] { display: none !important; }

.dh-hero .dh-stage:not([data-mode="poster"]) .dh-poster { display: none; }
.dh-hero .dh-stage:not([data-mode="video"]) .dh-video { display: none; }
.dh-hero .dh-stage:not([data-mode="card"]) .dh-unit { display: none; }

/* ---- the hint ---------------------------------------------------------- */

.dh-hero .dh-hint {
	margin: 0 0 22px;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--dh-ink-soft);
	text-align: center;
}

/* ---- the three points -------------------------------------------------- */

.dh-hero .dh-points {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	max-width: 720px;
	gap: 0;
	margin: 0;
	padding: 6px 0 0;
}

.dh-hero .dh-points li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 8px;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--dh-ink);
}

.dh-hero .dh-points li::before { content: none; }

.dh-hero .dh-disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dh-on-accent);
	color: var(--dh-accent);
}

.dh-hero .dh-tick {
	width: 19px;
	height: 19px;
}

/* ---- the call to action ------------------------------------------------ */

.dh-hero .dh-actions { margin-top: 28px; }

.dh-hero .dh-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 25px;
	background: var(--dh-accent);
	border: 1px solid var(--dh-accent);
	color: var(--dh-on-accent);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	border-radius: 4px;
}

.dh-hero .dh-cta:hover,
.dh-hero .dh-cta:focus-visible {
	background: var(--dh-accent-hover);
	border-color: var(--dh-accent-hover);
	color: var(--dh-on-accent);
	text-decoration: none;
}

/* ---- the interactive card ---------------------------------------------- */

.dh-hero .dh-unit {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	perspective: 1400px;
	cursor: ew-resize;
}

.dh-hero .dh-card {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	transform-style: preserve-3d;
	transform: rotateY(var(--dh-a, 0deg));
	/* --dh-tz is the 6 mm block scaled from the rendered width, set in JS */
}

.dh-hero .dh-face,
.dh-hero .dh-back {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	box-shadow: 0 17px 24px -13px rgba(37, 67, 56, 0.33);
}

.dh-hero .dh-face {
	object-fit: cover;
	transform: translateZ(calc(var(--dh-tz, 12px) / 2));
}

.dh-hero .dh-back {
	transform: rotateY(180deg) translateZ(calc(var(--dh-tz, 12px) / 2));
	background: linear-gradient(160deg, var(--dh-paper-top), var(--dh-paper-bot));
}

/* the 1 px rule down the middle of the back */
.dh-hero .dh-back::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 16%;
	bottom: 16%;
	width: 1px;
	background: rgba(41, 53, 50, 0.18);
}

/* the two lens edges, seen as the card turns through profile */
.dh-hero .dh-edge {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--dh-tz, 12px);
	background: var(--dh-lens);
}

.dh-hero .dh-edge-l {
	left: 0;
	transform: translateX(calc(var(--dh-tz, 12px) / -2)) rotateY(-90deg);
}

.dh-hero .dh-edge-r {
	right: 0;
	transform: translateX(calc(var(--dh-tz, 12px) / 2)) rotateY(90deg);
}

/* ---- the video tier ----------------------------------------------------
   A touch visitor gets the rendered loop, which is one card, so the second
   figure and both captions — labels that only mean something in a comparison —
   are taken out of the layout rather than left as a lone caption. Set by JS on
   the wrap, so a desktop visitor never sees this state. */

.dh-wrap[data-tier="video"] .dh-cards {
	grid-template-columns: minmax(0, 1fr);
	max-width: 420px;
}

.dh-wrap[data-tier="video"] .dh-fig + .dh-fig,
.dh-wrap[data-tier="video"] .dh-cap { display: none; }

/* ---- narrow ------------------------------------------------------------- */

@container (max-width: 600px) {
	.dh-hero { padding: 25px 17px; }
	.dh-hero .dh-lead { font-size: 23px; margin-bottom: 26px; }
	.dh-hero .dh-cards { gap: 20px; padding: 13px 0 12px; }
	.dh-hero .dh-cap { font-size: 12px; margin-top: 14px; }
	.dh-hero .dh-hint { margin-bottom: 20px; }
	.dh-hero .dh-points {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		max-width: 290px;
		padding-top: 0;
	}
	.dh-hero .dh-points li {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
		gap: 13px;
		padding: 0;
		font-size: 15px;
	}
	.dh-hero .dh-disc { flex-basis: 32px; width: 32px; height: 32px; }
	.dh-hero .dh-actions { margin-top: 20px; }
	.dh-hero .dh-cta { width: 100%; }
}

/* Browsers without container queries fall back to the window measurement.
   Worse, but only for them — and it has to make the SAME choices as the block
   above, or the two paths disagree about the layout. The cards keep their row
   at every width: showing the two effects together is the component's whole
   argument, and a phone that stacks them turns a comparison into a list. */
@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.dh-hero { padding: 25px 17px; }
		.dh-hero .dh-lead { font-size: 23px; margin-bottom: 26px; }
		.dh-hero .dh-cards { gap: 20px; padding: 13px 0 12px; }
		.dh-hero .dh-cap { font-size: 12px; margin-top: 14px; }
		.dh-hero .dh-points {
			grid-template-columns: minmax(0, 1fr);
			gap: 14px;
			max-width: 290px;
			padding-top: 0;
		}
		.dh-hero .dh-points li {
			flex-direction: row;
			justify-content: flex-start;
			text-align: left;
			gap: 13px;
			padding: 0;
			font-size: 15px;
		}
		.dh-hero .dh-disc { flex-basis: 32px; width: 32px; height: 32px; }
		.dh-hero .dh-cta { width: 100%; }
	}
}

/* Between the phone and a comfortable desktop the three points get tight
   before the cards do; the cards keep their row because the comparison is the
   point of the component. */
/* Between the phone and a comfortable desktop the corridor has to give way
   before the cards do: a fixed 138px gap inside a narrow band eats the cards
   themselves, and a small card is harder to hit than a close one. */
@container (min-width: 601px) and (max-width: 850px) {
	.dh-hero .dh-cards { gap: 60px; max-width: 620px; }
	.dh-hero .dh-points li { font-size: 14px; padding: 0 5px; }
}

/* Reduced motion: the ambient loop does not run (handled in JS). The card stays
   fully drivable by cursor or drag, so nothing is disabled here — only the hint
   is given more weight, since no movement draws the eye to the cards. */
@media (prefers-reduced-motion: reduce) {
	.dh-hero .dh-hint { color: var(--dh-ink); font-size: 12px; }
}