/**
 * 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 Title (h2) - Styled globally, no custom styles needed */
.statistics-row-header h2 {
	margin-bottom: var(--space-md);
}

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

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

	/* Tighter gap for compact statistics display (matching reference design) */
	gap: var(--space-xl);

	/* Center items horizontally, stretch items to equal height */
	justify-content: center;
}

/* Ensure equal height items - higher specificity to override .row-align-start */
.statistics-row-block .statistics-grid {
	align-items: stretch;
}

/* Individual Statistic Item */
.statistics-grid .statistic-item {
	/* Fixed width approximately 33.33% (1/3) minus gap */
	flex: 0 0 calc(33.33% - var(--space-xl));
	max-width: calc(33.33% - var(--space-xl));

	/* 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 */
.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); */
}

section.has-text-color .statistics-grid .statistic-text {
    color: inherit;
}

/* Statistic Text */
.statistics-grid .statistic-text {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-secondary);
	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) */
}

section.has-text-color .statistics-grid .statistic-text,
section.has-text-color .statistics-grid .statistic-metric {
    color: inherit;
}

/* 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);
	color: var(--color-text-secondary);
	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;
}

/* Responsive Breakpoints */

/* Tablet: Increase item width to 33.33% (1/3) */
@media (width <= 991px) {
	.statistics-grid .statistic-item {
		flex: 0 0 calc(33.33% - var(--space-xl));
		max-width: calc(33.33% - var(--space-xl));
	}
}

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

	.statistics-grid .statistic-item {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.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: Wider columns to prevent aggressive wrapping */
.editor-styles-wrapper .statistics-grid .statistic-item,
.block-editor-block-preview__container .statistics-grid .statistic-item {
	flex: 0 0 calc(33.33% - var(--space-xl));
	max-width: calc(33.33% - var(--space-xl));
}

/* ================================
   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 55%;
	max-width: 55%;
	margin-bottom: 0;
	text-align: left;
	padding-right: var(--space-2xl);
	position: relative;
}

/* Vertical divider line */
.statistics-row-block--side-by-side .statistics-row-header::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 80%;
	width: 2px;
	background-color: var(--color-border-light);
}

.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;
	border: none;
	padding: 0;
}

/* 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::after {
		display: none;
	}

	.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%;
	}
}

/* ================================
   Reversed Layout (Statistics Left, Header Right)
   ================================ */

.statistics-row-block--side-by-side.statistics-row-block--reversed .statistics-row-content {
	flex-direction: row-reverse;
}

/* Swap the divider to left side of header instead of right */
.statistics-row-block--side-by-side.statistics-row-block--reversed .statistics-row-header::after {
	right: auto;
	left: 0;
}

/* Adjust padding: remove right padding, add left padding */
.statistics-row-block--side-by-side.statistics-row-block--reversed .statistics-row-header {
	padding-right: 0;
	padding-left: var(--space-2xl);
}

/* Reversed: Responsive - Tablet (revert to centered layout) */
@media (width <= 991px) {
	.statistics-row-block--side-by-side.statistics-row-block--reversed .statistics-row-header {
		padding-left: 0;
	}
}