/* ==============================================
 * header.css - 页面顶部Logo区（对照 home-1.jpg 设计稿）
 * ============================================== */

.site-header {
    position: relative;
    background: #fff;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--color-border-soft);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

/* —— 品牌区 —— */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.brand__logo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    position: relative;
}

.brand__logo svg,
.brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 竖线分隔（logo 与 slogan 之间） */
.brand__logo::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, transparent, #d1d5db, transparent);
}

.brand__slogan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 4px;
}

.brand__slogan-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-slogan);
    letter-spacing: 2px;
    font-style: italic;
}

.brand__slogan-bar {
    display: inline-block;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary-deep), var(--color-primary));
    opacity: 0.45;
}

.brand__slogan-sub {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    letter-spacing: 1px;
}

/* —— 联系区 —— */
.contact {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.contact__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.contact__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 20px;
    background: var(--color-primary-deep);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(69, 55, 132, 0.25);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base);
    text-decoration: none;
    letter-spacing: 0.5px;
}
.contact__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(69, 55, 132, 0.32);
}

.contact__phone {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}
.contact__phone::before {
    content: "📞";
    font-size: 16px;
}

.contact__qr {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 3px;
    cursor: pointer;
    transition: transform var(--duration-base) var(--ease-out);
    flex-shrink: 0;
}
.contact__qr:hover {
    transform: scale(1.05);
}
.contact__qr svg,
.contact__qr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* —— 顶部左右横幅图片 —— */
.site-header__brand,
.site-header__contact {
    display: inline-flex;
    flex-shrink: 0;
    text-decoration: none;
}

.site-header__brand img,
.site-header__contact img {
    height: 80px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* —— 响应式 —— */
@media (max-width: 900px) {
    .brand__logo { width: 60px; height: 60px; }
    .brand__logo::after { height: 36px; right: -10px; }
    .brand__slogan-title { font-size: 16px; }
    .brand__slogan-sub { display: none; }
    .contact__phone { display: none; }
    .site-header__brand img,
    .site-header__contact img { height: 64px; }
}

@media (max-width: 640px) {
    .brand__logo::after { display: none; }
    .brand__slogan { display: none; }
    .contact__cta span { display: none; }
    .contact__qr { display: none; }
    .site-header__brand img { height: 48px; }
    .site-header__contact img { height: 40px; }
}