/* =========================================================
   Invitarte – Itinerario  |  itinerario.css
   Frontend:  .iti-item flex row  [izq] [ícono] [der]
   Editor:    .iti-layout CSS Grid
              – íconos: col 2, grid-row explícito (DOM primero)
              – contenedores: auto-placed → evitan col 2 → quedan en col 1 y col 3
   ========================================================= */

/* ── Estructura general ──────────────────────────────────── */
.invitarte-itinerario {
	position: relative;
	padding: 20px 0;
	--iti-icon-size: 60px; /* overridden by Elementor icon_size control */
}

/* ── Línea vertical central ──────────────────────────────── */
.iti-line {
	position: absolute;
	left: 50%;
	top: 30px;
	bottom: 30px;
	width: 2px;
	transform: translateX(-50%);
	background-color: rgba(200, 169, 110, 0.2);
	pointer-events: none;
	z-index: 0;
}

.iti-line-fill {
	position: absolute;
	top: 0;
	width: 100%;
	height: 0;
	background-color: #c8a96e;
}

/* ── Frontend: wrappers de container en el CSS Grid ─────────
 * .iti-slot es grid item con grid-column/row inline desde PHP.
 * El child container (.e-con) llena el slot.
 * ─────────────────────────────────────────────────────────── */
.iti-slot {
	min-height: 80px;
	z-index: 1;
}

.iti-slot > .e-con,
.iti-slot > .elementor-element {
	width: 100%;
	height: 100%;
}

.iti-slot-izq { text-align: right; }
.iti-slot-der { text-align: left; }

/* ── Ícono central ───────────────────────────────────────── */
.iti-icon-wrap {
	flex-shrink: 0;
	position: relative;
	z-index: 10;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #1a1a1a;
	border: 2px solid #c8a96e;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: background-color 0.5s ease, border-color 0.5s ease;
}

.iti-icon-wrap.is-active {
	background-color: #c8a96e;
	border-color: #ffffff;
}

.iti-icon-wrap i {
	font-size: 50%;
	line-height: 1;
	color: #c8a96e;
	transition: color 0.5s ease;
}

.iti-icon-wrap.is-active i { color: #ffffff; }

.iti-icon-wrap svg {
	width: 50%;
	height: 50%;
	fill: #c8a96e;
	stroke: #c8a96e;
	transition: fill 0.5s ease, stroke 0.5s ease;
}

.iti-icon-wrap.is-active svg { fill: #ffffff; stroke: #ffffff; }

/* ── Editor: CSS Grid ────────────────────────────────────── */
/*
 * Íconos (.iti-icon-node) van primero en el DOM con:
 *   grid-column: 2  (centro)
 *   grid-row: N     (explícito, inline style desde content_template)
 *
 * Los contenedores de Elementor son appended después (al final de .iti-layout).
 * Auto-placement los coloca secuencialmente, saltando col 2 (ocupada por íconos).
 * Resultado automático: Izq(col1) → Der(col3) → next row Izq(col1) → Der(col3) …
 */
.iti-layout {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	column-gap: 20px;
	row-gap: 40px;
	min-height: 80px;
}

/* Nodo ícono: col 2, fila determinada por inline style */
.iti-icon-node {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* Contenedores auto-placed en col 1 y col 3 — fill cell height */
.iti-layout > .e-con,
.iti-layout > .elementor-element {
	min-height: 80px;
}

/* ── Animación de entrada (solo frontend) ────────────────── */
.iti-animated .iti-slot {
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.iti-animated .iti-slot-izq { transform: translateX(-14px); }
.iti-animated .iti-slot-der { transform: translateX(14px); }

/* JS añade is-active directamente a cada .iti-slot — sin combinador hermano ~
 * para que cada ítem anime por separado (no todos a la vez). */
.iti-animated .iti-slot.is-active {
	opacity: 1;
	transform: translateX(0);
}

/* ── Móvil: 2 columnas [ícono | contenido] ──────────────── */
@media (max-width: 767px) {
	/* Línea: centrada sobre el ícono (col1 = icon-size ancho) */
	.iti-line {
		left: calc(var(--iti-icon-size, 60px) / 2);
		transform: translateX(-50%); /* centra los 2px de ancho sobre el punto */
	}

	/*
	 * Grid: col1 = ícono, col2 = contenido.
	 * Necesita !important para superar la mayor especificidad del control icon_size:
	 *   {{WRAPPER}} .iti-layout { grid-template-columns: 1fr Xpx 1fr; }  ← 0,2,0
	 * vs nuestro  .iti-layout { ... }  ← 0,1,0  (perdería sin !important)
	 */
	.iti-layout {
		grid-template-columns: var(--iti-icon-size, 60px) 1fr !important;
		column-gap: 16px !important;
		row-gap: 0 !important; /* espaciado vía margin en slots para control independiente */
	}

	/*
	 * Ícono: col1, span 2 filas, centrado entre der + izq.
	 * DOM interleaved [icon, der, izq, icon, der, izq …] + auto-placement da:
	 *   Row 1: icon1(span2) | der1
	 *   Row 2:      ↕       | izq1
	 *   Row 3: icon2(span2) | der2  …
	 */
	.iti-icon-node {
		grid-column: 1 !important;
		grid-row: span 2 !important;
		align-self: center;
		justify-self: center;
	}

	/* Editor: containers .e-con van a col2 (JS updateGridPositions controla grid-row) */
	.iti-layout > .e-con,
	.iti-layout > .elementor-element {
		grid-column: 2 !important;
	}

	/* Frontend slots: col2, auto-row, texto alineado a la izquierda */
	.iti-slot {
		grid-column: 2 !important;
		grid-row: auto !important;
		text-align: left !important;
	}

	/* Espaciado manejado por JS via grid-template-rows explícitas (4 filas/ítem).
	 * Fallback sin JS: margen mínimo para que el contenido sea visible. */
	.iti-slot-first { margin-bottom: 0; }
	.iti-slot-last  { margin-bottom: 0; }

	/* Animación móvil: desde abajo */
	.iti-animated .iti-slot-izq,
	.iti-animated .iti-slot-der {
		transform: translateY(10px);
	}

	.iti-animated .iti-slot.is-active {
		transform: translateY(0);
	}

	/* ── Ocultar slot individual en móvil (clase por ítem del repeater) ─── */
	.iti-slot-mob-hide { display: none !important; }

	/* ── Layout igual a escritorio en móvil ───────────────── */
	.iti-mob-desktop .iti-line {
		left: 50%;
		transform: translateX(-50%);
	}
	.iti-mob-desktop .iti-layout {
		grid-template-columns: 1fr var(--iti-icon-size, 60px) 1fr !important;
		column-gap: 0 !important;
		row-gap: var(--iti-item-spacing, 40px) !important;
	}
	/* Ícono: col 2 (JS aplica grid-row con !important) */
	.iti-mob-desktop .iti-icon-node {
		grid-column: 2 !important;
		grid-row: auto !important;
		align-self: center;
		justify-self: center;
	}
	/* Slots frontend: columna determinada por class (der=3, izq=1) */
	.iti-mob-desktop .iti-slot-der { grid-column: 3 !important; }
	.iti-mob-desktop .iti-slot-izq { grid-column: 1 !important; }
	.iti-mob-desktop .iti-slot     { grid-row: auto !important; text-align: inherit !important; }
	/* Containers editor: JS maneja la columna */
	.iti-mob-desktop .iti-layout > .e-con,
	.iti-mob-desktop .iti-layout > .elementor-element {
		grid-column: auto !important;
	}
	/* Animación: usar translateX (escritorio) en lugar de translateY */
	.iti-mob-desktop.iti-animated .iti-slot-izq { transform: translateX(-14px) !important; }
	.iti-mob-desktop.iti-animated .iti-slot-der { transform: translateX(14px) !important; }
	.iti-mob-desktop.iti-animated .iti-slot.is-active { transform: translateX(0) !important; }
}

/* ── Accesibilidad ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.iti-line-fill,
	.iti-icon-wrap,
	.iti-icon-wrap i,
	.iti-icon-wrap svg,
	.iti-animated .iti-slot {
		transition: none;
	}
}