/* LMBK category-tiles */
/* ---------------------------------------------------------- Category tiles */
.le-cat { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border-radius: var(--le-radius); transition: transform .3s var(--le-ease), box-shadow .3s, background-color .3s, border-color .3s; }
.le-cat__media { position: relative; display: block; overflow: hidden; aspect-ratio: 1/1; border-radius: var(--le-radius); background: var(--le-soft); }
.le-cat__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--le-ease); }
.le-zoom-yes .le-cat:hover .le-cat__media img { transform: scale(1.07); }
.le-cat__body { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; text-align: center; }
.le-cat__title { color: var(--le-dark); font-size: 16px; font-weight: 600; line-height: 1.3; transition: color .2s; }
.le-cat:hover .le-cat__title { color: var(--le-accent); }
.le-cat__count { color: var(--le-muted); font-size: 13px; }
.le-cat__link { margin-top: 4px; color: var(--le-accent); font-size: 14px; font-weight: 600; }
.le-cat--overlay { position: relative; overflow: hidden; }
.le-cat--overlay .le-cat__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); transition: background-color .3s; }
.le-cat--overlay .le-cat__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; }
.le-cat--overlay .le-cat__title, .le-cat--overlay:hover .le-cat__title { color: #fff; }
.le-cat--overlay .le-cat__count, .le-cat--overlay .le-cat__link { color: rgba(255,255,255,.85); }
.le-cat--circle { align-items: center; }
.le-cat--circle .le-cat__media { width: 150px; height: 150px; max-width: 100%; aspect-ratio: 1/1; border-radius: 50%; }
.le-cat--inline { flex-direction: row; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--le-line); background: #fff; }
.le-cat--inline .le-cat__media { flex-shrink: 0; width: 64px; height: 64px; aspect-ratio: auto; }
.le-cat--inline .le-cat__body { padding: 0; text-align: left !important; }
.le-cat--inline:hover { border-color: var(--le-accent); }
@media (prefers-reduced-motion: reduce) { .le-cat__media img { transition: none !important; } }