/* ============================================================
 * 响应式：手机端 / 电脑端小窗适配
 * 文件：css/responsive.css
 * ============================================================ */

/* ============================================================
 * 电脑端小窗适配（把浏览器窗口拉窄到 1200px 以下时生效）
 * 原来的导航按钮是绝对定位在右上角的，窗口一窄就会压到中间的标题上；
 * 这里改成「标题一行、导航一行」，从根上避免遮挡
 * ============================================================ */
@media (max-width: 1200px) {
    .header {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
        padding: 1rem 1rem 1.1rem;
    }
    .title-container {
        width: 100%;
    }
    .nav-buttons {
        position: static;
        transform: none;
        right: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        gap: 1rem;
    }
    .content-section {
        width: 88%;
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .carousel {
        /* 手机上依旧是满屏宽，只是高度按屏幕宽度缩放 */
        width: 100%;
        height: clamp(200px, 62vw, 420px);
        margin-bottom: 24px;
    }
    .carousel-btn {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    .prev-btn {
        left: 10px;
    }
    .next-btn {
        right: 10px;
    }
    .carousel-indicators {
        bottom: 12px;
        gap: 8px;
    }
    .indicator {
        width: 10px;
        height: 10px;
    }
    .footer-warning {
        font-size: 1rem;
        padding: 1.2rem;
    }
    .back-to-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        right: 20px;
        bottom: 20px;
        border-width: 1.5px;
    }
    .header {
        flex-direction: column;
        text-align: center;
        padding-bottom: 1rem;
    }
    .title-container {
        width: 100%;
        margin-bottom: 1rem;
    }
    .nav-buttons {
        position: static;
        transform: none;
        right: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
        gap: 1.2rem;
    }
    .content-title {
        font-size: 1.5rem;
    }
    .content-section {
        width: 95%;
        padding: 15px;
        margin: 40px auto;
    }
    .send-btn {
        width: 100%;
    }
    .dropdown-btn {
        min-width: 80px;
    }
    .intro-content {
        gap: 18px;
        /* 手机上文字和图片改成上下排列，别挤成一窄条 */
        flex-direction: column;
    }
    .intro-text,
    .intro-img {
        flex: none;
        width: 100%;
        min-width: 0;
    }
    .intro-text p {
        font-size: 1rem;
    }
    .links-list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    .link-item {
        padding: 12px;
    }
    .link-item a {
        font-size: 1rem;
    }
    .message-form textarea {
        min-height: 110px;
    }
    .messages-list {
        margin-top: 10px;
    }
}

@media (max-width: 576px) {
    .header {
        padding: 0.8rem 0.5rem;
        gap: 1rem;
    }
    .subtitle {
        font-size: 0.85rem;
    }
    .nav-btn {
        min-width: 60px;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    .nav-buttons {
        gap: 0.8rem;
    }
    .carousel {
        height: clamp(180px, 58vw, 320px);
    }
    .footer-warning {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    .dropdown-btn {
        min-width: 70px;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    .content-section {
        width: 100%;
        border-radius: 0;
        padding: 16px 14px;
        margin: 24px auto;
    }
    .content-title {
        font-size: 1.35rem;
    }
    .links-list {
        grid-template-columns: 1fr 1fr;
    }
    .back-to-top {
        right: 14px;
        bottom: 14px;
    }
}