/*
 * 响应式优化样式表
 * 广东宇航金属制品有限公司 - 钣金行业网站
 * 针对移动端和平板设备的优化
 */

/* ========================================
   移动端字体优化
   ======================================== */

@media (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.7;
    }
    
    /* 标题优化 - 更清晰的层次 */
    h1 {
        font-size: 28px !important;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    
    h2 {
        font-size: 24px !important;
        line-height: 1.4;
        margin-bottom: 14px;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.4;
        margin-bottom: 12px;
    }
    
    h4 {
        font-size: 18px !important;
        line-height: 1.5;
    }
    
    h5, h6 {
        font-size: 16px !important;
        line-height: 1.5;
    }
    
    /* 段落文字优化 */
    p {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 16px;
        color: #333;
    }
    
    /* 小号文字 */
    .wp-block-post-date,
    .wp-block-post-author-name,
    small {
        font-size: 13px !important;
    }
}

/* ========================================
   移动端卡片优化
   ======================================== */

@media (max-width: 768px) {
    /* 卡片容器 */
    .wp-block-group {
        padding: 20px 16px !important;
        margin-bottom: 20px;
    }
    
    /* 白色卡片背景 */
    .wp-block-group[style*="background"] {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    
    /* 卡片内边距优化 */
    .wp-block-group > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ========================================
   移动端图片优化
   ======================================== */

@media (max-width: 768px) {
    /* 图片容器 */
    .wp-block-image,
    .wp-block-post-featured-image,
    img {
        margin-bottom: 16px;
        border-radius: 10px;
        overflow: hidden;
    }
    
    /* 图片自适应 */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* 卡片内图片 */
    .wp-block-group img {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ========================================
   移动端内容卡片美化
   ======================================== */

@media (max-width: 768px) {
    /* 产品/服务卡片 */
    .wp-block-group.product-card,
    .wp-block-group.service-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 24px 20px !important;
        margin-bottom: 24px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    
    /* 卡片标题 */
    .product-card h3,
    .service-card h3 {
        font-size: 22px !important;
        font-weight: 700;
        color: #091057;
        margin-bottom: 12px;
        text-align: center;
    }
    
    /* 卡片描述 */
    .product-card p,
    .service-card p {
        font-size: 15px;
        line-height: 1.8;
        color: #555;
        text-align: left;
    }
    
    /* 数字/统计 */
    .stat-number {
        font-size: 32px !important;
        font-weight: 700;
        color: #024caa;
        line-height: 1.2;
        margin-bottom: 8px;
    }
}

/* ========================================
   移动端文字对齐优化
   ======================================== */

@media (max-width: 768px) {
    /* 标题居中 */
    h1, h2 {
        text-align: center;
    }
    
    /* 内容左对齐 */
    p, li {
        text-align: left;
    }
    
    /* 按钮居中 */
    .wp-block-buttons {
        justify-content: center;
    }
}

/* ========================================
   移动端间距优化
   ======================================== */

@media (max-width: 768px) {
    /* 减少大间距 */
    [style*="padding-top:120px"] {
        padding-top: 48px !important;
    }
    
    [style*="padding-bottom:120px"] {
        padding-bottom: 48px !important;
    }
    
    [style*="padding-top:100px"] {
        padding-top: 40px !important;
    }
    
    [style*="padding-bottom:100px"] {
        padding-bottom: 40px !important;
    }
    
    [style*="padding-top:80px"] {
        padding-top: 32px !important;
    }
    
    [style*="padding-bottom:80px"] {
        padding-bottom: 32px !important;
    }
    
    [style*="padding-top:60px"] {
        padding-top: 24px !important;
    }
    
    [style*="padding-bottom:60px"] {
        padding-bottom: 24px !important;
    }
    
    /* 元素间距 */
    .wp-block-group + .wp-block-group {
        margin-top: 24px;
    }
}

/* ========================================
   移动端背景图优化
   ======================================== */

@media (max-width: 768px) {
    /* 背景图片容器 */
    [style*="background-image"] {
        background-size: cover !important;
        background-position: center !important;
        background-attachment: scroll !important;
    }
    
    /* 背景遮罩优化 */
    .has-background-dim::before {
        opacity: 0.6;
    }
}

/* ========================================
   移动端文字阴影和对比度
   ======================================== */

@media (max-width: 768px) {
    /* 背景图上的文字 */
    [style*="background-image"] h1,
    [style*="background-image"] h2,
    [style*="background-image"] h3,
    [style*="background-image"] p {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* 白色文字增强对比 */
    .has-base-color,
    [style*="color:#fff"],
    [style*="color:white"] {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* ========================================
   移动端列表优化
   ======================================== */

@media (max-width: 768px) {
    ul, ol {
        padding-left: 24px;
        margin-bottom: 20px;
    }
    
    li {
        margin-bottom: 12px;
        line-height: 1.8;
        font-size: 15px;
    }
    
    li::marker {
        color: #024caa;
    }
}

/* ========================================
   头部导航优化
   ======================================== */

/* 移动端头部 */
@media (max-width: 1024px) {
    #header {
        padding: 6px 16px 6px 16px !important;
        background: #ffffff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    /* 隐藏顶部信息栏 */
    .mobile-disable {
        display: none !important;
    }
    
    /* 导航区域紧凑 */
    #header .wens-prova-nav {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    
    /* 优化Logo大小 */
    .wp-block-site-logo {
        max-width: 36px;
    }
    
    .wp-block-site-logo img {
        width: auto;
        max-height: 36px;
    }
    
    .wp-block-site-title {
        font-size: 15px !important;
        font-weight: 700;
        color: #091057;
        margin: 0;
    }
    
    /* 移动端导航按钮 */
    .wp-block-navigation__responsive-container-open {
        padding: 6px 10px;
        background: #091057;
        color: white;
        border-radius: 6px;
        border: none;
        box-shadow: 0 2px 8px rgba(9, 16, 87, 0.3);
        font-weight: 600;
        font-size: 13px;
    }
    
    /* 移动端菜单容器 */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 24px 20px;
        max-height: 90vh;
        overflow-y: auto;
        background: #ffffff;
    }
    
    /* 移动端菜单项 */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        gap: 0;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        width: 100%;
        padding: 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation-item a {
        font-size: 16px !important;
        font-weight: 600;
        padding: 16px 0;
        display: block;
        color: #1a1a1a;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation-item a:hover {
        color: #024caa;
    }
}

/* ========================================
   内容区域优化
   ======================================== */

/* 移动端内容间距 */
@media (max-width: 768px) {
    .wp-block-group {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* 减少大间距 */
    [style*="padding-top:120px"] {
        padding-top: 60px !important;
    }
    
    [style*="padding-bottom:120px"] {
        padding-bottom: 60px !important;
    }
    
    [style*="padding-top:100px"] {
        padding-top: 50px !important;
    }
    
    [style*="padding-bottom:100px"] {
        padding-bottom: 50px !important;
    }
    
    [style*="padding-top:80px"] {
        padding-top: 40px !important;
    }
    
    [style*="padding-bottom:80px"] {
        padding-bottom: 40px !important;
    }
}

/* ========================================
   网格布局优化
   ======================================== */

/* 平板设备 - 2列 */
@media (max-width: 1024px) and (min-width: 769px) {
    .wp-block-columns {
        flex-wrap: wrap;
    }
    
    .wp-block-column {
        flex-basis: 48% !important;
        margin-bottom: 20px;
    }
}

/* 移动设备 - 单列 */
@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
        gap: 24px;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 0;
    }
    
    /* 文章网格 */
    .wrap-the-columns {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    /* 文章卡片美化 */
    .wrap-the-columns > * {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .wrap-the-columns > *:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    .wp-block-column {
        margin-bottom: 20px;
    }
}

/* ========================================
   移动端专属美化样式
   ======================================== */

@media (max-width: 768px) {
    /* 首屏英雄区域 */
    .hero-section {
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
    }
    
    /* 特色卡片 */
    .feature-card {
        background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
        border-radius: 16px;
        padding: 28px 20px;
        margin-bottom: 20px;
        border: 1px solid #e5e7eb;
        position: relative;
        overflow: hidden;
    }
    
    .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #024caa, #f59e0b);
    }
    
    /* 图片卡片组合 */
    .image-text-card {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        margin-bottom: 24px;
    }
    
    .image-text-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 0;
    }
    
    .image-text-card .content {
        padding: 20px;
    }
    
    .image-text-card h3 {
        font-size: 20px !important;
        margin-bottom: 12px;
        color: #091057;
    }
    
    .image-text-card p {
        font-size: 15px;
        line-height: 1.7;
        color: #555;
    }
    /* 图片卡片组合 */
    .image-text-card {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        margin-bottom: 24px;
    }
    
    .image-text-card img:not([src*="/L01"]):not([src*="/L02"]):not([src*="/L03"]):not([src*="/L04"]):not([src*="/L05"]) {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 0;
    }
    
    .image-text-card .content {
        padding: 20px;
    }
    
    .image-text-card h3 {
        font-size: 20px !important;
        margin-bottom: 12px;
        color: #091057;
    }
    
    .image-text-card p {
        font-size: 15px;
        line-height: 1.7;
        color: #555;
    }
    .stat-card {
        background: linear-gradient(135deg, #091057 0%, #024caa 100%);
        color: white;
        border-radius: 16px;
        padding: 32px 24px;
        text-align: center;
        margin-bottom: 20px;
        box-shadow: 0 8px 24px rgba(9, 16, 87, 0.2);
    }
    
    .stat-card .number {
        font-size: 42px !important;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 12px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .stat-card .label {
        font-size: 16px;
        opacity: 0.9;
    }
    
    /* 引用/高亮文本 */
    .highlight-text {
        background: #fff3cd;
        border-left: 4px solid #f59e0b;
        padding: 16px 20px;
        border-radius: 8px;
        margin: 20px 0;
        font-size: 15px;
        line-height: 1.7;
    }
    
    /* 图标列表 */
    .icon-list {
        list-style: none;
        padding: 0;
    }
    
    .icon-list li {
        padding-left: 32px;
        position: relative;
        margin-bottom: 16px;
    }
    
    .icon-list li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: #28a745;
        font-weight: 700;
        font-size: 18px;
    }
}

/* ========================================
   按钮优化
   ======================================== */

@media (max-width: 768px) {
    .wp-block-button__link,
    .wp-element-button,
    .wpcf7-submit {
        padding: 12px 24px !important;
        font-size: 14px !important;
        width: 100%;
        text-align: center;
        display: block;
    }
    
    .wp-block-buttons {
        width: 100%;
    }
    
    .wp-block-button {
        width: 100%;
    }
}

/* ========================================
   表单优化
   ======================================== */

@media (max-width: 768px) {
    .wpcf7-text,
    .wpcf7-textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important; /* 防止iOS自动缩放 */
        border-radius: 6px !important;
    }
    
    .wpcf7-textarea,
    textarea {
        min-height: 120px;
    }
}

/* ========================================
   图片和媒体优化
   ======================================== */

@media (max-width: 768px) {
    .wp-block-image,
    .wp-block-post-featured-image {
        margin-bottom: 20px;
    }
    
    .wp-block-image img {
        border-radius: 8px;
    }
    
    /* 图片悬停效果在移动端禁用 */
    .img-hover-zoom:hover img {
        transform: none;
    }
}

/* ========================================
   页脚优化
   ======================================== */

@media (max-width: 768px) {
    #footer {
        padding: 40px 16px 20px !important;
    }
    
    #footer .wp-block-columns {
        gap: 32px;
    }
    
    #footer .wp-block-column {
        margin-bottom: 24px;
    }
    
    /* 页脚联系信息 */
    #footer .wp-block-group {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 20px;
    }
}

/* ========================================
   触摸优化
   ======================================== */

@media (max-width: 1024px) {
    /* 增加可点击区域 */
    a, button, .wp-block-navigation-item {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 移除悬停效果，使用点击效果 */
    a:active,
    button:active,
    .wp-block-button__link:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* ========================================
   性能优化
   ======================================== */

/* 减少动画以提升性能 */
@media (max-width: 768px) {
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* 禁用复杂动画 */
    .img-hover-zoom img {
        transition: none;
    }
}

/* ========================================
   可访问性优化
   ======================================== */

/* 焦点可见性 */
@media (max-width: 1024px) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--wp--preset--color--primary);
        outline-offset: 2px;
    }
}

/* ========================================
   横屏模式优化
   ======================================== */

@media (max-width: 896px) and (orientation: landscape) {
    /* 减少垂直间距 */
    [style*="padding-top"],
    [style*="padding-bottom"] {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* 优化导航高度 */
    #header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* ========================================
   超小屏幕优化 (320px-375px)
   ======================================== */

@media (max-width: 375px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 28px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    .wp-block-button__link,
    .wp-element-button {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   平板横屏优化 (768px-1024px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .wp-block-group.alignwide,
    .wp-block-group.alignfull {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    
    /* 2列布局 */
    .wrap-the-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* ========================================
   打印样式优化
   ======================================== */

@media print {
    #header,
    #footer,
    .wp-block-navigation,
    .wp-block-button {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    a {
        text-decoration: underline;
    }
}