/* Blog Page Desktop Image Fix */

/* ===== BLOG TITLE H1 FIX ===== */
/* Fix h1 color to match original h3 styling for desktop */
@media (min-width: 769px) {
    .blog-detail-page .blog-detail h1 {
        color: #333333 !important;
        font-weight: 700 !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        font-size: calc(24px + (32 - 24) * ((100vw - 769px) / (1920 - 769))) !important;
        line-height: 1.3 !important;
    }
}

/* ===== DESKTOP IMAGE FIX ===== */
/* Fix untuk gambar yang keluar dari container pada desktop */

/* Blog Index Page - Main Content */
@media (min-width: 769px) {
    /* Container untuk blog media */
    .blog-page .blog-media {
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
        background-color: #ffffff;
        padding: 30px 15px;
        overflow: hidden;
    }
    
    /* Blog left - gambar container */
    .blog-page .blog-media .blog-left {
        overflow: hidden;
        position: relative;
        width: 100%;
        max-width: 100%;
    }
    
    /* Gambar di dalam blog-left */
    .blog-page .blog-media .blog-left img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: cover;
        display: block;
    }
    
    /* Image wrapper untuk menjaga aspect ratio */
    .blog-page .blog-media .blog-left .image-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    
    .blog-page .blog-media .blog-left .image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover;
    }
    
    /* Blog right - konten text */
    .blog-page .blog-media .blog-right {
        padding-left: 20px;
    }
    
    /* Kolom layout - PENTING: Tambahkan overflow hidden */
    .blog-page .blog-media .col-xl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        overflow: hidden;
    }
    
    .blog-page .blog-media .col-xl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        overflow: hidden;
    }
}

/* Blog Show Page - Recent Posts Section */
@media (min-width: 769px) {
    /* Recent posts section */
    .blog-page .col-xl-12 .blog-media {
        display: flex;
        align-items: flex-start;
        overflow: hidden;
    }
    
    /* Gambar di recent posts */
    .blog-page .col-xl-12 .blog-media .blog-left {
        overflow: hidden;
        position: relative;
        width: 100%;
        max-width: 100%;
    }
    
    .blog-page .col-xl-12 .blog-media .blog-left img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: cover;
        display: block;
    }
    
    /* Kolom layout untuk recent posts - PENTING: Tambahkan overflow hidden */
    .blog-page .col-xl-12 .blog-media .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
        overflow: hidden;
    }
    
    .blog-page .col-xl-12 .blog-media .col-sm-12 {
        overflow: hidden;
    }
}

/* Blog Detail Page - Main Image */
@media (min-width: 769px) {
    /* Main blog detail image */
    .blog-detail-page .blog-detail img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: cover;
        display: block;
    }
    
    /* Creative card container */
    .blog-detail-page .creative-card {
        overflow: hidden;
    }
    
    .blog-detail-page .creative-card img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Text justify untuk konten blog di desktop */
    .blog-detail-page .blog-detail .body {
        text-align: justify !important;
    }
    
    .blog-detail-page .blog-detail .body p,
    .blog-detail-page .blog-detail .body div,
    .blog-detail-page .blog-detail .body span,
    .blog-detail-page .blog-detail .body article,
    .blog-detail-page .blog-detail .body section {
        text-align: justify !important;
    }
    
    /* Kecuali untuk heading dan elemen tertentu */
    .blog-detail-page .blog-detail .body h1,
    .blog-detail-page .blog-detail .body h2,
    .blog-detail-page .blog-detail .body h3,
    .blog-detail-page .blog-detail .body h4,
    .blog-detail-page .blog-detail .body h5,
    .blog-detail-page .blog-detail .body h6,
    .blog-detail-page .blog-detail .body img,
    .blog-detail-page .blog-detail .body ul,
    .blog-detail-page .blog-detail .body ol,
    .blog-detail-page .blog-detail .body li,
    .blog-detail-page .blog-detail .body table,
    .blog-detail-page .blog-detail .body blockquote {
        text-align: left !important;
    }
}

/* Sidebar Recent Blog */
@media (min-width: 769px) {
    /* Sidebar recent blog images */
    .blog-page .blog-sidebar .recent-blog li .media img {
        width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
        object-fit: cover;
        margin-right: 10px;
    }
    
    .blog-page .blog-sidebar .recent-blog li .media {
        display: flex;
        align-items: flex-start;
    }
    
    .blog-page .blog-sidebar .recent-blog li .media a {
        flex-shrink: 0;
    }
}

/* Ensure all images stay within their containers */
@media (min-width: 769px) {
    .blog-page img,
    .blog-detail-page img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Prevent overflow - CRITICAL FIX */
    .blog-page .row,
    .blog-detail-page .row {
        overflow: hidden;
    }
    
    .blog-page .col-xl-4,
    .blog-page .col-xl-6,
    .blog-page .col-xl-8,
    .blog-page .col-xl-9,
    .blog-page .col-xl-12,
    .blog-page .col-lg-8,
    .blog-page .col-lg-4,
    .blog-page .col-md-7,
    .blog-page .col-md-5,
    .blog-page .col-sm-12 {
        overflow: hidden;
    }
    
    /* Fix untuk blog-left container */
    .blog-page .blog-left,
    .blog-page .blog-left a,
    .blog-page .blog-left .image-wrapper {
        overflow: hidden;
        max-width: 100%;
    }
    
    /* Pastikan gambar tidak keluar dari link */
    .blog-page a {
        display: block;
        overflow: hidden;
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    /* Ensure proper spacing and sizing on large screens */
    .blog-page .blog-media .blog-left img {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .blog-page .col-xl-12 .blog-media .blog-left img {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix untuk container columns */
    .blog-page .blog-media .col-xl-4,
    .blog-page .blog-media .col-xl-6 {
        padding-right: 15px;
        padding-left: 15px;
        overflow: hidden;
    }
}

/* Extra Large Desktop (1400px and up) */
@media (min-width: 1400px) {
    /* Maintain image constraints on very large screens */
    .blog-page .blog-media .blog-left,
    .blog-page .col-xl-12 .blog-media .blog-left {
        max-width: 100%;
        overflow: hidden;
    }
}

/* CRITICAL FIX: Force all blog images to stay within bounds */
@media (min-width: 769px) {
    /* Paksa semua gambar blog untuk tidak keluar */
    .blog-page .blog-media img,
    .blog-page .blog-left img,
    .blog-page .blog-media .blog-left img,
    .blog-page .col-xl-12 .blog-media img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    /* Container harus memiliki overflow hidden */
    .blog-page .blog-media,
    .blog-page .blog-media .blog-left,
    .blog-page .blog-media .blog-left a,
    .blog-page .col-xl-12 .blog-media,
    .blog-page .col-xl-12 .blog-media .blog-left,
    .blog-page .col-xl-12 .blog-media .blog-left a {
        overflow: hidden !important;
        max-width: 100% !important;
    }
    
    /* Fix untuk semua kolom yang berisi gambar */
    .blog-page [class*="col-"] {
        overflow: hidden;
    }
}