/**
 * LinoCrochet: mosaico y tarjeta de categorias.
 */

/* ---------- Categorías: mosaico (bento/masonry) ---------- */

/* Patrón de 4 columnas por bloque de 6 tarjetas, con alturas variadas:
   [ héroe 2x2 ][ alta ][ alta ]
   [           ][ 1x1  ][ 1x1  ]
   [ pequeña ][ pequeña ][ ancha 2x1 ]
   Ignora lino-columnas-N a propósito. */

.lino-grilla--categorias {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 190px;
	grid-auto-flow: dense;
	gap: 20px;
}

/* Héroe: doble ancho y doble alto. */
.lino-grilla--categorias .lino-categoria:nth-child(6n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.lino-grilla--categorias .lino-categoria:nth-child(6n + 1) .lino-categoria__nombre {
	font-size: 1.5rem;
}

/* Las dos siguientes: altas (doble alto). */
.lino-grilla--categorias .lino-categoria:nth-child(6n + 2),
.lino-grilla--categorias .lino-categoria:nth-child(6n + 3) {
	grid-row: span 2;
}

/* La sexta: ancha. */
.lino-grilla--categorias .lino-categoria:nth-child(6n) {
	grid-column: span 2;
}

/* Con 5 categorías, las dos últimas se ensanchan para no dejar huecos. */
.lino-grilla--categorias .lino-categoria:nth-child(4):nth-last-child(2),
.lino-grilla--categorias .lino-categoria:nth-child(5):last-child {
	grid-column: span 2;
}

/* Con 4, la última se convierte en una franja a todo el ancho. */
.lino-grilla--categorias .lino-categoria:nth-child(4):last-child {
	grid-column: 1 / -1;
}

@media (max-width: 1024px) {
	.lino-grilla--categorias {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 180px;
	}

	/* En 2 columnas el héroe ocupa la fila completa; las altas vuelven
	   a altura normal para no estirar demasiado la sección. */
	.lino-grilla--categorias .lino-categoria:nth-child(6n + 2),
	.lino-grilla--categorias .lino-categoria:nth-child(6n + 3) {
		grid-row: auto;
	}
}

@media (max-width: 560px) {
	.lino-grilla--categorias {
		grid-template-columns: 1fr;
		grid-auto-rows: 200px;
	}

	.lino-grilla--categorias .lino-categoria {
		grid-column: auto !important;
		grid-row: auto !important;
	}
}

/* ---------- Tarjeta de categoría ---------- */

.lino-categoria {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	background: #e9e2d2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	/* Incluye transform y opacity: si solo se anima box-shadow, el
	   shorthand pisa la entrada de .reveal y la tarjeta aparece de golpe. */
	transition: box-shadow 0.25s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
}

.lino-categoria:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.lino-categoria__imagen,
.lino-categoria__imagen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lino-categoria__imagen img {
	object-fit: cover;
	transition: transform 0.45s ease;
}

.lino-categoria:hover .lino-categoria__imagen img {
	transform: scale(1.07);
}

/* Degradado de abajo hacia arriba para que el nombre siempre se lea. */

.lino-categoria::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(38, 32, 20, 0.78) 0%, rgba(38, 32, 20, 0.25) 42%, rgba(38, 32, 20, 0) 68%);
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.lino-categoria:hover::after {
	opacity: 0.85;
}

.lino-categoria__nombre {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 14px;
	z-index: 1;
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s ease;
}

.lino-categoria:hover .lino-categoria__nombre {
	transform: translateY(-4px);
}

/* Contador: solo el número, en una burbuja que aparece al hover. */

.lino-categoria__contador {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	background: rgba(255, 255, 255, 0.92);
	color: #4f4636;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 999px;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.lino-categoria:hover .lino-categoria__contador,
.lino-categoria:focus-visible .lino-categoria__contador {
	opacity: 1;
	transform: scale(1);
}

/* En pantallas táctiles no hay hover: el número se muestra siempre. */
@media (hover: none) {
	.lino-categoria__contador {
		opacity: 1;
		transform: scale(1);
	}
}