/* =========================================================
   style1.css — 响应式版本
   保留原 PC 端外观；加入移动端/平板自适应。
   关键点：所有页面共用本文件，修改一次即可让 59 页全部自适应。
   ========================================================= */

/* ---------- 基础重置 ---------- */
* {
    box-sizing: border-box;          /* 宽度计算更可控，避免溢出 */
    line-height: 180%;
    background-color: white;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 所有图片默认自适应容器，防止大图撑破布局 */
img {
    max-width: 100%;
    height: auto;
}

/* ---------- 页面主体结构（PC 端保持原样） ---------- */
header {
    background-color: white;
    clear: both;
    text-align: center;              /* 居中对齐 */
    padding: 12px 16px;
}

aside {
    width: 20%;
    background-color: white;
    float: left;
    line-height: 200%;
    padding: 0 10px;
}

nav {
    line-height: 200%;               /* 定义行高 */
    color: blue;
}

section {
    width: 75%;
    float: right;
    padding: 5px 16px;
}

footer {
    background-color: white;
    clear: both;                     /* 不允许浮动 */
    text-align: center;              /* 文字居中 */
    line-height: 200%;
    padding: 16px;
}

a:link {
    text-decoration: none;           /* 清除下画线 */
}

p {
    color: black;
    line-height: 150%;
    font-size: 20px;
}

li {
    display: inline;
}

table {
    line-height: 50%;
}

figcaption {
    font-size: 16px;
    color: blue;
    line-height: 100%;
}

/* ---------- 顶部主导航：横排、可换行、居中 ---------- */
header nav ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;                 /* 窄屏自动换行 */
    justify-content: center;
    gap: 4px 16px;
}
header nav li {
    display: inline-block;
}

/* ---------- 侧边分类导航：默认竖排（原 <br> 已换行） ---------- */
aside nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
aside nav li {
    display: block;
}

/* =========================================================
   响应式断点
   ========================================================= */

/* 平板：字号略收窄，两栏布局保持但更紧凑 */
@media (max-width: 992px) {
    p { font-size: 18px; }
    aside { width: 22%; }
    section { width: 73%; }
}

/* 手机 / 小平板：两栏堆叠为单栏，导航换行，图片块级居中 */
@media (max-width: 768px) {
    aside,
    section {
        width: 100% !important;      /* 取消浮动两栏，改为上下堆叠 */
        float: none !important;
    }

    aside {
        border-bottom: 1px solid #e5e7eb;
        margin-bottom: 14px;
        line-height: 180%;
        padding: 0 12px 10px;
    }

    /* 侧边导航在手机上改为横向自动换行，节省纵向空间 */
    aside nav li {
        display: inline-block;
        margin: 3px 10px 3px 0;
    }

    header {
        padding: 10px 12px;
    }
    header h1 { font-size: 22px; margin: 6px 0; }
    header h2 { font-size: 16px; margin: 4px 0; }
    header img {
        width: 120px !important;
        height: auto !important;
        float: none !important;
    }

    footer { padding: 14px 12px; }

    p { font-size: 16px; line-height: 160%; }

    /* 产品图：取消左浮动与固定高度，改为块级居中，避免文字环绕错位 */
    section img {
        float: none !important;
        display: block;
        margin: 0 auto 12px;
        height: auto !important;
        max-width: 100%;
    }

    figcaption { font-size: 14px; }
}

/* 小屏手机：进一步缩小标题与导航字号 */
@media (max-width: 480px) {
    header h1 { font-size: 19px; }
    header h2 { font-size: 14px; }
    header nav li { font-size: 14px; }
    p { font-size: 15px; }
    aside nav li { font-size: 14px; margin: 2px 8px 2px 0; }
}