/* Trust strip (patterns/home-trust.php), round 4. Loaded after home.css on the homepage and in the editor. Owner: trust.

   The four promises are the foot of the finder card. A black plinth the card's width reaches up under the card
   (past its rounded corners, so the two read as one object: white card, black base) and carries the four words
   in the display face, white, each behind a red slash mark, with one plain line under it. The words share the
   card's own inner padding, so FIND YOUR PART and REAL PHOTOS sit on the same left edge. Hairline dividers run
   the plinth's full height, up under the card. Phones show the promises two by two.

   Type is set on real baselines, not guessed offsets. Saira Condensed's caps are .69em tall, its ascent 1.14em
   and descent .44em, so a line-height of .7 puts the baseline on the box's bottom edge and the cap top on its
   top edge; the slash mark is an inline block .69em tall standing on that baseline.

   The markup carries .jkd-proof, new this round; the old round-3 classes (.jkd-promises, .jkd-promise) and the
   round-2 ones (.jkd-trust, still named once in editor.css) match nothing: delete those rules at integration. */

.jkd-sec.jkd-proof {
	--jkd-proof-word: clamp(26px, 1.4vw + 16px, 48px);      /* 36 at 1440, 43 at 1920, 48 from 2290 */
	--jkd-proof-text: clamp(14px, .2vw + 12px, 17px);       /* 15 at 1440 */
	--jkd-proof-inset: calc(clamp(20px, 1.6vw, 30px) + 1px); /* the finder card's padding plus its 1px border (home.css .jkd-finder): same left edge */
	--jkd-proof-tuck: calc(var(--jkd-radius, 8px) + 6px);   /* how far the plinth reaches up under the card: past its corners */
	--jkd-proof-pad: clamp(24px, 2vw, 36px);                /* above the words and below the lines */
	--jkd-proof-lean: .198em;                               /* the slash mark's lean at .69em tall: tan(16deg) */
	--jkd-proof-rule: rgba(255, 255, 255, .14);
	position: relative;
	z-index: 1;                                             /* under the card, which home.css keeps at 2 */
	gap: 0 !important;
	margin: 0;
	border-radius: 0 0 var(--jkd-radius, 8px) var(--jkd-radius, 8px);
	background: var(--jkd-black);
	color: #fff;
}
.home .single-content > .jkd-proof,
.editor-styles-wrapper .is-root-container > .jkd-proof { margin-top: calc(-1 * var(--jkd-proof-tuck)); }

/* Each promise: the vertical padding sits here, not on the strip, so the dividers run the full height */
.jkd-proof .jkd-proof__item {
	min-width: 0;
	margin: 0;
	padding: calc(var(--jkd-proof-tuck) + var(--jkd-proof-pad)) var(--jkd-proof-inset) var(--jkd-proof-pad);
	border-left: 1px solid var(--jkd-proof-rule);
}
.jkd-proof .jkd-proof__item:first-child { border-left: 0; }

/* The word: a box exactly cap height, the mark standing on its baseline before it */
.jkd-proof .jkd-proof__word {
	margin: 0;
	font: 800 var(--jkd-proof-word)/.7 var(--jkd-display);
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.jkd-proof .jkd-proof__word::before {
	content: "";
	display: inline-block;
	vertical-align: baseline;
	width: .4em;      /* a .2em stroke plus its lean; the bottom left corner is on the card's inner edge */
	height: .69em;
	margin-right: .22em;
	background: var(--jkd-red);
	clip-path: polygon(var(--jkd-proof-lean) 0, 100% 0, calc(100% - var(--jkd-proof-lean)) 100%, 0 100%);
}
/* The line, indented to the word's first letter so the mark hangs in the margin. The measure is short enough
   that every line breaks in two (the shortest is 14em long), balanced, so the four cells read as one grid. */
.jkd-proof .jkd-proof__text {
	margin: clamp(10px, .8vw, 14px) 0 0 calc(var(--jkd-proof-word) * .62);
	max-width: 13em;
	font-size: var(--jkd-proof-text);
	line-height: 1.45;
	color: var(--jkd-on-dark);
	text-wrap: balance;
}
.jkd-proof .jkd-proof__text a {
	display: inline-block;
	padding: 12px 0; /* a 44px tap target without moving the text */
	margin: -12px 0;
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .4);
	transition: text-decoration-color .2s;
}
.jkd-proof .jkd-proof__text a:hover { text-decoration-color: #fff; }
/* Focus rings: the page's red ring would sink into the black, so here it's white */
.home .entry-content .jkd-proof a:focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------ Tablets in landscape (782 to 1024): the words a step smaller so four stay on one line */
@media (max-width: 1024px) and (min-width: 782px) {
	.jkd-sec.jkd-proof { --jkd-proof-word: clamp(24px, 3vw, 32px); --jkd-proof-text: 14px; --jkd-proof-pad: 22px; }
	.jkd-proof .jkd-proof__text { max-width: none; }
}

/* ------------------------------------------------------------------ Phones and small tablets: two by two, the dividers kept */
@media (max-width: 781px) {
	.home .jkd-sec.jkd-proof,
	.editor-styles-wrapper .jkd-sec.jkd-proof {
		--jkd-proof-word: clamp(22px, 6.2vw, 34px);  /* 24 at 390 */
		--jkd-proof-text: 14px;
		--jkd-proof-inset: 17px;                     /* the card's phone padding plus its border (home.css) */
		--jkd-proof-pad: 20px;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.jkd-proof .jkd-proof__item { flex-basis: auto !important; }
	.jkd-proof .jkd-proof__item:nth-child(odd) { border-left: 0; }
	.jkd-proof .jkd-proof__item:nth-child(n + 3) { padding-top: var(--jkd-proof-pad); border-top: 1px solid var(--jkd-proof-rule); }
	.jkd-proof .jkd-proof__text { margin-top: 8px; max-width: none; }
}