/* Le-Biko — Category tiles (homepage, sub-categories, search, 404). */

/* ==========================================================================
   Category grid — dense small tiles
   ========================================================================== */
.lb-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0; padding: 0; list-style: none;
}
.lb-cat { min-width: 0; }
.lb-cat__link {
	display: flex; flex-direction: column; height: 100%;
	background: var(--lb-tile);
	border-radius: 10px; /* softly rounded tiles */
	overflow: hidden;
	text-decoration: none;
	transition: transform .28s var(--lb-ease), box-shadow .28s var(--lb-ease);
	will-change: transform;
}
.lb-cat__media { display: block; aspect-ratio: 6 / 5; overflow: hidden; background: #efede9; }
.lb-cat__img { width: 100%; height: 100%; object-fit: cover; }
.lb-cat__name {
	display: flex; align-items: center; justify-content: center;
	min-height: 3.4em;
	padding: 6px 5px 8px;
	font-size: 11.5px; font-weight: 400; line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}
@media (hover: hover) {
	.lb-cat__link:hover { transform: scale(1.045); box-shadow: 0 6px 18px rgba(20, 18, 16, .08); position: relative; z-index: 1; }
}
.lb-cat__link:active { transform: scale(.97); }

@media (min-width: 600px) {
	.lb-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
	.lb-cat__name { font-size: 13.5px; padding: 8px 8px 10px; }
}
@media (min-width: 960px) {
	.lb-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	.lb-cat__name { font-size: 14.5px; }
}
@media (min-width: 1200px) {
	.lb-cats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Homepage category tiles: small "לצפייה בקולקציה ←" under the name */
.lb-cat__cta {
	display: flex; align-items: center; justify-content: center; gap: 4px;
	margin-top: auto; padding: 0 4px 9px;
	font-size: 10.5px; font-weight: 400; line-height: 1.2; color: var(--lb-ink-soft);
	flex-wrap: wrap; text-align: center; /* One line normally; wraps instead of being cut off with large text spacing (WCAG 1.4.12) */
}
.lb-cat__cta svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--lb-ease); }
.lb-cat__name:has(+ .lb-cat__cta) { min-height: 2.9em; padding-bottom: 3px; }
@media (hover: hover) { .lb-cat__link:hover .lb-cat__cta svg { transform: translateX(-3px); } }
@media (min-width: 600px) { .lb-cat__cta { font-size: 12px; padding-bottom: 11px; } .lb-cat__cta svg { width: 12px; height: 12px; } }
@media (max-width: 380px) { .lb-cat__cta { font-size: 9.5px; gap: 3px; } }
html.lb-a11y-nomotion .lb-cat__cta svg { transition: none; transform: none !important; }