/* =========================================================
 * AdPro Site Tools — Market Statistics tiles
 * Used by the Market Statistics widget, [ppar_market_stats],
 * and the Dashboard box. Colors are variables so the widget's
 * Style tab can change them.
 * ========================================================= */

.adpro-ms {
	--adpro-ms-cols: 4;
	--adpro-ms-gap: 16px;
	--adpro-ms-radius: 4px;
	--adpro-ms-tile-bg: #152131;
	--adpro-ms-tile-line: #7287A3;
	--adpro-ms-value: #ffffff;
	--adpro-ms-label: #9AB3D4;
	--adpro-ms-caption: #152131;

	width: 100%;
	container-type: inline-size;
}

.adpro-ms .adpro-ms__tiles {
	display: grid;
	grid-template-columns: repeat(var(--adpro-ms-cols), minmax(0, 1fr));
	gap: var(--adpro-ms-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.adpro-ms .adpro-ms__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 24px 16px;
	background: var(--adpro-ms-tile-bg);
	border: 1px solid var(--adpro-ms-tile-line);
	border-radius: var(--adpro-ms-radius);
	text-align: center;
}

.adpro-ms .adpro-ms__value {
	color: var(--adpro-ms-value);
	font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.adpro-ms .adpro-ms__label {
	color: var(--adpro-ms-label);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.165em;
	line-height: 1.4;
	text-transform: uppercase;
}

.adpro-ms .adpro-ms__note {
	color: var(--adpro-ms-label);
	font-size: 12px;
	line-height: 1.4;
}

.adpro-ms .adpro-ms__caption {
	margin: 16px 0 0;
	color: var(--adpro-ms-caption);
	font-size: max(14px, 0.8125rem);
	line-height: 1.5;
	text-align: center;
}

.adpro-ms__empty {
	padding: 16px;
	border: 1px dashed #7287A3;
	text-align: center;
}

.adpro-ms .adpro-ms__foot {
	margin: 8px 0 0;
	color: var(--adpro-ms-caption);
	font-size: max(12px, 0.75rem);
	line-height: 1.5;
	text-align: center;
	opacity: 0.85;
}

/* Defaults for places without the widget's own settings (shortcode, dashboard). */
@media (max-width: 1024px) {
	.adpro-ms {
		--adpro-ms-cols: 2;
	}
}

@media (max-width: 767px) {
	.adpro-ms .adpro-ms__tile {
		padding: 16px 8px;
	}
}

/* A narrow column (e.g. the half-width panel on the home page) cannot hold four big numbers across: two by two. */
@container (max-width: 699px) {
	.adpro-ms .adpro-ms__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Dashboard box: compact. */
.adpro-ms--dash {
	--adpro-ms-cols: 2;
	--adpro-ms-gap: 8px;
}

.adpro-ms--dash .adpro-ms__tile {
	padding: 8px;
}

.adpro-ms--dash .adpro-ms__value {
	font-size: 1.5rem;
}

.adpro-ms__stale {
	color: #8a4b00;
	font-weight: 600;
}

/* Admin page preview: never wider than the page. */
.adpro-ms--admin {
	--adpro-ms-cols: 3;
	max-width: 760px;
}

/* The real number sits in the page for screen readers; the animated one is for the eye. */
.adpro-ms .adpro-ms__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.adpro-ms .adpro-ms__num {
	font-variant-numeric: tabular-nums;
}