/**
 * ASAP Theme - Image Aspect Ratio Fixes
 * 
 * Forces correct aspect ratios for all design types
 * to prevent black spaces and distorted images
 */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL IMAGE FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Force all thumbnail images to cover container with correct aspect ratio */
.featured-post-img img,
.regular-post-img img,
.grid-item img,
.lastest-post-img img,
.article-loop img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED POSTS (Main/Large Images)
   ═══════════════════════════════════════════════════════════════ */

/* Featured post image container - force 16:9 aspect ratio */
.featured-post-img,
.grid-item.item-1 .grid-image-container {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

.featured-post-img::after,
.grid-item.item-1 .grid-image-container::after {
    content: "" !important;
    display: block !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
}

.featured-post-img img,
.grid-item.item-1 .grid-image-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════════════
   REGULAR POSTS (Smaller/Sidebar Images)
   ═══════════════════════════════════════════════════════════════ */

/* Regular post image container - force 16:9 aspect ratio */
.regular-post-img,
.lastest-post-img {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

.regular-post-img::after,
.lastest-post-img::after {
    content: "" !important;
    display: block !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
}

.regular-post-img img,
.lastest-post-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN 10 SPECIFIC FIXES
   ═══════════════════════════════════════════════════════════════ */

.design-10 .featured-post img,
.design-10 .grid-container .grid-item:first-child img {
    max-height: none !important;
    height: 100% !important;
    min-height: 300px !important;
}

.design-10 .featured-post-img {
    min-height: 300px !important;
}

.design-10 .featured-post-img::after {
    padding-bottom: 56.25% !important;
}

/* ═══════════════════════════════════════════════════════════════
   GRID ITEMS (All Designs)
   ═══════════════════════════════════════════════════════════════ */

.grid-item .grid-image-container {
    position: relative !important;
    overflow: hidden !important;
}

.grid-item:not(.item-1) .grid-image-container::after {
    content: "" !important;
    display: block !important;
    padding-bottom: 56.25% !important;
}

.grid-item:not(.item-1) .grid-image-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE LOOP (Category Archive Pages)
   ═══════════════════════════════════════════════════════════════ */

.article-loop .lastest-post-img {
    position: relative !important;
    overflow: hidden !important;
}

.article-loop .lastest-post-img::after {
    content: "" !important;
    display: block !important;
    padding-bottom: 56.25% !important;
}

.article-loop .lastest-post-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .featured-post-img::after,
    .grid-item.item-1 .grid-image-container::after {
        padding-bottom: 60% !important; /* Slightly taller on mobile */
    }
    
    .featured-post-img img,
    .grid-item.item-1 .grid-image-container img {
        min-height: 200px !important;
    }
}