/* ============================================
   responsive.css
   সরকারি করিম উদ্দিন পাবলিক কলেজ — মোবাইল রেসপন্সিভ
   এই ফাইল frontend.css এর পরে লোড করতে হবে।
   ডেস্কটপ ডিজাইন অপরিবর্তিত থাকবে।
   ============================================ */

/* ---------- গ্লোবাল সুরক্ষা ---------- */
body { max-width: 100%; }
.site-wrapper { overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* ---------- ফুটার (ডেস্কটপ মান, আগের ইনলাইন স্টাইল থেকে) ---------- */
.site-wrapper .footer > .footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 1.5rem;
    align-items: start;
}
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-logo { height: 4rem; width: 4rem; background: #fff; padding: 4px; border-radius: 50%; margin-bottom: 1rem; }
.footer-brand h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .3rem; color: #fff; line-height: 1.3; }
.footer-brand p { font-size: .9rem; color: #e0f2fe; margin: 0 0 1rem; }
.footer-social { display: flex; gap: .75rem; justify-content: center; }
.footer-social a {
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: transform .2s;
}
.footer-social a:hover { transform: translateY(-3px); }
.footer-social .fb { background: #1877f2; }
.footer-social .yt { background: #ff0000; }
.footer-social .in { background: #0a66c2; }
.footer-col h4 {
    font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: #fff;
    border-bottom: 2px solid rgba(255,255,255,.3); padding-bottom: .5rem; display: inline-block;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.footer-col li, .footer-col li a { color: #e0f2fe; font-size: .85rem; }
.footer-col li a { display: flex; align-items: center; gap: .5rem; }
.footer-col li { display: flex; gap: .6rem; align-items: center; }
.footer-col li span { word-break: break-word; }
.footer-divider { height: 1px; background: rgba(255,255,255,.2); width: 100%; margin-bottom: 1rem; }
.footer-copy { text-align: center; font-size: .8rem; color: #bae6fd; }

/* ---------- মোবাইল মেনু বার (ডেস্কটপে লুকানো) ---------- */
.nav-mobile-bar { display: none; }

/* ============================================
   ট্যাবলেট ও মোবাইল মেনু  (≤ 1023px)
   ============================================ */
@media (max-width: 1023px) {

    /* ---- হ্যামবার্গার মেনু ---- */
    .nav-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .45rem 16px;
        color: #fff;
        font-weight: 600;
    }
    .nav-toggle-btn {
        background: rgba(255,255,255,.18);
        border: 0;
        color: #fff;
        width: 42px; height: 38px;
        border-radius: 6px;
        font-size: 1.2rem;
        display: inline-flex; align-items: center; justify-content: center;
    }

    .main-nav .main-nav-inner {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        border-top: 1px solid rgba(255,255,255,.2);
    }
    .main-nav.open .main-nav-inner { display: flex; }

    .main-nav .main-nav-inner > a,
    .main-nav .nav-dropdown > button {
        width: 100%;
        padding: .8rem 16px;
        font-size: .95rem;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    /* সরাসরি লিংক (প্রচ্ছদ, নোটিশ, যোগাযোগ): আইকন ও লেখা পাশাপাশি বামে */
    .main-nav .main-nav-inner > a {
        justify-content: flex-start;
        gap: .6rem;
    }
    /* ড্রপডাউন বাটন: লেখা বামে, তীর ডানে */
    .main-nav .nav-dropdown > button {
        justify-content: space-between;
        text-align: left;
    }
    .main-nav .nav-dropdown { width: 100%; }

    .main-nav .nav-dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        border-radius: 0;
        min-width: 0;
        padding: 0;
        background: rgba(0,0,0,.14);
    }
    .main-nav .nav-dropdown:hover .nav-dropdown-menu { display: none; }
    .main-nav .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .main-nav .nav-dropdown-menu a {
        color: #fff;
        padding: .7rem 16px .7rem 2rem;
        font-size: .9rem;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .main-nav .nav-dropdown-menu a:hover { background: rgba(255,255,255,.12); color: #fff; padding-left: 2rem; }
    .main-nav .nav-dropdown > button i { transition: transform .2s; }
    .main-nav .nav-dropdown.open > button i { transform: rotate(180deg); }

    /* ---- নোটিশ বোর্ড + অধ্যক্ষ: এক কলাম (frontend.css এ !important আছে, তাই এখানেও লাগবে) ---- */
    .notice-college-grid { grid-template-columns: 1fr !important; }
    .notice-college-grid .principal-card { max-width: 340px; width: 100%; margin: 0 auto; }

    /* ---- নিচের গ্রিড (একাডেমিক + সম্পাদক) ---- */
    .bottom-grid-section { padding: 0 16px !important; margin: 1rem auto !important; }
    .bottom-right-col .principal-card { margin: 0 auto; }
    .academic-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- ফুটার ---- */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-brand { grid-column: 1 / -1; }

    /* ---- ভেতরের পেজ ---- */
    .about-page-section { padding: 2rem 20px !important; }
    .gallery-page, .contact-page { padding: 1.5rem 20px !important; }
    .teacher-profile-section { padding: 1.5rem 20px 3rem !important; }
    .principal-message-page { padding: 1.5rem 20px !important; }
    .teacher-council-page .wrapper { margin: 1rem 0 !important; }
}

/* ============================================
   মোবাইল (≤ 767px)
   ============================================ */
@media (max-width: 767px) {

    /* ---- হেডার ---- */
    .header-main { padding: .6rem 0; }
    .header-content h1 { font-size: 1.05rem; line-height: 1.3; }
    .header-content .address { font-size: .78rem; }
    .header-content .info-line { font-size: .68rem; gap: .2rem .7rem; }
    .header-logo { height: 2.9rem; width: 2.9rem; }

    /* ---- স্লাইডার ---- */
    .hero-slider { height: 210px; }
    .hero-content { padding-bottom: 2.2rem; }
    .hero-text h1 { font-size: 1.05rem; line-height: 1.35; }
    .hero-dots { bottom: .6rem; }
    .hero-dot { width: 9px; height: 9px; }
    .hero-dot.active { width: 22px; }

    /* ---- নোটিশ মার্কি ---- */
    .notice-marquee-inner { height: 42px !important; padding: 0 12px !important; }
    /* মোবাইলে "সর্বশেষ নোটিশ" লেখা লুকিয়ে শুধু আইকন রাখা */
    .marquee-label { font-size: 0 !important; gap: 0; }
    .marquee-label i { font-size: 1.1rem !important; }

    /* ---- নোটিশ বোর্ড ---- */
    .notice-college-section { padding: 1rem 0; }
    .notice-board-header { flex-direction: row; align-items: center; padding: .6rem .9rem; }

    .notice-filters {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: .6rem .9rem !important;
        gap: .4rem !important;
        scrollbar-width: none;
    }
    .notice-filters::-webkit-scrollbar { display: none; }
    .notice-filters > span { display: none; }
    .filter-tab { flex: none; }

    .notice-row { flex-wrap: wrap; row-gap: .35rem; align-items: center; }
    .notice-row .notice-title {
        order: 10;
        flex: 1 1 100%;
        white-space: normal;
        font-size: .85rem;
        line-height: 1.5;
    }
    .notice-row .notice-pdf { margin-left: auto; order: 5; }
    .notice-row:hover { margin: 0; padding-left: 0; padding-right: 0; }

    /* ---- অধ্যক্ষ/সম্পাদক ছবি ---- */
    .principal-passport-img { width: 160px !important; height: 190px !important; }
    .bottom-right-col .principal-card { max-width: 100%; }

    /* ---- একাডেমিক প্রোগ্রাম ---- */
    .academic-header { flex-wrap: wrap !important; }
    .academic-header .btn-academic-main { width: 100%; justify-content: center; }
    .academic-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .academic-item h3 { font-size: .9rem !important; }
    .academic-item p { font-size: .75rem !important; }
    .academic-icon { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }

    /* ---- সংবাদ ও গ্যালারি ---- */
    .news-item:hover { margin: 0; padding-left: 0; padding-right: 0; background: none; }
    .news-item-image { width: 84px; height: 62px; }
    .news-item-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .news-item-title { white-space: normal; }
    .gallery-grid-ng { grid-template-columns: repeat(2, 1fr); }

    /* ---- ফুটার ---- */
    .site-wrapper .footer > .footer-inner { padding: 1.5rem 16px; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-col { text-align: left; }

    /* ---- শিক্ষক পরিষদ ---- */
    .teacher-council-page { padding: 1rem 12px !important; }
    .teacher-council-page .principal { width: 100% !important; }
    .teacher-council-page .grid { max-width: 100%; }

    /* ---- শিক্ষকমণ্ডলী ---- */
    .teachers-page-section { padding: 1.5rem 12px; }
    .page-title { font-size: 1.4rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* ---- শিক্ষক প্রোফাইল ---- */
    .profile-img-wrapper { width: 150px; height: 180px; }
    .profile-tabs { overflow-x: auto; }
    .profile-tab-item { white-space: nowrap; padding: .7rem 1rem; }
    .teacher-profile-section { padding: 1rem 12px 2.5rem !important; }

    /* ---- প্রতিষ্ঠানের ইতিহাস ---- */
    .about-page-section { padding: 1rem 12px !important; }
    .about-top-grid { padding: 1rem; gap: 1rem; }
    .about-main-title { font-size: 1.25rem; }
    .about-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }

    /* ---- অধ্যক্ষের বাণী ---- */
    .principal-message-page { padding: 1rem 12px !important; }
    .principal-message-page .wrapper { flex-direction: column !important; }
    .principal-message-page .left {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .principal-message-page .photo { max-width: 280px; margin: 0 auto; }
    .principal-message-page .right { padding: 16px 14px; }
    .principal-message-page .bottom { flex-direction: column; align-items: stretch; }
    .principal-message-page .body-content { text-align: left; }

    /* ---- গ্যালারি পেজ ---- */
    .gallery-page { padding: 1rem 12px !important; }
    .gallery-page .card-header h2 { font-size: 18px; }

    /* ---- যোগাযোগ ---- */
    .contact-page { padding: 1rem 12px !important; }
    .contact-page .wrap { grid-template-columns: 1fr; }
    .contact-page .loc { grid-column: auto; }

    /* ---- শিক্ষার্থী সংখ্যা ---- */
    .student-count-page { padding: 1rem 12px !important; }
    .sc-summary { grid-template-columns: 1fr; }
    .sc-title { font-size: 1.05rem !important; }

    /* ---- নোটিশ ডিটেইলস ও সকল নোটিশ ---- */
    .notice-details-section { padding: 1rem 12px 2rem; }
    .notice-details-title { font-size: 1.2rem; }
    .notice-details-content { overflow-wrap: anywhere; }
    .notice-details-content table { display: block; overflow-x: auto; }
    .notice-details-content img { height: auto; }
    .all-notices-section { padding: 1.25rem 12px; }
    .pagination { flex-wrap: wrap; }

    /* ---- একাডেমিক পরিষদ ---- */
    .council { padding: 18px 12px 36px; }
    .chair-photo { width: 130px; height: 150px; }
    .chair-contact div { white-space: normal; }
}

/* ============================================
   ছোট মোবাইল (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
    .header-content h1 { font-size: .92rem; }
    .header-content .info-line span { white-space: normal; }
    .header-logo { height: 2.5rem; width: 2.5rem; }

    .hero-slider { height: 180px; }

    .gallery-grid-ng { gap: .35rem; }
    .about-gallery-grid { grid-template-columns: 1fr 1fr; }

    .notice-date-pill { font-size: .65rem; }
    .news-item-image { width: 72px; height: 56px; }

    /* ছোট ফোনে একাডেমিক কার্ড এক কলাম */
    .academic-grid { grid-template-columns: 1fr !important; }
    .academic-item { flex-direction: row !important; text-align: left !important; justify-content: flex-start !important; padding: .7rem .8rem !important; }
    .academic-item h3, .academic-item p { text-align: left !important; }
    .academic-icon { margin: 0 !important; }
}