/**
 * Image Aspect Ratio Fixes
 * Ensures all images maintain their container's aspect ratio regardless of uploaded image dimensions
 */

/* Hero Slider Images - 2:1 Ratio */
.bringer-hero-media-wrap,
.bringer-hero-media-wrap img {
    aspect-ratio: 2/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* About Section Images - 1:1 Ratio (Square) for side-by-side sections */
.bringer-parallax-media:not(.about-banner-image) img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* About Page Banner Image - 2:1 Ratio (Wide) */
.about-banner-image {
    aspect-ratio: 2/1 !important;
    width: 100% !important;
}

.about-banner-image img {
    aspect-ratio: 2/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Portfolio Card Images - 1:1 Ratio (Already defined but ensuring it's enforced) */
.bringer-portfolio-card-image {
    aspect-ratio: 1/1 !important;
    overflow: hidden;
}

.bringer-portfolio-card-image img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Events Page Images - 2:1 Ratio to match event detail pages */
.events-page-image {
    aspect-ratio: 2/1 !important;
    overflow: hidden;
    height: auto !important;
}

.events-page-image img {
    aspect-ratio: 2/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Event Detail Page Hero - 2:1 Ratio */
[style*="aspect-ratio: 2/1"] img {
    aspect-ratio: 2/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Team Member Photos - 1:1 Ratio (Square) */
.bringer-team-card-image,
.bringer-carousel-card-image {
    aspect-ratio: 1/1;
    overflow: hidden;
}

.bringer-team-card-image img,
.bringer-carousel-card-image img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* General Image Container Fixes */
.bringer-parallax-media,
.bringer-parallax-media .st-lazy-wrapper {
    overflow: hidden;
}

.bringer-parallax-media img,
.bringer-parallax-media video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Ensure all images in containers maintain aspect ratio */
img[class*="bringer-lazy"],
img[data-src] {
    object-fit: cover;
}

/* Reduce gap between event images and text on home page */
.bringer-portfolio-card .bringer-portfolio-card-image {
    margin-bottom: 0;
}

.bringer-portfolio-card .bringer-portfolio-card-footer {
    padding-top: 8px !important;
    padding-bottom: 9px;
}

/* Mobile Responsive - Maintain aspect ratios on mobile */
@media only screen and (max-width: 739px) {
    .events-page-image {
        aspect-ratio: 2/1 !important;
        height: auto !important;
    }
    
    .bringer-portfolio-card-image {
        aspect-ratio: 1/1;
    }
    
    /* Reduce gap on mobile too */
    .bringer-portfolio-card .bringer-portfolio-card-footer {
        padding-top: 8px !important;
    }
}