/* ডিফল্ট ডেস্কটপ সেটিংস */
.mobile-only-logo {
    display: none;
}

/* ট্যাবলেট ও মোবাইল ভিউ (992px এর নিচে) */
@media (max-width: 992px) {
    .hero-three-column,
    .layout-body-split,
    .top-executives-grid {
        grid-template-columns: 1fr;
    }
    .members-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* স্মার্টফোন ও ছোট স্ক্রিন (768px এবং তার নিচে) */
@media (max-width: 768px) {
    /* ১. টপবার তথ্য স্ক্রিনে ঠিকমতো রাখার জন্য */
    .top-bar {
        font-size: 11px;
        padding: 5px 0;
    }
    .top-bar-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-align: center;
    }
    .top-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    .top-social {
        margin-top: 2px;
    }

    /* ২. ডেস্কটপ হেডার লোগো লুকানো হবে */
    .desktop-only-branding {
        display: none !important;
    }

    /* ৩. মেইন নেভিগেশন বারকে হেডার হিসেবে রূপান্তর */
    .main-navbar {
        padding: 8px 0;
    }
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* ৪. বামপাশের মোবাইল লোগো দৃশ্যমান করা */
    .mobile-only-logo {
        display: flex;
        align-items: center;
    }
    .mobile-only-logo img {
        max-height: 42px;
        width: auto;
        object-fit: contain;
    }
    .mobile-logo-text {
        font-size: 22px;
        font-weight: 800;
        color: var(--brand-red);
        text-decoration: none;
    }

    /* ৫. মূল মেনু আইটেমগুলো (প্রথম, সদস্য, ই-পেপার) হাইড করা */
    .desktop-nav-links {
        display: none !important;
    }

    /* ৬. ডানপাশের ৪টি আইকনকে এক সারিতে সুন্দরভাবে রাখা */
    .nav-right-icons {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }
    .nav-icon-btn {
        font-size: 16px;
        padding: 6px;
    }

    /* ফুটার ও অন্যান্য */
    .footer-details-grid {
        grid-template-columns: 1fr;
    }
    .members-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ট্যাবলেট ও মোবাইল ভিউ (992px এর নিচে) */
@media (max-width: 992px) {
    .hero-three-column,
    .layout-body-split,
    .top-executives-grid {
        grid-template-columns: 1fr;
    }
    .members-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ছোট স্মার্টফোন স্ক্রিন (768px এবং তার নিচে) */
@media (max-width: 768px) {
    /* ১. টপবার তথ্য */
    .top-bar {
        font-size: 11px;
        padding: 5px 0;
    }
    .top-bar-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-align: center;
    }
    .top-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    .top-social {
        margin-top: 2px;
    }

    /* ২. ডেস্কটপ হেডার লোগো লুকানো হবে */
    .desktop-only-branding {
        display: none !important;
    }

    /* ৩. মেইন নেভিগেশন বার */
    .main-navbar {
        padding: 8px 0;
    }
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* ৪. বামপাশের মোবাইল লোগো */
    .mobile-only-logo {
        display: flex;
        align-items: center;
    }
    .mobile-only-logo img {
        max-height: 40px;
        width: auto;
        object-fit: contain;
    }
    .mobile-logo-text {
        font-size: 20px;
        font-weight: 800;
        color: var(--brand-red);
        text-decoration: none;
    }

    /* ৫. মেনু লিংক লুকানো */
    .desktop-nav-links {
        display: none !important;
    }

    /* ৬. ডানপাশের ৪টি আইকন */
    .nav-right-icons {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }
    .nav-icon-btn {
        font-size: 16px;
        padding: 5px;
    }

    /* ৭. মোবাইলে মেম্বার গ্রিড: পাশাপাশি ২টি করে কার্ড */
    .members-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* মোবাইলের জন্য কার্ড সাইজিং অপ্টিমাইজেশন */
    .member-single-card {
        padding: 10px 8px 8px !important;
        border-radius: 10px !important;
    }

    .member-avatar {
        width: 80px !important;
        height: 80px !important;
        margin: 2px auto 8px !important;
    }

    .member-meta .name {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    .badge-role {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    .social-mini-icons {
        gap: 5px !important;
        padding-top: 6px !important;
    }

    .social-mini-icons span,
    .social-mini-icons a {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }

    /* ফুটার */
    .footer-details-grid {
        grid-template-columns: 1fr;
    }
}