/* Blog Recent Cards Desktop Only Compact Fix */

/* ===== SECTION SPACING FIX ===== */
@media (max-width: 768px) {
    /* Hapus margin top pada section berita terbaru mobile */
    .blog-page.section-big-py-space {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Title mobile juga hitam */
    .blog-page .title8 {
        color: #000000 !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 769px) {
    /* Hapus margin top pada section berita terbaru agar lebih dekat dengan tombol CTA */
    .blog-page.section-big-py-space {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Container berita terbaru */
    .blog-page .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* ===== DESKTOP ONLY COMPACT CARDS ===== */
@media (min-width: 769px) {
    /* Container berita terbaru desktop - lebih kecil dan terbatas lebarnya */
    .blog-page .blog-media {
        margin-bottom: 20px !important;
        padding: 15px !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        display: flex !important;
        align-items: flex-start !important;
        max-width: 100px !important; /* Batasi lebar maksimal */
        width: 80% !important;
    }
    
    /* Layout 40-60 untuk desktop - gambar lebih kecil */
    .blog-page .blog-media .col-xl-6:first-child {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        padding: 0 !important;
    }
    
    .blog-page .blog-media .col-xl-6:last-child {
        flex: 0 0 65% !important;
        max-width: 65% !important;
        padding: 0 !important;
    }
    
    /* Gambar container desktop - tinggi ditambah */
    .blog-page .blog-media .blog-left {
        max-height: 160px !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        margin-right: 12px !important;
        width: 100% !important;
    }
    
    .blog-page .blog-media .blog-left .image-wrapper {
        height: 160px !important;
        width: 100% !important;
    }
    
    /* Gambar desktop tinggi ditambah */
    .blog-page .blog-media .blog-left img,
    .blog-page .blog-media .blog-left .image-wrapper img {
        width: 100% !important;
        height: 160px !important;
        max-height: 160px !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 6px !important;
    }
    
    /* Date label desktop */
    .blog-page .blog-media .blog-left .date-label {
        font-size: 9px !important;
        padding: 4px 8px !important;
        top: 6px !important;
        left: 6px !important;
        border-radius: 3px !important;
    }
    
    /* Content area desktop */
    .blog-page .blog-media .blog-right {
        padding: 0 0 0 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: 160px !important;
    }
    
    /* Title desktop - lebih kecil */
    .blog-page .blog-media .blog-right h4 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    /* Description desktop - lebih kecil */
    .blog-page .blog-media .blog-right p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        color: #666 !important;
        flex-grow: 1 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        text-overflow: ellipsis !important;
    }
    
    /* Spacing antar cards desktop */
    .blog-page .blog-media + .blog-media {
        margin-top: 15px !important;
    }
    
    /* Container untuk center alignment */
    .blog-page .col-xl-12 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Center horizontal */
        justify-content: flex-start !important;
    }
    
    /* Wrapper untuk semua cards agar tetap center */
    .blog-page .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Title tetap center dan dalam container yang center */
    .blog-page .title8 {
        align-self: center !important;
        width: 100% !important;
        max-width: 600px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        color: #000000 !important; /* Warna hitam untuk judul */
        font-weight: 700 !important;
    }
}

/* Large desktop - sedikit lebih besar tapi tetap compact */
@media (min-width: 1200px) {
    .blog-page .blog-media {
        padding: 18px !important;
        margin-bottom: 22px !important;
        max-width: 650px !important; /* Sedikit lebih lebar di large desktop */
    }
    
    .blog-page .blog-media .blog-left {
        max-height: 200px !important;
        margin-right: 15px !important;
    }
    
    .blog-page .blog-media .blog-left .image-wrapper {
        height: 170px !important;
    }
    
    .blog-page .blog-media .blog-left img,
    .blog-page .blog-media .blog-left .image-wrapper img {
        height: 200px !important;
        max-height: 200px !important;
    }
    
    .blog-page .blog-media .blog-right {
        padding: 0 0 0 15px !important;
        height: 200px !important;
    }
    
    .blog-page .blog-media .blog-right h4 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    
    .blog-page .blog-media .blog-right p {
        font-size: 0.85rem !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        text-overflow: ellipsis !important;
    }
    
    .blog-page .blog-media .blog-left .date-label {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
    
    /* Title untuk large desktop */
    .blog-page .title8 {
        max-width: 650px !important;
        text-align: center !important;
        color: #000000 !important; /* Warna hitam untuk judul */
        font-weight: 700 !important;
    }
}

/* Extra large desktop - tetap terbatas */
@media (min-width: 1400px) {
    .blog-page .blog-media {
        max-width: 700px !important; /* Maksimal 700px bahkan di layar besar */
    }
    
    /* Title untuk extra large desktop */
    .blog-page .title8 {
        max-width: 700px !important;
        text-align: center !important;
        color: #000000 !important; /* Warna hitam untuk judul */
        font-weight: 700 !important;
    }
}