/* ============================================================
   responsive-fixes.css
   响应式重构补丁 — 覆盖移动端/平板/桌面端断点适配
   断点规范：
     - Mobile  : ≤ 480px
     - Tablet  : 481px ~ 768px
     - Desktop : 769px ~ 1024px
     - Wide    : ≥ 1025px
   ============================================================ */

/* ===== 1. 全局基础 ===== */

/* 修复 iOS Safari background-attachment: fixed 性能问题 */
@media (max-width: 768px) {
    .ai-hero,
    .section-hero {
        background-attachment: scroll !important;
    }
}

/* 触摸目标最小尺寸 (WCAG 2.5.5) */
@media (max-width: 768px) {
    .btn,
    .nav-link,
    .faq-question,
    .contact-source-option,
    .arrow-page-btn,
    .slider-controls button,
    .read-more-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ===== 2. Header / Navigation ===== */

/* 平板端：缩小 header 间距 */
@media (max-width: 1024px) and (min-width: 769px) {
    .header {
        padding: 0.75rem 0;
    }

    .header-top {
        margin-bottom: 0.35rem;
    }

    .hospital-name {
        font-size: 1.3rem;
    }

    .hospital-english {
        font-size: 0.65rem;
    }

    .header-contact {
        gap: 1rem;
    }

    .contact-item {
        font-size: 0.8rem;
    }

    .nav-list {
        gap: 1.2rem;
    }

    .nav-link {
        font-size: 0.9rem;
    }
}

/* 移动端：汉堡菜单 + 抽屉式导航 */
@media (max-width: 768px) {
    .header {
        padding: 0.5rem 0;
    }

    .header-top {
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    /* 隐藏英文副标题节省空间 */
    .hospital-english {
        display: none;
    }

    /* 联系信息：仅显示电话，隐藏地址 */
    .header-contact {
        gap: 0.75rem;
    }

    .header-contact .contact-item:last-child {
        display: none;
    }

    .contact-item {
        font-size: 0.8rem;
    }

    .contact-item span {
        white-space: nowrap;
    }

    .hospital-name {
        font-size: 1.1rem;
    }

    .logo {
        height: 1.6rem;
    }

    /* 显示汉堡按钮 */
    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-menu-toggle span {
        width: 1.4rem;
        height: 2.5px;
    }

    /* 导航列表：抽屉式 */
    .nav-list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        max-width: 320px;
        height: 100vh;
        flex-direction: column;
        background: #fff;
        padding: 4rem 1.5rem 2rem;
        gap: 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        z-index: 999;
    }

    .nav-list.active {
        right: 0;
    }

    .nav-list li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-link {
        display: block;
        padding: 1rem 0.5rem;
        font-size: 1rem;
        text-align: left;
    }

    .nav-link::after {
        display: none;
    }

    /* 汉堡按钮动画 */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* 遮罩层 */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 998;
    }

    .nav-overlay.active {
        display: block;
    }
}

/* 小屏移动端：进一步紧凑 */
@media (max-width: 375px) {
    .header-contact .contact-item span {
        font-size: 0.75rem;
    }

    .hospital-name {
        font-size: 0.95rem;
    }

    .logo {
        height: 1.4rem;
        margin-right: 0.5rem;
    }
}

/* ===== 3. Grid 布局响应式 ===== */

/* services-grid: 5列 -> 3列(平板) -> 2列(手机) -> 1列(小屏) */
@media (max-width: 1024px) and (min-width: 769px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* team-grid: 5列 -> 3列(平板) -> 2列(手机) -> 1列(小屏) */
@media (max-width: 1024px) and (min-width: 769px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .member-image {
        width: 8rem;
        height: 8rem;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
    }

    .member-image {
        width: 10rem;
        height: 10rem;
    }
}

/* membership-cards: 5列 -> 3列(平板) -> 2列(手机) -> 1列(小屏) */
@media (max-width: 1024px) and (min-width: 769px) {
    .membership-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .membership-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .membership-cards {
        grid-template-columns: 1fr;
    }
}

/* projects-grid: 4列 -> 2列(平板/手机) -> 1列(小屏) */
@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* membership-grid: 已有 auto-fit minmax(280px)，补充小屏 */
@media (max-width: 480px) {
    .membership-grid {
        grid-template-columns: 1fr;
    }
}

/* promotions-grid: 已有 auto-fit minmax(350px)，补充小屏 */
@media (max-width: 480px) {
    .promotions-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 4. Footer 响应式 ===== */

@media (max-width: 1024px) and (min-width: 769px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-section {
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-description {
        max-width: 400px;
        margin: 0 auto;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links li {
        text-align: center;
    }

    .contact-info {
        max-width: 400px;
        margin: 0 auto;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ===== 5. 文章详情页 ===== */

@media (max-width: 768px) {
    .article-wrapper {
        padding: 1.25rem;
    }

    .article-title {
        font-size: 1.5rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.85rem;
    }

    .article-summary {
        font-size: 0.95rem;
        padding: 1rem;
    }

    .article-cover {
        width: 100%;
        height: auto;
    }

    .article-content {
        font-size: 1rem;
        line-height: 1.8;
    }

    /* 文章内容中的表格横向滚动 */
    .article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .article-content table thead,
    .article-content table tbody {
        min-width: 500px;
    }

    /* 文章内容中的图片自适应 */
    .article-content img {
        max-width: 100%;
        height: auto;
    }

    /* 文章内容中的 iframe 自适应 */
    .article-content iframe {
        max-width: 100%;
    }

    .article-nav {
        flex-direction: column;
        gap: 0.75rem;
        font-size: 0.9rem;
    }

    .article-tags .tag {
        display: inline-block;
        margin: 0.25rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ===== 6. 面包屑 ===== */

@media (max-width: 768px) {
    .breadcrumb {
        flex-wrap: wrap;
        font-size: 0.8rem;
        gap: 0.35rem;
    }

    .breadcrumb a,
    .breadcrumb span {
        white-space: nowrap;
    }
}

/* ===== 7. 文章列表页 ===== */

@media (max-width: 1024px) and (min-width: 769px) {
    .article-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .doctor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-long-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .list-group {
        gap: 1rem;
    }

    .list-item {
        flex-direction: column;
    }

    .list-thumb-wrapper {
        width: 100%;
        max-width: none;
    }

    .list-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .doctor-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .news-long-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .news-long-card {
        flex-direction: column;
    }

    .news-long-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .article-grid {
        grid-template-columns: 1fr;
    }

    .list-content {
        padding: 1rem;
    }

    .list-title {
        font-size: 1rem;
    }

    .list-desc {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
}

/* ===== 8. 表单组件 ===== */

@media (max-width: 768px) {
    .appointment-form {
        padding: 1.25rem;
    }

    .contact-source-options {
        grid-template-columns: 1fr;
    }

    .map-container {
        height: 250px;
    }
}

/* ===== 9. 排版与间距优化 ===== */

@media (max-width: 768px) {
    /* Section 间距缩小 */
    section {
        padding: 2rem 0;
    }

    .section-hero {
        padding: 5rem 0;
        min-height: 40vh;
    }

    .section-hero h1 {
        font-size: 2rem;
    }

    .section-hero p {
        font-size: 1rem;
    }

    /* 内容区块间距 */
    .content-block {
        margin-bottom: 2.5rem;
    }

    .content-block h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* 容器内边距 */
    .container {
        padding: 0 1rem;
    }

    /* Section header */
    .section-header {
        margin-bottom: 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    section {
        padding: 1.5rem 0;
    }

    .container {
        padding: 0 0.875rem;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .content-block h2 {
        font-size: 1.3rem;
    }
}

/* ===== 10. 模态弹窗 ===== */

@media (max-width: 768px) {
    .qrcode-modal-content {
        margin: 15% auto;
        padding: 20px;
        width: 92%;
    }

    .qrcode-image {
        width: 160px;
        height: 160px;
    }

    .qrcode-modal-content h3 {
        font-size: 1.2rem;
    }

    .qrcode-modal-content p {
        font-size: 0.9rem;
    }
}

/* ===== 11. Swiper 导航按钮 ===== */

@media (max-width: 480px) {
    .swiper-button-prev,
    .swiper-button-next,
    .collagen-prev,
    .collagen-next {
        min-width: 50px;
        height: 36px;
        font-size: 0.75rem;
        padding: 0 8px;
    }
}

/* ===== 12. 分页组件 ===== */

@media (max-width: 768px) {
    .pagination-bar {
        text-align: center;
    }

    .pagination-bar a,
    .pagination-bar span {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ===== 13. Doctor Card (文章详情推荐医生) ===== */

@media (max-width: 768px) {
    .doctor-grid {
        grid-template-columns: 1fr;
    }

    .doctor-card {
        flex-direction: row;
        gap: 1rem;
    }

    .doctor-image {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .doctor-card {
        flex-direction: column;
        text-align: center;
    }

    .doctor-image {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
}

/* ===== 14. Related Articles Grid ===== */

@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 15. 防止水平溢出 ===== */

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    /* 确保所有图片不超出容器 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* pre/code 横向滚动 */
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    code {
        word-break: break-all;
    }
}

/* ===== 16. 字体大小 clamp 优化 ===== */

/* 确保 body 基础字号在小屏上可读 */
@media (max-width: 480px) {
    body {
        font-size: 15px;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
    }
}

/* ===== 17. Print 优化 (附加) ===== */

@media print {
    .header,
    .footer,
    .mobile-menu-toggle,
    .qrcode-modal,
    .hero-actions {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .container {
        max-width: 100%;
    }
}