/* 宽屏 */
@media (min-width:500.01px) and (max-width:1120px) {
    .header .container {
        justify-content: space-between;
        padding: 10px;
    }

    .menu {
        order: 3;
        margin-right: 0;
        margin-top: 20px;
        justify-content: space-between;
        width: 100%;
    }

    div.search {
        order: 2;
    }

    .main .container {
        padding: 0 10px;
    }

    .main .left {
        width: 62%;
    }

    .mobile {
        margin-left: auto;
    }
}

/* 主内容小于768时一列 */
@media (max-width:768px) {
    .main .container {
        flex-direction: column;
        padding: 0 10px;
    }

    .main .right,
    .main .left {
        width: 100%;
    }
}

/* 手机开始 */
@media (max-width: 500px) {
    .header .container {
        justify-content: space-between;
        position: relative;
        padding: 10px;
    }

    /* 抽屉：从页头底边一直铺到屏幕底部（高度由 --header-h 动态校准），内容超出时内部滚动 */
    .menu {
        order: 3;
        flex-direction: column;
        flex-wrap: nowrap; /* 继承自宽屏的 wrap 会让项目横向换列，必须关掉 */
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        width: 70%;
        height: calc(100vh - var(--header-h, 60px));
        height: calc(100dvh - var(--header-h, 60px));
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background-color: var(--color-primary);
        border-top: 1px dashed rgb(38, 21, 82);
        box-shadow: 4px 0 16px rgba(0, 0, 0, .25);
        padding: 5px 20px calc(20px + env(safe-area-inset-bottom));
        z-index: 999;
        transform: translateX(-120%);
        visibility: hidden;
        transition: transform .45s ease-out, visibility 0s linear .45s;
    }

    .menu.show {
        transform: translateX(0);
        visibility: visible;
        transition: transform .45s ease-out, visibility 0s linear 0s;
    }

    .menu li {
        width: 100%;
        flex-shrink: 0; /* 不允许被容器压缩，超出部分交给抽屉滚动 */
        padding: 5px 10px;
    }

    .menu li a {
        display: block;
        padding: 8px 10px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* 一级项：文字 + 右侧箭头，子菜单整行换行到下方 */
    .menu li:has(.menu-sub) {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
    }

    .menu li:has(.menu-sub) > a {
        align-self: stretch;
        flex-grow: 1;
    }

    /* 箭头：跟父项同一行居中，展开时旋转 */
    .menu > li > .bi-caret-down-fill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0 -10px 0 0;
        transition: transform .3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .menu > li.open > .bi-caret-down-fill {
        transform: rotate(180deg);
    }

    /* 子菜单：默认收起但保留在布局里，靠 max-height 做展开动画 */
    .menu .menu-sub {
        display: block;
        position: static;
        z-index: auto;
        width: 100%;
        min-width: 0;
        left: auto;
        top: auto;
        padding: 0 10px;
        border-radius: 0;
        background-color: transparent;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease, padding .3s ease;
    }

    .menu .menu-sub li {
        padding: 0;
    }

    .menu .menu-sub li a {
        display: block;
        padding: 8px 10px 8px 26px;
        font-size: 15px;
        color: rgba(255, 255, 255, .88);
    }

    /* 展开态：父项高亮 + 子菜单推下来 */
    .menu li.open > .menu-sub {
        max-height: 320px;
        padding: 4px 10px 10px;
    }

    .menu li.open {
        background-color: rgba(0, 0, 0, .18);
        border-radius: 5px;
    }

    div.search {
        order: 2;
        top: 100%;
        transform: translateX(-200%);
        transition: 0.5s ease-out;
        max-height: 0;
        overflow: hidden;
    }

    div.search.show {
        height: auto;
        max-height: 500px;
        transform: translateX(0);
        width: 100%;
        margin-top: 15px;
    }

    div.search form input,
    div.search form button {
        height: 42px;
    }

    div.search form input {
        flex-grow: 1;
    }

    .mobile .bi {
        display: inline-block;
        border: 1px solid #330099;
        margin-right: 0;
    }

    /* 抽屉/搜索展开时锁住页面滚动 */
    body.nav-open {
        overflow: hidden;
    }
}