/* EB Statistics — front-end styles.
   Two layouts share the same markup:
   .eb-stats--card : boxed card, centered header, multi-column grid (sample 1)
   .eb-stats--list : full-width rows, label left / divider / value right (sample 2) */

.eb-stats {
	--eb-row-gap: 10px;
}

/* ---------- Header ---------- */
.eb-stats__header {
	font-size: clamp(24px, 4vw, 40px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.eb-stats__header-line {
	height: 1px;
	background: currentColor;
	margin: 14px 0 22px;
}

/* ---------- Rows (shared) ---------- */
.eb-stats__row {
	display: flex;
	align-items: baseline;
	padding: calc(var(--eb-row-gap) / 2) 0;
}

.eb-stats__label {
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 17px;
}

.eb-stats__value {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 17px;
}

/* ---------- Card layout (sample 1) ---------- */
.eb-stats--card .eb-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 0;
	row-gap: 0;
	/* Fill down each column first (like the sample: bio stats left, record right) */
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--eb-rows, 5), auto);
}

/* Each grid column is 50% of the card, so a 60/40 split inside it
   produces overall column widths of 30% / 20% / 30% / 20%. */
.eb-stats--card .eb-stats__label {
	flex: 0 0 var(--eb-label-w, 60%);
}

.eb-stats--card .eb-stats__value {
	flex: 0 1 var(--eb-value-w, 40%);
	min-width: 0;
}

/* ---------- List layout (sample 2) ---------- */
.eb-stats--list .eb-stats__grid {
	display: flex;
	flex-direction: column;
}

.eb-stats--list .eb-stats__row {
	justify-content: space-between;
	gap: 16px;
	padding: calc(var(--eb-row-gap) / 2 + 6px) 0;
}

.eb-stats--list .eb-stats__row:last-child {
	border-bottom: none !important;
}

.eb-stats--list .eb-stats__value {
	text-align: right;
}

/* Divider variants */
.eb-stats__divider {
	flex: 1;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.1em;
	overflow: hidden;
	white-space: nowrap;
}

.eb-stats__divider--line {
	border-bottom: 2px dashed currentColor;
	align-self: center;
	height: 0;
	margin: 0 8px;
}

.eb-stats__divider--dotted {
	border-bottom: 2px dotted currentColor;
	align-self: center;
	height: 0;
	margin: 0 8px;
}

/* ---------- Responsive ---------- */
/* The column count itself is controlled per-device from the Elementor
   panel (Layout -> Columns). These are safety fallbacks. */
@media (max-width: 767px) {
	.eb-stats--card .eb-stats__grid {
		grid-auto-flow: row;          /* stack in source order on phones */
		grid-template-rows: none;
	}

	.eb-stats__label,
	.eb-stats__value {
		font-size: 15px;
	}

	.eb-stats--list .eb-stats__divider--dashes {
		display: none;                /* dashes get cramped on small screens */
	}
}