/* 3Dimge Hero — every selector prefixed dh- so the shoppingcart theme cannot reach in.
   The stage background must stay #F4F3F0: the video frames carry that colour baked in
   with opaque alpha, so any other ground shows the video's square edge. */

/* The wrap is the measuring stick. The grid below asks IT how much room there is,
   not the browser window — the theme puts this inside a narrow content column next
   to a sidebar, and a media query cannot see that. */
.dh-wrap {
	--dh-ground: #F4F3F0;
	--dh-ink: #1C1B18;
	--dh-ink-soft: #6B6862;
	--dh-accent: #1B4F8A;

	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. The
   usual calc(50% - 50vw) trick assumes the container is centred in the window —
   this theme puts the hero in a content column with a sidebar beside it, so the
   column's centre is not the window's centre and that trick lands the hero
   187 px off. Measuring the real offset works whatever the theme does with it.

   Without JS neither variable is set and the class is never added: the hero
   stays inside its column, correctly laid out. */
.dh-wrap.dh-bleed {
	width: var(--dh-vw);
	max-width: none;
	margin-left: var(--dh-shift, 0px);
	margin-right: 0;
}

.dh-hero {
	display: grid;
	gap: 36px;
	align-items: center;
	max-width: 1160px;
	margin-inline: auto;
	padding-block: 48px;
	/* Pushed back in by exactly what the band was pulled out, so the words line up
	   with the section below while the tint still has margins of its own. The 24px
	   fallback applies only when the card could not be measured: some breathing
	   room matters more than perfect alignment. */
	padding-inline: var(--dh-out, 24px);
	box-sizing: border-box;
	/* also a container, so the copy can size itself against the hero's own width
	   rather than the window's — the two differ a lot once the band bleeds. */
	container-type: inline-size;
}

/* When the band bleeds, the content inside it lines up with the theme's content
   column, measured in JS. The grey runs edge to edge; the words and the card do
   not, so the hero reads as part of the page rather than floating past it. */
.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;
}

/* 700, not 820: this theme's content column is 814 px wide, and the hero now
   lives inside it. At 820 the hero would have dropped to one stacked column on
   the very layout it is built for. */
@container (min-width: 700px) {
	.dh-hero {
		grid-template-columns: 1fr minmax(220px, 340px);
		gap: 40px;
		padding-block: 72px;
	}
}

/* Browsers without container queries fall back to the window measurement. Worse,
   but only for them, and only when the hero is not bleeding. */
@supports not (container-type: inline-size) {
	@media (min-width: 1000px) {
		.dh-hero { grid-template-columns: 1fr minmax(220px, 340px); gap: 40px; padding-block: 72px; }
	}
}

/* ---- one theme rule, on hero pages only ---------------------------------
   The single place this plugin touches anything it does not own. It hides the
   page's own heading block on a page carrying the hero, because a hero already
   is the page's opening statement and two openings read as a mistake.

   An earlier version also hid the sidebar and re-floated the content area to
   full width. That worked, but it was theme surgery from a plugin over a far
   wider surface than the job needed, and it was rolled back. The sidebar stays.

   Scoped to body.dh-hero-page, which the plugin adds only to a page that
   actually contains the shortcode. Remove the shortcode or deactivate the
   plugin and the theme is untouched. The proper home for even this one rule is
   a child theme with its own page template. */

body.dh-hero-page #primary .page-header { display: none; }

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

.dh-hero .dh-head {
	margin: 0 0 16px;
	font-size: clamp(27px, 4.4cqi, 42px);   /* cqi = the hero's own width */
	line-height: 1.04;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--dh-ink);
	text-wrap: balance;
}

.dh-hero .dh-sub {
	margin: 0 0 28px;
	font-size: clamp(17px, 2.2vw, 20px);
	line-height: 1.5;
	color: var(--dh-ink-soft);
	max-width: 34ch;
	text-wrap: balance;
}

.dh-hero .dh-cta {
	display: inline-block;
	padding: 13px 26px;
	background: var(--dh-accent);
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	border-radius: 2px;
}

.dh-hero .dh-cta:hover,
.dh-hero .dh-cta:focus-visible { background: #14406F; color: #fff; }

/* ---- stage ---- */

.dh-hero .dh-media {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}

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

.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; our own
   .dh-hero .dh-video{display:block} is 0-2-0 and silently beat it, so the
   video kept rendering its poster frame behind the card and the turning card
   appeared to split one tile into two. .dh-unit had the same problem through
   display:grid. Exactly one layer is shown at a time, and the !important line
   makes hidden mean hidden inside the hero whatever else we write. */
.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; }

.dh-hero .dh-hint {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--dh-ink-soft);
}

/* ---- 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: 78%;
	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 18px 34px -18px rgba(28, 26, 23, 0.42);
}

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

/* The back has to read as the back of an object, not as a hole in the page.
   The original cream sat within a few percent of the band's own #F4F3F0, so the
   card looked transparent the moment it turned. Same matte paper, more value. */
.dh-hero .dh-back {
	transform: rotateY(180deg) translateZ(calc(var(--dh-tz, 12px) / 2));
	background: linear-gradient(160deg, #E4DED0, #CFC7B4);
}

/* 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(28, 26, 23, 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: #EFEDE8;
}

.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);
}

/* 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 card. */
@media (prefers-reduced-motion: reduce) {
	.dh-hero .dh-hint { color: var(--dh-ink); }
}