/* Shop by origin (patterns/home-origins.php). Loaded after home.css on the homepage and in the editor. Owner: origin.

   A black band. Three full-width rows, one per origin, each led by its code (JDM, KDM, USDM) set in Saira
   Condensed 800 at up to 240px: the store's own name, read top to bottom, as the way into the shop. The
   country and the makes sit on one fixed axis, the link on the right edge. Hovering a row lights it up in
   steel from edge to edge and draws a red line across its top; the whole row is the link.

   The old rules for this section (.jkd-browse, .jkd-origin, .jkd-origins under .jkd-browse, .jkd-conds,
   .jkd-pills, .jkd-head--makes, .jkd-makes) stay in home.css until integration; none of them match this
   markup. The shared .jkd-head rules in home.css are reused here on purpose. */

.jkd-origins {
	--jkd-origins-code: clamp(84px, 13.5vw, 248px);          /* 84 on phones, 194 at 1440, 248 from 1840 */
	--jkd-origins-country: clamp(26px, 1.4vw + 10px, 44px);  /* 30 at 1440, 37 at 1920, 44 from 2430 */
	/* Both are Saira Condensed, so their cap tops sit at a fixed share of the font size below the line box: .072 of the
	   code (line-height .82) and .16 of the country (line-height 1), measured. This padding puts the two tops on one line. */
	--jkd-origins-top: calc(var(--jkd-origins-code) * .072 - var(--jkd-origins-country) * .16);
	--jkd-origins-line: rgba(255, 255, 255, .16);
	position: relative;
	overflow: hidden; /* the hover highlight runs past the content column, edge to edge */
	padding: clamp(52px, 5.4vw, 116px) 0 clamp(56px, 5.8vw, 124px);
	background: var(--jkd-black);
	color: #fff;
}
/* The texture: old cylinder heads (assets/home/photos/origin-texture-heads.webp, credits in photos/CREDITS.md), anchored
   bottom right at 125% of the band's height so the photo's bright top strip is always cropped off, under two fades:
   left to right, black under the codes to about half-strength metal at the right edge; top to bottom, solid --jkd-black
   on the top edge (so the band continues the black foot of Just arrived above with no tone step) easing in by the first
   row, and a touch darker again at the bottom. The rows and their hover highlight sit above it. */
.jkd-origins::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, var(--jkd-black) 0, rgba(14, 15, 17, .7) 14%, rgba(14, 15, 17, 0) 40%, rgba(14, 15, 17, 0) 82%, rgba(14, 15, 17, .6) 100%),
		linear-gradient(90deg, var(--jkd-black) 0, var(--jkd-black) 30%, rgba(14, 15, 17, .76) 58%, rgba(14, 15, 17, .52) 100%),
		url(../home/photos/origin-texture-heads.webp) right bottom / auto 125% no-repeat var(--jkd-black);
	pointer-events: none;
}
.jkd-origins > .wp-block-group__inner-container { position: relative; }

/* Section head: the shared .jkd-head rules, in white */
.jkd-origins .jkd-head { margin-bottom: clamp(22px, 2.2vw, 44px); }
.jkd-origins .jkd-head h2 { color: #fff; }
.jkd-origins .jkd-head__note { max-width: 34em; color: var(--jkd-on-dark); }

/* The rows */
.jkd-origins .jkd-origins__rows {
	position: relative;
	z-index: 0; /* the rows' highlights (z-index -1) stay inside this block, above the band */
	margin: 0;
	border-bottom: 1px solid var(--jkd-origins-line);
}
.jkd-origins .jkd-origins__row {
	position: relative;
	margin: 0;
	padding: clamp(24px, 2.5vw, 50px) 0 clamp(26px, 2.7vw, 54px);
	border-top: 1px solid var(--jkd-origins-line);
}
/* The row's grid: on the site Kadence wraps a group's children in .wp-block-group__inner-container, in the
   editor they sit in the row itself, so the grid is set on both. Code | country and makes | link. */
.jkd-origins .jkd-origins__row > .wp-block-group__inner-container,
.editor-styles-wrapper .jkd-origins .jkd-origins__row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
	column-gap: clamp(16px, 2vw, 40px);
	align-items: start;
}
.jkd-origins .jkd-origins__row .jkd-origins__code,
.jkd-origins .jkd-origins__row .jkd-origins__text,
.jkd-origins .jkd-origins__row .jkd-origins__go { margin: 0; }

/* Hover and keyboard focus: the row lights up to steel, edge to edge, and a red line draws across its top */
.jkd-origins .jkd-origins__row::before {
	content: "";
	position: absolute;
	inset: 0 -100vw;
	z-index: -1;
	background: var(--jkd-steel);
	opacity: 0;
	transition: opacity .3s var(--jkd-ease);
}
.jkd-origins .jkd-origins__row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 2px;
	background: var(--jkd-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--jkd-ease);
}
.jkd-origins .jkd-origins__row:hover::before,
.jkd-origins .jkd-origins__row:has(a:focus-visible)::before { opacity: 1; }
.jkd-origins .jkd-origins__row:hover::after,
.jkd-origins .jkd-origins__row:has(a:focus-visible)::after { transform: scaleX(1); }

/* The code: the biggest type on the page */
.jkd-origins .jkd-origins__code {
	font: 800 var(--jkd-origins-code)/.82 var(--jkd-display);
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #fff;
}

/* Country and makes. The country is the second display size (code 194, country 30, makes 17 at 1440); the top of
   its letters sits on the same line as the top of the code's. */
.jkd-origins .jkd-origins__text {
	padding-top: var(--jkd-origins-top);
	max-width: 24em;
	font-size: clamp(15px, .3vw + 11px, 19px);
	line-height: 1.5;
	color: var(--jkd-on-dark);
	transition: color .3s var(--jkd-ease);
}
.jkd-origins .jkd-origins__row:hover .jkd-origins__text,
.jkd-origins .jkd-origins__row:has(a:focus-visible) .jkd-origins__text { color: #fff; }
.jkd-origins .jkd-origins__text strong {
	display: block;
	margin-bottom: .3em;
	color: #fff;
	font: 700 var(--jkd-origins-country)/1 var(--jkd-display);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.jkd-origins .jkd-origins__text br { display: none; } /* the country is already on its own line */

/* The link, on the right edge, centred on the country's line. Its ::after makes the whole row the link. */
.jkd-origins .jkd-origins__go {
	justify-self: end;
	padding-top: calc(var(--jkd-origins-top) + var(--jkd-origins-country) * .49 - .78em); /* cap centres meet */
	font-size: var(--jkd-btn-fs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.jkd-origins .jkd-origins__go a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 0; /* a 44px tap target without moving the text */
	margin: -15px 0;
	color: #fff;
	text-decoration: none;
}
.jkd-origins .jkd-origins__go a::before {
	content: "";
	order: 1; /* after the text */
	width: 1.5em;
	height: 1.5em;
	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-origins .jkd-origins__row:hover .jkd-origins__go a::before,
.jkd-origins .jkd-origins__row:has(a:focus-visible) .jkd-origins__go a::before { transform: translateX(6px); background: var(--jkd-red); }
.jkd-origins .jkd-origins__go a::after { content: ""; position: absolute; inset: 0; }

/* Phones and small tablets: the code with the link beside it, then the country and the makes under both */
@media (max-width: 781px) {
	/* The rows fill the width here, so the texture stays a quiet grain under them: one even dark veil, black top edge */
	.jkd-origins::before {
		background:
			linear-gradient(180deg, var(--jkd-black) 0, rgba(14, 15, 17, .86) 10%, rgba(14, 15, 17, .82) 100%),
			url(../home/photos/origin-texture-heads.webp) right bottom / auto 125% no-repeat var(--jkd-black);
	}
	.jkd-origins .jkd-origins__row { padding: 22px 0 24px; }
	.jkd-origins .jkd-origins__row > .wp-block-group__inner-container,
	.editor-styles-wrapper .jkd-origins .jkd-origins__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: 16px;
		row-gap: 10px;
		align-items: center;
	}
	.jkd-origins .jkd-origins__code { grid-column: 1; grid-row: 1; }
	.jkd-origins .jkd-origins__go { grid-column: 2; grid-row: 1; padding-top: 0; }
	.jkd-origins .jkd-origins__text { grid-column: 1 / -1; grid-row: 2; padding-top: 0; max-width: none; font-size: 16px; }
}