/* ==========================================================================
   联系我们页面特有样式 - Contact Specific Styles
   (已移除 base.css 中的重复项，颜色同步品牌深蓝 #12165d)
   ========================================================================== */

.contact-page {
    padding: 80px 0;
}

/* 页面标题居中 */
.contact-page .page-title {
    text-align: center;
    font-size: 28px;
    color: #12165d;
    margin-bottom: 40px;
}

/* --- 1. 联系网格 (3列布局) --- */
.contact-page .contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px 80px;
}

/* --- 2. 联系卡片基础样式 (普通卡片仅执行上浮动画) --- */
.contact-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    text-decoration: none;
    color: #222;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    position: relative;
    border: 1px solid #f1f1f1;
    display: block;
    overflow: hidden; /* 确保内部二维码弹出不溢出 */
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: #12165d;
}

.contact-card img {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.contact-card h3 {
    font-size: 18px;
    color: #12165d;
    margin-bottom: 10px;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.contact-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    transition: opacity 0.3s ease;
}

/* --- 3. 只有特定卡片（微信/二维码）才执行切换动画 --- */
.wechat-card .wechat-qr,
.qr-card .qr-popup {
    position: absolute;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.wechat-qr img, .qr-popup img {
    width: 150px;
    height: 150px;
    padding: 5px;
}

/* 仅当 hover 带有 .wechat-card 或 .qr-card 时，才隐藏原有内容并显示二维码 */
.wechat-card:hover .wechat-qr,
.qr-card:hover .qr-popup {
    opacity: 1;
    pointer-events: auto;
}

.wechat-card:hover > img,
.wechat-card:hover > h3,
.wechat-card:hover > p,
.qr-card:hover > img,
.qr-card:hover > h3,
.qr-card:hover > p {
    opacity: 0;
}

/* ==========================================================================
   暗黑模式优化 (午夜模式)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    .contact-page .page-title { color: #ffffff !important; }

    .contact-card {
        background-color: #1a1a1a !important;
        border-color: #333 !important;
        color: #e0e0e0 !important;
    }

    .contact-card h3 { color: #ffffff !important; }
    .contact-card p { color: #bbb !important; }

    .contact-card:hover {
        background-color: #222 !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    }

    /* 二维码区域暗色适配 */
    .wechat-card .wechat-qr,
    .qr-card .qr-popup {
        background-color: #1a1a1a !important;
    }

    /* 核心修复：暗黑模式下二维码背景变黑，线条变白 */
    .wechat-qr img, .qr-popup img {
        filter: invert(1) brightness(1.2) contrast(1.1);
    }
}

/* --- 响应式适配 --- */
@media (max-width: 992px) {
    .contact-page .contact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .contact-page .contact-grid {
        grid-template-columns: 1fr;
    }
}