/*
 * `[oxea_home_categories]` (Frontend/HomeCategoriesShortcode.php) -- replica
 * el look de las cards originales de la home (imagen de fondo cuadrada +
 * overlay con título y flecha decorativa abajo a la derecha), pero con
 * contenido 100% de config en vez de 16 bloques copy-pasteados.
 *
 * Grilla: 4 columnas en escritorio, 3 en tablet y un slider horizontal de una
 * fila en móvil. `minmax(0, 1fr)` evita que un título largo ensanche una
 * columna y rompa las 4 por fila.
 */

/* Ocupa todo el ancho del contenedor, igual que el carrusel de sucursales de
 * la sección siguiente, sin tope propio.
 *
 * `width: 100vw` + `max-width: 100%` y no `width: 100%`: un contenedor flex
 * de Elementor en columna con Wrap = "Wrap" mide el widget por su ancho
 * intrínseco antes de estirarlo, y un `100%` (cíclico ahí) cuenta como 0. Con
 * ancho 0 las cards cuadradas (aspect-ratio) miden ~0 y el widget queda de
 * ~84 px aunque la grilla termine ocupando varios cientos: el contenedor
 * termina antes que las cards y lo que sigue se les sube encima. Con 100vw el
 * ancho intrínseco es real y max-width lo recorta al del contenedor. */
.oxea-home-categories {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	width: 100vw;
	max-width: 100%;
}

.oxea-home-categories__card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-decoration: none;
}

/* Título a la izquierda y flecha a la derecha, ambos pegados abajo: están en
 * la misma fila de flex, así que la flecha nunca se encima con el título. */
.oxea-home-categories__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding: 16px;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.65 ), rgba( 0, 0, 0, 0 ) 60% );
}

.oxea-home-categories__title {
	min-width: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.oxea-home-categories__arrow {
	flex: 0 0 auto;
	color: #fff;
}

@media (max-width: 1024px) {
	.oxea-home-categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Los controles solo existen en el slider móvil (se muestran dentro del
 * @media de abajo, que va después y por eso les gana). */
.oxea-home-categories__controls {
	display: none;
}

/* Móvil: slider de una sola fila con scroll-snap nativo. Muestra UNA card
 * completa por vez; los botones y el avance automático los pone
 * home-categories.js.
 * El scroll es interno de la grilla: la página no se ensancha, y como las
 * cards siguen siendo cuadradas (aspect-ratio) la altura de la fila es la de
 * una card, así que lo que sigue no se solapa. */
@media (max-width: 600px) {
	.oxea-home-categories {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.oxea-home-categories::-webkit-scrollbar {
		display: none;
	}

	/* Una card cuadrada por vista, a todo el ancho; el gap solo se ve al
	 * deslizar. Con el ancho completo el título y la flecha (que va aparte, en
	 * la misma fila) tienen lugar de sobra. */
	.oxea-home-categories__card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.oxea-home-categories__overlay {
		padding: 14px;
	}

	.oxea-home-categories__controls {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 12px;
	}

	.oxea-home-categories__controls[hidden] {
		display: none;
	}

	.oxea-home-categories__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 1px solid #d8dcd9;
		border-radius: 50%;
		background: #fff;
		color: #222;
		cursor: pointer;
	}

	.oxea-home-categories__nav:focus-visible {
		outline: 3px solid var( --oxea-color-primary, #2e7d32 );
		outline-offset: 2px;
	}
}