/* 文件描述：K8s 相关服务页样式（结构对齐旧站 Kubernetes.css，视觉对齐 zst2026 设计变量） */

body.k8s-page {
  padding-top: 0;
  background: var(--slate-50);
}


/* ── 主内容区 ── */
.k8s-main {
  padding: clamp(48px, calc(100vw * 100 / 1440), 100px) 0;
}

.k8s-main-inner {
  max-width: min(980px, 100%);
}

/* ── 图文行（左文右图 / 反向） ── */
.k8s-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, calc(100vw * 80 / 1440), 120px);
}

.k8s-row--reverse {
  flex-direction: row-reverse;
}

.k8s-row-text {
  flex: 1;
  min-width: 0;
}

.k8s-row-title {
  margin: 0 0 clamp(24px, calc(100vw * 40 / 1440), 40px);
  font-size: clamp(26px, calc(100vw * 36 / 1440), 36px);
  font-weight: 600;
  color: var(--on-surface, #1a2736);
  line-height: 1.2;
}

.k8s-row-desc {
  margin: 0;
  font-size: var(--fs-16);
  color: var(--on-surface-variant, #37475a);
  line-height: 1.875;
}

.k8s-row-media {
  flex-shrink: 0;
}

/* ── 图标雪碧图（内容来自旧站 Kubernetes_icon.svg） ── */
.k8s-icon {
  display: block;
  width: clamp(100px, calc(100vw * 140 / 1440), 140px);
  height: clamp(100px, calc(100vw * 140 / 1440), 140px);
  background: url("/static/skin/images/service/k8s-icons.svg") no-repeat;
  background-size: 300% 100%;
}

.k8s-icon--1 {
  background-position: 0 0;
}

.k8s-icon--2 {
  background-position: 50% 0;
}

.k8s-icon--3 {
  background-position: 100% 0;
}

/* ── Delivery 浅底带 ── */
.k8s-band {
  margin-top: clamp(48px, calc(100vw * 100 / 1440), 100px);
  padding: clamp(48px, calc(100vw * 80 / 1440), 80px) 0 clamp(56px, calc(100vw * 100 / 1440), 100px);
  background: var(--blue-bg, #f2faff);
}

.k8s-row--last {
  margin-top: clamp(48px, calc(100vw * 100 / 1440), 100px);
}

/* ── 移动端：与旧站一致改为上下堆叠 ── */
@media (max-width: 760px) {
  .k8s-row,
  .k8s-row--reverse {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .k8s-row--reverse .k8s-row-media {
    order: 2;
  }

  .k8s-row--reverse .k8s-row-text {
    order: 1;
  }

  .k8s-hero-title {
    font-size: clamp(28px, 8vw, 46px);
  }
}