/**
 * Billeb — Cuadrícula de Máquinas
 *
 * Todo lo configurable vive en variables o lo escribe Elementor vía `selectors`.
 * Aquí solo va la estructura y los efectos.
 */

.billeb-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
}

.billeb-grid__item {
	--billeb-offset: 0px;
	--billeb-title-gap: 16px;

	position: relative;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	transform: translateY(var(--billeb-offset));
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.billeb-grid__item:hover,
.billeb-grid__item:focus {
	text-decoration: none;
	color: inherit;
}

/* El foco por teclado tiene que verse: el cuadro entero es el enlace. */
a.billeb-grid__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* -- Imagen ---------------------------------------------------------------- */

.billeb-grid__media {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

.billeb-grid__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.45s ease, filter 0.35s ease;
}

/* Con proporción fija la imagen llena la caja; sin ella conserva su alto real. */
.billeb-grid--ratio-1-1 .billeb-grid__media { aspect-ratio: 1 / 1; }
.billeb-grid--ratio-4-3 .billeb-grid__media { aspect-ratio: 4 / 3; }
.billeb-grid--ratio-3-2 .billeb-grid__media { aspect-ratio: 3 / 2; }
.billeb-grid--ratio-16-9 .billeb-grid__media { aspect-ratio: 16 / 9; }
.billeb-grid--ratio-3-4 .billeb-grid__media { aspect-ratio: 3 / 4; }

.billeb-grid[class*="billeb-grid--ratio-"] .billeb-grid__img {
	height: 100%;
	object-fit: var(--billeb-fit, cover);
}

/* -- Título ---------------------------------------------------------------- */

.billeb-grid__title {
	margin: 0;
	line-height: 1.3;
}

.billeb-grid--title-below .billeb-grid__title {
	margin-top: var(--billeb-title-gap);
}

.billeb-grid--title-overlay .billeb-grid__title,
.billeb-grid--title-hover .billeb-grid__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 14px 16px;
	color: #fff;
}

.billeb-grid--title-hover .billeb-grid__title {
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.billeb-grid--title-hover .billeb-grid__item:hover .billeb-grid__title,
.billeb-grid--title-hover .billeb-grid__item:focus-within .billeb-grid__title {
	opacity: 1;
	transform: translateY(0);
}

/* -- Efectos al pasar el cursor -------------------------------------------- */

.billeb-grid--fx-zoom .billeb-grid__item:hover .billeb-grid__img,
.billeb-grid--fx-zoom-lift .billeb-grid__item:hover .billeb-grid__img {
	transform: scale(1.06);
}

/* El levantado se suma al desplazamiento propio del cuadro en vez de anularlo. */
.billeb-grid--fx-lift .billeb-grid__item:hover,
.billeb-grid--fx-zoom-lift .billeb-grid__item:hover {
	transform: translateY(calc(var(--billeb-offset) - 8px));
}

/* -- Accesibilidad --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.billeb-grid__item,
	.billeb-grid__img,
	.billeb-grid--title-hover .billeb-grid__title {
		transition: none;
	}

	.billeb-grid--fx-zoom .billeb-grid__item:hover .billeb-grid__img,
	.billeb-grid--fx-zoom-lift .billeb-grid__item:hover .billeb-grid__img,
	.billeb-grid--fx-lift .billeb-grid__item:hover,
	.billeb-grid--fx-zoom-lift .billeb-grid__item:hover {
		transform: translateY(var(--billeb-offset));
	}
}