/* ==========================================================
 * 煜通百泰 技术服务页样式 server.css
 * 包含：服务正文、服务项列表、服务卡片网格、专属服务卡片
 * 依赖：base.css（提供主题变量、sub-nav、fixed-ratio、common-title）
 * ========================================================== */

/* ==================== Banner 偏移（header fixed） ==================== */
.pro-banner { margin-top: var(--header-height); }
@media (max-width: 1199.98px) {
    .pro-banner { margin-top: 0; }
}

/* ==================== 服务正文区 ==================== */
.server-section-white { background: var(--color-white); }
.server-section-bg { background: var(--color-bg); }

.server-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* 公共标题已复用 .common-title */

/* 正文段落 */
.server-text {
    font-size: 1.25rem;
    line-height: 2em;
    color: var(--color-text);
    margin: 0;
    text-indent: 3.75rem;
}

/* 服务项列表（3列横排） */
.server-feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.server-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-white);
    padding: 1.25rem 1rem;
    border-radius: 0.25rem;
}
.server-feature-item img { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.server-feature-item span {
    font-size: 1.5rem;
    color: var(--color-text);
}

/* ==================== 服务卡片网格（生产基地） ==================== */
.server-base {
    background: var(--color-white);
}
.server-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}
.server-card {
    background: var(--color-bg);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* 服务卡片图片（2:1 比例） */
.server-card-pic {
    width: 100%;
}
.server-card-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 服务卡片内容 */
.server-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}
.server-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.server-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}
.server-card-title-lines {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 0;
}
.server-card-title-line {
    width: 100%;
    height: 0.125rem;
    background: var(--color-primary);
}
.server-card-desc {
    font-size: 1.25rem;
    line-height: 2em;
    color: var(--color-text-2);
    margin: 0;
}

/* ==================== 企业客户专属服务 ==================== */
.server-exclusive {
    background: var(--color-bg);
}
.server-exclusive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 3rem;
}
.server-exclusive-card {
    background: var(--color-white);
    padding: 4rem 1rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}
.server-exclusive-icon {
    padding: 1.5rem;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.625rem;
}
.server-exclusive-icon img { width: 3rem; height: 3rem; }
.server-exclusive-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.server-exclusive-desc {
    font-size: 1rem;
    color: var(--color-text-2);
    margin: 0;
}
.server-base{
    padding-top: 3rem;
    position: relative;
    overflow: hidden;
}
.server-base::before{
    content: '';
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: var(--color-primary);
    z-index: 1;
}
.server-base::after{
    content: '';
    position: absolute;
    top: 0.5rem ;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background: url('../images/icons/arrow-down.svg') no-repeat center center;
    background-size: cover;
    z-index: 2;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1199.98px) {
    .server-card-grid { gap: 1.5rem; }
    .server-exclusive-icon { padding: 1rem; }
    .server-exclusive-icon img { width: 2rem; height: 2rem; }
}
@media (max-width: 991.98px) {
    .server-feature-list { grid-template-columns: 1fr; gap: 0.75rem; }
    .server-card-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .server-exclusive-grid { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 767.98px) {
    .server-content { gap: 1rem; }
    .server-text { font-size: 1rem; text-indent: 2rem; }
    .server-feature-item span { font-size: 1.125rem; }
    .server-card-grid { grid-template-columns: 1fr; }
    .server-card-title { font-size: 1.25rem; }
    .server-card-desc { font-size: 1rem; }
    .server-base { padding-top: 1rem; }
    .server-base::before { width: 4rem; height: 4rem; top: -2rem; }
    .server-base::after { top: 0.25rem; }
    .server-exclusive-card { padding: 2rem 1rem; }
}