/*
 * Banner 1 / Card Stat — observatorio-cero-theme
 *
 * Stats bar for member archive page and home page.
 * 3-column grid with icon and content (horizontal layout).
 * Uses only CSS custom properties from theme.json / color-modes.css.
 *
 * Note: Used by template part (parts/section-stats.html) and block patterns
 * (observatorio-cero/card-stat, observatorio-cero/section-stats).
 * CSS targets WP blocks directly (no raw HTML wrappers).
 */

.oc-banner-1 {
	background-color: var(--wp--preset--color--surface-container-low);
	border-top: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	border-bottom: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.oc-banner-1__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.oc-banner-1__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Ensure columns inside stat takes full width and clean resets with permanent row layout centered */
.oc-banner-1__stat {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--border-radius--default);
	border: var(--wp--custom--ui--border-width--thin) solid transparent;
	background: transparent;
	transition:
		background-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		border-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		box-shadow var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.oc-banner-1__stat > .wp-block-columns {
	width: auto !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--wp--preset--spacing--30) !important;
}

.oc-banner-1__stat .wp-block-column {
	padding: 0;
}

.oc-banner-1__stat .wp-block-column:first-child {
	flex: 0 0 auto !important;
	max-width: 56px !important;
	min-width: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.oc-banner-1__stat .wp-block-column:last-child {
	flex: 0 1 auto !important;
	min-width: max-content !important;
	text-align: left !important;
}

@media (max-width: 767px) {
	.oc-banner-1__stat {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}

	.oc-banner-1__stat > .wp-block-columns {
		width: 260px !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		justify-content: flex-start !important;
	}

	.oc-banner-1__stat .wp-block-column:first-child {
		flex: 0 0 44px !important;
		width: 44px !important;
	}

	.oc-banner-1__stat .wp-block-column:last-child {
		flex: 1 1 auto !important;
	}

	.oc-banner-1__stat .wp-block-outermost-icon-block {
		min-width: 44px;
		min-height: 44px;
	}

	.oc-banner-1__stat .wp-block-outermost-icon-block svg {
		width: 36px;
		height: 36px;
	}

	.oc-banner-1__stat h2,
	.oc-banner-1__stat h2.wp-block-heading {
		font-size: var(--wp--preset--font-size--headline-md);
		line-height: 1.1;
		margin-bottom: 2px;
	}

	.oc-banner-1__stat h3,
	.oc-banner-1__stat h3.wp-block-heading {
		font-size: var(--wp--preset--font-size--body-md);
		line-height: 1.2;
		margin-bottom: 2px;
	}

	.oc-banner-1__stat h4,
	.oc-banner-1__stat h4.wp-block-heading {
		font-size: var(--wp--preset--font-size--body-sm);
	}
}

/* Hover effect: same as card-enriquecida-2 */
.oc-banner-1__stat:hover {
	background: var(--wp--preset--color--surface-container);
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--elevated);
}

.oc-banner-1__stat:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

/* Icon block inside stat card: fixed width, flex shrink */
.oc-banner-1__stat .wp-block-outermost-icon-block {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--preset--spacing--70);
	min-height: var(--wp--preset--spacing--70);
}

.oc-banner-1__stat .wp-block-outermost-icon-block .icon-container {
	margin: 0 auto;
}

.oc-banner-1__stat .wp-block-outermost-icon-block svg {
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	fill: currentColor;
	color: var(--wp--preset--color--primary);
	transition: transform var(--wp--custom--ui--interaction--medium);
}

.oc-banner-1__stat:hover .wp-block-outermost-icon-block svg {
	transform: scale(var(--wp--custom--ui--scale--tag-cloud));
}

/* Headings and typography inside stat card */
.oc-banner-1__stat h2,
.oc-banner-1__stat h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--headline-lg);
	font-weight: var(--wp--custom--typography--font-weight--bold);
	line-height: var(--wp--custom--typography--line-height--display-md);
	color: var(--wp--preset--color--on-surface);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--10);
	text-align: left;
}

.oc-banner-1__stat h3,
.oc-banner-1__stat h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: var(--wp--custom--typography--font-weight--semibold);
	line-height: var(--wp--custom--typography--line-height--headline-lg);
	color: var(--wp--preset--color--on-surface);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--10);
	text-align: left;
}

.oc-banner-1__stat h4,
.oc-banner-1__stat h4.wp-block-heading,
.oc-banner-1__stat p,
.oc-banner-1__stat .wp-block-paragraph {
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: var(--wp--custom--typography--font-weight--medium);
		line-height: var(--wp--custom--typography--line-height--ui);
	color: var(--wp--preset--color--on-surface-variant);
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {
	.oc-banner-1__stat {
		transition: none;
	}

	.oc-banner-1__stat:hover .wp-block-outermost-icon-block svg {
		transform: none;
	}
}