/* ==========================================================================
   联系我们（版式参照通锐 trvip.cn）
   首屏 + 4 张联系方式卡 + 在线留言（左说明 / 右表单）
   依赖 about.css 的 .tr-container / :root 变量 / .tr-sec-title / .tr-ab-points
   ========================================================================== */

.tr-page-hero--contact {
    min-height: 460px;
    padding: 60px 0;
    background: linear-gradient(135deg, #062338 0%, #0b4a75 100%);
}

.tr-page-hero--contact .tr-page-hero-bg {
    opacity: 1;
}

/* 首屏压暗层：保证白色标题在实景图上清晰可读 */
.tr-page-hero--contact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 18, 32, .84) 0%, rgba(4, 18, 32, .62) 46%, rgba(4, 18, 32, .28) 100%);
}

.tr-page-hero--contact .tr-container {
    z-index: 2;
    text-align: left;
}

.tr-page-hero--contact h1 {
    margin: 0;
    font-size: 46px;
    letter-spacing: 2px;
}

/* ---------------------------- 联系方式卡片 ---------------------------- */
.tr-ct-info {
    padding: 76px 0 70px;
    background: #fff;
}

.tr-ct-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.tr-ct-info-card {
    padding: 34px 24px;
    text-align: center;
    background: #f7f9fc;
    border: 1px solid #eef1f5;
    transition: all .35s ease;
}

.tr-ct-info-card:hover {
    background: #fff;
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(6, 26, 43, .12);
    transform: translateY(-4px);
}

.tr-ct-info-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 22px;
    color: #fff;
    background: var(--tr-main);
    border-radius: 50%;
}

.tr-ct-info-card h3 {
    margin: 18px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.tr-ct-info-value {
    display: block;
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: #0b4a75;
    /* 中文按语义换行，邮箱这类长串才允许强制断行 */
    word-break: normal;
    overflow-wrap: anywhere;
    transition: color .3s ease;
}

a.tr-ct-info-value:hover {
    color: var(--tr-main);
}

/* ---------------------------- 在线留言 ---------------------------- */
.tr-ct-form {
    padding: 70px 0 80px;
    background: #f5f8fc;
}

.tr-ct-form-box {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.tr-ct-form-txt {
    flex: 1;
    min-width: 0;
}

.tr-ct-para {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.95;
    color: #555;
    text-align: justify;
}

.tr-ct-points {
    grid-template-columns: 1fr;
    gap: 10px;
}

.tr-ct-form-main {
    flex: 0 0 52%;
    max-width: 52%;
    padding: 34px 32px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(6, 26, 43, .08);
}

/* 表单 */
.tr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tr-field {
    margin: 0;
}

.tr-field--full {
    grid-column: 1 / -1;
}

.tr-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.tr-field label i {
    font-style: normal;
    color: #e8590c;
}

.tr-field input,
.tr-field textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    color: #333;
    background: #f7f9fc;
    border: 1px solid #e3e8ef;
    border-radius: 0;
    outline: none;
    transition: border-color .25s ease, background .25s ease;
}

.tr-field input:focus,
.tr-field textarea:focus {
    background: #fff;
    border-color: var(--tr-main);
}

.tr-field textarea {
    height: 130px;
    resize: vertical;
}

.tr-form-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tr-form-captcha-input {
    flex: 1;
}

.tr-form-captcha-btn {
    flex: 0 0 138px;
    width: 138px;
}

.tr-form-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}

.tr-form-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 34px;
    font-size: 15px;
    color: #fff;
    background: var(--tr-main);
    border: 0;
    cursor: pointer;
    transition: background .3s ease;
}

.tr-form-btn:hover {
    background: #0052a3;
}

.tr-form-tip {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #9aa4b1;
}

/* 表单提示信息（提交成功/失败） */
.tr-ct-form-main .error-container,
.tr-ct-form-main .layui-layer-content {
    font-size: 14px;
}

/* ---------------------------- 响应式 ---------------------------- */
@media screen and (max-width: 992px) {
    .tr-page-hero--contact h1 {
        font-size: 38px;
    }

    .tr-ct-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-ct-form-box {
        gap: 36px;
    }

    .tr-ct-form-main {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .tr-page-hero--contact {
        min-height: 340px;
        padding: 44px 0;
    }

    .tr-page-hero--contact h1 {
        font-size: 28px;
    }

    .tr-ct-info {
        padding: 44px 0 40px;
    }

    .tr-ct-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tr-ct-info-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 12px;
        padding: 16px 18px;
        text-align: left;
    }

    .tr-ct-info-ico {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .tr-ct-info-card h3 {
        margin: 0;
        font-size: 15px;
    }

    .tr-ct-info-value {
        width: 100%;
        margin: 6px 0 0;
        padding-left: 54px;
        font-size: 14px;
        word-break: break-word;
    }

    .tr-ct-form {
        padding: 44px 0 48px;
    }

    .tr-ct-form-box {
        display: block;
    }

    .tr-ct-form-main {
        margin-top: 24px;
        padding: 24px 20px;
    }

    .tr-form-grid {
        grid-template-columns: 1fr;
    }

    .tr-form-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}