/* ==========================================================================
   SINGLE BLOG PAGE STYLES (single-blog.css)
   Global Custom Prefix: m_sms_b_
   ========================================================================== */

.m_sms_b_single_wrapper {
    font-family: 'Noto Sans Bengali', sans-serif;
    width: 100%;
}

/* Helper Typography Classes */
.fs-7 { font-size: 13.5px !important; }
.fs-8 { font-size: 12px !important; }

/* Main Card & Sidebar Card Design System */
.m_sms_b_single_card,
.m_sms_b_sidebar_card {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0 !important;
}

/* Featured Header Image Display Ratio */
.m_sms_b_single_img_wrap {
    width: 100%;
    max-height: 380px;
    overflow: hidden;
    border-radius: 8px;
}

.m_sms_b_single_img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Custom Blockquote Styling */
.m_sms_b_quote {
    background-color: #f8f9fa !important;
}

/* Related Post Thumbnail Standard */
.m_sms_b_related_img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ==========================================================================
   COMMENTS SECTION STYLES
   ========================================================================== */

.m_sms_b_avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.m_sms_b_comments_wrapper .form-control:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.15);
}

/* ==========================================================================
   SIDEBAR WIDGETS STYLES
   ========================================================================== */

.m_sms_b_thumb {
    width: 65px;
    height: 55px;
    object-fit: cover;
    flex-shrink: 0;
}

.hover-success {
    transition: color 0.2s ease;
}

.hover-success:hover {
    color: #198754 !important;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile)
   ========================================================================== */

/* Laptop & Desktop Screens (992px+) */
@media (min-width: 992px) {
    .m_sms_b_single_img_wrap {
        max-height: 380px;
    }
}

/* Tablet Screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .m_sms_b_single_img_wrap {
        max-height: 280px;
    }
    .m_sms_b_thumb {
        width: 60px;
        height: 50px;
    }
}

/* Mobile Screens (Max 767px) */
@media (max-width: 767.98px) {
    .m_sms_b_single_img_wrap {
        max-height: 200px;
    }
    .m_sms_b_thumb {
        width: 55px;
        height: 45px;
    }
    .m_sms_b_avatar {
        width: 35px;
        height: 35px;
        font-size: 13px;
    }
}