/* ============================================================
   mobile.css — responsive overrides for the legacy fixed-width
   hh.md desktop layout. Everything is scoped to narrow viewports,
   so desktop (>820px) renders exactly as before.
   Phase 0 — structural reflow. Iterated visually at 390px.
   ============================================================ */

/* hamburger button is mobile-only */
.navBurger { display: none; }

@media (max-width: 820px) {

    /* --- global: drop the 965px floor that forces horizontal scroll --- */
    html, body {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    body, body * { box-sizing: border-box; }
    img { max-width: 100% !important; height: auto !important; }
    table { max-width: 100% !important; }

    /* --- neutralise the fixed-width structural wrappers --- */
    .topBar, .topBarInner,
    .headPanel, .headPanel > div, .headPanel .search,
    #container, #wrapper, #content,
    .adBlockHor, .adBlockHor.big, .horizontalAdsBlock,
    #rb, .re, #right_b, #right_b.vip_list, #right_b.add_vac,
    .table-advertising, .table-advertising2, .iute-credit {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
    }
    #container, .headPanel .search, .topBarInner {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --- top bar nav tabs: let them wrap instead of clipping --- */
    .topBar, .topBarInner { height: auto !important; white-space: normal !important; }
    .topBarInner ul, .topBar ul { white-space: normal !important; }
    .topBarInner li, .topBar li {
        float: none !important;
        display: inline-block !important;
        white-space: nowrap;
    }

    /* --- header: stack logo over a full-width search field --- */
    .headPanel .search .logo,
    .headPanel .search .searchForm {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 8px 0 !important;
        text-align: center;
    }
    .headPanel .search .searchForm {
        white-space: normal !important;
    }
    .headPanel .search .searchForm input[type="text"],
    .headPanel .search .searchForm .text,
    .headPanel .search .searchForm .customSelect,
    .searchForm input.search {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #logoHH { font-size: 44px !important; }
    #logoMD { font-size: 34px !important; }

    /* --- multi-column / floated content blocks collapse to one column --- */
    .left_bar, #right_b, .col, .leftColumn, .rightColumn {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- ad blocks must not exceed the viewport --- */
    .adBlockHor img, .horizontalAdsBlock img, .adBlockHor.big img {
        width: auto !important;
        max-width: 100% !important;
    }

    /* --- content pages (#container = 650px) --- */
    #container #logo img { max-width: 100% !important; }
    #container #content > div { float: none !important; width: 100% !important; }

    /* --- top nav: collapse the cluttered tab row into a hamburger menu --- */
    .navTabs {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 44px;
        overflow: visible !important;
        position: relative;
        background: #f5f5fa;
        border-bottom: 1px solid #d9d9ea;
    }
    .navBurger {
        display: block;
        width: 30px;
        padding: 13px 12px;
        cursor: pointer;
    }
    .navBurger span {
        display: block;
        height: 3px;
        background: #FF8C00;
        border-radius: 2px;
        margin: 4px 0;
    }
    .navTabs ul {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #e3e3f0;
    }
    .navTabs.navOpen ul { display: block !important; }
    .navTabs li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid #ececf6 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .navTabs li a {
        display: inline-block !important;
        padding: 13px 16px !important;
        font-size: 16px !important;
        margin: 0 !important;
    }
    .navTabs li a.active { border-radius: 4px; }

    /* --- homepage category block (toggler 975px, slider 1000px) --- */
    .cat_toggle { height: auto !important; }
    .cat_toggle div#toggler { width: auto !important; max-width: 100% !important; }
    .cat_toggle ul li { padding: 8px 10px !important; }
    #slider_content .sc_block,
    #slider_content .sc_block.cat_ul {
        width: auto !important;
        max-width: 100% !important;
        text-align: left !important;
    }
    /* category list → single fluid column */
    #slider_content .sc_block table,
    #slider_content .sc_block td { display: block !important; width: 100% !important; }
    .cat_ul, .cat_ul > div { float: none !important; width: 100% !important; }

    /* --- VIP banner / ads: never exceed the viewport --- */
    .vip_block_main, .vip_ad_n {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .vip_ad_n img, .vip_logo_n img { max-width: 100% !important; }

    /* --- result list wrapper (max-width:975px already fluid) --- */
    .lineTab .nLContent { max-width: 100% !important; padding: 0 8px !important; }
    .result_block { word-wrap: break-word; overflow-wrap: break-word; }
    .r_right { float: none !important; }
}

/* tighter spacing on real phones */
@media (max-width: 480px) {
    .topBarInner li a { font-size: 13px !important; }
    #logoHH { font-size: 38px !important; }
    #logoMD { font-size: 28px !important; }
}