/* Hero (patterns/home-hero.php), round 3. Loaded after home.css on the homepage and in the editor. Owner: hero.

   One idea: the brand's slash, with the transmission behind it. The photo (a Cover block) fills the whole band;
   a black panel with a leaning right edge covers its left part and carries the type, so the headline sits on
   pure black (contrast 17:1) and the sharp half of the photo, the clutch packs and planetary gears, shows on the
   right. The panel's edge is the red slash: the same geometry as round 2 (skewX -16deg, foot anchored to the
   content column so it stays beside the headline at 1920 and 2560), now a red hairline-to-bar along a black
   edge instead of a red field. A soft shadow falls from the panel onto the photo.

   Phones: the photo on top (its own crop of the gear stack), cut along the bottom by the red seam, then the
   text on black. The white finder card overlaps the band's foot at every width (home.css sets that overlap).

   Old rules in home.css that this file overrides on purpose (delete at integration): the whole "Hero" block
   (.jkd-hero padding, ::before grid, ::after red slash and its 1800px variant, .jkd-hero > *), the hero lines
   in "Motion" and in the phone block (.jkd-hero padding, ::after display). Nothing else there matches this
   markup: the old inner classes (.jkd-hero__cols, __text, __sub, __ctas, __call, __art) are gone. */

.jkd-sec.jkd-hero {
	--jkd-hero-h1: clamp(44px, 5.8vw + 8px, 140px);           /* 92 at 1440, 119 at 1920, 140 from 2280: three lines (ENGINES, / TRANSMISSIONS / AND PARTS) */
	--jkd-hero-lead: clamp(16px, .4vw + 12px, 22px);
	--jkd-hero-pad-top: clamp(40px, 3.6vw, 80px);
	--jkd-hero-overlap: clamp(64px, 5vw, 96px);                /* the finder card's reach into the band (home.css) */
	--jkd-hero-pad-bottom: calc(var(--jkd-hero-overlap) + clamp(32px, 3vw, 64px));
	--jkd-hero-header: 156px;                                  /* the site header above (chrome.css), desktop */
	/* Where the slash meets the band's foot: the middle of the screen, so the photo has half of it. The edge
	   leans 16deg, so higher up it sits further right (about .29 of the height): at the headline's height it is
	   about 250px clear of the longest line at every width from 1025 to 2560. */
	--jkd-hero-foot: 50%;
	--jkd-hero-edge: clamp(6px, .6vw, 12px);                   /* the red edge's thickness */
	/* The photo's box runs past the right edge of the screen, so the sharpest part of the mechanism (the clutch
	   packs and planetary gears, centre-right in the file) sits next to the slash instead of the soft far right. */
	--jkd-hero-photo-bleed: 14%;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center; /* the copy sits in the middle of the band's height */
	min-height: clamp(600px, calc(100vh - var(--jkd-hero-header)), 980px);
	min-height: clamp(600px, calc(100svh - var(--jkd-hero-header)), 980px); /* the first screen, header excluded */
	background: var(--jkd-black);
	color: #fff;
	padding: var(--jkd-hero-pad-top) 0 var(--jkd-hero-pad-bottom);
}
/* Round 2's drafting grid is off; the photo is the texture now */
.jkd-sec.jkd-hero::before { content: none; }
/* The content column sits on the band; it must not position the photo (home.css made it relative) */
.jkd-sec.jkd-hero > .wp-block-group__inner-container { position: static; z-index: auto; width: 100%; }

/* ------------------------------------------------------------------ The photo: the whole band, behind everything */
.jkd-sec.jkd-hero .jkd-hero__photo,
.editor-styles-wrapper .jkd-hero .jkd-hero__photo {
	position: absolute;
	inset: 0 calc(-1 * var(--jkd-hero-photo-bleed)) 0 0;
	z-index: 0;
	width: auto;
	max-width: none !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0;
	display: block;
	aspect-ratio: auto;
	background: var(--jkd-black);
}
.jkd-sec.jkd-hero .jkd-hero__photo .wp-block-cover__inner-container { display: none; }
.jkd-sec.jkd-hero .jkd-hero__photo .wp-block-cover__image-background {
	transform-origin: 72% 50%;
	will-change: transform;
}
/* A quiet scrim: darker at the foot (the finder card lands there) and along the top edge, the middle untouched */
.jkd-sec.jkd-hero .jkd-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(14, 15, 17, .72) 0%, rgba(14, 15, 17, .25) 28%, rgba(14, 15, 17, 0) 55%),
		linear-gradient(to bottom, rgba(14, 15, 17, .35) 0%, rgba(14, 15, 17, 0) 30%);
	pointer-events: none;
}

/* ------------------------------------------------------------------ The black panel and its red edge (the slash) */
.jkd-sec.jkd-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	right: calc(100% - var(--jkd-hero-foot));
	z-index: 1;
	display: block;
	width: auto;
	background: var(--jkd-black);
	border-right: var(--jkd-hero-edge) solid var(--jkd-red);
	transform: skewX(-16deg);
	transform-origin: bottom;
	box-shadow: 18px 0 70px -6px rgba(0, 0, 0, .62);
	animation: none;
	opacity: 1;
}
/* Wide screens (the content column is 1600px from 1800, 1920px from 2200): the type is at its biggest, the slash
   moves a little right of centre to stay clear of it, and the photo's bleed shrinks so the 2400px file isn't
   stretched more than about a tenth on a 2560 screen. */
@media (min-width: 1800px) {
	.jkd-sec.jkd-hero { --jkd-hero-foot: calc(50% + min(var(--global-content-width, 1440px), 100%) * .02); --jkd-hero-photo-bleed: 8%; }
}
@media (min-width: 2200px) {
	.jkd-sec.jkd-hero { --jkd-hero-foot: calc(50% + min(var(--global-content-width, 1440px), 100%) * .01); --jkd-hero-photo-bleed: 4%; }
}

/* ------------------------------------------------------------------ The copy, on the panel */
.jkd-sec.jkd-hero .jkd-hero__copy {
	position: relative;
	z-index: 2;
	margin: 0;
	max-width: 62%;
}
/* Kadence's 2rem under every p and group goes; the rhythm is set below, element by element (the :where keeps
   this reset below those rules, on the site where the group has an inner container and in the editor where it doesn't) */
.jkd-sec.jkd-hero .jkd-hero__copy > :where(*),
.jkd-sec.jkd-hero .jkd-hero__copy > :where(.wp-block-group__inner-container) > :where(*) { margin: 0; }
.jkd-sec.jkd-hero .jkd-hero__kicker { color: var(--jkd-red); }
/* The headline: three big lines (the width stops "ENGINES, TRANSMISSIONS" from sharing a line), then the
   origin on a smaller fourth line. That line is the italic in the editor (<em>), set upright here. */
.jkd-sec.jkd-hero .jkd-hero__title {
	max-width: 7.4em;
	margin: clamp(14px, 1.2vw, 24px) 0 clamp(26px, 2.4vw, 48px);
	color: #fff;
	font: 800 var(--jkd-hero-h1)/.9 var(--jkd-display);
	letter-spacing: -.015em;
	text-transform: uppercase;
	text-wrap: balance;
}
.jkd-sec.jkd-hero .jkd-hero__title em {
	display: block;
	margin-top: .3em;
	font-style: normal;
	font-weight: 700;
	font-size: .38em;
	line-height: 1.1;
	letter-spacing: .03em;
	color: #fff;
}
.jkd-sec.jkd-hero .jkd-hero__lead {
	max-width: 30em;
	font-size: var(--jkd-hero-lead);
	font-weight: 500;
	line-height: 1.5;
	color: var(--jkd-on-dark);
}
.jkd-sec.jkd-hero .jkd-hero__actions { margin-top: clamp(30px, 2.6vw, 52px); gap: 12px; }
.jkd-sec.jkd-hero .jkd-hero__actions .wp-block-button__link { padding: clamp(16px, 1.1vw, 22px) clamp(22px, 1.8vw, 36px); }
.jkd-sec.jkd-hero .jkd-hero__phone {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(28px, 2.2vw, 44px);
	font-size: clamp(15px, .25vw + 11.5px, 18px);
	color: var(--jkd-on-dark);
}
.jkd-sec.jkd-hero .jkd-hero__phone::before {
	content: "";
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background: url(../home/icon-phone.svg) center / contain no-repeat;
}
.jkd-sec.jkd-hero .jkd-hero__phone a {
	padding: 12px 0; /* a 44px tap target without moving the text */
	margin: -12px 0;
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
}
.jkd-sec.jkd-hero .jkd-hero__phone a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Focus rings on the black: white, so they show on the panel and on the photo */
.home .entry-content .jkd-hero :is(a, button):focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------ The finder card, over the band's foot: a deeper shadow now that it lands on a photo */
.home .single-content > .jkd-finder { box-shadow: 0 36px 70px -30px rgba(0, 0, 0, .6), 0 6px 18px -10px rgba(0, 0, 0, .25); }

/* ------------------------------------------------------------------ Motion: one moment on load. The photo settles (a slow scale), the panel's
   edge slides into place, the copy fades in. Nothing moves the text. Off when the visitor asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes jkd-hero-settle { from { transform: scale(1.06); } to { transform: none; } }
	@keyframes jkd-hero-edge { from { transform: translateX(-3%) skewX(-16deg); } to { transform: translateX(0) skewX(-16deg); } }
	@keyframes jkd-hero-fade { from { opacity: 0; } to { opacity: 1; } }
	.jkd-sec.jkd-hero .jkd-hero__photo .wp-block-cover__image-background { animation: jkd-hero-settle 1.8s var(--jkd-ease) both; }
	.jkd-sec.jkd-hero::after { animation: jkd-hero-edge .9s var(--jkd-ease) both; }
	.jkd-sec.jkd-hero .jkd-hero__copy { animation: jkd-hero-fade .7s ease-out .1s both; }
}

/* ------------------------------------------------------------------ Tablets in landscape and small laptops (782 to 1024): the panel is narrower, the type a step smaller */
@media (max-width: 1024px) and (min-width: 782px) {
	.jkd-sec.jkd-hero {
		--jkd-hero-foot: calc(50% + 100% * .1);
		--jkd-hero-pad-top: 44px;
		--jkd-hero-header: 118px; /* the phone header: one 60px row and the search row */
		--jkd-hero-photo-bleed: 10%;
		min-height: clamp(520px, calc(100svh - var(--jkd-hero-header)), 860px);
	}
	.jkd-sec.jkd-hero .jkd-hero__copy { max-width: 66%; }
}

/* ------------------------------------------------------------------ Phones and small tablets: the photo on top, the red seam, the text on black */
@media (max-width: 781px) {
	.jkd-sec.jkd-hero {
		--jkd-hero-photo-h: clamp(236px, 64vw, 400px);   /* 250 at 390, 400 at 768 */
		--jkd-hero-seam: 7px;
		--jkd-hero-h1: clamp(38px, 10.4vw, 56px);        /* 41 at 390 */
		--jkd-hero-photo-bleed: 0%;
		display: block;
		min-height: 0;
		padding: 0 0 calc(var(--jkd-hero-overlap) + 36px);
	}
	.jkd-sec.jkd-hero::after { display: none; }
	/* The photo: full width, its own height, the bottom edge cut from the left corner up to the right (the slash, lying down) */
	.jkd-sec.jkd-hero .jkd-hero__photo,
	.editor-styles-wrapper .jkd-hero .jkd-hero__photo {
		inset: 0 0 auto 0;
		height: var(--jkd-hero-photo-h);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14vw), 0 100%);
	}
	.jkd-sec.jkd-hero .jkd-hero__photo .wp-block-cover__image-background { object-position: 68% 50% !important; }
	.jkd-sec.jkd-hero .jkd-hero__photo::after {
		background: linear-gradient(to top, rgba(14, 15, 17, .4) 0%, rgba(14, 15, 17, 0) 40%);
	}
	/* The red seam along that cut: a bar skewed to the same slope (tan 8deg = .14, the 14vw above) */
	.jkd-sec.jkd-hero::before {
		content: "";
		position: absolute;
		left: -2%;
		right: -2%;
		top: calc(var(--jkd-hero-photo-h) - var(--jkd-hero-seam) + 1px);
		height: var(--jkd-hero-seam);
		z-index: 1;
		background: var(--jkd-red);
		transform: skewY(-8deg);
		transform-origin: left center;
		inset-inline: -2%;
		mask-image: none;
		-webkit-mask-image: none;
		opacity: 1;
	}
	.jkd-sec.jkd-hero .jkd-hero__copy {
		max-width: none;
		padding-top: calc(var(--jkd-hero-photo-h) + 30px);
	}
	.jkd-sec.jkd-hero .jkd-hero__title { max-width: none; margin: 12px 0 20px; }
	.jkd-sec.jkd-hero .jkd-hero__title em { font-size: .48em; margin-top: .35em; }
	.jkd-sec.jkd-hero .jkd-hero__lead { font-size: 16px; }
	.jkd-sec.jkd-hero .jkd-hero__actions { margin-top: 26px; gap: 10px; }
	.jkd-sec.jkd-hero .jkd-hero__actions .wp-block-button__link { padding: 16px 22px; min-height: 50px; }
	.jkd-sec.jkd-hero .jkd-hero__phone { margin-top: 24px; font-size: 16px; }
}
/* Phones proper: the two buttons stack, full width */
@media (max-width: 599px) {
	.jkd-sec.jkd-hero .jkd-hero__actions .wp-block-button { flex: 1 1 100%; }
	.jkd-sec.jkd-hero .jkd-hero__actions .wp-block-button__link { width: 100%; }
}