/**
 * Mobile Banner Image Fix
 * Prevents cutting off people's heads in carousel images on mobile devices
 */

/* Default - show center top for all carousel images */
.carousel-inner .item img {
    object-position: center top !important;
}

/* Tablet and below - adjust height and position */
@media (max-width: 991px) {
    .section.banner {
        height: 300px;
    }
    
    .carousel-inner .item {
        min-height: 300px;
    }
    
    .carousel-inner .item img {
        height: 300px;
        object-fit: cover;
        object-position: center 15% !important; /* Show more of the top */
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .section.banner {
        height: 250px;
    }
    
    .carousel-inner .item {
        min-height: 250px;
    }
    
    .carousel-inner .item img {
        height: 250px;
        object-fit: cover;
        object-position: center 10% !important; /* Prioritize top portion */
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .section.banner {
        height: 220px;
    }
    
    .carousel-inner .item {
        min-height: 220px;
    }
    
    .carousel-inner .item img {
        height: 220px;
        object-fit: cover;
        object-position: center 5% !important; /* Show top of image */
    }
}

/* Small mobile devices */
@media (max-width: 375px) {
    .section.banner {
        height: 200px;
    }
    
    .carousel-inner .item {
        min-height: 200px;
    }
    
    .carousel-inner .item img {
        height: 200px;
        object-fit: cover;
        object-position: center top !important; /* Ensure head is visible */
    }
}

/* Alternative: Use contain instead of cover for images with people */
.carousel-inner .item.has-person img {
    object-fit: contain;
    object-position: center;
    background-color: #f5f5f5;
}

/* Ensure carousel captions don't overlap with reduced height */
@media (max-width: 768px) {
    .carousel-caption {
        padding-bottom: 50px;
    }
    
    .wrap-caption {
        padding: 10px;
    }
    
    .caption-heading {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

@media (max-width: 480px) {
    .carousel-caption {
        padding-bottom: 30px;
    }
    
    .caption-heading {
        font-size: 16px !important;
        line-height: 22px !important;
    }
}


/* ========================================
   GALLERY IMAGES FIX
   Prevents cutting off product images
   ======================================== */

/* Fix gallery item aspect ratio and image display */
.in-gallery-item {
    aspect-ratio: 4 / 3 !important; /* Better ratio for product images */
    overflow: hidden;
}

.in-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #f5f5f5;
}

/* Mobile adjustments for gallery */
@media (max-width: 768px) {
    .in-gallery-item {
        aspect-ratio: 1 / 1 !important; /* Square on mobile */
    }
    
    .in-gallery-item img {
        object-fit: cover !important;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .in-gallery-item {
        aspect-ratio: 4 / 3 !important;
    }
    
    .in-gallery-item img {
        object-fit: cover !important;
        padding: 0;
    }
}