/*
    Cleaned blog-detail.css
    - Consolidated duplicate rules
    - Kept all functional selectors: sticky sidebar, blog-content, image utilities, crop-hide, truncation and carousel visuals
*/

/* ---------- Sticky sidebar and visuals ---------- */
.sticky-sidebar {
        position: sticky;
        top: 100px;
        height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 0.5rem 0.75rem;
        z-index: 5;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(31,41,55,0.06);
}

/* Custom scrollbar for sticky sidebar */
.sticky-sidebar::-webkit-scrollbar { width: 5px; }
.sticky-sidebar::-webkit-scrollbar-track { background: #f1f1f1; }
.sticky-sidebar::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; }
.sticky-sidebar::-webkit-scrollbar-thumb:hover { background: #555; }

.sticky-sidebar .card { margin-bottom: 1rem; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 4px rgba(0,0,0,.04); }

@media (max-width: 991.98px) {
        .sticky-sidebar { position: relative; height: auto; overflow-y: visible; top: 0; box-shadow: none; background: transparent; padding: 0; }
}

/* ---------- Image hover ---------- */
.hover-img-scale { overflow: hidden; display: block; }
.hover-img-scale img { transition: transform 0.3s ease; }
.hover-img-scale:hover img { transform: scale(1.05); }

/* ---------- Blog content / media safety ---------- */
section.container-1440 .row { align-items: flex-start; }
.blog-content { box-sizing: border-box; width: 100%; position: relative; overflow: hidden; padding: 0 0.5rem; }

/* Ensure media inside blog content are responsive and clipped if needed */
.blog-content img,
.blog-content iframe,
.blog-content video { max-width: 100% !important; width: auto !important; height: auto !important; display: block; margin: 1rem auto; object-fit: contain; position: relative !important; }

/* Force iframes/videos/embed to be responsive */
section.container-1440 .blog-content iframe,
section.container-1440 .blog-content video,
section.container-1440 .blog-content embed,
section.container-1440 .blog-content object { width: 100% !important; max-width: 100% !important; height: auto !important; }

/* If inline styles set absolute positioning, ensure they don't escape */
section.container-1440 .blog-content *[style*="position:"] { position: relative !important; }

/* Utility: handle inline width declarations */
.blog-content [style*="width:"] { max-width: 100% !important; width: auto !important; }
.blog-content [style*="background"] { background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }

/* ---------- Image utility classes ---------- */
.blog-content .img-100, .blog-content .img-80, .blog-content .img-70 { display: block !important; margin: 1rem auto !important; height: auto !important; object-fit: contain !important; }
.blog-content .img-100 { width: 100% !important; max-width: 100% !important; }
.blog-content .img-80 { width: 80% !important; max-width: 80% !important; }
.blog-content .img-70 { width: 70% !important; max-width: 70% !important; }

/* Crop mode: enlarge images and clip so center is visible */
.blog-content.crop-hide img,
.blog-content.crop-hide picture img,
.blog-content.crop-hide figure img { width: 125% !important; max-width: none !important; height: auto !important; transform: translateX(-12.5%) !important; object-fit: cover !important; }
.blog-content.crop-hide { overflow: hidden !important; }

/* ---------- Layout helpers ---------- */
@media (min-width: 992px) { .col-lg-8 { padding-right: 1rem; } .col-lg-4 { padding-left: 1rem; } }

/* Text truncate classes */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Carousel styles */
.blog-carousel { touch-action: pan-y pinch-zoom; cursor: grab; }
.blog-carousel:active { cursor: grabbing; }
.blog-carousel .owl-nav { display: none; }

/* Mobile responsive styles for blog list */
@media (max-width: 768px) {
    /* Fix horizontal overflow issues */
    body, html {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Container width fixes */
    .container, .container-fluid, .container-1440 {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Row and column fixes */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
    }
    
    /* Blog card image adjustments for mobile */
    .iq-blog .blog-image img {
        height: 200px !important;
        object-fit: cover !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Blog card container fixes */
    .iq-blog {
        margin-bottom: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Blog card title adjustments */
    .iq-blog .blog-title h5 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    /* Blog meta data adjustments */
    .iq-blog .blog-meta-data {
        padding: 8px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .iq-blog .blog-meta-data .d-flex {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    /* Author block adjustments */
    .iq-blog .author-block {
        font-size: 14px !important;
    }
    
    .iq-blog .author-block .avatar-30 {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Blog post details padding */
    .iq-blog .iq-post-details {
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* View count badge adjustments */
    .iq-blog .blog-image span {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    
    /* DataTable responsive adjustments */
    .table-responsive {
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Table fixes */
    .table {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Header section fixes */
    .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }
    
    .search-form {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    /* Extra small mobile adjustments */
    .iq-blog .blog-image img {
        height: 150px !important;
    }
    
    .iq-blog .blog-title h5 {
        font-size: 14px !important;
    }
    
    .iq-blog .iq-post-details {
        padding: 8px !important;
    }
    
    /* Search form mobile adjustments */
    .search-form {
        max-width: 200px !important;
    }
    
    /* Button text adjustments for mobile */
    .btn .me-2 + * {
        display: none !important;
    }
    
    .btn .fas.fa-plus {
        margin-right: 0 !important;
    }
}

/* End of cleaned file */