/**
 * Counter Animation — dxp-theme/counter-animation
 * Layout defaults; colors/spacing often come from block Styles (supports) + block attributes.
 */
.wp-block-dxp-theme-counter-animation.counter-block,
.counter-block {
	box-sizing: border-box;
	text-align: center;
}

.wp-block-dxp-theme-counter-animation .counter-value,
.counter-block .counter-value {
	flex-wrap: wrap;
	gap: 0.15em;
}

.wp-block-dxp-theme-counter-animation .counter-title,
.counter-block .counter-title {
	margin-top: 0;
	margin-bottom: 0;
}

/* Optional trailing divider (horizontal row of counters) */
.wp-block-dxp-theme-counter-animation.counter-block--has-divider,
.counter-block.counter-block--has-divider {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-align: initial;
}

.wp-block-dxp-theme-counter-animation .counter-block__main,
.counter-block .counter-block__main {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 0 1 auto;
	min-width: 0;
}

.wp-block-dxp-theme-counter-animation .counter-divider,
.counter-block .counter-divider {
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.14);
	flex-shrink: 0;
}

/* Mobile: left-align value + title; divider stacks below (overrides sidebar alignments via !important) */
@media (max-width: 768px) {
	.wp-block-dxp-theme-counter-animation.counter-block,
	.counter-block {
		text-align: left;
	}

	.wp-block-dxp-theme-counter-animation .counter-value,
	.counter-block .counter-value {
		justify-content: flex-start !important;
	}

	.wp-block-dxp-theme-counter-animation .counter-title,
	.counter-block .counter-title {
		text-align: left !important;
	}

	.wp-block-dxp-theme-counter-animation.counter-block--has-divider,
	.counter-block.counter-block--has-divider {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.75rem;
	}

	.wp-block-dxp-theme-counter-animation .counter-divider,
	.counter-block .counter-divider {
		width: 36px;
		height: 1px;
	}
}