/**
 * AIB Process Flow - Estilos del frontend (BEM).
 *
 * Rejilla en FLUJO NORMAL: dos bandas (superior con 3 pasos, inferior con
 * bucle/Reemplazo/ramificación). Cada elemento reserva su espacio, por lo que
 * nunca se solapan aunque el texto crezca o la imagen no sea cuadrada (las
 * imágenes tienen alto fijo con object-fit: cover).
 *
 * Los conectores se dibujan relativos a cada figura (se auto-centran a la altura
 * de la imagen) o como un pequeño SVG local para la ramificación.
 *
 * @package AIB_Hover_Card
 */

.aib-flow {
	--aib-fl-col-gap: 40px;
	--aib-fl-row-gap: 40px;
	--aib-fl-img-h: 180px;
	--aib-fl-img-radius: 2px;
	--aib-fl-milk-col: 90px;
	--aib-fl-milk-y: 0px;
	--aib-fl-title-h: 54px;
	--aib-fl-arrow-color: #1c2a24;
	--aib-fl-arrow-th: 1.5px;
	--aib-fl-head: 6px;

	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.aib-flow *,
.aib-flow *::before,
.aib-flow *::after {
	box-sizing: border-box;
}

/* Bandas (rejilla de 3 columnas, en flujo normal → reservan espacio). */
.aib-flow__band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--aib-fl-milk-col) minmax(0, 1fr);
	column-gap: var(--aib-fl-col-gap);
}

.aib-flow__band--bottom {
	margin-top: var(--aib-fl-row-gap);
	align-items: start;
}

.aib-flow__col {
	min-width: 0;
}

/* Título superior. */
.aib-flow__title {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	text-align: center;
	color: #8a8a8a;
}

/* Figura + imagen (alto fijo, recorte). */
.aib-flow__figure {
	position: relative;
	margin: 0;
}

.aib-flow__figure img {
	display: block;
	width: 100%;
	height: var(--aib-fl-img-h);
	object-fit: cover;
	border-radius: var(--aib-fl-img-radius);
}

/* Modo "Proporción real": la imagen conserva su relación de aspecto. */
.aib-flow--fit-natural .aib-flow__figure img {
	height: auto;
	object-fit: fill;
}

/* Descripción. */
.aib-flow__text {
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.55;
	text-align: center;
	color: #3a3a3a;
}

/* ==========================================================================
   Flechas horizontales entre pasos (se auto-centran a la altura de la imagen).
   ========================================================================== */
.aib-flow__arrow--right {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	width: calc(var(--aib-fl-col-gap) + 2px);
	height: var(--aib-fl-arrow-th);
	background-color: var(--aib-fl-arrow-color);
	z-index: 2;
}

.aib-flow__arrow--right::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--aib-fl-head));
	top: 50%;
	transform: translateY(-50%);
	border-top: var(--aib-fl-head) solid transparent;
	border-bottom: var(--aib-fl-head) solid transparent;
	border-left: var(--aib-fl-head) solid var(--aib-fl-arrow-color);
}

/* Flecha larga: cruza el espacio reservado del nodo de ingreso hasta el paso 3. */
.aib-flow__arrow--long {
	width: calc(var(--aib-fl-col-gap) * 2 + var(--aib-fl-milk-col) + 2px);
}

/* Nodo de ingreso: vive en su propia columna (reserva espacio) y se coloca
   por encima de la flecha, a la altura del centro de la imagen. */
.aib-flow__col--milk {
	position: relative;
}

.aib-flow__milk {
	position: absolute;
	left: 50%;
	top: calc(var(--aib-fl-title-h) + var(--aib-fl-img-h) / 2);
	transform: translate(-50%, calc(-100% - 10px + var(--aib-fl-milk-y)));
	width: 100%;
	text-align: center;
	z-index: 3;
}

.aib-flow__label {
	margin: 6px 0 0;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #1c2a24;
}

/* ==========================================================================
   Banda inferior: conectores del Reemplazo.
   ========================================================================== */

/* Flecha de entrada al Reemplazo (viene desde la derecha, apunta a la izquierda). */
.aib-flow__dline {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	width: calc(var(--aib-fl-col-gap) + 40%);
	height: var(--aib-fl-arrow-th);
	background-color: var(--aib-fl-arrow-color);
	z-index: 2;
}

.aib-flow__dline::after {
	content: "";
	position: absolute;
	left: calc(-1 * var(--aib-fl-head));
	top: 50%;
	transform: translateY(-50%);
	border-top: var(--aib-fl-head) solid transparent;
	border-bottom: var(--aib-fl-head) solid transparent;
	border-right: var(--aib-fl-head) solid var(--aib-fl-arrow-color);
}

/* Bucle de retorno (sale a la izquierda del Reemplazo, sube y apunta hacia arriba). */
.aib-flow__loop {
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	width: calc(var(--aib-fl-col-gap) + 55%);
	height: var(--aib-fl-arrow-th);
	background-color: var(--aib-fl-arrow-color);
	z-index: 2;
}

/* Tramo vertical del bucle (en el extremo izquierdo, sube). */
.aib-flow__loop::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--aib-fl-arrow-th);
	height: calc(var(--aib-fl-img-h) / 2 + 40px);
	background-color: var(--aib-fl-arrow-color);
}

/* Punta hacia arriba del bucle. */
.aib-flow__loop::after {
	content: "";
	position: absolute;
	left: calc(var(--aib-fl-arrow-th) / 2);
	top: calc(-1 * (var(--aib-fl-img-h) / 2 + 40px) - var(--aib-fl-head) + var(--aib-fl-arrow-th));
	transform: translateX(-50%);
	border-left: var(--aib-fl-head) solid transparent;
	border-right: var(--aib-fl-head) solid transparent;
	border-bottom: var(--aib-fl-head) solid var(--aib-fl-arrow-color);
}

/* ==========================================================================
   Ramificación (bracket SVG local) + EL EDÉN + productor.
   ========================================================================== */
.aib-flow__bracket {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.aib-flow__line {
	fill: none;
	stroke: var(--aib-fl-arrow-color);
	stroke-width: 1.5;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.aib-flow__square {
	fill: none;
	stroke: var(--aib-fl-arrow-color);
	stroke-width: 1.5;
}

.aib-flow__branch-nodes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
}

.aib-flow__eden,
.aib-flow__producer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
}

.aib-flow__eden-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.aib-flow__eden-text {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.05;
	text-align: center;
	color: #1c2a24;
}

/* Iconos de nodos. */
.aib-flow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #1c2a24;
}

.aib-flow__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aib-flow__icon--milk {
	font-size: 34px;
}

.aib-flow__icon--producer {
	font-size: 44px;
}

/* ==========================================================================
   Móvil: se apila todo en una columna y se ocultan los conectores.
   ========================================================================== */
@media (max-width: 767px) {
	.aib-flow {
		max-width: 340px;
	}

	.aib-flow__band {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.aib-flow__band--bottom {
		margin-top: 28px;
	}

	.aib-flow__col--left {
		display: none;
	}

	.aib-flow__title {
		min-height: 0 !important;
	}

	.aib-flow__arrow--right,
	.aib-flow__dline,
	.aib-flow__loop {
		display: none;
	}

	.aib-flow__col--milkspacer {
		display: none;
	}

	.aib-flow__milk {
		position: static;
		transform: none;
		top: auto;
		width: 100%;
	}

	.aib-flow__branch-nodes {
		justify-content: center;
		gap: 32px;
		margin-top: 12px;
	}
}