/* Buying with confidence (patterns/home-listing.php, slug jkd/home-listing, replaces "What every listing shows").
   Loaded after home.css on the homepage and in the editor. Owner: confidence (round 3, 2026-10-25).

   One idea: the buyer about to send $1,000 to $3,500 to a stranger sees what they'll have before the money
   moves. A white band split in two. The right half, from the middle of the content column to the edge of the
   screen and from the black band above to the red band below, is one photo: an engine on a workshop cart in a
   bright shop. The left half carries the claim, set as big as the red band's title, and three checked lines
   (the exact unit, the fit checked by a person, the warranty in writing), then the phone.

   The photo: the figure is positioned over the band's right half and clipped; the img inside is 156.25% of the
   figure's width and pulled left by 56.25%, so whatever the band's height, the frame always shows the right 64%
   of the photo (the engine, the bell housing, the brake disc). The left 36% holds the gearbox tail and a small
   mechanic (CREDITS.md), and never shows.

   The old rules for this section (.jkd-listing and its children, in home.css) match nothing here; they can go
   at integration. The shared .jkd-kicker, .jkd-cta and focus-ring rules in home.css are reused on purpose. */

.jkd-confidence {
	--jkd-conf-pad: clamp(56px, 6vw, 128px);               /* above and below the text; the photo has none */
	--jkd-conf-min: clamp(560px, 44vw, 900px);             /* the band is at least this tall, so the photo is big even if the copy is short */
	--jkd-conf-text: 42%;                                  /* the text's share of the content box; the photo starts at 50% of the column */
	--jkd-conf-h2: clamp(40px, 3.3vw + 12px, 78px);        /* 60 at 1440, 75 at 1920, 78 on a 2560 monitor: a notch above the red band's title */
	--jkd-conf-title: clamp(20px, .5vw + 13px, 27px);       /* 20 at 1440, 23 at 1920, 26 at 2560 */
	--jkd-conf-fs: clamp(16px, .3vw + 12.5px, 20px);        /* 17 at 1440, 18 at 1920, 20 at 2560 */
	--jkd-conf-check: clamp(20px, 1.1vw, 26px);
	--jkd-conf-row: clamp(18px, 1.5vw, 26px);              /* a proof's padding, top and bottom */
	position: relative;
	padding: 0;                                            /* home.css gives bands a vertical padding; here it moves onto the text */
	background: #fff;
	color: var(--jkd-text);
	overflow: clip;                                        /* clip, not hidden: hidden would make the band a scroll container and break the view timeline below */
}

/* ------------------------------------------------------------------ The photo (site: positioned over the right half; editor: in flow, above the text)
   (.jkd-sec.jkd-confidence: Kadence's .single-content figure.wp-block-image sets a bottom margin at a higher specificity
   than a plain .jkd-confidence prefix, and a margin on a top/bottom-anchored figure would shorten it.) */
.jkd-sec.jkd-confidence .jkd-confidence__photo { margin: 0; overflow: clip; background: var(--jkd-grey); }
.jkd-confidence .jkd-confidence__photo img {
	display: block;
	width: 156.25%;
	max-width: none;
	height: 100%;
	margin: 0 0 0 -56.25%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* On the site Kadence wraps the band's children in .wp-block-group__inner-container (the content column). The figure
   leaves the column: its left edge sits on the column's midpoint (the band is centred on the column, so that is the
   band's own 50%), and it runs to the screen's right edge and the band's top and bottom. */
.jkd-confidence > .wp-block-group__inner-container > .jkd-confidence__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 50%;
}
/* The editor has no inner container: the figure stays in flow, framed 3:2, so Hamid can click it and swap the photo,
   and the text runs full width under it. */
.editor-styles-wrapper .jkd-confidence .jkd-confidence__photo { aspect-ratio: 3 / 2; margin-bottom: 24px; }
.editor-styles-wrapper .jkd-confidence .jkd-confidence__text { max-width: none; min-height: 0; padding: 32px 0 48px; }

/* ------------------------------------------------------------------ The text: the left share of the content box, centred on the band's height */
.jkd-confidence .jkd-confidence__text {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: var(--jkd-conf-text);
	min-height: var(--jkd-conf-min);
	margin: 0;                                             /* Kadence's 2rem under every group */
	padding: var(--jkd-conf-pad) 0;
}
.jkd-confidence .jkd-confidence__text > * { margin: 0; }

.jkd-confidence h2 {
	max-width: 9.4em;
	margin: clamp(14px, 1.2vw, 22px) 0 0;
	font-size: var(--jkd-conf-h2);
	line-height: .94;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--jkd-text);
	text-wrap: balance;
}

/* The three proofs: hairline rows, a red check drawn at the left of each, the title in the display face */
.jkd-confidence .jkd-confidence__proofs {
	margin: clamp(30px, 2.8vw, 52px) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--jkd-line);
}
.jkd-confidence .jkd-confidence__proofs li {
	position: relative;
	margin: 0;
	padding: var(--jkd-conf-row) 0 var(--jkd-conf-row) calc(var(--jkd-conf-check) + clamp(16px, 1.2vw, 24px));
	border-bottom: 1px solid var(--jkd-line);
	font-size: var(--jkd-conf-fs);
	line-height: 1.5;
	color: var(--jkd-steel);
}
.jkd-confidence .jkd-confidence__proofs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--jkd-conf-row) + var(--jkd-conf-title) * .05);
	width: var(--jkd-conf-check);
	height: var(--jkd-conf-check);
	background: var(--jkd-red);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5l5.6 5.6L20.5 6.4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5l5.6 5.6L20.5 6.4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jkd-confidence .jkd-confidence__proofs strong {
	display: block;
	margin-bottom: 4px;
	font: 700 var(--jkd-conf-title)/1.05 var(--jkd-display);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--jkd-text);
}
.jkd-confidence .jkd-confidence__proofs br { display: none; } /* the title is already on its own line */
.jkd-confidence .jkd-confidence__proofs a {
	color: var(--jkd-text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-decoration-color: var(--jkd-red);
	text-underline-offset: 3px;
	transition: color .2s;
}
.jkd-confidence .jkd-confidence__proofs a:hover { color: var(--jkd-red); }

/* One action: the phone, with a quiet line beside it */
.jkd-confidence .jkd-confidence__act {
	margin: clamp(28px, 2.6vw, 48px) 0 0;
	gap: 12px clamp(16px, 1.4vw, 24px);
}
.jkd-confidence .jkd-confidence__cta { margin: 0; }
.jkd-confidence .jkd-confidence__note {
	margin: 0;
	font-size: var(--jkd-conf-fs);
	font-weight: 500;
	color: var(--jkd-muted);
}

/* ------------------------------------------------------------------ Motion: as the band scrolls in, the photo settles from a touch larger and the three checks draw themselves.
   Scroll-driven, so there is no script and nothing runs when the visitor asks for less motion. 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-conf-settle { from { transform: scale(1.06); } to { transform: none; } }
		@keyframes jkd-conf-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
		.jkd-confidence { view-timeline: --jkd-conf block; }
		.jkd-confidence .jkd-confidence__photo img {
			transform-origin: 68% 50%; /* the engine */
			animation: jkd-conf-settle linear both;
			animation-timeline: --jkd-conf;
			animation-range: entry 0% entry 70%;
		}
		.jkd-confidence .jkd-confidence__proofs li::before {
			animation: jkd-conf-draw linear both;
			animation-timeline: --jkd-conf;
			animation-range: entry 28% entry 40%;
		}
		.jkd-confidence .jkd-confidence__proofs li:nth-child(2)::before { animation-range: entry 36% entry 48%; }
		.jkd-confidence .jkd-confidence__proofs li:nth-child(3)::before { animation-range: entry 44% entry 56%; }
	}
}

/* ------------------------------------------------------------------ Tablets (782 to 1024): the split stays, the text takes a little more room */
@media (max-width: 1024px) and (min-width: 782px) {
	.jkd-confidence { --jkd-conf-text: 44%; --jkd-conf-min: 0px; --jkd-conf-pad: 56px; }
	.jkd-confidence h2 { max-width: none; }
}

/* ------------------------------------------------------------------ Phones and small tablets: the photo first, full width, then the text */
@media (max-width: 781px) {
	.jkd-confidence { --jkd-conf-min: 0px; --jkd-conf-pad: 0px; --jkd-conf-row: 18px; --jkd-conf-check: 22px; }
	.jkd-confidence > .wp-block-group__inner-container > .jkd-confidence__photo {
		position: static;
		aspect-ratio: 5 / 4;
		margin: 0 calc(-1 * var(--global-content-edge-padding, 1.5rem));
	}
	.jkd-confidence .jkd-confidence__text {
		max-width: none;
		min-height: 0;
		padding: 36px 0 56px;
	}
	.jkd-confidence h2 { max-width: 12em; font-size: clamp(34px, 9.2vw, 44px); margin-top: 12px; } /* two lines at 768 as well */
	.jkd-confidence .jkd-confidence__proofs { margin-top: 28px; }
	.jkd-confidence .jkd-confidence__act { margin-top: 28px; flex-direction: column; align-items: stretch; gap: 12px; }
	.jkd-confidence .jkd-confidence__cta .wp-block-button { flex: 1 1 100%; }
	.jkd-confidence .jkd-confidence__cta .wp-block-button__link { width: 100%; }
	.jkd-confidence .jkd-confidence__note { text-align: center; }
	/* The inline Warranty link gets a 44px tap box without moving the text */
	.jkd-confidence .jkd-confidence__proofs a { padding: 10px 0; margin: -10px 0; }
}

/* Phones: the photo is square, so the engine fills the screen's width before the claim */
@media (max-width: 599px) {
	.jkd-confidence > .wp-block-group__inner-container > .jkd-confidence__photo { aspect-ratio: 1 / 1; }
}