/* Default category styles (full block for insertion) */

/* Grid container: responsive auto-fill */
.default-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    width: 100%;
    margin-top: 10px;
    justify-items: center;
    align-items: stretch;
    box-sizing: border-box;
    padding: 0;
}

/* Card: stretches to grid cell, keeps consistent aspect */
.default-category-box {
    width: 100%;
    max-width: 260px; /* cap on large screens */
    height: 160px;
   /* border-radius: 8px;*/
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    background: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    align-items: flex-end;
}

    /* Hover lift */
    .default-category-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 26px rgba(0,0,0,0.28);
    }

/* Link fills card */
.default-category-link {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
    position: relative;
}

/* Image container centers contained image and prevents cropping */
.default-category-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff; /* subtle fallback */
}

    /* Contain image so full image shows (top and bottom visible) */
    .default-category-image img {
        max-width: 92%;
        max-height: 92%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        filter: brightness(0.96) saturate(1.03);
        transition: transform 0.35s ease, filter 0.25s ease;
    }

/* Gentle zoom on hover while staying contained */
.default-category-box:hover .default-category-image img {
    transform: scale(1.02);
    filter: brightness(0.99) saturate(1.06);
}

/* Caption sits at the bottom and provides a bottom-only gradient */
.default-category-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px;
    box-sizing: border-box;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.75) 100%);
    display: flex;
    align-items: flex-end;
    min-height: 48px;
}

/* Loading placeholder tweak */
.default-category-grid .default-category-box[style*="opacity"] {
    background: linear-gradient(180deg, #2b2b2b 0%, #1b1b1b 100%);
}

.default-category-grid .default-category-caption {
    font-weight: 500;
    opacity: 0.9;
}

/* Responsive: two columns on small screens */
@media (max-width: 640px) {
    .default-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .default-category-box {
        max-width: none;
        height: 140px;
        border-radius: 6px;
    }
}

/* Very small screens: single column */
@media (max-width: 380px) {
    .default-category-grid {
        grid-template-columns: 1fr;
    }

    .default-category-box {
        height: 130px;
    }
}

/* Fallback for older browsers without CSS Grid */
@supports not (display: grid) {
    .default-category-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .default-category-box {
        flex: 0 1 220px;
        margin: 0 9px;
    }
}