/* vexel/imagenes-texto-editorial-feature
 *
 * Magazine-style editorial layout: large dominant image on one side, narrower
 * text column with kicker / XL heading / body / icon-led feature list / dual
 * CTA on the other. Sits on a neutral background (no colour band). All
 * colours, typography and spacing flow from theme.json tokens; per-variant
 * tokens are emitted as CSS custom properties so a child theme can override
 * any one of them without touching the base.
 */

.vexel-imagenes-texto-editorial-feature {
	--ef-fg:           var(--wp--preset--color--text);
	--ef-fg-muted:     var(--wp--preset--color--text-muted);
	--ef-heading:      var(--wp--preset--color--navy);
	--ef-kicker:       var(--wp--preset--color--primary);
	--ef-bg:           transparent;
	--ef-icon-color:   var(--wp--preset--color--primary);
	--ef-icon-bg:      color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	--ef-frame-color:  var(--wp--preset--color--border);
	--ef-cta-bg:       var(--wp--preset--color--primary);
	--ef-cta-fg:       #fff;
	--ef-cta-bg-hover: var(--wp--preset--color--primary-hover);
	--ef-cta-secondary-fg:     var(--wp--preset--color--navy);
	--ef-cta-secondary-border: color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent);

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

/* Background variants */
.vexel-imagenes-texto-editorial-feature.is-bg-soft {
	--ef-bg: var(--wp--preset--color--bg-soft);
}

.vexel-imagenes-texto-editorial-feature.is-bg-muted {
	--ef-bg: var(--wp--preset--color--bg-muted);
}

/* Icon colour variants */
.vexel-imagenes-texto-editorial-feature.is-icon-color-primary {
	--ef-icon-color: var(--wp--preset--color--primary);
	--ef-icon-bg:    color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

.vexel-imagenes-texto-editorial-feature.is-icon-color-navy {
	--ef-icon-color: var(--wp--preset--color--navy);
	--ef-icon-bg:    color-mix(in srgb, var(--wp--preset--color--navy) 10%, transparent);
}

.vexel-imagenes-texto-editorial-feature.is-icon-color-accent {
	--ef-icon-color: var(--wp--preset--color--accent);
	--ef-icon-bg:    color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

.vexel-imagenes-texto-editorial-feature.is-icon-color-success {
	--ef-icon-color: var(--wp--preset--color--success);
	--ef-icon-bg:    color-mix(in srgb, var(--wp--preset--color--success) 14%, transparent);
}

.vexel-imagenes-texto-editorial-feature.is-icon-color-neutral {
	--ef-icon-color: var(--wp--preset--color--text-muted);
	--ef-icon-bg:    var(--wp--preset--color--bg-muted);
}

/* Inner grid */
.vexel-imagenes-texto-editorial-feature__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-editorial-feature.is-valign-top    .vexel-imagenes-texto-editorial-feature__inner { align-items: start; }
.vexel-imagenes-texto-editorial-feature.is-valign-middle .vexel-imagenes-texto-editorial-feature__inner { align-items: center; }
.vexel-imagenes-texto-editorial-feature.is-valign-bottom .vexel-imagenes-texto-editorial-feature__inner { align-items: end; }

/* Ratio variants — image-heavy is the editorial default */
@media (min-width: 1024px) {
	.vexel-imagenes-texto-editorial-feature.is-ratio-image-heavy .vexel-imagenes-texto-editorial-feature__inner {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}
	.vexel-imagenes-texto-editorial-feature.is-ratio-balanced .vexel-imagenes-texto-editorial-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.vexel-imagenes-texto-editorial-feature.is-ratio-text-heavy .vexel-imagenes-texto-editorial-feature__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}

/* Image position via CSS order — no markup duplication */
.vexel-imagenes-texto-editorial-feature.is-image-left  .vexel-imagenes-texto-editorial-feature__media   { order: 1; }
.vexel-imagenes-texto-editorial-feature.is-image-left  .vexel-imagenes-texto-editorial-feature__content { order: 2; }
.vexel-imagenes-texto-editorial-feature.is-image-right .vexel-imagenes-texto-editorial-feature__media   { order: 2; }
.vexel-imagenes-texto-editorial-feature.is-image-right .vexel-imagenes-texto-editorial-feature__content { order: 1; }

/* Media */
.vexel-imagenes-texto-editorial-feature__media {
	position: relative;
	width: 100%;
}

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

.vexel-imagenes-texto-editorial-feature.is-aspect-square    .vexel-imagenes-texto-editorial-feature__image { aspect-ratio: 1 / 1; }
.vexel-imagenes-texto-editorial-feature.is-aspect-portrait  .vexel-imagenes-texto-editorial-feature__image { aspect-ratio: 3 / 4; }
.vexel-imagenes-texto-editorial-feature.is-aspect-landscape .vexel-imagenes-texto-editorial-feature__image { aspect-ratio: 4 / 3; }
.vexel-imagenes-texto-editorial-feature.is-aspect-wide      .vexel-imagenes-texto-editorial-feature__image { aspect-ratio: 16 / 9; }

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

.vexel-imagenes-texto-editorial-feature.is-image-style-sharp .vexel-imagenes-texto-editorial-feature__image {
	border-radius: 0;
	box-shadow: none;
}

.vexel-imagenes-texto-editorial-feature.is-image-style-framed .vexel-imagenes-texto-editorial-feature__image {
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--ef-frame-color);
	box-shadow: var(--wp--custom--shadow--sm);
}

.vexel-imagenes-texto-editorial-feature__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: 320px;
}

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

.vexel-imagenes-texto-editorial-feature.has-no-image .vexel-imagenes-texto-editorial-feature__media { display: none; }

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

/* Content column */
.vexel-imagenes-texto-editorial-feature__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.vexel-imagenes-texto-editorial-feature__kicker {
	margin: 0;
	color: var(--ef-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-editorial-feature__heading {
	margin: 0;
	color: var(--ef-heading);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--4xl);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.vexel-imagenes-texto-editorial-feature__body {
	color: var(--ef-fg-muted);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}

.vexel-imagenes-texto-editorial-feature__body p {
	margin: 0 0 0.75em;
}

.vexel-imagenes-texto-editorial-feature__body p:last-child {
	margin-bottom: 0;
}

/* Feature list */
.vexel-imagenes-texto-editorial-feature__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.vexel-imagenes-texto-editorial-feature__feature {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.vexel-imagenes-texto-editorial-feature__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ef-icon-color);
	flex-shrink: 0;
}

.vexel-imagenes-texto-editorial-feature__feature-icon svg {
	width: 16px;
	height: 16px;
}

/* Filled — tinted rounded badge */
.vexel-imagenes-texto-editorial-feature.is-icon-filled .vexel-imagenes-texto-editorial-feature__feature-icon {
	width: 32px;
	height: 32px;
	background: var(--ef-icon-bg);
	border-radius: var(--wp--custom--radius--md);
}

/* Outlined — circular thin border */
.vexel-imagenes-texto-editorial-feature.is-icon-outlined .vexel-imagenes-texto-editorial-feature__feature-icon {
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--ef-icon-color);
	border-radius: 9999px;
}

/* Dot — small bullet */
.vexel-imagenes-texto-editorial-feature.is-icon-dot .vexel-imagenes-texto-editorial-feature__feature-icon {
	width: 16px;
	height: 16px;
	margin-top: 6px;
}

.vexel-imagenes-texto-editorial-feature.is-icon-dot .vexel-imagenes-texto-editorial-feature__feature-icon svg {
	width: 12px;
	height: 12px;
}

.vexel-imagenes-texto-editorial-feature__feature-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.vexel-imagenes-texto-editorial-feature__feature-title {
	color: var(--ef-heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.4;
}

.vexel-imagenes-texto-editorial-feature__feature-description {
	color: var(--ef-fg-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

/* Actions */
.vexel-imagenes-texto-editorial-feature__actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--20);
}

.vexel-imagenes-texto-editorial-feature__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, border-color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	line-height: 1;
}

.vexel-imagenes-texto-editorial-feature__cta--primary {
	background: var(--ef-cta-bg);
	color: var(--ef-cta-fg);
	border: 1px solid transparent;
}

.vexel-imagenes-texto-editorial-feature__cta--primary:hover,
.vexel-imagenes-texto-editorial-feature__cta--primary:focus-visible {
	background: var(--ef-cta-bg-hover);
	color: var(--ef-cta-fg);
}

.vexel-imagenes-texto-editorial-feature__cta--secondary {
	background: transparent;
	color: var(--ef-cta-secondary-fg);
	border: 1px solid var(--ef-cta-secondary-border);
}

.vexel-imagenes-texto-editorial-feature__cta--secondary:hover,
.vexel-imagenes-texto-editorial-feature__cta--secondary:focus-visible {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

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

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

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

	.vexel-imagenes-texto-editorial-feature__media,
	.vexel-imagenes-texto-editorial-feature__content {
		order: initial;
	}

	.vexel-imagenes-texto-editorial-feature.is-image-right .vexel-imagenes-texto-editorial-feature__media {
		order: 2;
	}

	.vexel-imagenes-texto-editorial-feature__heading {
		font-size: var(--wp--preset--font-size--3xl);
	}
}

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

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

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

	.vexel-imagenes-texto-editorial-feature__cta {
		width: 100%;
		justify-content: center;
	}
}