/* ============================================
   SINGLE POST LAYOUT - FINAL & CLEAN
   ============================================ */

/* ===== BASE LAYOUT (DESKTOP) ===== */
.btp-content-wrapper {
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 0;
}

.btp-main-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 30px !important;
    align-items: start !important;
    width: 100% !important;
}

.btp-content-area {
    min-width: 0 !important; /* KUNCI: Mencegah konten memaksa grid melebar */
    width: 100% !important;
    overflow: hidden !important; /* Mencegah elemen anak keluar batas */
}

.btp-sidebar {
    width: 300px !important;
    min-width: 300px !important;
}

/* ===== PAKSA SEMUA ELEMEN DI DALAM CONTENT TIDAK MELEBIHI 100% ===== */
.btp-content-area > *,
.btp-content-area .article-pagination,
.btp-content-area .comments-area,
.btp-content-area .article-content img,
.btp-content-area .article-content table,
.btp-content-area .article-content iframe,
.btp-content-area .article-content pre,
.btp-content-area .article-content blockquote {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* ============================================
   RESPONSIVE: TABLET & MOBILE (≤ 768px)
   ============================================ */
@media (max-width: 768px) {
    .btp-main-layout {
        display: flex !important; /* Flex lebih stabil untuk stacking vertikal di mobile */
        flex-direction: column !important;
        gap: 20px !important;
    }

    .btp-content-area {
        width: 100% !important;
        padding: 16px !important;
        background: #ffffff; /* Pastikan ini sesuai dengan desain tema Anda */
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* Sentuhan halus agar terlihat rapi */
        box-sizing: border-box !important;
        overflow: visible !important; /* ✅ PENTING: Agar bleed effect bisa bekerja */
    }

    .btp-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important; /* Samakan dengan content-area agar konsisten */
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        box-sizing: border-box !important;
    }

    /* Paksa elemen media agar tidak merusak layout mobile */
    .btp-content-area img, 
    .btp-content-area table,
    .btp-content-area iframe,
    .btp-content-area video {
        max-width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    /* ✅ OVERRIDE: Bleed Effect untuk .wrap-featured */
    .btp-content-area > .wrap-featured {
        max-width: calc(100% + 32px) !important;
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

   
}

/* ============================================
   RESPONSIVE: MOBILE KECIL (≤ 360px)
   ============================================ */
@media (max-width: 360px) {
    .btp-main-layout {
        gap: 15px !important;
    }

    .btp-content-area, 
    .btp-sidebar {
        padding: 12px !important; /* Lebih rapat agar konten tetap lega di layar kecil */
        border-radius: 6px;
    }

    /* ✅ OVERRIDE: Bleed Effect untuk .wrap-featured (sesuaikan dengan padding 12px) */
    .btp-content-area > .wrap-featured {
        max-width: calc(100% + 24px) !important;
        width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        border-radius: 0 !important;
    }

    /* Penyesuaian Typography agar tidak berantakan */
    .btp-content-area .article-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
    }
    
    .btp-content-area .article-meta,
    .btp-content-area .article-author {
        font-size: 12px !important; /* Mencegah meta data terpotong/wrap aneh */
    }

    .btp-content-area .article-share {
        padding: 12px !important;
        gap: 8px !important;
    }

    /* Pastikan widget sidebar tidak overflow di layar sangat kecil */
    .btp-sidebar .widget {
        margin-bottom: 15px !important;
        word-wrap: break-word !important;
    }
}