/**
 * 昭通维崑信息技术 - 金融科技响应式样式
 * @copyright 2024 昭通维崑信息技术有限责任公司
 */

/* ============================================
   响应式设计系统
   ============================================ */

/* 设计断点 */
:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
}

/* ============================================
   平板端适配 (768px - 1199px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }
    
    /* 网格布局调整 */
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    /* 间距调整 */
    .section {
        padding: 80px 0;
    }
    
    .section-title {
        margin-bottom: 60px;
    }
    
    /* 字体调整 */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    /* 英雄区域调整 */
    .fintech-hero {
        min-height: 500px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    /* 服务卡片调整 */
    .service-card {
        padding: 30px;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    /* 统计卡片调整 */
    .stat-card {
        padding: 24px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    /* 按钮调整 */
    .btn-lg {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* ============================================
   手机端适配 (≤767px)
   ============================================ */
@media (max-width: 767px) {
    :root {
        --font-size-base: 0.875rem;
        --spacing-4: 0.75rem;
        --spacing-6: 1rem;
        --spacing-8: 1.5rem;
    }
    
    body {
        font-size: var(--font-size-base);
        overflow-x: hidden;
    }
    
    .container {
        max-width: 100%;
        padding: 0 16px;
    }
    
    /* 网格布局调整为单列 */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr;
    }
    
    /* 弹性布局调整 */
    .flex {
        flex-direction: column;
    }
    
    .flex-row-mobile {
        flex-direction: row;
    }
    
    /* 间距调整 */
    .section {
        padding: 60px 0;
    }
    
    .section-title {
        margin-bottom: 40px;
    }
    
    /* 字体调整 */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
    
    .text-3xl { font-size: 1.75rem; }
    .text-4xl { font-size: 2rem; }
    .text-5xl { font-size: 2.5rem; }
    .text-6xl { font-size: 3rem; }
    
    /* 英雄区域移动端优化 */
    .fintech-hero {
        min-height: 450px;
        padding: 60px 0;
        text-align: center;
    }
    
    .hero-content {
        padding: 0 10px;
    }
    
    .hero-badge {
        margin: 0 auto 20px;
    }
    
    .hero-title {
        font-size: 2.25rem;
        margin-bottom: 20px;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
        margin-bottom: 30px;
    }
    
    .hero-features {
        justify-content: center;
        margin-bottom: 30px;
    }
    
    .feature-tag {
        padding: 8px 12px;
        font-size: 0.875rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .hero-visual {
        display: none;
    }
    
    /* 服务区域移动端优化 */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .service-card {
        padding: 25px;
    }
    
    .service-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    
    .service-title {
        font-size: 1.375rem;
    }
    
    .service-features {
        margin: 20px 0;
    }
    
    .feature-item {
        padding: 6px 0;
        font-size: 0.9375rem;
    }
    
    /* 统计区域移动端优化 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .stat-card {
        padding: 20px;
        text-align: center;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
        margin: 0 auto 15px;
    }
    
    .stat-number {
        font-size: 1.75rem;
    }
    
    .stat-label {
        font-size: 0.8125rem;
    }
    
    /* 优势特点移动端优化 */
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .advantage-card {
        padding: 25px;
        text-align: center;
    }
    
    .advantage-card .card-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
        margin: 0 auto 20px;
    }
    
    .advantage-card h4 {
        font-size: 1.25rem;
    }
    
    .advantage-card p {
        font-size: 0.9375rem;
    }
    
    .tech-tags {
        justify-content: center;
    }
    
    /* 行业解决方案移动端优化 */
    .solutions-tabs {
        margin: 0 -16px;
    }
    
    .tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px;
        gap: 10px;
    }
    
    .tab-btn {
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 0.875rem;
    }
    
    .solution-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .solution-chart {
        padding: 20px;
    }
    
    .chart-item {
        margin-bottom: 20px;
    }
    
    /* 新闻区域移动端优化 */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .news-card {
        flex-direction: row;
        align-items: stretch;
    }
    
    .news-image {
        width: 120px;
        height: 90px;
        flex-shrink: 0;
    }
    
    .news-content {
        padding: 15px;
    }
    
    .news-title {
        font-size: 1.125rem;
        margin-bottom: 8px;
    }
    
    .news-summary {
        font-size: 0.875rem;
        margin-bottom: 12px;
    }
    
    .news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    /* CTA区域移动端优化 */
    .fintech-cta {
        padding: 60px 0;
    }
    
    .cta-content h2 {
        font-size: 1.75rem;
    }
    
    .cta-features {
        flex-direction: column;
        gap: 15px;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    
    /* 按钮调整 */
    .btn {
        padding: 12px 20px;
        font-size: 0.9375rem;
    }
    
    .btn-lg {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    /* 卡片调整 */
    .card-body {
        padding: 20px;
    }
    
    .card-header {
        padding: 20px 20px 0;
    }
    
    .card-footer {
        padding: 0 20px 20px;
    }
    
    /* 表单调整 */
    input, textarea, select {
        font-size: 16px; /* 防止iOS缩放 */
    }
}

/* ============================================
   小屏手机适配 (≤480px)
   ============================================ */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    
    /* 更小的间距 */
    .section {
        padding: 40px 0;
    }
    
    .section-title {
        margin-bottom: 30px;
    }
    
    .p-4 { padding: 12px; }
    .p-6 { padding: 16px; }
    .p-8 { padding: 20px; }
    
    /* 更小的字体 */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    
    .text-lg { font-size: 1rem; }
    .text-xl { font-size: 1.125rem; }
    
    /* 英雄区域极致优化 */
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-features {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .feature-tag {
                        padding: 6px 10px;
        font-size: 0.8125rem;
    }
    
    /* 统计卡片极致优化 */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 20px;
    }
    
    .stat-icon {
        margin: 0 20px 0 0;
    }
    
    .stat-content {
        flex: 1;
    }
    
    /* 新闻卡片极致优化 */
    .news-image {
        width: 100px;
        height: 75px;
    }
    
    .news-content {
        padding: 12px;
    }
    
    .news-title {
        font-size: 1rem;
    }
    
    .news-category {
        font-size: 0.75rem;
    }
    
    /* 隐藏装饰元素 */
    .decoration,
    .hero-visual,
    .cta-visual {
        display: none;
    }
    
    /* 按钮全宽 */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* 表格滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   横屏模式适配
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .fintech-hero {
        min-height: 350px;
        padding: 40px 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .hero-buttons .btn {
        width: auto;
        max-width: none;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   触摸设备优化
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* 移除悬停效果 */
    .btn:hover {
        transform: none;
    }
    
    .card:hover {
        transform: none;
    }
    
    .service-card:hover {
        transform: none;
    }
    
    .stat-card:hover {
        transform: none;
    }
    
    /* 增加触摸目标大小 */
    .btn,
    .nav-link,
    .tab-btn,
    .mobile-nav-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 减少动画 */
    * {
        transition-duration: 0.1s !important;
    }
}

/* ============================================
   高对比度模式支持
   ============================================ */
@media (prefers-contrast: high) {
    .btn-primary {
        border-width: 3px;
    }
    
    .btn-outline {
        border-width: 3px;
    }
    
    .card {
        border: 2px solid var(--gray-300);
    }
    
    .nav-link {
        border-bottom: 2px solid transparent;
    }
    
    .nav-link.active {
        border-bottom-color: var(--primary-color);
    }
}

/* ============================================
   减少动画偏好
   ============================================ */
@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 print {
    /* 隐藏导航和交互元素 */
    .topbar,
    .header,
    .footer,
    .back-to-top,
    .mobile-menu-toggle,
    .btn,
    .hero-scroll,
    .social-links {
        display: none !important;
    }
    
    /* 优化内容显示 */
    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    .section {
        padding: 20px 0 !important;
        page-break-inside: avoid;
    }
    
    .section-title {
        margin-bottom: 20px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000;
        margin-bottom: 10px;
    }
    
    h1 { font-size: 18pt; }
    h2 { font-size: 16pt; }
    h3 { font-size: 14pt; }
    
    p {
        margin-bottom: 10px;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
    
    /* 优化表格打印 */
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        border: 1px solid #000;
        padding: 5px;
        text-align: left;
    }
    
    th {
        background: #f0f0f0;
        font-weight: bold;
    }
    
    /* 优化卡片打印 */
    .card {
        border: 1px solid #000;
        box-shadow: none;
        margin-bottom: 15px;
        page-break-inside: avoid;
    }
    
    .card-body {
        padding: 15px;
    }
}

/* ============================================
   暗色模式支持（未来扩展）
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --white: #1a1a1a;
        --gray-100: #2a2a2a;
        --gray-200: #3a3a3a;
        --gray-300: #4a4a4a;
        --secondary-color: #e0e0e0;
        --secondary-dark: #ffffff;
    }
    
    body {
        background: var(--white);
        color: var(--secondary-color);
    }
}