/* css/colleges.css — 全国院校库列表页（2026-10-24 建，P2 落地页配套）
 * 设计：顶部筛选条（省份胶囊+搜索+层次徽章）固定思路不强求，简单跟随滚动；
 *   按省分组的卡片网格，校徽 36px 左置，校名可点，层次徽章右对齐。 */

/* 本页不引 Bootstrap（无 reboot 重置）——必须自己抹掉 body 默认 8px 边距，
   否则 sticky 顶栏左右上三面会各露出一条白边（2026-10-24 用户截图指出）。
   college_page 引了 Bootstrap 才有 margin:0，此处补上等价效果。 */
html, body { margin: 0; padding: 0; }

.cl-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 14px 60px;
}

/* ---- 头部 ---- */
.cl-hero { padding: 10px 2px 4px; }
.cl-hero h1 { font-size: 22px; margin: 0 0 6px; color: #1a2b4a; }
.cl-hero-sub { margin: 0; font-size: 13px; color: #6b7a90; }

/* ---- 徽章图例（级联口径说明） ---- */
.cl-legend {
    margin: 2px 2px 10px;
    font-size: 12px;
    line-height: 1.7;
    color: #6b7a90;
}
.cl-legend strong { color: #42536b; font-weight: 600; }

/* ---- 筛选条 ---- */
.cl-filters {
    position: sticky;
    top: 48px;               /* 顶栏高度，滚动时筛选条常驻 */
    z-index: 50;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    padding: 8px 0 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #e6ebf3;
}
.cl-search-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cl-search {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid #c9d6e8;
    border-radius: 18px;
    outline: none;
    background: #f7fafd;
}
.cl-search:focus { border-color: #0362e0; background: #fff; }
.cl-count { font-size: 12px; color: #8a99ad; white-space: nowrap; }

.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cl-chip {
    border: 1px solid #d5dfeb;
    background: #fff;
    color: #42536b;
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 14px;
    cursor: pointer;
}
.cl-chip:hover { border-color: #0362e0; color: #0362e0; }
.cl-chip.is-active { background: #0362e0; border-color: #0362e0; color: #fff; }

/* ---- 手机端筛选区折叠开关（2026-10-26） ----
 * 省份 32 个 + 层次 9 个胶囊在手机上要占掉大半屏，故把两组胶囊收进 #clChipBox：
 * 默认收起，只留「搜索框 + 筛选按钮」一行；点按钮向上展开，再点收起。
 * PC 端不启用：.cl-toggle 隐藏、.cl-chipbox 不写任何规则（纯包裹层，布局与旧版逐像素一致）。 */
.cl-toggle { display: none; }

/* ---- 省分组 ---- */
.cl-prov { margin-top: 18px; }
.cl-prov-title {
    font-size: 16px;
    color: #1a2b4a;
    margin: 0 0 8px;
    padding-left: 9px;
    border-left: 4px solid #0362e0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.cl-prov-n { font-size: 12px; color: #8a99ad; font-weight: normal; }

.cl-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 10px;
}
.cl-item { min-width: 0; }
.cl-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid #e6ebf3;
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
    color: #22314a;
    min-width: 0;
}
.cl-link:hover { border-color: #b9cdf0; background: #f5f9ff; }
.cl-badge-img {
    width: 26px; height: 26px;
    flex: none;
    object-fit: contain;
}
.cl-name {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.cl-link:hover .cl-name { color: #0362e0; }

/* ---- 层次徽章（小圆角方块，颜色分层级；一校可多个，容器横排） ---- */
.cl-badges { flex: none; display: flex; gap: 3px; align-items: center; }
.cl-badge {
    flex: none;
    font-size: 10.5px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    color: #fff;
    background: #94a3b8;
    white-space: nowrap;
}
.cl-badge-985 { background: #b91c1c; }
.cl-badge-211 { background: #c2410c; }
.cl-badge-双一流 { background: #0362e0; }
.cl-badge-推免 { background: #0e7490; }
.cl-badge-合作办学 { background: #6d28d9; }
.cl-badge-境外独办 { background: #7c3aed; }
.cl-badge-民办 { background: #64748b; }
.cl-badge-军校 { background: #166534; }

/* ---- 回到顶端漂浮箭头：右下角，滚动过一屏淡入；z-index 让位于顶栏 ---- */
.cl-top {
    position: fixed;
    right: 18px;
    /* 2026-10-25：本页新增底部 Tab Bar（66px），bottom 抬到 66+22=88px 避免被底栏压住 */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(3, 98, 224, .88);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(10, 40, 90, .28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1000;               /* 低于顶栏 1030，别遮顶栏 */
}
.cl-top.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cl-top:active { background: rgba(2, 74, 170, .95); }

.cl-empty { text-align: center; color: #8a99ad; font-size: 14px; padding: 40px 0; }

/* ---- 手机微调 ---- */
@media (max-width: 640px) {
    .cl-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .cl-link { padding: 6px 7px; gap: 7px; }
    .cl-name { font-size: 12.5px; }
    .cl-filters { top: 44px; }
    .cl-hero h1 { font-size: 19px; }

    /* --- 筛选区折叠：搜索框常驻，胶囊区默认收起，点「筛选」向上展开 --- */
    /* 用 grid 而非 flex：搜索框列 1fr 必然吃掉剩余空间，彻底避免 input 在 flex
       下因 min-width:auto 退化成 size 默认宽度而把右侧数量/按钮挤出屏幕。 */
    .cl-search-row {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 6px;
        margin-bottom: 0;
    }
    .cl-search { height: 34px; font-size: 13px; padding: 0 11px; min-width: 0; }
    .cl-count { font-size: 11px; }

    .cl-toggle {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex: none;
        height: 34px;
        padding: 0 10px;
        border: 1px solid #c9d6e8;
        border-radius: 17px;
        background: #fff;
        color: #0362e0;
        font: inherit;
        font-size: 12.5px;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cl-toggle .bi { font-size: 11px; }
    .cl-toggle-caret { transition: transform .24s ease; }
    .cl-filters.is-open .cl-toggle-caret { transform: rotate(180deg); }
    /* 收起后仍能一眼看出「筛过东西」：按钮描边加粗变蓝，文案换成当前条件 */
    .cl-toggle.has-filter { background: #e8f1ff; border-color: #0362e0; }
    .cl-toggle-t {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cl-chipbox {
        overflow: hidden;
        max-height: 0;
        padding-top: 0;
        opacity: 0;
        transition: max-height .26s ease, opacity .2s ease, padding-top .26s ease;
    }
    .cl-filters.is-open .cl-chipbox {
        max-height: min(58vh, 400px);   /* 再高就顶满屏，内部自身滚动 */
        padding-top: 8px;
        opacity: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .cl-filters.is-open { padding-bottom: 8px; }
}