/**
 * Eclipse Stats Strip widget.
 *
 * Divider lines are drawn with box-shadows on each cell and clipped by the
 * card, so they stay correct however many cells fit on a row.
 */

.ecl-stats {
	--ecl-stats-min: 420px;
	--ecl-stats-bg: var(--ecl-white, #fff);
	--ecl-stats-hover: var(--ecl-sand-hover, #fbf8f2);
	--ecl-stats-line: #ece6da;
	--ecl-stats-highlight: var(--ecl-navy, #0e1d2e);
	max-width: 1180px;
	margin: 0 auto;
	overflow: hidden;
	background: var(--ecl-stats-bg);
	box-shadow: var(--ecl-shadow-card, 0 8px 28px -12px rgba(10, 21, 33, 0.18));
}

.ecl-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ecl-stats-min)), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecl-stats__item {
	margin: 0;
	box-shadow: 1px 0 0 0 var(--ecl-stats-line), 0 1px 0 0 var(--ecl-stats-line);
}

.ecl-stats__cell {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
	height: 100%;
	padding: 40px 36px;
	background: var(--ecl-stats-bg);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.3s;
}

a.ecl-stats__cell:hover,
a.ecl-stats__cell:focus-visible {
	background: var(--ecl-stats-hover);
	color: inherit;
}

a.ecl-stats__cell:focus-visible {
	outline: 2px solid var(--ecl-gold-text, #86632a);
	outline-offset: -4px;
}

.ecl-stats__label {
	display: block;
	color: var(--ecl-text-warm, #6e685a);
	font-size: 0.6875rem;
	letter-spacing: 0.26em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ecl-stats__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.ecl-stats__value {
	color: var(--ecl-navy, #0e1d2e);
	font-size: 2.875rem;
	font-weight: 300;
	line-height: 1;
	white-space: nowrap;
}

.ecl-stats__unit {
	color: #6b7280;
	font-size: 1rem;
	line-height: 1.3;
	white-space: nowrap;
}

/* Highlighted (navy) cell: gold label, and the unit shown large in gold. */
.ecl-stats__item.is-highlight .ecl-stats__cell {
	background: var(--ecl-stats-highlight);
}

.is-highlight .ecl-stats__label {
	color: var(--ecl-gold, #c4964e);
}

.is-highlight .ecl-stats__value {
	color: var(--ecl-white, #fff);
}

.is-highlight .ecl-stats__unit {
	color: var(--ecl-gold, #c4964e);
	font-size: 2.875rem;
	font-weight: 300;
	line-height: 1;
}

.is-highlight a.ecl-stats__cell:hover,
.is-highlight a.ecl-stats__cell:focus-visible {
	background: var(--ecl-navy-hover, #1a2f47);
}