/**
 * 响应式样式
 * MTO Moving Theme
 * 
 * @package MTOMoving
 * @since 1.0.0
 */

/* ========================================
   平板端 (最大宽度 1024px)
   ======================================== */
@media (max-width: 1024px) {
    /* 服务网格 */
    .services-grid-3x3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 博客网格 */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    /* 统计数据 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 关于页面网格 */
    .about-grid {
        gap: var(--space-8);
    }
    
    /* 证书网格 */
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Hero标题字号 */
    .hero-title,
    .page-hero-section .hero-title {
        font-size: var(--text-4xl);
    }
    
    .hero-subtitle,
    .page-hero-section .hero-subtitle {
        font-size: var(--text-xl);
    }
    
    /* 内页Hero高度调整 */
    .page-hero-section.hero-medium {
        height: 45vh;
        min-height: 350px;
    }
    
    .page-hero-section.hero-large {
        height: 50vh;
        min-height: 400px;
    }
    
    /* CTA区块 - 平板（方案3响应式） */
    .cta-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    
    .cta-content {
        text-align: center;
    }
    
    .cta-title {
        font-size: var(--text-3xl);
    }
    
    .cta-subtitle {
        font-size: var(--text-lg);
    }
    
    .cta-features {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: var(--space-8);
    }
    
    .cta-feature-item {
        justify-content: center;
    }
    
    /* 电话按钮平板优化 */
    .cta-phone-button {
        max-width: 400px;
        margin: 0 auto;
        justify-content: center;
    }
    
    /* 微信二维码框在平板上居中 */
    .cta-wechat-box {
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* FAQ - 平板端单栏 */
    .faq-list {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        max-width: 900px;
    }
    
    /* 联系页面 - 平板端优化 */
    .contact-two-columns {
        gap: var(--space-8);
    }
    
    .contact-row-icon {
        width: 64px;
        height: 64px;
    }
    
    .contact-row-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .contact-wechat-icon {
        width: 72px;
        height: 72px;
    }
    
    .contact-wechat-icon svg {
        width: 38px;
        height: 38px;
    }
    
    .contact-wechat-qr img {
        width: 200px;
        height: 200px;
    }
}

/* ========================================
   移动端 (最大宽度 768px)
   ======================================== */
@media (max-width: 768px) {
    /* 容器内边距 */
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    
    /* 字号调整 */
    h1, .hero-title {
        font-size: var(--text-3xl);
    }
    
    h2, .section-title {
        font-size: var(--text-2xl);
    }
    
    h3 {
        font-size: var(--text-xl);
    }
    
    .page-title {
        font-size: var(--text-3xl);
    }
    
    .page-subtitle {
        font-size: var(--text-base);
    }
    
    /* Hero区 */
    .fullscreen-hero {
        min-height: 500px;
        height: auto;
        padding: var(--space-20) 0;
    }
    
    .hero-title,
    .page-hero-section .hero-title {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-4);
    }
    
    .hero-subtitle,
    .page-hero-section .hero-subtitle {
        font-size: var(--text-lg);
        margin-bottom: var(--space-6);
    }
    
    .hero-features,
    .page-hero-section .hero-features {
        flex-direction: column;
        gap: var(--space-3);
        font-size: var(--text-base);
    }
    
    .page-hero-section .hero-feature-item {
        width: 100%;
        text-align: center;
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-3);
    }
    
    .hero-actions,
    .page-hero-section .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-actions .btn,
    .page-hero-section .hero-actions .btn {
        width: 100%;
    }
    
    /* 内页Hero高度调整 */
    .page-hero-section.hero-small {
        height: 35vh;
        min-height: 280px;
    }
    
    .page-hero-section.hero-medium {
        height: 40vh;
        min-height: 320px;
    }
    
    .page-hero-section.hero-large {
        height: 45vh;
        min-height: 360px;
    }
    
    .page-hero-section .hero-content {
        padding: var(--space-4);
    }
    
    /* 页面Hero */
    .page-hero {
        padding: var(--space-16) 0 var(--space-12);
        margin-bottom: var(--space-12);
    }
    
    /* 服务网格 */
    .services-grid-3x3,
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .service-card-with-image {
        height: 350px;
    }
    
    .service-card {
        padding: var(--space-6);
    }
    
    /* 博客网格 */
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .blog-card-image {
        height: 200px;
    }
    
    /* 博客Hero区域 */
    .page-hero-section.hero-medium {
        min-height: 300px;
        height: 40vh;
    }
    
    .page-hero-section .hero-title {
        font-size: var(--text-3xl);
    }
    
    .page-hero-section .hero-subtitle {
        font-size: var(--text-base);
    }
    
    .page-hero-section .hero-post-meta {
        font-size: var(--text-base);
        gap: var(--space-3);
    }
    
    /* 文章元信息 */
    .entry-meta-header .entry-meta {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    /* 文章特色图片 */
    .entry-featured-image {
        padding: var(--space-6) 0;
    }
    
    /* 评价瀑布流 */
    .reviews-masonry {
        grid-template-columns: 1fr;
    }
    
    /* 统计数据 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    .stat-number {
        font-size: var(--text-4xl);
    }
    
    .stat-suffix {
        font-size: var(--text-3xl);
    }
    
    .stat-label {
        font-size: var(--text-base);
    }
    
    /* 流程步骤 */
    .process-steps {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    /* 信任标识 */
    .trust-badges {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    /* 关于页面 */
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .about-grid .about-image {
        order: -1;
    }
    
    /* 证书展示 */
    .certificates-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    /* 联系信息网格 */
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
    
    /* 联系页面 - 移动端单栏 */
    .contact-two-columns {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .contact-right {
        position: static;
    }
    
    .contact-info-row {
        padding: var(--space-5);
        gap: var(--space-4);
    }
    
    .contact-row-icon {
        width: 56px;
        height: 56px;
    }
    
    .contact-row-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .contact-row-title {
        font-size: var(--text-lg);
        margin-bottom: var(--space-2);
    }
    
    .contact-wechat-header {
        padding: var(--space-6) var(--space-5) var(--space-5);
    }
    
    .contact-wechat-icon {
        width: 64px;
        height: 64px;
        margin-bottom: var(--space-3);
    }
    
    .contact-wechat-icon svg {
        width: 34px;
        height: 34px;
    }
    
    .contact-wechat-title {
        font-size: var(--text-xl);
    }
    
    .contact-wechat-qr {
        padding: var(--space-6);
    }
    
    .contact-wechat-qr img {
        width: 200px;
        height: 200px;
    }
    
    .contact-wechat-footer {
        padding: var(--space-5);
    }
    
    /* 页脚 */
    .footer-main {
        padding: var(--space-12) 0;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .footer-widget-title {
        font-size: var(--text-base);
    }
    
    .footer-about .footer-logo img {
        height: 40px;
    }
    
    .contact-item {
        font-size: var(--text-xs);
    }
    
    .footer-bottom {
        padding: var(--space-5) 0;
    }
    
    /* CTA按钮组 */
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-actions .btn {
        width: 100%;
    }
    
    /* 悬浮联系按钮 */
    .floating-contact {
        right: 16px;
        bottom: 16px;
    }
    
    .float-btn {
        width: 48px;
        height: 48px;
    }
    
    .float-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .wechat-popup {
        position: fixed;
        right: auto;
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: var(--z-modal);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    
    .wechat-popup.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    /* 回到顶部 */
    .back-to-top {
        bottom: 140px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
    
    .back-to-top svg {
        width: 16px;
        height: 16px;
    }
    
    /* CTA区块 - 移动端（方案3响应式） */
    .cta-section {
        padding: var(--space-16) 0;
    }
    
    .cta-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    
    .cta-content {
        text-align: center;
    }
    
    .cta-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-3);
    }
    
    .cta-subtitle {
        font-size: var(--text-base);
        margin-bottom: var(--space-6);
    }
    
    .cta-features {
        margin-bottom: var(--space-6);
    }
    
    .cta-feature-item {
        font-size: var(--text-base);
        margin-bottom: var(--space-3);
        justify-content: center;
    }
    
    .cta-feature-icon {
        width: 20px;
        height: 20px;
    }
    
    /* 电话按钮移动端 */
    .cta-phone-button {
        padding: var(--space-4) var(--space-6);
        gap: var(--space-3);
        width: 100%;
        justify-content: center;
    }
    
    .cta-phone-icon {
        width: 24px;
        height: 24px;
    }
    
    .cta-button-number {
        font-size: var(--text-xl);
    }
    
    /* 微信二维码框移动端 */
    .cta-wechat-box {
        padding: var(--space-8);
    }
    
    .cta-wechat-qr {
        max-width: 200px;
    }
    
    .cta-wechat-label {
        font-size: var(--text-base);
    }
    
    /* 文章导航 */
    .post-navigation .nav-links {
        flex-direction: column;
        gap: var(--space-6);
    }
    
    .nav-previous,
    .nav-next {
        max-width: 100%;
    }
    
    .nav-previous a,
    .nav-next a {
        padding: var(--space-5);
    }
    
    .nav-title {
        font-size: var(--text-base);
    }
    
    /* 分页 */
    .pagination {
        flex-wrap: wrap;
    }
    
    /* 移动端菜单 */
    .mobile-menu {
        width: 90%;
    }
    
    /* Section间距 */
    .section,
    .services-category-section,
    .about-content-section {
        padding: var(--space-12) 0;
    }
    
    .stats-section {
        padding: var(--space-12) 0;
    }
    
    /* 按钮尺寸 */
    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
    }
    
    /* 卡片内边距 */
    .card-content {
        padding: var(--space-4);
    }
    
    /* FAQ - 移动端单栏 */
    .faq-list {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .faq-question {
        padding: var(--space-4);
    }
    
    .faq-question-text {
        font-size: var(--text-base);
    }
    
    .faq-answer-content {
        padding: 0 var(--space-4) var(--space-4);
    }
    
    /* 入口内容 */
    .entry-content {
        font-size: var(--text-base);
    }
    
    .entry-title {
        font-size: var(--text-2xl);
    }
    
    /* 404页面 */
    .error-404 h1 {
        font-size: 6rem;
    }
    
    .error-404 h2 {
        font-size: var(--text-2xl);
    }
    
    .error-404 p {
        font-size: var(--text-base);
    }
}

/* ========================================
   小屏手机 (最大宽度 480px)
   ======================================== */
@media (max-width: 480px) {
    /* 统计数据单列 */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Hero标题进一步缩小 */
    .hero-title {
        font-size: var(--text-2xl);
    }
    
    /* 博客Hero区域 */
    .page-hero-section.hero-medium {
        min-height: 250px;
        height: 35vh;
    }
    
    .page-hero-section .hero-title {
        font-size: var(--text-2xl);
    }
    
    .page-hero-section .hero-subtitle {
        font-size: var(--text-sm);
    }
    
    .page-hero-section .hero-post-meta {
        font-size: var(--text-sm);
        gap: var(--space-2);
        flex-direction: column;
    }
    
    /* 文章内容 */
    .entry-content p {
        font-size: var(--text-base);
    }
    
    .entry-content h2 {
        font-size: var(--text-2xl);
    }
    
    .entry-content h3 {
        font-size: var(--text-xl);
    }
    
    .entry-content h4 {
        font-size: var(--text-lg);
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
    }
    
    /* 文章导航 */
    .post-navigation .nav-links {
        padding: 0 var(--space-4);
    }
    
    .nav-previous a,
    .nav-next a {
        padding: var(--space-4);
    }
    
    .nav-subtitle {
        font-size: var(--text-xs);
    }
    
    .nav-title {
        font-size: var(--text-sm);
    }
    
    /* Logo尺寸 */
    .site-logo img {
        height: 36px;
    }
    
    /* 服务卡片高度 */
    .service-card-with-image {
        height: 300px;
    }
    
    /* 流程步骤数字 */
    .step-number {
        width: 48px;
        height: 48px;
        font-size: var(--text-xl);
    }
    
    /* 间距调整 */
    .section,
    .services-category-section {
        padding: var(--space-10) 0;
    }
    
    /* 404页面 */
    .error-404 h1 {
        font-size: 4rem;
    }
}

/* ========================================
   桌面大屏 (最小宽度 1280px)
   ======================================== */
@media (min-width: 1280px) {
    /* 容器最大宽度 */
    .header-inner {
        max-width: var(--container-2xl);
    }
    
    /* Hero标题 */
    .hero-title {
        font-size: var(--text-6xl);
    }
    
    /* 服务卡片 */
    .service-card-with-image {
        height: 450px;
    }
}

/* ========================================
   打印样式
   ======================================== */
@media print {
    /* 隐藏不必要的元素 */
    .site-header,
    .site-footer,
    .floating-contact,
    .back-to-top,
    .menu-toggle,
    .mobile-menu,
    .mobile-menu-overlay,
    .cta-section {
        display: none !important;
    }
    
    /* 打印优化 */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: underline;
        color: #000;
    }
    
    /* 分页 */
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
}

/* ========================================
   暗色模式准备（可选）
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* 暗色模式样式可以在这里添加 */
    /* 目前不实现，为未来扩展预留 */
}

/* ========================================
   减少动画（无障碍）
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   高对比度模式（无障碍）
   ======================================== */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
    
    a {
        text-decoration: underline;
    }
}

