/**
 * Statistics Row Block Styles
 * These styles are loaded conditionally when the Statistics Row block is used
 */

/* Statistics Row Block Container */
.statistics-row-container {
	text-align: center;
}

/* Section Header Wrapper */
.statistics-row-header {
	margin-bottom: var(--space-2xl);
}

/* Section Subtitle */
.statistics-subtitle {
	font-size: var(--font-size-lead);
}

/* Statistics Grid */
.statistics-grid {
	/* Override grid system to use flexbox for proper distribution */
	display: flex !important;
	flex-wrap: wrap;

	/* Use gap for consistent spacing between items */
	gap: var(--row-gap);

	/* Stretch items to equal height, center for graceful wrapping */
	align-items: stretch;
	justify-content: center;
}

/* Individual Statistic Item */
.statistics-grid .statistic-item {
	/* 3 equal columns: ~31% width allows room for 2 gaps + some buffer */
	flex: 1 1 30%;
	max-width: 32%;
	min-width: 280px;

	/* flex-col utility class provides: display: flex; flex-direction: column */

	/* flex-center utility class provides: align-items: center; justify-content: center */
	gap: var(--space-sm);
	text-align: center;

	/* Border styling applied globally (previously only on Case Study posts) */
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-md);
}

/* Statistic Metric (h3) - Styled globally via theme.json */

/* Optional per-statistic icon badge (circular tint of the metric color) */
.statistics-grid .statistic-icon {
	width: 33px;
	height: 33px;
	padding: 6px;
	border-radius: var(--radius-full);
	background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.statistics-grid .statistic-icon .statistic-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.statistics-grid .statistic-metric {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	text-align: center;
	width: 100%;
	margin-bottom: 0 !important;
}

/* Stacked layout: Add min-height for consistent card heights */
.statistics-row-block:not(.statistics-row-block--side-by-side) .statistics-grid .statistic-metric {
	min-height: 2.5em; /* Accommodate at least 2 rows of text */
	padding-top: var(--space-lg);
}

/* Statistic Text */
.statistics-grid .statistic-text {
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
}

/* Stacked layout: Add min-height for consistent card heights */
.statistics-row-block:not(.statistics-row-block--side-by-side) .statistics-grid .statistic-text {
	min-height: 4.5em; /* Accommodate at least 3 rows of text (1.5em line-height × 3) */
}

/* Card contents should NOT inherit block text color - maintain their own colors */
section.has-text-color .statistics-grid .statistic-text {
	color: var(--color-text);
}

/* ==========================================================================
   Card Background Text Adaptation
   Dark bg styles handled globally by theme dark-bg-adaptation.css
   ========================================================================== */

/* Placeholder Message (Editor Only) */
.placeholder-message {
	color: var(--color-text-muted);
	font-style: italic;
	text-align: center;
	padding: var(--space-xl);
}

/* Disclaimer Text */
.statistics-disclaimer {
	padding-top: var(--space-md);
	font-size: var(--font-size-small);
	opacity: 0.8;
	text-align: center;
	line-height: var(--line-height-body);
}

.statistics-disclaimer p {
	margin: 0;
}

/* Inherit text color when set via Gutenberg sidebar */
section.has-text-color .statistics-disclaimer {
	color: inherit;
}

/* ==========================================================================
   Max Columns Per Row Variants
   Default (no attribute or data-max-columns="3") = 3 cols via base CSS.
   ========================================================================== */

@media (width > 991px) {
	.statistics-grid[data-max-columns="2"] .statistic-item {
		flex: 1 1 47%;
		max-width: 49%;
		min-width: 280px;
	}

	.statistics-grid[data-max-columns="4"] .statistic-item {
		flex: 1 1 22%;
		max-width: 24%;
		min-width: 220px;
	}

	.statistics-grid[data-max-columns="5"] .statistic-item {
		flex: 1 1 18%;
		max-width: 20%;
		min-width: 180px;
	}

	.statistics-grid[data-max-columns="6"] .statistic-item {
		flex: 1 1 13%;
		max-width: 15%;
		min-width: 160px;
	}
}

/* Responsive Breakpoints */

/* Tablet: respect column count — 4+ cols drop to 2, 3 stays 3, 2 stays 2 */
@media (width <= 991px) {
	/* Default (3 col) — stays 3 col on tablet */
	.statistics-grid .statistic-item {
		flex: 1 1 30%;
		max-width: 32%;
		min-width: 250px;
	}

	/* 2 col — stays 2 col on tablet */
	.statistics-grid[data-max-columns="2"] .statistic-item {
		flex: 1 1 47%;
		max-width: 49%;
		min-width: 220px;
	}

	/* 3 col — stays 3 col on tablet */
	.statistics-grid[data-max-columns="3"] .statistic-item {
		flex: 1 1 30%;
		max-width: 32%;
		min-width: 250px;
	}

	/* 4, 5, 6 col — drop to 2 col on tablet */
	.statistics-grid[data-max-columns="4"] .statistic-item,
	.statistics-grid[data-max-columns="5"] .statistic-item,
	.statistics-grid[data-max-columns="6"] .statistic-item {
		flex: 1 1 47%;
		max-width: 49%;
		min-width: 200px;
	}
}

/* Mobile: Full width items */
@media (width <= 640px) {
	.statistics-grid {
		gap: var(--space-lg);
	}

	.statistics-grid .statistic-item,
	.statistics-grid[data-max-columns="2"] .statistic-item,
	.statistics-grid[data-max-columns="3"] .statistic-item,
	.statistics-grid[data-max-columns="4"] .statistic-item,
	.statistics-grid[data-max-columns="5"] .statistic-item,
	.statistics-grid[data-max-columns="6"] .statistic-item {
		flex: 0 0 100%;
		max-width: 100%;
		min-width: 0;
	}

	.statistics-subtitle {
		margin-bottom: var(--space-xl);
	}
}

/* Editor-only styles - Override animation opacity for preview visibility */
.editor-styles-wrapper .statistic-metric,
.block-editor-block-preview__container .statistic-metric {
	opacity: 1 !important;
}

/* Editor Preview: Consistent column sizing (default 3 columns) */
.editor-styles-wrapper .statistics-grid .statistic-item,
.block-editor-block-preview__container .statistics-grid .statistic-item {
	flex: 1 1 30%;
	max-width: 32%;
	min-width: 200px;
}

/* Editor Preview: Max columns variants */
.editor-styles-wrapper .statistics-grid[data-max-columns="2"] .statistic-item,
.block-editor-block-preview__container .statistics-grid[data-max-columns="2"] .statistic-item {
	flex: 1 1 47%;
	max-width: 49%;
	min-width: 200px;
}

.editor-styles-wrapper .statistics-grid[data-max-columns="4"] .statistic-item,
.block-editor-block-preview__container .statistics-grid[data-max-columns="4"] .statistic-item {
	flex: 1 1 22%;
	max-width: 24%;
	min-width: 160px;
}

.editor-styles-wrapper .statistics-grid[data-max-columns="5"] .statistic-item,
.block-editor-block-preview__container .statistics-grid[data-max-columns="5"] .statistic-item {
	flex: 1 1 18%;
	max-width: 20%;
	min-width: 140px;
}

.editor-styles-wrapper .statistics-grid[data-max-columns="6"] .statistic-item,
.block-editor-block-preview__container .statistics-grid[data-max-columns="6"] .statistic-item {
	flex: 1 1 13%;
	max-width: 15%;
	min-width: 120px;
}

/* ================================
   Side-by-Side Layout Style
   Header on left, statistics on right
   ================================ */

.statistics-row-block--side-by-side .statistics-row-container {
	text-align: left;
}

.statistics-row-block--side-by-side .statistics-row-content {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xl);
}

/* Header section - left side with vertical divider */
.statistics-row-block--side-by-side .statistics-row-header {
	flex: 0 0 30%;
	max-width: 30%;
	margin-bottom: 0;
	text-align: left;
	padding-right: var(--space-sm);
	position: relative;
}

.statistics-row-block--side-by-side .statistics-row-header h2 {
	text-align: left;
}

.statistics-row-block--side-by-side .statistics-subtitle {
	text-align: left;
}

/* Statistics column - right side wrapper (contains grid + disclaimer) */
.statistics-row-block--side-by-side .statistics-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* Statistics grid - right side */
.statistics-row-block--side-by-side .statistics-grid {
	justify-content: flex-start;
	gap: var(--space-lg);
}

/* Side-by-side: Statistics items use equal width within their container */
.statistics-row-block--side-by-side .statistics-grid .statistic-item {
	flex: 1 1 0;
	max-width: none;
	min-width: 0; /* Override base min-width to allow flexible sizing in narrower container */
	border: none;
}

/* Side-by-side: Responsive - Tablet */
@media (width <= 991px) {
	.statistics-row-block--side-by-side .statistics-row-content {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.statistics-row-block--side-by-side .statistics-row-header {
		flex: 0 0 100%;
		max-width: 100%;
		text-align: center;
		padding-right: 0;
	}

	.statistics-row-block--side-by-side .statistics-row-header h2,
	.statistics-row-block--side-by-side .statistics-subtitle {
		text-align: center;
	}

	.statistics-row-block--side-by-side .statistics-row-container .statistics-row-content {
		align-items: center;
	}

	.statistics-row-block--side-by-side .statistics-disclaimer {
		text-align: center;
	}
}

/* Side-by-side: Responsive - Mobile */
@media (width <= 640px) {
	.statistics-row-block--side-by-side .statistics-grid .statistic-item {
		flex: 0 0 100%;
		max-width: 100%;
	}
}