/**
 * Component Sourcing 子页 · 段6 材料就绪门禁
 *
 * 数值取自 Figma 实测：外层白卡 1636×375（#FFFFFF 圆角 20 描边 #CCE0D7）；
 * 内面板 805×307（#F9FBFA 圆角 20）；面板标题 #14363F 20px；进度标签 #008C11 16px；
 * 进度条底 #CCE0D7 2px（755 宽）/ 填充 #008C11；
 * 装饰巨字 #EFF5F3 96px/128（158×111）；左列步骤名 #008C11 36px；
 * 左列说明 #14363F 16px/20；配图 237×172（圆角 0 0 20 0）；
 * 按钮 366×60（圆角 4 描边 #008C11，透明底）+ 绿圆 32×32；
 * 清单项 #666666 16px/20；勾选框 14×14（#EFF5F3 圆角 2 描边 #B8D8BC）；
 * 勾选内核 10×10（#008C11 圆角 2）。
 */

.csrc-gate {
  /* 设计稿：与段5 间距合计 70px（两段分摊），底部 104px 到下一段 */
  padding-block: 35px 104px;
  background: #ffffff;
}

.csrc-gate__inner {
  max-width: 1718px /* = 设计稿内容宽 1638 + 左右各 40 padding */;
  margin: 0 auto;
  padding: 0 40px;
}

/* 外层白卡 */
.csrc-gate__card {
  position: relative;
  display: grid;
  /* 设计稿实测（Figma 节点 + 设计截图互证）：
     卡片 x141 / 宽 1638，内面板 x946..1762（宽 817），左列文本 x331。
     → 卡片左右内边距只有 ~15（原实现按 60 做，右列整体偏左 64px）；
       左列 729 + 间距 60 + 面板 817 = 1606 = 卡片内容宽。 */
  grid-template-columns: minmax(0, 729px) minmax(0, 817px);
  gap: 0 60px;
  justify-content: space-between;
  max-width: 1636px;
  min-height: 375px;
  margin: 0 auto;
  padding: 40px 15px;
  background: #ffffff;
  border: 1px solid #cce0d7;
  border-radius: 20px;
  overflow: hidden;
}

/* ── 左列 ─────────────────────────────────────────────
 * 设计稿把 96px 幽灵巨字放在文本框**左侧**（作为左边缘水印），
 * 文字块整体右缩进到卡左 +190；此前是把巨字压在标题上方（负 margin），
 * 与设计稿不同。 */
.csrc-gate__side {
  position: relative;
  /* 卡内容左 157 + 174 = 331（设计稿 kicker x） */
  padding: 45px 0 0 174px;
}

.csrc-gate__kicker {
  display: block;
  /* 设计稿节点 1:1332 实测 16px Outfit SemiBold #97A29C / 行高 20
     （此前按 14px 实现，偏小）；kicker 顶 3438 → 标题顶 3479，间距 41。 */
  margin-bottom: 21px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #97a29c;
}

/* 96px 装饰巨字（设计稿 1:1329：Outfit Black 96px / 色 #EFF5F3 / 158×111）。
   绝对定位到左列左边缘之外，纵向对齐标题/说明区：
   设计稿巨字字形顶 3458 = kicker 顶 3438 + 20。 */
.csrc-gate__ghost {
  position: absolute;
  top: 65px;
  left: 7px;
  margin: 0;
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  color: #eff5f3;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
}

.csrc-gate__step {
  position: relative;
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 600;
  line-height: 42px;
  color: #008c11;
}

.csrc-gate__desc {
  max-width: 532px;
  margin: 0 0 30px;
  font-size: 16px;
  /* 设计稿 1:1331 为 Outfit SemiBold #14363F */
  font-weight: 600;
  line-height: 20px;
  color: #14363f;
}

/* 配图（左下角，237×172，圆角 0 0 20 0） */
.csrc-gate__photo {
  position: absolute;
  /* 客户 9/23 设计新增 r31「底纹贴边」：电路底纹贴卡片左下角
     （被 20px 圆角裁切），原来浮在 bottom:-40px / left:100px。 */
  bottom: 0;
  left: 0;
  width: 237px;
  height: 172px;
  object-fit: contain;
  object-position: left bottom;
  border-radius: 0 0 0 20px;
  opacity: 0.55;
  pointer-events: none;
}

/* 按钮：透明底 + 绿描边 + 右侧绿圆（设计稿 1:1270 / 1:1272） */
.csrc-gate__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 366px;
  min-height: 60px;
  padding: 0 14px 0 24px;
  font-size: 17px;
  font-weight: 600;
  color: #14363f;
  text-decoration: none;
  background: transparent;
  border: 1px solid #008c11;
  border-radius: 4px;
  transition: background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.csrc-gate__cta-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #ffffff;
  background: #008c11;
  border-radius: 50%;
}

.csrc-gate__cta-dot svg { width: 16px; height: 16px; }

.csrc-gate__cta:hover {
  background: #eff5f3;
  box-shadow: 0 12px 26px rgba(0, 140, 17, 0.14);
}

/* ── 右面板 ─────────────────────────────────────────── */

.csrc-gate__panel {
  align-self: start;
  padding: 31px 21px 26px;
  background: #f9fbfa;
  border-radius: 20px;
}

.csrc-gate__panel-head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.csrc-gate__panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  color: #14363f;
}

.csrc-gate__progress {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #008c11;
  white-space: nowrap;
}

/* 进度条 755×2 */
.csrc-gate__bar {
  position: relative;
  height: 2px;
  margin-bottom: 30px;
  background: #cce0d7;
  border-radius: 20px;
}

.csrc-gate__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #008c11;
  border-radius: 20px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 清单：两列。设计稿列距 22（节点实测列 2 文案 x1393 - 列 1 x995 = 398 的列距），
   列宽 376 才能让 "Source, availability, price and delivery accepted"（335 宽）不折行。 */
.csrc-gate__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csrc-gate-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* 客户 9/23 设计新增 r31「文字太大」：16/20 → 13/18，正确稿里基本一行一项。 */
  font-size: 13px;
  line-height: 18px;
  color: #666666;
  cursor: pointer;
}

/* 可勾选行的键盘焦点（行是 role=checkbox，见模板与 JS）。 */
.csrc-gate-item:focus-visible {
  outline: 2px solid #008c11;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 勾选框 14×14 */
.csrc-gate-item__box {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  background: #eff5f3;
  border: 1px solid #b8d8bc;
  border-radius: 2px;
  transition: background 0.24s ease, border-color 0.24s ease;
}

/* 勾选内核 10×10 */
.csrc-gate-item.is-aligned .csrc-gate-item__box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #008c11;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.csrc-gate-item.is-aligned .csrc-gate-item__text { color: #14363f; }

/* ── 响应式 ─────────────────────────────────────────── */

@media (max-width: 1500px) {
  .csrc-gate__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 0 40px;
    padding: 32px 40px;
  }
  .csrc-gate__side { padding: 32px 0 0 140px; }
  .csrc-gate__ghost { top: 40px; left: 12px; font-size: 76px; }
  .csrc-gate__step { font-size: 30px; line-height: 36px; }
  .csrc-gate__cta { min-width: 0; width: 100%; }
  .csrc-gate__photo { display: none; }
}

@media (max-width: 1080px) {
  .csrc-gate { padding-block: 52px 72px; }
  .csrc-gate__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 28px 24px;
  }
  .csrc-gate__side { padding: 0 0 0 96px; }
  .csrc-gate__ghost { top: 4px; left: 0; font-size: 62px; }
  .csrc-gate__step { font-size: 26px; line-height: 32px; }
  .csrc-gate__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .csrc-gate__panel { padding: 22px 18px; }
  .csrc-gate__panel-head { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 640px) {
  .csrc-gate__cta { flex-direction: row; min-height: 54px; font-size: 15px; padding-left: 16px; }
  .csrc-gate__cta-dot { width: 28px; height: 28px; }
  .csrc-gate__side { padding: 0 0 0 72px; }
  .csrc-gate__ghost { top: 2px; left: 0; font-size: 48px; }
}