/* --- 响应式设计 --- */

/* 基本的图片响应式处理 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 针对平板电脑和较小屏幕 (例如宽度小于 768px) */
@media (max-width: 768px) {
    /* --- 导航栏调整 --- */
    /* 注意：这里的 display: block 会让导航垂直排列，
       如果你希望在 768px 时仍保持水平但缩小间距，
       请注释掉或移除下面的 display: block 和 text-align: center */
    header nav ul {
        padding: 0;
        /* flex-wrap: wrap; /* 如果希望换行而不是垂直排列，可以考虑这个 */
        /* justify-content: center; */
    }

    header nav ul li {
         display: block; /* 使导航项垂直排列 */
         margin: 10px 0; /* 垂直排列时的上下间距 */
         text-align: center; /* 居中显示 */
        /* 如果保持水平排列，则使用下面的 margin */
        /* margin: 0 5px; */ /* 减小导航项之间的水平间距 */
    }

    /* --- 主要内容区域调整 --- */
    main {
        padding: 15px;
        margin: 15px auto;
        /* border-radius: 8px; */ /* 这个可能不需要 */
    }

    /* 调整标题大小 */
    h1 { font-size: 1.8em; } /* 已包含 header h1 的调整 */
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.3em; }
    main section h2 { /* 明确指定 main 内的 h2 */
        font-size: 1.6em; /* 与上面 h2 重复，保留一个即可 */
        margin-bottom: 15px;
    }
    main section h3 { /* 明确指定 main 内的 h3 */
        font-size: 1.3em; /* 与上面 h3 重复，保留一个即可 */
        margin-top: 20px;
        margin-bottom: 12px;
    }


    /* --- 师资列表调整 --- */
    .teacher-list {
        display: block; /* 列表项垂直排列 */
        /* gap: 20px; */ /* display: block 时 gap 无效 */
    }

    .teacher-card {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        padding: 20px;
    }

    .teacher-card img {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }

    /* --- 页脚调整 --- */
    .qr-code-container {
        gap: 20px;
        padding: 0 10px;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 居中显示 */
    }

    .qr-code-item {
         flex-basis: 100px;
    }

    /* --- 字体大小调整 --- */
    body {
        font-size: 15px;
    }

    p {
        line-height: 1.7;
    }

    /* --- 学员风采页调整 --- */
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .photo-grid img {
        height: 150px;
    }

    /* --- 校区导航页调整 --- */
    .location-card {
        padding: 20px;
    }

    /* --- 返回顶部按钮调整 --- */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* --- 表格响应式调整 --- */
    table thead {
        display: none;
    }

    table tr {
        margin-bottom: 15px;
        display: block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px;
    }

    table td {
        display: block;
        text-align: right;
        padding-left: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative;
        border-bottom: 1px solid #eee;
        min-height: 2em;
    }

    table td:last-child {
        border-bottom: 0;
    }

    table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        text-align: left;
        margin-bottom: 5px;
        position: static;
        width: auto;
        padding-right: 0;
        white-space: normal;
        color: #333;
    }

    table td span {
        display: block;
        text-align: right;
    }

    /* --- 页眉特定调整 (合并到此) --- */
    header h1 {
        font-size: 1.8em; /* 已在上面设置 */
        margin-bottom: 5px;
    }

    header .slogan {
        font-size: 1.0em;
        margin: 5px 0 10px;
    }

    header nav ul li a {
        font-size: 0.9em;
        padding: 5px 8px;
    }

    /* --- 首页卡片和间距调整 (合并到此) --- */
    .featured-courses, .testimonial-grid {
        gap: 10px;
    }

     .featured-course-card, .testimonial-card {
        padding: 12px;
    }
} /* <<< 结束 @media (max-width: 768px) */


/* 针对更小的屏幕 (例如宽度小于 480px) */
@media (max-width: 480px) {
    /* 调整标题大小 */
    h1 { font-size: 1.6em; } /* 已包含 header h1 的调整 */
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.2em; }
    main section h2 { /* 明确指定 main 内的 h2 */
        font-size: 1.4em; /* 与上面 h2 重复，保留一个即可 */
    }
    main section h3 { /* 明确指定 main 内的 h3 */
        font-size: 1.2em; /* 与上面 h3 重复，保留一个即可 */
    }

    /* --- 师资列表调整 --- */
    .teacher-card {
        width: 95%;
        padding: 15px;
    }

    .teacher-card img {
        width: 80px;
        height: 80px;
    }

    /* --- 按钮调整 --- */
    .button-primary {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    /* --- 页脚调整 --- */
    .qr-code-container {
        gap: 15px;
    }

    .qr-code-item {
         flex-basis: 80px;
    }

    .qr-code-image {
        width: 80px;
        height: 80px;
    }

    /* --- 学员风采页进一步调整 --- */
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }

    .photo-grid img {
        height: 130px;
    }

    /* --- 首页特定调整 --- */
    #call-to-action {
        padding: 25px 15px;
    }

    #call-to-action h3 {
        font-size: 1.4em; /* 注意：这个比上面的 h3 (1.2em) 要大 */
    }

    /* --- 页眉特定调整 (合并到此) --- */
     header h1 {
        font-size: 1.5em; /* 覆盖上面的 h1 (1.6em) */
    }
     header .slogan {
        font-size: 1.07em;
    }
    /*  (删除下面这个空的规则块)
    header nav ul li {
        /* 如果在 768px 时是 display: block，这里无需修改 margin */
        /* 如果在 768px 时是水平排列，则使用下面的 margin */
        /* margin: 0 3px; * /
    }
    */
    header nav ul li a {
        font-size: 0.85em;
        padding: 4px 6px;
    }

    /* 如果导航项在 768px 时仍是水平且在 480px 时换行，
       可以取消下面的注释强制垂直排列 */
    /*
    header nav ul {
        text-align: center;
    }
    header nav ul li {
        display: block; // 让列表项独占一行
        margin: 5px 0;  // 添加垂直间距
    }
    */

} /* <<< 结束 @media (max-width: 480px) */

/* --- 删除所有重复的 @media 块和第 299 行附近的多余 '}' --- */
/* ... 确保文件末尾没有其他多余内容 ... */
/* 品牌更新后的移动端溢出修正 */
*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    header {
        width: 100%;
        overflow: hidden;
    }

    .site-brand {
        max-width: 100%;
    }

    header .slogan {
        max-width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    header nav ul {
        justify-content: center;
        flex-wrap: wrap;
        padding: 0 12px;
    }

    main {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        margin: 15px auto;
        padding: 20px 12px;
    }

    .course-recommendation {
        max-width: 100%;
        overflow: hidden;
    }

    .featured-courses {
        width: 100%;
        gap: 16px;
        align-items: stretch;
    }

    .featured-course-card {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    main {
        width: 100%;
        max-width: 100%;
        margin: 15px 0;
        border-radius: 0;
    }

    .featured-course-card {
        max-width: 100%;
    }
}