/**
 * BD Social Proof Stats — .espt-block-bd-proof-stats
 *
 * Vars: --cols --gap --num-size --label-size --star-size --icon-size
 *       --num-color --star-color --label-color --icon-color --icon-bg
 *       --card-bg --border-color
 * Classes: .is-design-* .is-order-* .is-icon-style-* .is-text-align-*
 *          .is-cols-auto .is-divider/.no-divider .is-hover-pop/.no-hover-pop
 * Mobile-first (≤767px), then 768px / 1024px.
 */

/* ------------------------------------------------------------- heading */
.espt-block-bd-proof-stats .bdn11-head {
	margin: 0 0 12px;
	min-width: 0;
}

.espt-block-bd-proof-stats .bdn11-title {
	color: var(--bd-ink);
	margin: 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-proof-stats .bdn11-sub {
	color: var(--bd-muted);
	margin: 4px 0 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-proof-stats .bdn11-note {
	color: var(--bd-muted);
	font-size: 12px;
	line-height: 1.5;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- grid */
.espt-block-bd-proof-stats .bdn11 {
	display: grid;
	gap: var(--gap, 12px);
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	min-width: 0;
}

/*
 * "Fit to the number of stats": auto-fit collapses the empty tracks, so three
 * stats become three equal columns and six wrap onto a second row.
 * min(100%, …) keeps the track floor from overflowing a narrow phone.
 */
.espt-block-bd-proof-stats.is-cols-auto .bdn11 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
}

.espt-block-bd-proof-stats .bdn11-c {
	align-items: center;
	border-radius: var(--bd-radius, 14px);
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: flex-start;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: calc(var(--bd-pad, 16px) * 0.85) 8px;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.espt-block-bd-proof-stats .bdn11-b {
	min-width: 0;
	width: 100%;
}

/* --------------------------------------------------------------- parts */
/*
 * The cap keeps 3–4 columns readable on a 320px phone whatever number size
 * the editor picked: it only bites when the column would be narrower than
 * the glyphs (26vw / cols ≈ the cell's own width), and never on tablet/desktop.
 */
.espt-block-bd-proof-stats .bdn11-n {
	color: var(--num-color, var(--bd-danger));
	font-size: var(--num-size, 19px); /* fallback if min()/calc division is unsupported */
	font-size: min(var(--num-size, 19px), calc(26vw / var(--cols, 3)));
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	min-width: 0;
}

.espt-block-bd-proof-stats .bdn11-v {
	line-height: 0;
	min-width: 0;
}

.espt-block-bd-proof-stats .bdn11-st {
	color: var(--star-color, var(--bd-accent));
	font-size: var(--star-size, 13px);
	letter-spacing: 1px;
	line-height: 1.2;
	margin-top: 1px;
}

.espt-block-bd-proof-stats .bdn11-ic {
	align-items: center;
	color: var(--icon-color, var(--bd-danger));
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--icon-size, 17px);
	justify-content: center;
	margin-top: 2px;
}

.espt-block-bd-proof-stats .bdn11-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-bd-proof-stats.is-icon-style-bubble .bdn11-ic,
.espt-block-bd-proof-stats.is-icon-style-square .bdn11-ic {
	background: var(--icon-bg, var(--bd-soft));
	border-radius: 50%;
	height: calc(var(--icon-size, 17px) * 2);
	/* max-width keeps a large bubble inside a narrow 4-column phone cell */
	max-width: 100%;
	width: calc(var(--icon-size, 17px) * 2);
}

.espt-block-bd-proof-stats.is-icon-style-square .bdn11-ic {
	border-radius: calc(var(--bd-radius, 14px) * 0.55);
}

.espt-block-bd-proof-stats .bdn11-l {
	color: var(--label-color, var(--bd-muted));
	font-size: var(--label-size, 13px);
	line-height: 1.4;
}

.espt-block-bd-proof-stats .bdn11-s {
	color: var(--label-color, var(--bd-muted));
	font-size: calc(var(--label-size, 13px) * 0.86);
	line-height: 1.4;
	margin-top: 2px;
	opacity: 0.78;
}

/* ------------------------------------------------------------ ordering */
.espt-block-bd-proof-stats.is-order-visual .bdn11-v { margin-top: 0; order: -1; }
.espt-block-bd-proof-stats.is-order-visual .bdn11-n { margin-top: 2px; }

.espt-block-bd-proof-stats.is-order-side .bdn11-c {
	align-items: center;
	column-gap: 10px;
	display: grid;
	grid-template-areas: "v n" "v b";
	grid-template-columns: auto minmax(0, 1fr);
	row-gap: 1px;
	text-align: left;
}

.espt-block-bd-proof-stats.is-order-side .bdn11-n { align-self: end; grid-area: n; }
.espt-block-bd-proof-stats.is-order-side .bdn11-v { align-self: center; grid-area: v; margin-top: 0; }
.espt-block-bd-proof-stats.is-order-side .bdn11-b { align-self: start; grid-area: b; }

.espt-block-bd-proof-stats.is-order-side .bdn11-c.is-novis {
	grid-template-areas: "n" "b";
	grid-template-columns: minmax(0, 1fr);
}

/* ----------------------------------------------------------- alignment */
.espt-block-bd-proof-stats.is-text-align-left .bdn11-c { align-items: flex-start; text-align: left; }
.espt-block-bd-proof-stats.is-text-align-right .bdn11-c { align-items: flex-end; text-align: right; }
.espt-block-bd-proof-stats.is-text-align-left .bdn11-head { text-align: left; }
.espt-block-bd-proof-stats.is-text-align-right .bdn11-head { text-align: right; }
.espt-block-bd-proof-stats.is-text-align-center .bdn11-head,
.espt-block-bd-proof-stats.is-text-align-center .bdn11-note { text-align: center; }
.espt-block-bd-proof-stats.is-text-align-right .bdn11-note { text-align: right; }

.espt-block-bd-proof-stats.is-order-side.is-text-align-right .bdn11-c {
	grid-template-areas: "n v" "b v";
	grid-template-columns: minmax(0, 1fr) auto;
	text-align: right;
}

.espt-block-bd-proof-stats.is-order-side.is-text-align-center .bdn11-c {
	grid-template-columns: auto minmax(0, auto);
	justify-content: center;
}

/* the icon column stays vertically centred whatever the text alignment is */
.espt-block-bd-proof-stats.is-order-side .bdn11-c { align-items: center; }

/* cells with no stars/icon lose the empty icon column in every alignment */
.espt-block-bd-proof-stats.is-order-side.is-text-align-center .bdn11-c.is-novis,
.espt-block-bd-proof-stats.is-order-side.is-text-align-right .bdn11-c.is-novis {
	grid-template-areas: "n" "b";
	grid-template-columns: minmax(0, 1fr);
}

/* …and a lone text column in the centred layout centres its text, so a cell
   without an icon does not read left-aligned next to its centred neighbours */
.espt-block-bd-proof-stats.is-order-side.is-text-align-center .bdn11-c.is-novis { text-align: center; }

/* ------------------------------------------------------------- designs */
/*
 * Depth belongs to the shared "Box shadow" control further down, never to the
 * design itself — otherwise picking “Shadow: None” would still leave a shadow.
 */
.espt-block-bd-proof-stats.is-design-cards .bdn11-c {
	background: var(--card-bg, var(--bd-box-bg));
	border: 1px solid var(--border-color, var(--bd-box-line));
}

.espt-block-bd-proof-stats.is-design-soft .bdn11-c {
	background: var(--card-bg, var(--bd-soft));
	border: 1px solid var(--border-color, var(--bd-soft-line));
}

.espt-block-bd-proof-stats.is-design-outline .bdn11-c {
	background: var(--card-bg, transparent);
	border: 2px solid var(--border-color, var(--bd-primary));
}

.espt-block-bd-proof-stats.is-design-dark .bdn11-c {
	background: var(--card-bg, var(--bd-deep));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
}

.espt-block-bd-proof-stats.is-design-gradient .bdn11-c {
	background: var(--card-bg, linear-gradient(140deg, var(--bd-primary), var(--bd-primary-dark)));
	border: 0;
}

/*
 * Frosted: a skin-tinted pane under a white sheen, so it still reads as glass
 * on a plain white page (a bare rgba(255,255,255,.6) card would not).
 * background-color / -image stay separate properties so --card-bg can replace
 * the tint without wiping the sheen.
 */
.espt-block-bd-proof-stats.is-design-glass .bdn11-c {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background-color: var(--card-bg, var(--bd-soft));
	background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.4));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.9));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.espt-block-bd-proof-stats.is-design-minimal .bdn11-c {
	background: none;
	border: 0;
	padding: 6px 4px;
}

.espt-block-bd-proof-stats.is-design-pills .bdn11-c {
	background: var(--card-bg, var(--bd-soft));
	border: 1px solid var(--border-color, var(--bd-soft-line));
	border-radius: 999px;
	/* narrow side padding on phones — 3 pills across 320px leave ~88px each */
	padding: 12px 10px;
}

/* one panel with hairline dividers: 1px grid gaps painted by the panel */
.espt-block-bd-proof-stats.is-design-joined .bdn11 {
	background: var(--border-color, var(--bd-line));
	border: 1px solid var(--border-color, var(--bd-box-line));
	border-radius: var(--bd-radius, 14px);
	gap: 1px;
	overflow: hidden;
	padding: 0;
}

.espt-block-bd-proof-stats.is-design-joined.no-divider .bdn11 {
	background: var(--card-bg, var(--bd-box-bg));
	gap: 0;
}

.espt-block-bd-proof-stats.is-design-joined .bdn11-c {
	background: var(--card-bg, var(--bd-box-bg));
	border: 0;
	border-radius: 0;
}

/* one solid banner strip */
.espt-block-bd-proof-stats.is-design-banner .bdn11 {
	background: var(--card-bg, linear-gradient(140deg, var(--bd-primary), var(--bd-primary-dark)));
	border-radius: var(--bd-radius, 14px);
	gap: 0;
	overflow: hidden;
	padding: calc(var(--bd-pad, 16px) * 0.4) 0;
	row-gap: var(--gap, 12px);
}

.espt-block-bd-proof-stats.is-design-banner .bdn11-c {
	background: none;
	border: 0;
	border-radius: 0;
}

/* Divider on every cell, the first of each row clipped by the panel. */
.espt-block-bd-proof-stats.is-design-banner.is-divider .bdn11-c {
	border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.24));
	margin-left: -1px;
}

/* light text on the dark / gradient / banner surfaces */
.espt-block-bd-proof-stats.is-design-dark .bdn11-n,
.espt-block-bd-proof-stats.is-design-gradient .bdn11-n,
.espt-block-bd-proof-stats.is-design-banner .bdn11-n { color: var(--num-color, #fff); }

.espt-block-bd-proof-stats.is-design-dark .bdn11-l,
.espt-block-bd-proof-stats.is-design-dark .bdn11-s,
.espt-block-bd-proof-stats.is-design-gradient .bdn11-l,
.espt-block-bd-proof-stats.is-design-gradient .bdn11-s,
.espt-block-bd-proof-stats.is-design-banner .bdn11-l,
.espt-block-bd-proof-stats.is-design-banner .bdn11-s { color: var(--label-color, rgba(255, 255, 255, 0.82)); }

.espt-block-bd-proof-stats.is-design-dark .bdn11-ic,
.espt-block-bd-proof-stats.is-design-gradient .bdn11-ic,
.espt-block-bd-proof-stats.is-design-banner .bdn11-ic { color: var(--icon-color, #fff); }

.espt-block-bd-proof-stats.is-design-dark.is-icon-style-bubble .bdn11-ic,
.espt-block-bd-proof-stats.is-design-dark.is-icon-style-square .bdn11-ic,
.espt-block-bd-proof-stats.is-design-gradient.is-icon-style-bubble .bdn11-ic,
.espt-block-bd-proof-stats.is-design-gradient.is-icon-style-square .bdn11-ic,
.espt-block-bd-proof-stats.is-design-banner.is-icon-style-bubble .bdn11-ic,
.espt-block-bd-proof-stats.is-design-banner.is-icon-style-square .bdn11-ic {
	background: var(--icon-bg, rgba(255, 255, 255, 0.16));
}

.espt-block-bd-proof-stats.is-design-dark .bdn11-st,
.espt-block-bd-proof-stats.is-design-gradient .bdn11-st,
.espt-block-bd-proof-stats.is-design-banner .bdn11-st { color: var(--star-color, #fcd34d); }

/* ------------------------------------------- shared shadow / hover layer */
.bd-shadow-soft.espt-block-bd-proof-stats .bdn11-c { box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.16); }
.bd-shadow-strong.espt-block-bd-proof-stats .bdn11-c { box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35); }

/* the coloured / frosted designs carry their depth a little deeper */
.bd-shadow-soft.espt-block-bd-proof-stats.is-design-gradient .bdn11-c { box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.45); }
.bd-shadow-strong.espt-block-bd-proof-stats.is-design-gradient .bdn11-c { box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.55); }
.bd-shadow-soft.espt-block-bd-proof-stats.is-design-glass .bdn11-c { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 28px -16px rgba(15, 23, 42, 0.42); }
.bd-shadow-strong.espt-block-bd-proof-stats.is-design-glass .bdn11-c { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 40px -16px rgba(15, 23, 42, 0.5); }

.bd-shadow-soft.espt-block-bd-proof-stats.is-design-joined .bdn11-c,
.bd-shadow-strong.espt-block-bd-proof-stats.is-design-joined .bdn11-c,
.bd-shadow-soft.espt-block-bd-proof-stats.is-design-banner .bdn11-c,
.bd-shadow-strong.espt-block-bd-proof-stats.is-design-banner .bdn11-c,
.bd-shadow-soft.espt-block-bd-proof-stats.is-design-minimal .bdn11-c,
.bd-shadow-strong.espt-block-bd-proof-stats.is-design-minimal .bdn11-c { box-shadow: none; }

.bd-shadow-soft.espt-block-bd-proof-stats.is-design-joined .bdn11,
.bd-shadow-soft.espt-block-bd-proof-stats.is-design-banner .bdn11 { box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.16); }
.bd-shadow-strong.espt-block-bd-proof-stats.is-design-joined .bdn11,
.bd-shadow-strong.espt-block-bd-proof-stats.is-design-banner .bdn11 { box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35); }

.bd-hover-lift.espt-block-bd-proof-stats .bdn11-c:hover { transform: translateY(-4px); }
.bd-hover-scale.espt-block-bd-proof-stats .bdn11-c:hover { transform: scale(1.03); }
.bd-hover-glow.espt-block-bd-proof-stats .bdn11-c:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 28%, transparent); }

.bd-hover-lift.espt-block-bd-proof-stats.is-design-joined .bdn11-c:hover,
.bd-hover-scale.espt-block-bd-proof-stats.is-design-joined .bdn11-c:hover,
.bd-hover-lift.espt-block-bd-proof-stats.is-design-banner .bdn11-c:hover,
.bd-hover-scale.espt-block-bd-proof-stats.is-design-banner .bdn11-c:hover { transform: none; }

.bd-hover-lift.espt-block-bd-proof-stats.is-design-joined .bdn11:hover,
.bd-hover-lift.espt-block-bd-proof-stats.is-design-banner .bdn11:hover { transform: translateY(-4px); }
.bd-hover-scale.espt-block-bd-proof-stats.is-design-joined .bdn11:hover,
.bd-hover-scale.espt-block-bd-proof-stats.is-design-banner .bdn11:hover { transform: scale(1.01); }

/* …and the glow rings the whole panel instead of one cell inside it */
.bd-hover-glow.espt-block-bd-proof-stats.is-design-joined .bdn11-c:hover,
.bd-hover-glow.espt-block-bd-proof-stats.is-design-banner .bdn11-c:hover { box-shadow: none; }
.bd-hover-glow.espt-block-bd-proof-stats.is-design-joined .bdn11:hover,
.bd-hover-glow.espt-block-bd-proof-stats.is-design-banner .bdn11:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 28%, transparent); }

.espt-block-bd-proof-stats.is-design-joined .bdn11,
.espt-block-bd-proof-stats.is-design-banner .bdn11 { transition: transform 0.25s ease, box-shadow 0.25s ease; }

/* number pop on hover */
.espt-block-bd-proof-stats .bdn11-n { transition: transform 0.25s ease, color 0.25s ease; }
.espt-block-bd-proof-stats.is-hover-pop .bdn11-c:hover .bdn11-n { transform: scale(1.06); }
.espt-block-bd-proof-stats.is-hover-pop.is-text-align-left .bdn11-c:hover .bdn11-n { transform-origin: left center; }
.espt-block-bd-proof-stats.is-hover-pop.is-text-align-right .bdn11-c:hover .bdn11-n { transform-origin: right center; }
.espt-block-bd-proof-stats.is-hover-pop .bdn11-c:hover .bdn11-ic { transform: scale(1.06); }
.espt-block-bd-proof-stats .bdn11-ic { transition: transform 0.25s ease, background-color 0.25s ease; }

/* while the count-up runs the digits must not jitter */
.espt-block-bd-proof-stats .bdn11.is-counting .bdn11-n { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- breakpoints */
@media (min-width: 768px) {
	/* room is no longer scarce — the number is exactly the size that was set */
	.espt-block-bd-proof-stats .bdn11-n { font-size: var(--num-size, 23px); }
	.espt-block-bd-proof-stats.is-cols-auto .bdn11 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
	.espt-block-bd-proof-stats .bdn11-c { gap: 6px; padding: calc(var(--bd-pad, 16px) * 0.95) 12px; }
	.espt-block-bd-proof-stats.is-design-minimal .bdn11-c { padding: 8px 6px; }
	.espt-block-bd-proof-stats.is-design-pills .bdn11-c { padding: 14px 18px; }
	.espt-block-bd-proof-stats .bdn11-note { font-size: 13px; }
}

@media (min-width: 1024px) {
	.espt-block-bd-proof-stats .bdn11-c { padding: var(--bd-pad, 16px) 14px; }
	.espt-block-bd-proof-stats.is-design-minimal .bdn11-c { padding: 10px 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-proof-stats .bdn11-c,
	.espt-block-bd-proof-stats .bdn11-n,
	.espt-block-bd-proof-stats .bdn11-ic,
	.espt-block-bd-proof-stats .bdn11 { transition: none; }
	.espt-block-bd-proof-stats.is-hover-pop .bdn11-c:hover .bdn11-n,
	.espt-block-bd-proof-stats.is-hover-pop .bdn11-c:hover .bdn11-ic { transform: none; }
}