/* Image Aspect Ratio Corrections for 1536x1024 images */

/* General image container styling */
.event-image-container,
.league-event-image-container,
.series-image-container,
.league-image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-border-radius, 0.75rem);
    box-shadow: var(--card-shadow, 0 4px 10px rgba(0, 0, 0, 0.1));
    width: 100%;
}

/* Fixes for 1536x1024 (3:2 aspect ratio) images */
.league-header__image,
.event-image,
.league-event-image,
.series-image,
.featured-event-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* 1536x1024 aspect ratio */
    object-fit: cover;
    display: block;
}

/* Story images are 9:16 vertical comic panels - styled in bard.css */

/* Fix specific instances of inline styles */
img[style*="aspect-ratio: 16/9"],
.featured-event-image[style*="aspect-ratio: 16/9"] {
    aspect-ratio: 3 / 2 !important; /* Override inline styles */
}

/* Event recap image container */
.event-recap-image-container {
    padding-bottom: 66.67% !important; /* 3:2 aspect ratio (2/3 * 100) */
}

/* Make sure the image doesn't stretch */
.event-image-container img,
.league-image-container img,
.series-image-container img,
.featured-event-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Exception for profile/avatar images that should remain circular */
.player-image,
.profile-image,
.avatar-image,
img.rounded-circle {
    aspect-ratio: 1 / 1 !important; /* Keep these as squares */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .league-header__image {
        max-height: none; /* Remove any max-height restrictions */
    }
}