/* Featured Categories */

.hb-cats {
    --hb-gap: clamp(12px, 1.6vw, 28px);
    display: grid;
    grid-template-columns: repeat(var(--hb-cols-m, 2), minmax(0, 1fr));
    gap: var(--hb-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 769px) {
    .hb-cats { grid-template-columns: repeat(var(--hb-cols, 4), minmax(0, 1fr)); }
}

.hb-cats__item { margin: 0; min-width: 0; }

.hb-cat { position: relative; display: block; color: inherit; text-decoration: none; }

.hb-cat__media {
    position: relative;
    display: block;
    aspect-ratio: var(--hb-cat-ratio, 4/5);
    overflow: hidden;
    background: var(--_surface);
    border-radius: var(--hb-radius, 4px);
}
.hb-cat__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.hb-cat__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--_surface), rgba(0, 0, 0, .07)); }
@media (hover: hover) { .hb-cat:hover .hb-cat__img { transform: scale(1.04); } }

.hb-cat__title {
    margin: 0;
    font-family: var(--hb-font-head, inherit);
    font-weight: var(--hb-head-weight, 500);
    text-transform: var(--hb-head-transform, none);
    letter-spacing: var(--hb-head-tracking, .01em);
    font-size: calc(var(--hb-head-scale, 1) * clamp(1.05rem, .95rem + .6vw, 1.5rem));
    line-height: 1.2;
}
.hb-cat__desc { display: block; margin-top: .3rem; font-size: .85rem; line-height: 1.45; }

/* Title below the image */
.hb-cats--cards .hb-cat__body { display: block; padding-top: 14px; }
.hb-cats--cards .hb-cat__desc { color: var(--_muted); }
.hb-cats--cards .hb-cat__title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.hb-cats--cards .hb-cat:hover .hb-cat__title { text-decoration-color: currentColor; }

/* Title on the image: a light scrim keeps the text readable on any photo */
.hb-cats--overlay .hb-cat__body {
    position: absolute;
    inset: auto 0 0;
    display: block;
    padding: clamp(14px, 2vw, 26px);
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    border-radius: 0 0 var(--hb-radius, 4px) var(--hb-radius, 4px);
}

/* Horizontal rail */
.hb-cats--rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--hb-cols-m, 2) - 1) * var(--hb-gap)) / (var(--hb-cols-m, 2) + .2));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
}
.hb-cats--rail .hb-cats__item { scroll-snap-align: start; }
@media (min-width: 769px) {
    .hb-cats--rail {
        grid-template-columns: none;
        grid-auto-columns: calc((100% - (var(--hb-cols, 4) - 1) * var(--hb-gap)) / var(--hb-cols, 4));
    }
}