/* vexel/imagenes-texto-stat-band
 *
 * Image + editorial column with a 2-4 column grid of statistics. Designed for
 * "social proof" sections: kicker, heading, body and a row/grid of big numbers
 * with prefix/suffix decorators and a label underneath. Six background variants:
 * three neutral (default / soft / muted) keep the band inside the page
 * container, three coloured (navy / primary / dark) go full-bleed and invert
 * text. All colours, type and spacing flow from theme.json tokens; per-variant
 * CSS custom properties make a child theme override trivial.
 */

.vexel-imagenes-texto-stat-band {
	--sb-fg:           var(--wp--preset--color--text);
	--sb-fg-muted:     var(--wp--preset--color--text-muted);
	--sb-heading:      var(--wp--preset--color--navy);
	--sb-kicker:       var(--wp--preset--color--primary);
	--sb-bg:           transparent;
	--sb-stat-color:   var(--wp--preset--color--primary);
	--sb-stat-label:   var(--wp--preset--color--text-muted);
	--sb-divider:      var(--wp--preset--color--border);
	--sb-frame-color:  var(--wp--preset--color--border);
	--sb-cta-bg:       var(--wp--preset--color--primary);
	--sb-cta-fg:       #fff;
	--sb-cta-bg-hover: var(--wp--preset--color--primary-hover);

	background: var(--sb-bg);
	color: var(--sb-fg);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--40);
	position: relative;
}

/* ---- Background variants -------------------------------------------------- */

.vexel-imagenes-texto-stat-band.is-bg-soft {
	--sb-bg: var(--wp--preset--color--bg-soft);
}

.vexel-imagenes-texto-stat-band.is-bg-muted {
	--sb-bg: var(--wp--preset--color--bg-muted);
}

.vexel-imagenes-texto-stat-band.is-bg-navy {
	--sb-bg:           var(--wp--preset--color--navy);
	--sb-fg:           rgba(255, 255, 255, 0.88);
	--sb-fg-muted:     rgba(255, 255, 255, 0.7);
	--sb-heading:      #fff;
	--sb-kicker:       var(--wp--preset--color--accent);
	--sb-divider:      rgba(255, 255, 255, 0.16);
}

.vexel-imagenes-texto-stat-band.is-bg-primary {
	--sb-bg:           var(--wp--preset--color--primary);
	--sb-fg:           rgba(255, 255, 255, 0.92);
	--sb-fg-muted:     rgba(255, 255, 255, 0.78);
	--sb-heading:      #fff;
	--sb-kicker:       rgba(255, 255, 255, 0.7);
	--sb-divider:      rgba(255, 255, 255, 0.22);
	--sb-cta-bg:       #fff;
	--sb-cta-fg:       var(--wp--preset--color--primary);
	--sb-cta-bg-hover: rgba(255, 255, 255, 0.9);
}

.vexel-imagenes-texto-stat-band.is-bg-dark {
	--sb-bg:           #0A1628;
	--sb-fg:           rgba(255, 255, 255, 0.86);
	--sb-fg-muted:     rgba(255, 255, 255, 0.66);
	--sb-heading:      #fff;
	--sb-kicker:       var(--wp--preset--color--accent);
	--sb-divider:      rgba(255, 255, 255, 0.14);
}

/* Dark variants get a stat colour override so it stays visible on bg */
.vexel-imagenes-texto-stat-band.is-dark { --sb-stat-color: #fff; --sb-stat-label: rgba(255, 255, 255, 0.7); }

/* Stats colour variants (only meaningful on neutral backgrounds) */
.vexel-imagenes-texto-stat-band:not(.is-dark).is-stats-color-primary { --sb-stat-color: var(--wp--preset--color--primary); }
.vexel-imagenes-texto-stat-band:not(.is-dark).is-stats-color-navy    { --sb-stat-color: var(--wp--preset--color--navy); }
.vexel-imagenes-texto-stat-band:not(.is-dark).is-stats-color-accent  { --sb-stat-color: var(--wp--preset--color--accent); }
.vexel-imagenes-texto-stat-band:not(.is-dark).is-stats-color-success { --sb-stat-color: var(--wp--preset--color--success); }
.vexel-imagenes-texto-stat-band:not(.is-dark).is-stats-color-neutral { --sb-stat-color: var(--wp--preset--color--text); }

/* ---- Full-bleed band ------------------------------------------------------ */

.vexel-imagenes-texto-stat-band.is-full-bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--wp--preset--spacing--40), calc(50vw - var(--wp--style--global--wide-size, 1280px) / 2 + var(--wp--preset--spacing--40)));
}

/* ---- Inner grid ----------------------------------------------------------- */

.vexel-imagenes-texto-stat-band__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.vexel-imagenes-texto-stat-band.is-valign-top    .vexel-imagenes-texto-stat-band__inner { align-items: start; }
.vexel-imagenes-texto-stat-band.is-valign-middle .vexel-imagenes-texto-stat-band__inner { align-items: center; }
.vexel-imagenes-texto-stat-band.is-valign-bottom .vexel-imagenes-texto-stat-band__inner { align-items: end; }

@media (min-width: 1024px) {
	.vexel-imagenes-texto-stat-band.is-ratio-balanced .vexel-imagenes-texto-stat-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.vexel-imagenes-texto-stat-band.is-ratio-image-heavy .vexel-imagenes-texto-stat-band__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
	.vexel-imagenes-texto-stat-band.is-ratio-text-heavy .vexel-imagenes-texto-stat-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}

/* Image position via CSS order — no markup duplication */
.vexel-imagenes-texto-stat-band.is-image-left  .vexel-imagenes-texto-stat-band__media   { order: 1; }
.vexel-imagenes-texto-stat-band.is-image-left  .vexel-imagenes-texto-stat-band__content { order: 2; }
.vexel-imagenes-texto-stat-band.is-image-right .vexel-imagenes-texto-stat-band__media   { order: 2; }
.vexel-imagenes-texto-stat-band.is-image-right .vexel-imagenes-texto-stat-band__content { order: 1; }

/* ---- Media ---------------------------------------------------------------- */

.vexel-imagenes-texto-stat-band__media {
	position: relative;
	width: 100%;
}

.vexel-imagenes-texto-stat-band__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.vexel-imagenes-texto-stat-band.is-aspect-square    .vexel-imagenes-texto-stat-band__image { aspect-ratio: 1 / 1; }
.vexel-imagenes-texto-stat-band.is-aspect-portrait  .vexel-imagenes-texto-stat-band__image { aspect-ratio: 3 / 4; }
.vexel-imagenes-texto-stat-band.is-aspect-landscape .vexel-imagenes-texto-stat-band__image { aspect-ratio: 4 / 3; }
.vexel-imagenes-texto-stat-band.is-aspect-wide      .vexel-imagenes-texto-stat-band__image { aspect-ratio: 16 / 9; }

.vexel-imagenes-texto-stat-band.is-image-style-rounded .vexel-imagenes-texto-stat-band__image {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--md);
}

.vexel-imagenes-texto-stat-band.is-image-style-sharp .vexel-imagenes-texto-stat-band__image {
	border-radius: 0;
	box-shadow: none;
}

.vexel-imagenes-texto-stat-band.is-image-style-framed .vexel-imagenes-texto-stat-band__image {
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--sb-frame-color);
	box-shadow: var(--wp--custom--shadow--sm);
}

.vexel-imagenes-texto-stat-band__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--bg-muted);
	color: var(--wp--preset--color--text-muted);
	min-height: 280px;
}

.vexel-imagenes-texto-stat-band.is-dark .vexel-imagenes-texto-stat-band__image--placeholder {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.4);
}

.vexel-imagenes-texto-stat-band__image--placeholder svg {
	width: 64px;
	height: 48px;
	opacity: 0.6;
}

.vexel-imagenes-texto-stat-band.has-no-image .vexel-imagenes-texto-stat-band__media { display: none; }

@media (min-width: 1024px) {
	.vexel-imagenes-texto-stat-band.has-no-image .vexel-imagenes-texto-stat-band__inner {
		grid-template-columns: minmax(0, 1fr);
		max-width: 56rem;
	}
}

/* ---- Content column ------------------------------------------------------- */

.vexel-imagenes-texto-stat-band__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.vexel-imagenes-texto-stat-band__kicker {
	margin: 0;
	color: var(--sb-kicker);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.vexel-imagenes-texto-stat-band__heading {
	margin: 0;
	color: var(--sb-heading);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.vexel-imagenes-texto-stat-band__body {
	color: var(--sb-fg-muted);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}

.vexel-imagenes-texto-stat-band__body p { margin: 0 0 0.75em; }
.vexel-imagenes-texto-stat-band__body p:last-child { margin-bottom: 0; }

/* ---- Stats grid ----------------------------------------------------------- */

.vexel-imagenes-texto-stat-band__stats {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

/* Default: grid layout — 2 cols on tablet, up to 4 cols on desktop */
.vexel-imagenes-texto-stat-band.is-stats-layout-grid .vexel-imagenes-texto-stat-band__stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.vexel-imagenes-texto-stat-band.is-stats-layout-grid.is-stats-count-3 .vexel-imagenes-texto-stat-band__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.vexel-imagenes-texto-stat-band.is-stats-layout-grid.is-stats-count-4 .vexel-imagenes-texto-stat-band__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vexel-imagenes-texto-stat-band.is-stats-layout-grid.is-stats-count-2 .vexel-imagenes-texto-stat-band__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.vexel-imagenes-texto-stat-band.is-stats-layout-grid.is-stats-count-4 .vexel-imagenes-texto-stat-band__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Row layout: always horizontal on tablet+ */
.vexel-imagenes-texto-stat-band.is-stats-layout-row .vexel-imagenes-texto-stat-band__stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	.vexel-imagenes-texto-stat-band.is-stats-layout-row .vexel-imagenes-texto-stat-band__stats {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-columns: none;
	}
}

/* Split layout: same as row but each block padded with vertical divider */
.vexel-imagenes-texto-stat-band.is-stats-layout-split .vexel-imagenes-texto-stat-band__stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	.vexel-imagenes-texto-stat-band.is-stats-layout-split .vexel-imagenes-texto-stat-band__stats {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-columns: none;
		gap: 0;
	}
	.vexel-imagenes-texto-stat-band.is-stats-layout-split .vexel-imagenes-texto-stat-band__stat {
		padding-inline: var(--wp--preset--spacing--40);
	}
	.vexel-imagenes-texto-stat-band.is-stats-layout-split.has-stats-divider .vexel-imagenes-texto-stat-band__stat + .vexel-imagenes-texto-stat-band__stat {
		border-left: 1px solid var(--sb-divider);
	}
	.vexel-imagenes-texto-stat-band.is-stats-layout-split .vexel-imagenes-texto-stat-band__stat:first-child {
		padding-left: 0;
	}
	.vexel-imagenes-texto-stat-band.is-stats-layout-split .vexel-imagenes-texto-stat-band__stat:last-child {
		padding-right: 0;
	}
}

/* Divider between rows in grid mode */
.vexel-imagenes-texto-stat-band.is-stats-layout-grid.has-stats-divider .vexel-imagenes-texto-stat-band__stat {
	padding-block: var(--wp--preset--spacing--20);
}

.vexel-imagenes-texto-stat-band__stat {
	margin: 0;
	min-width: 0;
}

.vexel-imagenes-texto-stat-band__stat-value {
	display: flex;
	align-items: baseline;
	gap: 0.1em;
	color: var(--sb-stat-color);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
}

.vexel-imagenes-texto-stat-band__stat-prefix,
.vexel-imagenes-texto-stat-band__stat-suffix {
	font-size: 0.6em;
	font-weight: 600;
	color: var(--sb-stat-color);
	opacity: 0.85;
}

.vexel-imagenes-texto-stat-band__stat-number {
	font-variant-numeric: tabular-nums;
}

.vexel-imagenes-texto-stat-band__stat-label {
	margin: 0;
	color: var(--sb-stat-label);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.4;
}

.vexel-imagenes-texto-stat-band__stat-description {
	margin: 0.25rem 0 0;
	color: var(--sb-fg-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* ---- Actions -------------------------------------------------------------- */

.vexel-imagenes-texto-stat-band__actions {
	margin: 0;
	margin-top: var(--wp--preset--spacing--20);
}

.vexel-imagenes-texto-stat-band__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	line-height: 1;
	background: var(--sb-cta-bg);
	color: var(--sb-cta-fg);
	border: 1px solid transparent;
}

.vexel-imagenes-texto-stat-band__cta:hover,
.vexel-imagenes-texto-stat-band__cta:focus-visible {
	background: var(--sb-cta-bg-hover);
	color: var(--sb-cta-fg);
}

.vexel-imagenes-texto-stat-band__cta-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.vexel-imagenes-texto-stat-band__cta:hover .vexel-imagenes-texto-stat-band__cta-icon,
.vexel-imagenes-texto-stat-band__cta:focus-visible .vexel-imagenes-texto-stat-band__cta-icon {
	transform: translateX(3px);
}

/* ---- Responsive collapse -------------------------------------------------- */

@media (max-width: 1023px) {
	.vexel-imagenes-texto-stat-band__inner {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--wp--preset--spacing--50);
	}

	.vexel-imagenes-texto-stat-band__media,
	.vexel-imagenes-texto-stat-band__content {
		order: initial;
	}

	.vexel-imagenes-texto-stat-band.is-image-right .vexel-imagenes-texto-stat-band__media {
		order: 2;
	}

	.vexel-imagenes-texto-stat-band__heading {
		font-size: var(--wp--preset--font-size--2xl);
	}
}

@media (max-width: 600px) {
	.vexel-imagenes-texto-stat-band {
		padding-block: var(--wp--preset--spacing--60);
	}

	.vexel-imagenes-texto-stat-band__heading {
		font-size: var(--wp--preset--font-size--xl);
	}

	.vexel-imagenes-texto-stat-band__body {
		font-size: var(--wp--preset--font-size--md);
	}

	.vexel-imagenes-texto-stat-band__stat-value {
		font-size: clamp(1.75rem, 6vw, 2.5rem);
	}

	.vexel-imagenes-texto-stat-band__cta {
		width: 100%;
		justify-content: center;
	}
}