/* ============================================================
   Contact — Facilities Overview
   Figma: #596:34061 (1920×1580 白底)
   6 卡固定坐标：x 80/435/790/1145/1500（340 宽 + 15 gap）
   行 1 y384（高 500/500/335/430/335），行 2 y829（Yangjiang II 335）
   年份 pill + 名称 + 绿色定位图标 + 底部 WELL-T 水印
   ============================================================ */

.ct-fac {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1580;
  background: var(--color-white);
  overflow: hidden;
}

.ct-fac__head {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 7.53%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: max-content;
}

.ct-fac__title {
  font-size: min(3.958vw, 4.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0;
}

.ct-fac__desc {
  font-size: min(1.75rem, 1.667vw);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  opacity: 0.7;
  max-width: 1008px;
  margin: 32px 0 0;
}

.ct-fac__grid {
  position: absolute;
  inset: 0;
  top: 1.52%;               /* 标题区下方 + 间距 */
  pointer-events: none;
}

/* ---------- 6 张卡（绝对定位，340/1920 = 17.71%） ---------- */
.ct-fac__card {
  position: absolute;
  width: 17.71%;                     /* 340/1920 */
  margin: 0;
  pointer-events: auto;
}

.ct-fac__card--tall { height: 31.65%; }    /* 500/1580 */
.ct-fac__card--xl   { height: 27.22%; }    /* 430/1580 */
.ct-fac__card--s    { height: 21.2%; }     /* 335/1580 */

/* 行 1：y384 = 24.3%  （nth-child 按互换后的 DOM 顺序：4=Hubei 2026，5=Yangjiang I 2012） */
.ct-fac__card:nth-child(1) { left: 4.17%;  top: 24.3%; height: 31.65%; }  /* Dongguan 340×500 */
.ct-fac__card:nth-child(2) { left: 22.66%; top: 24.3%; height: 31.65%; }  /* Jiangmen 340×500 */
.ct-fac__card:nth-child(3) { left: 41.15%; top: 24.3%; height: 21.2%; }   /* Xiantao 340×335 */
.ct-fac__card:nth-child(4) { left: 78.13%; top: 24.3%; height: 21.2%; }   /* Hubei（原 Yangjiang I 位置） */
.ct-fac__card:nth-child(5) { left: 59.64%; top: 24.3%; height: 27.22%; }  /* Yangjiang I（原 Hubei 位置） */
/* 行 2：Yangjiang II @ (1145,829) */
.ct-fac__card:nth-child(6) { left: 59.64%; top: 52.47%; height: 21.2%; }  /* 829/1580 */

/* 图片包裹层：裁剪 hover 放大溢出，并承载圆角（8px） */
.ct-fac__media {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ct-fac__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hover 缓动放大（PC 鼠标 / 移动端点按 sticky hover 均触发）；
     独立 scale 属性，不与视差等 transform 冲突 */
  scale: 1;
  transition: scale var(--duration-slow) var(--ease-standard);
}

.ct-fac__card:hover .ct-fac__img {
  scale: 1.08;
}

/* 年份 pill（卡内左上，Figma padding 2px 8px） */
.ct-fac__tag {
  position: absolute;
  top: 4.7%;                         /* 18/卡高基准≈18/335 或 18/500；统一用 18px */
  left: 5.9%;                        /* 20/340 */
  padding: 2px 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.15);
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
}

/* 名称 + 绿色定位图标（卡下方 18px） */
.ct-fac__name {
  position: absolute;
  top: 100%;
  margin-top: 5px;                   /* 18px 等效（区块等比） */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: min(0.9375vw, 1.125rem);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.ct-fac__pin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-fac__pin svg {
  width: 18px;
  height: 20px;
}

/* 2015 图：PC 显示长文字、移动端显示短文字（互斥显示） */
.ct-fac__name-pc { display: inline; }
.ct-fac__name-m  { display: none; }

/* PC：2012 图（Yangjiang I，xl 卡）下方不显示名称 */
.ct-fac__card:nth-child(5) .ct-fac__name { display: none; }

/* 底部 WELL-T 水印（SVG，贴左贴底，同 markets.html） */
.ct-fac__watermark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 940px;
  max-width: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1440px) {
  .ct-fac {
    aspect-ratio: auto;
    padding: 0 60px 120px;   /* 底部留白：水印（同 products 绝对贴底）上方留出间距 */
  }
  .ct-fac__head {
    position: static;
    transform: none;
    width: 100%;
    margin-bottom: 120px;
  }
  .ct-fac__title {
    font-size: clamp(1.75rem, 0.97vw + 1.52rem, 3.25rem);
    line-height: 1.18;
    white-space: normal;
  }
  .ct-fac__desc {
    max-width: 60%;
  }
  .ct-fac__grid {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
  }
  .ct-fac__card {
    /* relative：让日期角标 .ct-fac__tag 锚定到卡片（static 时逃逸到 .ct-fac 不显示） */
    position: relative;
    left: 0;                 /* 清除 PC nth-child 残留 left 百分比（否则卡片依次右移成斜排） */
    top: auto;               /* 清除 PC nth-child 残留 top 百分比 */
    width: 100%;
    height: 420px !important;
  }
  /* nth-child 特异性 (0,2,1) 高于 .ct-fac__card，必须用同特异性分组覆盖残留定位 */
  .ct-fac__card:nth-child(1),
  .ct-fac__card:nth-child(2),
  .ct-fac__card:nth-child(3),
  .ct-fac__card:nth-child(4),
  .ct-fac__card:nth-child(5),
  .ct-fac__card:nth-child(6) {
    left: 0;
    top: auto;
  }
  /* PC 卡片下方显示名称（2012 图除外，见基础样式） */
  /* 水印恢复基础规则（绝对定位贴左贴底、width 940px / max-width 100%，同 products） */
}

@media (max-width: 1024px) {
  .ct-fac {
    padding: 80px var(--container-padding) 100px;   /* 左右边距与 Contact Us Now 蓝色卡片一致；底部给水印留白 */
  }
  /* 全部图片单列竖排、左右居中、两边留边距（同 ab-cta 卡片 max-width 480） */
  .ct-fac__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 100px;             /* 卡片行间距进一步加大 */
  }
  .ct-fac__card {
    width: 100%;
    max-width: 480px;
    height: 320px !important;
  }
  /* 名称恢复显示（1440 断点 display:none）：图片下方、左右居中，保留绿色梯形小图标 */
  .ct-fac__name {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: normal;
    text-align: center;
  }
  /* 2015 图：移动端显示短文字 */
  .ct-fac__name-pc { display: none; }
  .ct-fac__name-m  { display: inline; }
  /* 2012 图：移动端恢复显示名称（图片下方流内正常显示） */
  .ct-fac__card:nth-child(5) .ct-fac__name {
    display: flex;
  }
  /* 移动端按年份升序排列（PC 绝对定位 nth-child 不受 order 影响）：
     2002(1) → 2008(2) → 2012(5) → 2015(6) → 2017(3) → 2026(4) */
  .ct-fac__card:nth-child(1) { order: 1; }
  .ct-fac__card:nth-child(2) { order: 2; }
  .ct-fac__card:nth-child(5) { order: 3; }
  .ct-fac__card:nth-child(6) { order: 4; }
  .ct-fac__card:nth-child(3) { order: 5; }
  .ct-fac__card:nth-child(4) { order: 6; }
}

@media (max-width: 768px) {
  .ct-fac {
    padding: 64px var(--container-padding) 165px;
  }
  .ct-fac__head {
    margin-bottom: 60px;
  }
  .ct-fac__title {
    font-size: clamp(1.75rem, 0.81vw + 1.56rem, 3rem);
    line-height: 1.18;
  }
  .ct-fac__desc {
    max-width: 100%;
    font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  }
  /* 6 张图依此上下排放、左右居中、两边预留边距 */
  .ct-fac__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 80px;              /* 卡片行间距加大 */
  }
  .ct-fac__card {
    width: 100%;
    max-width: 480px;                  /* 居中且两边留边距 */
    height: 300px !important;
  }
  /* 移动端按年份升序排列 */
  .ct-fac__card:nth-child(1) { order: 1; }
  .ct-fac__card:nth-child(2) { order: 2; }
  .ct-fac__card:nth-child(5) { order: 3; }
  .ct-fac__card:nth-child(6) { order: 4; }
  .ct-fac__card:nth-child(3) { order: 5; }
  .ct-fac__card:nth-child(4) { order: 6; }
}

@media (max-width: 576px) {
  .ct-fac__title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    line-height: 1.18;
  }
}