/**
 * an_homecategories_override — CSS overrides
 *
 * Fixes layout for larger category images (250px+) in an_homecategories module.
 * CSS rules override HTML width/height attributes (CSS always wins over HTML attributes).
 * No template modification needed.
 *
 * Responsive: mobile=column, tablet=2-3 cols, desktop=row
 */

/* ===========================================
   IMAGE SIZING — overrides HTML width/height attributes
   =========================================== */

.an_homecategories-item .an_homecategories-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ===========================================
   NON-SLIDER (FLEX) MODE
   =========================================== */

/* Increase max-width from 160px to 350px for larger images */
.an_homecategories-item {
    max-width: 350px;
    margin: 0 15px 20px;
}

/* ===========================================
   SLIDER (OWL CAROUSEL) MODE
   =========================================== */

/* Allow slider items to fill their carousel cell */
.an_homecategories-slider .an_homecategories-item {
    max-width: 100%;
    width: 100%;
}

/* Owl carousel images fill the slide */
.an_homecategories .owl-carousel .owl-item img {
    width: 100%;
    max-width: 100%;
}

/* ===========================================
   RESPONSIVE BREAKPOINTS (non-slider only)
   =========================================== */

/* Tablet landscape (992px–1199px): 4 per row */
@media (max-width: 1199px) {
    .an_homecategories-list:not(.an_homecategories-slider) .an_homecategories-item {
        max-width: calc(25% - 30px);
    }
}

/* Tablet portrait (768px–991px): 3 per row */
@media (max-width: 991px) {
    .an_homecategories-list:not(.an_homecategories-slider) .an_homecategories-item {
        max-width: calc(33.333% - 30px);
    }
}

/* Mobile landscape (576px–767px): 2 per row */
@media (max-width: 767px) {
    .an_homecategories-list:not(.an_homecategories-slider) .an_homecategories-item {
        max-width: calc(50% - 30px);
    }
}

/* ===========================================
   DESCRIPTION CENTERING
   =========================================== */

.an_homecategories-item-desc {
    text-align: center;
}

.an_homecategories-item-desc .h4 {
    text-align: center;
}

.an_homecategories-item-desc p:not(.h4) {
    text-align: center;
}

/* Mobile portrait (<576px): single column */
@media (max-width: 575px) {
    .an_homecategories-list:not(.an_homecategories-slider) {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .an_homecategories-list:not(.an_homecategories-slider) .an_homecategories-item {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}