/* ========================
   联系我们页样式
   ======================== */

/* 联系我们页主体布局：使用网格布局，左侧内容区 : 右侧侧边栏 = 3 : 1 */
.contact-layout {
    display: grid; /* 网格布局 */
    grid-template-columns: 3fr 1fr; /* 左侧3份，右侧1份 */
    gap: 12px; /* 减小左右两栏之间的间距 */
    align-items: start; /* 顶部对齐 */
}

/* 联系我们页主内容区：左侧内容区域 */
.contact-main {
    min-height: 360px; /* 最小高度，确保有足够空间 */
}

/* 联系信息卡片：显示联系方式的白色卡片 */
.contact-card {
    background: #fff; /* 白色背景 */
    border: 1px solid #e5e5e5; /* 浅灰色边框 */
    border-radius: 0; /* 直角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* 轻微阴影效果 */
}

/* 联系信息标题 */
.contact-title {
    margin: 0 0 12px; /* 上下外边距：上0 下12px */
    font-size: 22px; /* 字体大小 */
}

/* 联系信息文本内容 */
.contact-text {
    margin: 0 0 16px; /* 上下外边距：上0 下16px */
    color: #444; /* 深灰色文字 */
    line-height: 1.6; /* 行高 */
    /* 支持HTML内容渲染，包括图片、段落等 */
}

/* 联系信息文本中的图片：限制最大宽度，高度按比例调整 */
.contact-text img {
    max-width: min(100%, 800px) !important;
    /* 限制最大宽度为800px或容器宽度（取较小值），避免图片过大，使用!important覆盖内联样式 */
    width: auto;
    /* 宽度自动，保持原始比例 */
    height: auto;
    /* 高度自动调整，保持比例 */
    display: block;
    /* 块级元素 */
    margin: 16px auto;
    /* 上下16px外边距，水平居中 */
    border-radius: 0;
    /* 直角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}

/* 联系信息元数据列表：包含电话、邮箱、地址等信息 */
.contact-meta {
    list-style: none; /* 移除列表样式 */
    padding: 0; /* 无内边距 */
    margin: 0; /* 无外边距 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 纵向排列 */
    gap: 8px; /* 列表项之间的间距 */
}

/* 联系信息标签：如"电话"、"邮箱"等 */
.contact-meta .label {
    display: inline-block; /* 行内块元素 */
    min-width: 48px; /* 最小宽度，保持对齐 */
    color: #666; /* 中灰色文字 */
    font-weight: 600; /* 中等粗细 */
}

/* 联系信息值：具体的联系方式内容 */
.contact-meta .value {
    color: #333; /* 深灰色文字 */
    margin-left: 8px; /* 左侧外边距 */
}

/* 联系信息中的链接：如邮箱、网址等 */
.contact-meta .link {
    color: #1a73e8; /* 蓝色链接 */
    text-decoration: none; /* 无下划线 */
    word-break: break-all; /* 允许长链接换行 */
}

/* 联系信息占位符：当没有联系信息时显示的占位区域 */
.contact-placeholder {
    min-height: 360px; /* 最小高度 */
    background: #fafafa; /* 浅灰色背景 */
    border: 1px dashed #e0e0e0; /* 虚线边框 */
    border-radius: 0; /* 直角 */
}

/* 侧边栏中的广告链接：确保广告可以正常显示 */
.contact-sidebar .ad-banner-link {
    display: block; /* 块级元素 */
}

/* ========================
   移动端布局（手机等小屏幕）
   - 断点：768px 及以下
   - 广告区移动到文字区域下面
   ======================== */
@media (max-width: 768px) {
    .contact-layout {
        display: flex;              /* 改为纵向排列 */
        flex-direction: column;
        gap: 12px;
    }

    .contact-main,
    .contact-sidebar {
        width: 100%;                /* 占满宽度 */
    }
}