/* ==========================================================================
   Million Dots — Stats strip
   A white card that rides up over the bottom edge of the hero, with an accent
   lane along its top. Re-flows to 3-up then 2-up on smaller screens.
   ========================================================================== */

.mdc-stats-section {
	padding-top: 0;
	padding-bottom: var(--wp--custom--section--padding);
	background-color: var(--wp--preset--color--base);
}

.mdc-stats {
	position: relative;
	z-index: var(--wp--custom--z-index--raised);
	margin-top: clamp(-4.5rem, -6vw, -3rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--lg);
	overflow: hidden;
}

.mdc-stats::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--wp--custom--lane--thickness);
	background-color: var(--wp--preset--color--accent);
}

.mdc-stat {
	padding: clamp(1.75rem, 3vw, 2.5rem) var(--wp--preset--spacing--50);
	border-right: 1px solid var(--wp--preset--color--border);
}

.mdc-stat:last-child {
	border-right: 0;
}

.mdc-stat__value {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: var(--wp--custom--weight--bold);
	letter-spacing: var(--wp--custom--tracking--display);
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.mdc-stat__value span {
	color: var(--wp--preset--color--accent);
}

.mdc-stat__label {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: 0.02em;
	color: var(--wp--custom--color--ink-subtle);
}

/* --- Tablet: 3 on top, 2 underneath --------------------------------------- */
@media (max-width: 960px) {
	.mdc-stats {
		grid-template-columns: repeat(6, 1fr);
	}

	.mdc-stat {
		grid-column: span 2;
	}

	.mdc-stat:nth-child(4),
	.mdc-stat:nth-child(5) {
		grid-column: span 3;
	}

	.mdc-stat:nth-child(3),
	.mdc-stat:nth-child(5) {
		border-right: 0;
	}

	.mdc-stat:nth-child(-n + 3) {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
}

/* --- Phone: 2 columns, last one full width -------------------------------- */
@media (max-width: 600px) {
	.mdc-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.mdc-stat,
	.mdc-stat:nth-child(4) {
		grid-column: span 1;
		border-right: 1px solid var(--wp--preset--color--border);
	}

	.mdc-stat:nth-child(2n) {
		border-right: 0;
	}

	.mdc-stat:nth-child(-n + 4) {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.mdc-stat:nth-child(5) {
		grid-column: span 2;
		border-right: 0;
		border-bottom: 0;
	}
}

/* --- In the editor there is no hero above to overlap ---------------------- */
.editor-styles-wrapper .mdc-stats {
	margin-top: 0;
}

.editor-styles-wrapper .mdc-stats-section {
	padding-top: var(--wp--custom--section--padding-tight);
}