/* For garages and mechanics (patterns/home-garages.php), round 4. Loaded after home.css on the homepage and in the
   editor. Owner: garages.

   A black band for the trade, built around the one thing a shop does: it has a car on the lift and a customer
   waiting, and it calls with the engine code. Left, on the content axis: the title with its statement right under
   it, and at the bottom the phone number set in the display face, the biggest type in the band, with the message
   link under it. Right: the shop photo (a car with the hood up on a lift), from the middle of the page to the
   viewport's right edge, its left edge cut by the brand's slash with a thin red seam along it.

   The photo is exactly as tall as the text column: the two sit in one positioned wrapper (.jkd-trade__top) and
   the photo is pinned to its top and bottom, so the title's cap top is on the photo's top edge and the link's
   underline is on its bottom edge at every width, whatever Hamid writes. On wide screens the column has a
   floor height so the photo keeps some depth; the number then drops to the bottom and the air sits between the
   statement and the number, not inside the title. (Round 3 fixed the photo's height and pushed the statement
   down to meet it, which left a hole under the title.)

   The slash: the photo's figure is skewed 16 degrees and clips its content, the image inside is skewed back.
   The net transform on the image is nothing, so it is still a plain rectangle, and the figure's leaning box is
   the cut. No height arithmetic, so the lean is 16 degrees at every height. The top-right corner of the leaning
   box overshoots the viewport and the band clips it.

   Under both, one hairline that runs from viewport edge to viewport edge (like the red band's rail), then the
   three facts a shop needs on the content column. Phones: title, statement, number, link, then the photo
   full-bleed, then the facts on hairlines.

   The old rules for this section stay in home.css until integration: .jkd-garages h2 (size and margins, overridden
   here) and .jkd-garages .wp-block-column > p:last-child (muted colour and size, overridden on .jkd-trade__fact-text);
   .jkd-garages__cols, __card, __phone, __note match nothing in this markup. */

.jkd-sec.jkd-trade {
	--jkd-trade-pad: clamp(56px, 5.8vw, 120px);                   /* band padding, top and bottom */
	--jkd-trade-min: clamp(340px, 20vw + 50px, 560px);             /* the photo's floor: 340 at 1440, 434 at 1920, 560 from 2550; the text sets it when taller */
	--jkd-trade-gutter: clamp(32px, 3.4vw, 64px);                  /* text column to the photo's bottom-left corner */
	--jkd-trade-h2: clamp(40px, 3vw + 12px, 80px);                 /* 55 at 1440, 70 at 1920, 80 from 2270 */
	--jkd-trade-lead: clamp(17px, .4vw + 12px, 22px);
	--jkd-trade-phone: clamp(60px, 6.6vw + 10px, 144px);           /* 78 at 1024, 105 at 1440, 137 at 1920, 144 from 2030; the digits run 5em wide */
	--jkd-trade-fs: clamp(16px, .3vw + 12.5px, 18px);
	--jkd-trade-label: clamp(17px, .25vw + 13.5px, 20px);
	--jkd-trade-line: rgba(255, 255, 255, .18);
	/* From the content column's right edge to the viewport's: the edge padding, plus the margin outside the column on
	   screens wider than it. 100vw counts the scrollbar; the few extra pixels are clipped by the band. */
	--jkd-trade-bleed: calc(var(--global-content-edge-padding, 1.5rem) + max(0px, (100vw - var(--global-content-width, 1440px)) / 2));
	position: relative;
	padding: var(--jkd-trade-pad) 0;
	background: var(--jkd-black);
	color: #fff;
	/* The photo and the hairline run to the viewport's edge; `clip`, not `hidden`, so the band isn't a scroll container for the view timelines below */
	overflow: hidden;
	overflow: clip;
}

/* ------------------------------------------------------------------ The top: text column and photo in one positioned box
   On the site Kadence wraps a group's children in .wp-block-group__inner-container, in the editor they sit in the
   group itself, so the rules are set on both. */
.jkd-sec.jkd-trade .jkd-trade__top { position: relative; margin: 0; }
.jkd-sec.jkd-trade .jkd-trade__top > .wp-block-group__inner-container { position: relative; }

/* ------------------------------------------------------------------ The text column: title and statement at the top, number and link at the bottom */
.jkd-sec.jkd-trade .jkd-trade__text {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: calc(50% - var(--jkd-trade-gutter));
}
.jkd-sec.jkd-trade .jkd-trade__text > .wp-block-group__inner-container,
.editor-styles-wrapper .jkd-sec.jkd-trade .jkd-trade__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: var(--jkd-trade-min);
	padding-bottom: 3px; /* the link's underline (6px under the baseline, 1px thick) ends on the photo's bottom edge: measured within .35px at 1024, 1440, 1920 and 2560 */
}
/* Each child sets its whole margin (Kadence gives every p and heading a 2rem bottom margin) */
.jkd-sec.jkd-trade .jkd-trade__text h2 {
	margin: calc(-1 * var(--jkd-trade-h2) * .125) 0 0; /* the cap top on the photo's top edge (Saira Condensed at line-height .94: caps start .1305em down; Chrome rounds the ascent per size, and .125 lands within half a pixel at 1024, 1440, 1920 and 2560) */
	max-width: 8em;
	font-size: var(--jkd-trade-h2);
	line-height: .94;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #fff;
	text-wrap: balance;
}
.jkd-sec.jkd-trade .jkd-trade__lead {
	margin: clamp(20px, 1.8vw, 32px) 0 0; /* right under the title: one thought */
	max-width: 24em;
	font-size: var(--jkd-trade-lead);
	line-height: 1.5;
	color: #fff;
	text-wrap: pretty;
}

/* The number: the biggest type in the band, a tel link, pushed to the photo's bottom edge. On hover a red line grows under it. */
.jkd-sec.jkd-trade .jkd-trade__phone {
	margin: auto 0 0;
	padding-top: clamp(36px, 3.2vw, 60px); /* never closer than this to the statement */
	font: 800 var(--jkd-trade-phone)/.85 var(--jkd-display);
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.jkd-sec.jkd-trade .jkd-trade__phone a {
	position: relative;
	display: block; /* block, so the paragraph and the link are one box and the hover line sits under the digits */
	width: max-content;
	color: #fff;
	text-decoration: none;
	transition: color .2s;
}
.jkd-sec.jkd-trade .jkd-trade__phone a::after {
	content: "";
	position: absolute;
	left: .02em;
	right: .02em;
	bottom: -.02em; /* the box ends .075em under the baseline at line-height .85, so this sits about .1em under the digits */
	height: .06em;
	background: var(--jkd-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--jkd-ease);
}
.jkd-sec.jkd-trade .jkd-trade__phone a:hover::after,
.jkd-sec.jkd-trade .jkd-trade__phone a:focus-visible::after { transform: scaleX(1); }

/* The second way in: a text link with the page's arrow, a 44px tap target without moving the text */
.jkd-sec.jkd-trade .jkd-trade__go {
	margin: clamp(18px, 1.8vw, 32px) 0 0;
	font-size: var(--jkd-trade-fs);
	font-weight: 700;
	line-height: 1;
}
.jkd-sec.jkd-trade .jkd-trade__go a {
	position: relative;
	z-index: 1; /* above the number's text box: Saira Condensed's content area (1.58em) overshoots the .85em line box by .365em each side, and the positioned number link would otherwise take the clicks on this link */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	margin: -14px 0;
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-color: rgba(255, 255, 255, .4);
	transition: text-decoration-color .2s;
}
.jkd-sec.jkd-trade .jkd-trade__go a::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	mask: url(../home/icon-arrow.svg) center / contain no-repeat;
	transition: transform .25s var(--jkd-ease), background-color .25s;
}
.jkd-sec.jkd-trade .jkd-trade__go a:hover { text-decoration-color: #fff; }
.jkd-sec.jkd-trade .jkd-trade__go a:hover::after { transform: translateX(4px); background: var(--jkd-red); }

/* ------------------------------------------------------------------ The photo: from the page's centre to the viewport's right edge, as tall as the text, cut by the slash */
.jkd-sec.jkd-trade .jkd-trade__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: calc(-1 * var(--jkd-trade-bleed));
	height: auto;
	margin: 0;
	background: var(--jkd-steel);
	transform: skewX(-16deg);
	transform-origin: 0 100%; /* the bottom-left corner stays put, the top-left moves right: the brand's lean */
	overflow: hidden;
	overflow: clip;
}
.jkd-sec.jkd-trade .jkd-trade__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 62% 46%; /* the open hood and the lift arm stay in frame as the box gets wider and shorter */
	transform: skewX(16deg); /* undoes the figure's skew, about the same corner: the image is a plain rectangle again */
	transform-origin: 0 100%;
}
/* The seam: a red line along the cut. Drawn straight; the figure's skew leans it. */
.jkd-sec.jkd-trade .jkd-trade__photo::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--jkd-red);
	transform-origin: 0 100%;
}
/* A little shade on the bright wall at the top and along the seam, so the car stays the bright thing */
.jkd-sec.jkd-trade .jkd-trade__photo::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(14, 15, 17, .55), rgba(14, 15, 17, 0) 48%),
		linear-gradient(90deg, rgba(14, 15, 17, .6), rgba(14, 15, 17, 0) 42%);
	pointer-events: none;
}

/* ------------------------------------------------------------------ The facts: one hairline from edge to edge, three columns under it on the content column */
.jkd-sec.jkd-trade .jkd-trade__facts {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 clamp(28px, 4vw, 72px);
	margin: clamp(48px, 4.6vw, 88px) 0 0;
	padding-top: clamp(28px, 2.4vw, 44px);
	border-top: 0;
}
.jkd-sec.jkd-trade .jkd-trade__facts::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw; /* the column is centred in the viewport, so this is the whole width; the band clips the scrollbar's share */
	height: 1px;
	background: var(--jkd-trade-line);
}
.jkd-sec.jkd-trade .jkd-trade__fact { flex: none; min-width: 0; margin: 0; }
.jkd-sec.jkd-trade .jkd-trade__label {
	margin: 0 0 clamp(8px, .7vw, 12px);
	font: 700 var(--jkd-trade-label)/1.1 var(--jkd-display);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
}
/* (.jkd-trade__fact in the selector outranks home.css's .jkd-garages .wp-block-column > p:last-child) */
.jkd-sec.jkd-trade .jkd-trade__fact .jkd-trade__fact-text {
	margin: 0;
	max-width: 24em;
	font-size: var(--jkd-trade-fs);
	line-height: 1.5;
	color: var(--jkd-on-dark);
}

/* ------------------------------------------------------------------ Motion: as the band scrolls in, the seam draws up the photo's edge and the number arrives.
   Scroll-driven, no script, nothing under prefers-reduced-motion: reduce. Browsers without view timelines (and the
   screenshot tool, which forces reduced motion) show the finished state. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes jkd-trade-seam { from { transform: scaleY(0); } to { transform: scaleY(1); } }
		@keyframes jkd-trade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
		.jkd-sec.jkd-trade .jkd-trade__photo { view-timeline: --jkd-trade-photo block; }
		.jkd-sec.jkd-trade .jkd-trade__photo::before {
			animation: jkd-trade-seam linear both;
			animation-timeline: --jkd-trade-photo;
			animation-range: entry 10% entry 60%;
		}
		.jkd-sec.jkd-trade .jkd-trade__phone {
			animation: jkd-trade-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
	}
}

/* ------------------------------------------------------------------ Phones and small tablets: one column, the photo full-bleed between the number and the facts */
@media (max-width: 781px) {
	.jkd-sec.jkd-trade {
		--jkd-trade-pad: clamp(52px, 12vw, 80px);
		--jkd-trade-h2: clamp(36px, 9.8vw, 56px);
		--jkd-trade-phone: clamp(46px, 12vw, 84px);
	}
	.jkd-sec.jkd-trade .jkd-trade__text { max-width: none; }
	.jkd-sec.jkd-trade .jkd-trade__text > .wp-block-group__inner-container,
	.editor-styles-wrapper .jkd-sec.jkd-trade .jkd-trade__text { min-height: 0; padding-bottom: 0; }
	.jkd-sec.jkd-trade .jkd-trade__text h2 { margin-top: 0; max-width: none; }
	.jkd-sec.jkd-trade .jkd-trade__lead { margin-top: 16px; font-size: 17px; }
	.jkd-sec.jkd-trade .jkd-trade__phone { margin-top: 0; padding-top: 32px; }
	.jkd-sec.jkd-trade .jkd-trade__go { margin-top: 22px; font-size: 17px; }
	.jkd-sec.jkd-trade .jkd-trade__fact .jkd-trade__fact-text { max-width: 30em; font-size: 16px; }

	.jkd-sec.jkd-trade .jkd-trade__photo {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		height: auto;
		aspect-ratio: 4 / 3;
		margin: 40px calc(-1 * var(--global-content-edge-padding, 1.5rem)) 0;
		transform: none;
		overflow: visible;
	}
	.jkd-sec.jkd-trade .jkd-trade__photo img { object-position: 60% 50%; transform: none; }
	.jkd-sec.jkd-trade .jkd-trade__photo::before { display: none; }
	.jkd-sec.jkd-trade .jkd-trade__photo::after { background: linear-gradient(180deg, rgba(14, 15, 17, .35), rgba(14, 15, 17, 0) 40%); }

	.jkd-sec.jkd-trade .jkd-trade__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin-top: 0;
		padding-top: 0;
	}
	.jkd-sec.jkd-trade .jkd-trade__facts::before { display: none; }
	.jkd-sec.jkd-trade .jkd-trade__fact { padding: 22px 0 24px; border-top: 1px solid var(--jkd-trade-line); }
	.jkd-sec.jkd-trade .jkd-trade__fact:first-child { border-top: 0; padding-top: 36px; }
	.jkd-sec.jkd-trade .jkd-trade__fact:last-child { padding-bottom: 0; }
}

/* Larger phones and small tablets (600 to 781): the facts fit three across under one edge-to-edge rule */
@media (max-width: 781px) and (min-width: 600px) {
	.jkd-sec.jkd-trade .jkd-trade__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 24px;
		margin-top: 40px;
		padding-top: 24px;
	}
	.jkd-sec.jkd-trade .jkd-trade__facts::before { display: block; }
	.jkd-sec.jkd-trade .jkd-trade__fact,
	.jkd-sec.jkd-trade .jkd-trade__fact:first-child { padding: 0; border-top: 0; }
}