/* =========================================================
   Oddino Grid — grilla con celdas imagen/video + overlay
   (titulo + boton). 4 layouts, alto svh opcional, mobile apila.
   ========================================================= */
.oddino-grid {
	display: grid;
	gap: 10px;
	width: 100%;
}

/* Celdas (hijos directos) */
.oddino-grid > * {
	position: relative;
	overflow: hidden;
	min-height: 0;
	min-width: 0;
}

/* Fondo imagen/video */
.oddino-grid-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	z-index: 0;
}

/* Elementor trae `.elementor img { height: auto }`. Su especificidad (0,1,1)
   le gana a `.oddino-grid-media` (0,1,0), asi que la imagen se dibujaba con su
   ALTO NATURAL en vez de llenar la celda: en el layout "1 grande + 2 chicas"
   la imagen grande medía 715px dentro de una celda de 900px y quedaba una
   franja vacia abajo (y object-fit:cover no ayudaba, porque el elemento ya no
   tenia el alto de la celda). Repetimos la regla calificada con el contenedor
   para llegar a (0,2,0) y ganar la cascada sin recurrir a !important. */
.oddino-grid .oddino-grid-media {
	width: 100%;
	height: 100%;
}

/* Overlay con titulo + boton */
.oddino-grid-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;   /* posicion vertical (controlable) */
	align-items: flex-start;     /* posicion horizontal (controlable) */
	gap: 16px;
	padding: 30px;
	pointer-events: none;        /* solo el boton es clickable */
}
.oddino-grid-title {
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 5vw, 64px);
	line-height: 1.05;
}
.oddino-grid-title2 {
	margin: 0;
	color: #fff;
	font-size: clamp(15px, 2vw, 20px);
	line-height: 1.4;
}
/* Cada par titulo+boton va junto (titulo arriba, su boton debajo). */
.oddino-grid-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: inherit;
}
.oddino-grid-btn {
	pointer-events: auto;
	display: inline-block;
	background: #fff;
	color: #111;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 6px;
	font-weight: 600;
	line-height: 1;
}

/* ── Layouts ── */
.oddino-grid--full  { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.oddino-grid--split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

.oddino-grid--1l2r { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.oddino-grid--1l2r > *:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.oddino-grid--1l2r > *:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.oddino-grid--1l2r > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

.oddino-grid--2l1r { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.oddino-grid--2l1r > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.oddino-grid--2l1r > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.oddino-grid--2l1r > *:nth-child(3) { grid-area: 1 / 2 / 3 / 3; }

/* ── Animacion de entrada ──
   A PRUEBA DE FALLOS: el estado oculto (opacity:0 + transform) solo aplica
   cuando el JS agrega .oa-ready. Si el JS no corre, el contenido se ve igual
   (nunca queda invisible). grid-anim.js agrega is-in para revelar. */
.oddino-grid--anim.oa-ready .oa-anim {
	opacity: 0;
	transition: opacity var(--oa-dur, 600ms) ease, transform var(--oa-dur, 600ms) ease;
	transition-delay: var(--oa-delay, 0ms);
	will-change: opacity, transform;
}
.oddino-grid--anim-fade-up.oa-ready    .oa-anim { transform: translateY(40px); }
.oddino-grid--anim-fade-down.oa-ready   .oa-anim { transform: translateY(-40px); }
.oddino-grid--anim-fade-left.oa-ready   .oa-anim { transform: translateX(40px); }
.oddino-grid--anim-fade-right.oa-ready  .oa-anim { transform: translateX(-40px); }
.oddino-grid--anim-zoom.oa-ready        .oa-anim { transform: scale(0.92); }
.oddino-grid--anim.oa-ready.is-in .oa-anim {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.oddino-grid--anim .oa-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ── Alto completo de pantalla (para usar dentro del Fullpage Scroll) ── */
.oddino-grid--full-vh {
	height: 100vh !important;   /* fallback */
	height: 100svh !important;  /* iOS-safe */
}

/* ── Mobile: apilar a 1 columna MANTENIENDO la proporcion del layout ──
   La grilla conserva su alto (full-vh o el alto definido) y las filas
   respetan la jerarquia: la imagen grande pesa el doble que las chicas.
     1l2r -> 50% / 25% / 25%   (grande arriba)
     2l1r -> 25% / 25% / 50%   (grande abajo)
     split -> 50% / 50%
   ========================================================= */
@media (max-width: 767px) {
	.oddino-grid {
		grid-template-columns: 1fr !important;
		/* Red de seguridad: la grilla NUNCA supera el alto visible real
		   (svh = pantalla con la barra de Safari). Evita el corte de iOS
		   aunque el alto este seteado en 100vh (que en iOS mide de mas). */
		max-height: 100svh;
	}
	.oddino-grid > * {
		grid-column: auto !important;
		grid-row: auto !important;
	}
	.oddino-grid--full  { grid-template-rows: 1fr !important; }
	.oddino-grid--split { grid-template-rows: 1fr 1fr !important; }
	.oddino-grid--1l2r  { grid-template-rows: 2fr 1fr 1fr !important; }
	.oddino-grid--2l1r  { grid-template-rows: 1fr 1fr 2fr !important; }
}