/*!
 * turing-contact.css — 聯繫我們頁樣式
 *
 * 復用 turing 設計系統（與 turing-solution.css / turing-about.css 對齊）：
 *   - 設計稿寬度 1920px (desktop) / 540px (mobile)，1rem = 192px (由 turing.js 設置)
 *   - 配色：bg #101014 / card #222228 / text #eeeef2 / sub #b2b2c9
 *   - 主色：#1664ff / #2882ff / #50a7ff / 邊框 #292932 / 圓角 0.041667rem
 */

/* ============ 頁面容器（對齊 .solution-page / .about-page）============ */
.contact-page {
    position: relative;
    min-height: 100vh;
    padding: 0.416667rem 1.51042rem 0.520833rem;
    background: #101014;
}
@media (max-width: 1900px) { .contact-page { padding: 0.416667rem 1.015625rem 0.520833rem; } }
@media (max-width: 1700px) { .contact-page { padding: 0.416667rem 0.8125rem 0.520833rem; } }
@media (max-width: 1630px) { .contact-page { padding: 0.416667rem 0.3125rem 0.520833rem; } }
@media (max-width: 1240px) { .contact-page { padding: 0.416667rem 0.208333rem 0.520833rem; } }
@media (max-width: 768px)  { .contact-page { padding: 0.30rem 0.16rem 0.40rem; } }

.contact-wrap {
    position: relative;
    z-index: 1;
    max-width: 14.583333rem;   /* 2800px */
    margin: 0 auto;
}

/* 背景圖層 */
.contact-page .bg-body {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 2.157328rem;
    z-index: 0;
    pointer-events: none;
}

/* ============ 麵包屑 / 頁面標題（復用同名類）============ */
.contact-page .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #b2b2c9;
    font-size: 0.072917rem;
    line-height: 0.125rem;
    margin-bottom: 0.15625rem;
}
.contact-page .breadcrumb a {
    color: #b2b2c9;
    text-decoration: none;
    transition: color 0.2s;
}
.contact-page .breadcrumb a:hover { color: #50a7ff; }
.contact-page .breadcrumb .sep {
    margin: 0 0.041667rem;
    color: #4a4a55;
}
.contact-page .breadcrumb .current { color: #eeeef2; }

.contact-page .page-head { margin-bottom: 0.260417rem; }
.contact-page .page-title {
    color: #eeeef2;
    font-size: 0.1875rem;
    font-weight: 500;
    line-height: 0.1875rem;
    margin: 0 0 0.0625rem;
}
.contact-page .page-subtitle {
    color: #b2b2c9;
    font-size: 0.083333rem;
    line-height: 0.125rem;
    margin: 0;
}

/* ============ 聯繫信息區：左信息 + 右地圖 ============ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;       /* 左信息 / 右地圖 */
    gap: 0.125rem;
    align-items: stretch;
}

/* ---- 左列：聯繫信息 ---- */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.company-block {
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: linear-gradient(135deg, #1c1c24 0%, #222228 100%);
    padding: 0.15625rem 0.1875rem;
}
.company-name {
    color: #eeeef2;
    font-size: 0.125rem;            /* 24px */
    font-weight: 600;
    line-height: 0.15625rem;
    margin: 0 0 0.0625rem;
}
.company-intro {
    color: #b2b2c9;
    font-size: 0.078125rem;         /* 15px */
    line-height: 0.125rem;
    margin: 0;
}

/* 圖文信息行列表 */
.info-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.info-row {
    display: flex;
    align-items: center;
    gap: 0.083333rem;
    padding: 0.09375rem 0;
    border-bottom: 0.005208rem solid #292932;
}
.info-row:last-child { border-bottom: none; }

.info-icon {
    flex-shrink: 0;
    width: 0.135417rem;            /* 26px 圓形圖標位 */
    height: 0.135417rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(22, 100, 255, 0.12);
    color: #50a7ff;
}
.info-icon svg {
    width: 0.072917rem;            /* 14px */
    height: 0.072917rem;
}
.info-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.info-label {
    color: #b2b2c9;
    font-size: 0.067708rem;        /* 13px */
    line-height: 0.09375rem;
    margin-bottom: 0.010417rem;
}
.info-value {
    color: #eeeef2;
    font-size: 0.088542rem;        /* 17px */
    font-weight: 500;
    line-height: 0.125rem;
    word-break: break-word;
    text-decoration: none;
    transition: color 0.2s;
}
a.info-value:hover { color: #50a7ff; }

/* 微信行：右側附二維碼（點擊放大） */
.info-row-wechat { align-items: center; }
.info-qrcode-btn {
    position: relative;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    line-height: 0;
}
.info-qrcode {
    display: block;
    width: 0.166667rem;            /* 32px 縮略碼 */
    height: 0.166667rem;
    border-radius: 0.010417rem;
    background: #fff;
    padding: 0.005208rem;
    box-sizing: content-box;
    transition: transform 0.3s ease;
}
.info-qrcode-btn:hover .info-qrcode,
.info-qrcode-btn:focus-visible .info-qrcode {
    transform: scale(1.08);
    outline: 0.005208rem solid #2882ff;
}
/* 放大鏡 hover 提示 */
.qr-zoom-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 16, 20, 0.55);
    border-radius: 0.010417rem;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.qr-zoom-hint svg {
    width: 0.083333rem;            /* 16px */
    height: 0.083333rem;
    color: #fff;
}
.info-qrcode-btn:hover .qr-zoom-hint,
.info-qrcode-btn:focus-visible .qr-zoom-hint { opacity: 1; }

/* ---- 二維碼放大彈層 ---- */
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.qr-modal.show { opacity: 1; visibility: visible; }
.qr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(2px);
}
.qr-modal-box {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 92vw;
    padding: 0.125rem;
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #222228;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.25s ease;
}
.qr-modal.show .qr-modal-box { transform: scale(1); }
.qr-modal-img {
    display: block;
    width: 0.78125rem;             /* 150px 大圖 */
    height: 0.78125rem;
    border-radius: 0.020833rem;
    background: #fff;
    padding: 0.015625rem;
    box-sizing: content-box;
    margin: 0 auto;
}
.qr-modal-caption {
    color: #eeeef2;
    font-size: 0.083333rem;        /* 16px */
    font-weight: 600;
    line-height: 0.114583rem;
    margin: 0.072917rem 0 0.015625rem;
}
.qr-modal-sub {
    color: #b2b2c9;
    font-size: 0.072917rem;        /* 14px */
    line-height: 0.104167rem;
    margin: 0;
}
.qr-modal-close {
    position: absolute;
    top: -0.083333rem;             /* 凸出在卡片右上外側 */
    right: -0.083333rem;
    width: 0.083333rem;
    height: 0.083333rem;
    border-radius: 50%;
    border: 0.005208rem solid #292932;
    background: #222228;
    color: #eeeef2;
    font-size: 0.072917rem;
    line-height: 0.072917rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.qr-modal-close:hover {
    border-color: #2882ff;
    color: #2882ff;
    transform: rotate(90deg);
}

/* ---- 右列：地圖 ---- */
.contact-map {
    position: relative;
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #181820;
    overflow: hidden;
    min-height: 1.666667rem;       /* 320px，保證兩列等高 */
}
.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 1.666667rem;
    border: 0;
    display: block;
    filter: grayscale(0.2) brightness(0.9);   /* 略暗，貼合深色主題 */
}

/* ============ 響應式 ============ */
@media (max-width: 1024px) {
    .contact-layout { grid-template-columns: 1fr; }
    .contact-map { min-height: 1.25rem; }   /* 移動端地圖稍矮 */
}
@media (max-width: 768px) {
    .contact-page .page-title { font-size: 0.20rem; }
    .contact-page .page-subtitle { font-size: 0.09rem; }
    .page-head { margin-bottom: 0.24rem; }
    .company-block { padding: 0.13rem 0.15rem; }
    .company-name { font-size: 0.13rem; line-height: 0.17rem; }
    .company-intro { font-size: 0.085rem; line-height: 0.15rem; }
    .info-row { gap: 0.07rem; padding: 0.085rem 0; }
    .info-icon { width: 0.135417rem; height: 0.135417rem; }
    .info-icon svg { width: 0.078125rem; height: 0.078125rem; }
    .info-value { font-size: 0.095rem; }
    .info-qrcode { width: 0.15625rem; height: 0.15625rem; }
    .contact-map { min-height: 1.041667rem; }   /* 200px */
    .contact-map iframe { min-height: 1.041667rem; }
    /* 二維碼放大彈層：移動端圖稍小、點近按鈕易點 */
    .qr-modal-img { width: 0.677083rem; height: 0.677083rem; padding: 0.010417rem; }   /* 130px */
    .qr-modal-box { padding: 0.10rem; }
    .qr-modal-close { width: 0.09375rem; height: 0.09375rem; font-size: 0.083333rem; top: -0.0625rem; right: -0.0625rem; }
}