/* ==========================================================================
   Prestige Detailing — stat card (pd-stat)
   Figma: 29:2189 (580 × 203 @ 1728).
   Rendered inside #wrap_all, so every rule is paired: ".pd-stat .x" + "#top #wrap_all .pd-stat .x".
   Self-contained: carries its own copy of pd-main-nav's shared tokens and the
   .pd-nav-t cap trim, so it never depends on the nav stylesheet being current.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
.pd-stat {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-stat-bg: #242222;
	--pd-stat-ink: 255, 255, 255;
	--pd-stat-pad: 40px;
	--pd-stat-pad-b: 44px;               /* 40 + the last line's descender: Figma's 203 */
	--pd-stat-gap: 24px;                 /* icon → text column */
	--pd-stat-icon: 56px;
	--pd-stat-head-gap: 10px;            /* number cap box → label cap box */
	--pd-stat-body-gap: 32px;            /* label cap box → text cap box */
	--pd-stat-arm: 8px;                  /* corner bracket arm — same as pd-button */
	--pd-stat-bar: 2px;                  /* corner bracket stroke */

	--pd-stat-num-fs: 36px;
	--pd-stat-num-ls: -0.02em;           /* -0.72px @ 36 */
	--pd-stat-label-fs: 22px;
	--pd-stat-label-ls: -0.03em;         /* -0.66px @ 22 */
	--pd-stat-label-dim: 0.4;
	--pd-stat-fade: 105px;               /* 25% of the 420px text column */
	--pd-stat-text-fs: 16px;
	--pd-stat-text-lh: 24px;
	--pd-stat-text-a: 0.72;

	/* Margins: inline --pd-stat-mt / --pd-stat-mb from the panel; the ramp only writes -now */
	--pd-stat-mt-now: var(--pd-stat-mt, 0px);
}

@media (max-width: 1199px) {
	.pd-stat.pd-stat--scale { --pd-stat-mt-now: calc(var(--pd-stat-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-stat.pd-stat--scale { --pd-stat-mt-now: calc(var(--pd-stat-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-stat .pd-nav-t,
#top #wrap_all .pd-stat .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-stat { --pd-fb: 1; }
}

/* ---------- Card ---------- */
.pd-stat,
#top #wrap_all .pd-stat {
	position: relative;
	display: flex;
	align-items: flex-start;
	column-gap: var(--pd-stat-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-stat-mt-f, var(--pd-stat-mt-now));
	margin-bottom: var(--pd-stat-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-stat-pad);
	padding-bottom: var(--pd-stat-pad-b);
	padding-left: var(--pd-stat-pad);
	padding-right: var(--pd-stat-pad);
	border-width: 0;
	border-style: none;
	border-radius: 0;
	color: rgb(var(--pd-stat-ink));
	background-color: var(--pd-stat-bg);
	/* Corner brackets: 8 bars, arm × stroke, one per corner edge (Figma 29:2168 / 2174 / 2177 / 2186) */
	background-image:
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink))),
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink))),
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink))),
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink))),
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink))),
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink))),
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink))),
		linear-gradient(rgb(var(--pd-stat-ink)), rgb(var(--pd-stat-ink)));
	background-size:
		var(--pd-stat-arm) var(--pd-stat-bar), var(--pd-stat-bar) var(--pd-stat-arm),
		var(--pd-stat-arm) var(--pd-stat-bar), var(--pd-stat-bar) var(--pd-stat-arm),
		var(--pd-stat-arm) var(--pd-stat-bar), var(--pd-stat-bar) var(--pd-stat-arm),
		var(--pd-stat-arm) var(--pd-stat-bar), var(--pd-stat-bar) var(--pd-stat-arm);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
	font-family: var(--pd-nav-font);
	font-style: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.pd-stat.pd-stat--fill,
#top #wrap_all .pd-stat.pd-stat--fill {
	height: 100%;
}

/* ---------- Icon ---------- */
.pd-stat .pd-stat__icon,
#top #wrap_all .pd-stat .pd-stat__icon {
	flex: 0 0 auto;
	width: var(--pd-stat-icon);
	height: var(--pd-stat-icon);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}

.pd-stat .pd-stat__img,
#top #wrap_all .pd-stat .pd-stat__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

/* ---------- Text column: flex columns of trimmed children, so every gap is cap box to cap box ---------- */
.pd-stat .pd-stat__body,
#top #wrap_all .pd-stat .pd-stat__body {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-stat-body-gap);
	flex: 1 1 0;
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-stat .pd-stat__head,
#top #wrap_all .pd-stat .pd-stat__head {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-stat-head-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Number: a one-cell grid. The real figure and the count-up twin share the cell. */
.pd-stat .pd-stat__num,
#top #wrap_all .pd-stat .pd-stat__num {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.pd-stat .pd-stat__final,
.pd-stat .pd-stat__run,
#top #wrap_all .pd-stat .pd-stat__final,
#top #wrap_all .pd-stat .pd-stat__run {
	--fs: var(--pd-stat-num-fs);
	--lh: var(--pd-stat-num-fs);
	grid-column: 1;
	grid-row: 1;
	color: rgb(var(--pd-stat-ink));
	font-family: var(--pd-nav-font);
	font-weight: 700;
	letter-spacing: var(--pd-stat-num-ls);
	text-transform: uppercase;
	white-space: nowrap;
}

.pd-stat .pd-stat__run,
#top #wrap_all .pd-stat .pd-stat__run {
	visibility: hidden;
}

/* Armed by the script: the twin counts, the real figure stays readable to screen readers */
.pd-stat.pd-stat--armed .pd-stat__final,
#top #wrap_all .pd-stat.pd-stat--armed .pd-stat__final {
	color: transparent;
}

.pd-stat.pd-stat--armed .pd-stat__run,
#top #wrap_all .pd-stat.pd-stat--armed .pd-stat__run {
	visibility: visible;
}

/* Label: 40% → 100% white over the first 105px. The gradient sits on the INLINE span,
   whose background area covers the whole glyph box — on the trimmed block it would clip. */
.pd-stat .pd-stat__label,
#top #wrap_all .pd-stat .pd-stat__label {
	--fs: var(--pd-stat-label-fs);
	--lh: var(--pd-stat-label-fs);
	color: rgb(var(--pd-stat-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: var(--pd-stat-label-ls);
	text-transform: uppercase;
}

.pd-stat .pd-stat__label-in,
#top #wrap_all .pd-stat .pd-stat__label-in {
	color: transparent;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, rgba(var(--pd-stat-ink), var(--pd-stat-label-dim)) 0, rgb(var(--pd-stat-ink)) var(--pd-stat-fade));
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: slice;   /* one fade across the whole label, not one per wrapped line */
	box-decoration-break: slice;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.pd-stat .pd-stat__text,
#top #wrap_all .pd-stat .pd-stat__text {
	--fs: var(--pd-stat-text-fs);
	--lh: var(--pd-stat-text-lh);
	color: rgba(var(--pd-stat-ink), var(--pd-stat-text-a));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}