/* =====================================================================
   frontend-responsive.css  —  mobile responsive overlay (theme-safe)
   রাখুন:  public/assets/front/css/frontend-responsive.css
   index.blade.php এর @section('meta') এ <link> যোগ করা হয়েছে।
   এটি শুধু ছোট স্ক্রিনে কিছু fix করে; বড় স্ক্রিনে থিম আগের মতোই থাকে।
   ===================================================================== */

/* ---- Global safety nets (সব স্ক্রিন) ---- */
img { max-width: 100%; height: auto; }
iframe, video, embed, object { max-width: 100%; }
.container { width: 100%; }

/* ---- CLS: reserve a box for news-card images that use height:auto on mobile.
        object-fit:cover is already set by the theme, so a fixed ratio never
        distorts the picture — it only stops the layout jumping when the image
        finally loads. News cards are 16:9; the main slider is ~20:9. ---- */
.secGllary-image img { aspect-ratio: 20 / 9; }
.tab-image img,
.themesBazar-3 img, .themesBazar-m2 img,
.secOne_image img, .secFive-image img,
.creativeDesign_cat01 img, .creativeDesign_cat02 img, .creativeDesign_cat03 img,
.single-gallery-item img, .latest-news-sec img { aspect-ratio: 16 / 9; }

/* বাংলাদেশ ম্যাপের বিশাল SVG যেন মোবাইলে পেজ ভাঙতে না পারে */
.map-area { padding-left: 10px !important; padding-right: 10px !important; overflow-x: auto; }
.dect-map, .dect-map svg { max-width: 100%; height: auto; }

/* মার্কি নোটিশ বার */
.top-scroll-section3, .scroll-section3, .scroll3-right { max-width: 100%; overflow: hidden; }
.scroll3-right marquee { max-width: 100%; }

/* ---- Tablet (≤ 991px) ---- */
@media (max-width: 991px) {
    .section-one, .section-two, .section-three,
    .section-four, .section-five, .section-six { padding: 12px 0; }

    .creativeDesign_cat02,
    .creativeDesign_cat02 a { font-size: 18px; }

    .secGllary-title, .secGllary-title a { font-size: 17px; line-height: 1.5; }
    .secGllary-details { font-size: 14px; }

    .sectionNews-active.owl-carousel .secGllary-image img { height: auto; }

    /* সাইডবার নিচে নামলে একটু গ্যাপ */
    .sitebar-catWrpp { margin-top: 18px; }
}

/* ---- Mobile (≤ 767px) ---- */
@media (max-width: 767px) {
    body { overflow-x: hidden; }

    .container,
    .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* বড় হেডিং ছোট করা */
    h1.creativeDesign_cat02,
    .creativeDesign_cat02,
    .creativeDesign_cat02 a { font-size: 16px; line-height: 1.5; }
    .creativeDesign_cat02 span { float: none; display: inline-block; margin-top: 4px; }

    /* মূল স্লাইডার + টাইটেল */
    .secGllary-title, .secGllary-title a { font-size: 16px; }
    .secGllary-details { font-size: 13.5px; -webkit-line-clamp: 3; }

    /* Recent / Popular ট্যাব - পাশাপাশি ২ কলামে থাকবে (আগে .nav-link এ flex
       বসানো ছিল, কিন্তু আসল flex child হলো .nav-item(li), .nav-link তার
       ভেতরের div -- তাই আগের flex rule কোনো effect ফেলছিল না এবং টেক্সট
       জায়গা না পেয়ে wrap করে উপর-নিচ হয়ে যাচ্ছিল) */
    .recentPopular .nav-pills { flex-wrap: nowrap; gap: 6px; }
    .recentPopular .nav-item { flex: 0 0 calc(50% - 3px); max-width: calc(50% - 3px); }
    .recentPopular .nav-link { font-size: 13px; padding: 6px 8px; text-align: center; width: 100%; box-sizing: border-box; }
    .tab-item .tab_hadding,
    .tab-item .tab_hadding a { font-size: 14px; line-height: 1.5; }
    .tab-image img { width: 100%; height: auto; }

    /* কার্ড গ্রিড ব্লকগুলো একটু কম্প্যাক্ট */
    .themesBazar-3, .themesBazar-m2 { margin-bottom: 14px; }
    .secOne_title, .secOne_title a,
    .secFive-title, .secFive-title a { font-size: 14.5px; line-height: 1.5; }

    /* ভিডিও সেকশন */
    .section-four .video-icon1,
    .video-icon1 { transform: scale(.8); }

    /* "এক নজরে বাংলাদেশ" ম্যাপ ব্লক */
    .map-area { padding: 6px !important; }
    .division { padding: 16px 12px; }
    .input-division select { width: 100%; float: none; margin: 6px 0; }

    /* ইমেজ অ্যালবাম / গ্যালারি */
    .more_news, .more_news a { font-size: 14px; }

    /* নতুন "সর্বশেষ সংবাদ" সেকশন (extra guard) */
    .latest-news-sec { padding: 12px 0; }
}

/* ---- Small mobile (≤ 480px) ---- */
@media (max-width: 480px) {
    .creativeDesign_cat02, .creativeDesign_cat02 a { font-size: 15px; }
    .recentPopular .nav-link { font-size: 12px; padding: 6px 4px; }
    .scroll3-left { display: none; } /* ছোট স্ক্রিনে "নোটিশ" লেবেল লুকানো */
}

/* pagination মোবাইলে wrap */
.pagination { flex-wrap: wrap; }