/* News Images Fix - Ensure all images fit properly in their containers */

/* Global image fixes for news system */
.news-card img,
.news-img,
.portfolio-image img,
.gallery-thumb,
.hero-image,
.news-thumbnail,
.announcement-image,
.event-image {
    object-fit: cover !important;
    object-position: center !important;
}

/* Specific fixes for different sections */

/* News cards in listing pages */
.news-card .news-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/* Portfolio grid in news_announcements.php */
.news-portfolio .portfolio-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;
}

.news-portfolio .portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Ensure aspect ratio is maintained */
.image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fix for announcement cards */
.announcement-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
}

/* Fix for event cards */
.event-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .news-card .news-img,
    .portfolio-image,
    .announcement-card img,
    .event-card img {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .news-card .news-img,
    .portfolio-image,
    .announcement-card img,
    .event-card img {
        height: 160px;
    }
}

/* Fallback for broken images */
img[src=""],
img:not([src]),
img[src*="undefined"] {
    opacity: 0;
}

img {
    background-color: #f5f5f5;
    background-image: url('/images/comingsoon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Smooth loading transition */
img {
    transition: opacity 0.3s ease;
}

img.loading {
    opacity: 0.5;
}

img.loaded {
    opacity: 1;
}