/* ============================================================
   media.css — 全站响应式样式
   断点：1200 / 992 / 768
   ============================================================ */

/* ============================================================
   ≤ 1200px — 中等桌面
   ============================================================ */
@media (max-width: 1200px) {
    /* ---------- 首页：基础规范 & 应用部分 ---------- */
    .base-nav { grid-template-columns: repeat(3, 1fr); }
    .apply-nav { grid-template-columns: repeat(2, 1fr); }

    /* ---------- 二级页：三栏 ---------- */
    .doc-wrap { gap: .35rem; }
    .doc-toc { width: 1.9rem; }

    /* ---------- 模版下载页 ---------- */
    .dl-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ≤ 992px — 小桌面 / 平板横屏
   ============================================================ */
@media (max-width: 992px) {

    /* ==========================================================
       首页
       ========================================================== */
    .header {
        height: 2.6rem;
        padding-top: .6rem;
    }
    .header:before {
        width: 55%;
        clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 100%, 0 100%);
    }
    .header:after {
        width: calc(45% + .5rem);
    }
    .header .logo { height: 1.2rem; }
    .header .logo img { height: 100%; }

    /* 基础规范 */
    .section-base { padding: .7rem 0 .6rem; }
    .base-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: .24rem;
    }
    .base-nav-img { width: 1rem; height: 1rem; }

    /* 应用部分 */
    .apply-nav { grid-template-columns: repeat(2, 1fr); gap: .24rem; }
    .apply-nav-img { width: 1rem; height: 1rem; }

    /* ==========================================================
       页脚
       ========================================================== */
    .footer-in {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
    .footer-brand { align-self: flex-start; }
    .footer-links-wrap {
        width: 100%;
        max-width: none;
    }
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
        gap: .2rem .3rem;
    }

    /* ==========================================================
       二级页通用（左目录 → 抽屉）
       ========================================================== */
    .doc-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 55%;
        max-width: 2.6rem;
        background: #fff;
        z-index: 100;
        padding: .8rem .2rem .2rem;
        transform: translateX(-100%);
        transition: transform .3s;
        overflow-y: auto;
        box-shadow: .08rem 0 .24rem rgba(0, 0, 0, .1);
    }
    .doc-sidebar.open { transform: translateX(0); }
    .doc-sidebar-in { padding: 0; }

    /* 右 TOC → 抽屉 */
    .doc-toc {
        position: fixed;
        right: 0; top: 0; bottom: 0;
        width: 65%;
        max-width: 3rem;
        background: #fff;
        z-index: 100;
        padding: .8rem .2rem .2rem;
        transform: translateX(100%);
        transition: transform .3s;
        overflow-y: auto;
        box-shadow: -.08rem 0 .24rem rgba(0, 0, 0, .1);
    }
    .doc-toc.open { transform: translateX(0); }
    .doc-toc-in { border-left: none; padding: 0; }
    .doc-toc-tit { padding-top: .1rem; }

    .doc-drawer-btn { display: block; }
    .doc-ban { grid-template-columns: repeat(2, 1fr); }

    /* ==========================================================
       模版下载页
       ========================================================== */
    .dl-grid { grid-template-columns: repeat(3, 1fr); }

    /* ==========================================================
       模版下载详情页
       ========================================================== */
    .dt-wrap {
        flex-direction: column;
        gap: .3rem;
    }
    .dt-side {
        position: static;
        width: 100%;
    }
    .dt-related {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .16rem;
    }
    .dt-related li {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* ============================================================
   ≤ 768px — 手机
   ============================================================ */
@media (max-width: 768px) {

    /* 根字号调小，整体缩放 */
    html { font-size: 80px; }

    /* ==========================================================
       首页
       ========================================================== */
    .header {
        height: 2rem;
        padding-top: .4rem;
    }
    .header:before { width: 65%; }
    .header:after { width: calc(35% + .4rem); }
    .header .logo { height: .9rem; }

    /* 基础规范 */
    .base-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: .2rem;
    }
    .base-nav-img {
        width: .9rem;
        height: .9rem;
        margin-bottom: .1rem;
    }
    .base-nav-tit { font-size: .15rem; }

    /* 应用部分 */
    .apply-nav { grid-template-columns: repeat(2, 1fr); gap: .2rem; }
    .apply-nav-img {
        width: .9rem;
        height: .9rem;
        margin-bottom: .1rem;
    }
    .apply-nav-tit { font-size: .15rem; }

    /* 模版下载 tabs */
    .dl-tabs { flex-wrap: wrap; }

    /* ==========================================================
       页脚
       ========================================================== */
    .footer-logo { height: .7rem; }
    .footer-links {
        grid-template-columns: 1fr;
        gap: .1rem;
    }
    .footer-links li a { white-space: normal; }

    /* ==========================================================
       二级页
       ========================================================== */
    .page-header-in {
        flex-direction: column;
        gap: .1rem;
    }
    .page-nav ul li { margin: 0 .12rem; }
    .page-nav a { font-size: .14rem; padding: .08rem 0; }
    .page-logo img { height: .4rem; }

    .doc-tit { font-size: .3rem; }
    .doc-sec-subtit { font-size: .17rem; }

    .doc-color-card { flex-direction: column; }
    .doc-color-info { width: 100%; }
    .doc-color-aux { flex-direction: column; }

    /* ==========================================================
       Lightbox
       ========================================================== */
    .lightbox-img-wrap { max-width: 94vw; max-height: 70vh; }
    .lightbox-img-wrap img { max-height: 70vh; }
    .lightbox-prev,
    .lightbox-next {
        width: .5rem;
        height: .5rem;
        font-size: .3rem;
    }
    .lightbox-prev { left: .1rem; }
    .lightbox-next { right: .1rem; }
    .lightbox-close {
        top: .2rem;
        right: .2rem;
        width: .42rem;
        height: .42rem;
        font-size: .26rem;
    }
    .lightbox-cap { font-size: .14rem; margin-top: .16rem; }

    /* ==========================================================
       模版下载页
       ========================================================== */
    .dl-grid { grid-template-columns: repeat(2, 1fr); }
    .dl-content-hd {
        flex-direction: column;
        align-items: flex-start;
        gap: .06rem;
    }

    /* ==========================================================
       模版下载详情页
       ========================================================== */
    .dt-tit { font-size: .24rem; }
    .dt-preview-item .doc-figure-img { padding: .16rem; }
    .dt-preview-item .doc-figure-img img { max-height: 4rem; }
    .dt-related { grid-template-columns: 1fr; }
}