/**
 * PCB 中心页 · 段9 行业适配（横向轮播）
 *
 * 数值取自 Figma 实测：标题 #14363F 40px/73（居中）；副标题 #008C11 24px/42；
 * 正文 #666666 16px/20（1082 宽）；按钮 350×60（圆角 4 + 描边 #008C11，两个横排）；
 * 卡片 664 宽（图 664×338，间距 34）；卡标题 #14363F 24px/31；卡说明 #14363F 14px/20；
 * View More #008C11 16px（仅激活卡显示）；底部注记 14px。
 */

.pcb-industries {
  /* 设计稿该段白底 7820..8927：说明条底 8986 → 段底 62。 */
  padding-block: 64px 62px;
  background: #ffffff;
}

/*
 * 段8 Project Fit：设计稿是白底 + **段首一道全幅浅色带**。
 *
 * 设计稿节点 `1:111`（RECTANGLE y=7821 h=592 1920 宽，填充 #F9FBFA）是一块独立的全幅矩形，
 * 不是整段背景 —— 卡片之间的空隙实测在 y≈8414 之后才转白，与色带底 7821+592=8413 吻合。
 *
 * 用段自身的 `background-image` 画这道带，而不是 `::before` 绝对定位元素：
 * 同层里「绝对定位元素」的绘制次序在所有静态内容之后，会把这按段的标题压住；
 * 背景层则天然在所有内容之下，不涉及层叠与 z-index。
 *
 * 仅 PCB 页需要：PCBA 侧同一段落的设计（节点 `1:552`：y=8105 h=1429）是**整段浅底**，
 * 由 `.pcb-center-page.pcba-center-page` 的段背景承担，那些规则在 `pcba-center/10-industries.css`。
 */
.page-template-page-pcb-center-php .pcb-industries {
  background-color: #ffffff;
  background-image: linear-gradient(#f9fbfa, #f9fbfa);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 592px;
}

.pcb-industries__head {
  max-width: 1780px;
  /* 设计稿（两页同值）：双按钮底 → 卡片顶 42（PCB 8178 → 8220、PCBA 8462 → 8504）。 */
  margin: 0 auto 42px;
  padding: 0 40px;
  text-align: center;
}

.pcb-industries__title {
  /* 设计稿（两页同值）：标题框底 → 小标题顶 22（PCB 7957 → 7979、PCBA 8241 → 8263）。 */
  margin: 0 0 22px;
  font-family: var(--pcb-font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 73px;
  color: #14363f;
}

.pcb-industries__subtitle {
  /* 设计稿（两页同值）：小标题框底 → 正文顶 14（PCB 8021 → 8035、PCBA 8305 → 8319）。 */
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  color: #008c11;
}

.pcb-industries__lead {
  max-width: 1082px;
  /* 设计稿（两页同值）：正文框底 → 双按钮顶 43（PCB 8075 → 8118、PCBA 8359 → 8402）。 */
  margin: 0 auto 43px;
  font-size: 16px;
  line-height: 20px;
  color: #666666;
}

.pcb-industries__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}

.pcb-industries__cta {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 350px;
  min-height: 60px;
  padding: 0 14px 0 22px;
  font-size: 16px;
  font-weight: 600;
  color: #14363f;
  text-decoration: none;
  border: 1px solid #008c11;
  border-radius: 4px;
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

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

.pcb-industries__cta-dot svg { width: 14px; height: 14px; }

.pcb-industries__cta:hover {
  background: #eff5f3;
  box-shadow: 0 12px 26px rgba(0, 140, 17, 0.12);
}

/* ── 轮播舞台（卡片 664 宽，首尾留白使首卡居中）────────── */

.pcb-industries__stage { position: relative; }

.pcb-industries__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 664px;
  gap: 34px;
  padding: 4px max(24px, calc((100% - 664px) / 2)) 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* 客户 1009 r3/r10「上面卡片部分做成可以鼠标滑动的」：轨道已纳入
     assets/js/page-pcb-center.js 的 dragTracks（按住左键拖动 / 悬停滚轮横移）。 */
  cursor: grab;
}

.pcb-industries__rail::-webkit-scrollbar { display: none; }

/* 拖拽期间临时关闭 scroll-snap 与平滑滚动，避免松手前的强制吸附与惯性。 */
.pcb-industries__rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.pcb-industries-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: center;
  background: #ffffff;
  border: 1px solid #cce0d7;
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/*
 * 选中态（客户 9/23 设计新增 r11「这个做成鼠标上移 选中吧」）：
 * 绿框 + 投影 + 绿标题 + View More 改为 **hover 选中**（键盘 :focus-within 同态），
 * 不再常驻在任何一张卡上 —— 模板里的 is-active 类仅用于 JS 首屏居中定位。
 */
.pcb-industries-card:hover,
.pcb-industries-card:focus-within {
  border-color: #008c11;
  box-shadow: 0 18px 40px rgba(4, 62, 48, 0.1);
}

.pcb-industries-card__media {
  height: 338px;
  margin: 0;
  overflow: hidden;
}

.pcb-industries-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcb-industries-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* 设计稿三张卡的标题 / 说明 / View More 都按卡片中线居中。
     实测激活卡（卡体 626..1291，中心 958）：标题绿色文字 771..1147（中心 959）、
     说明 693..1224（中心 958）、View More 898..1005（中心 951）；PCB / PCBA 两页画板一致。
     原先无 text-align，左对齐会把标题推到 671、View More 推到 670，与设计稿差约 100 / 230px。 */
  align-items: center;
  text-align: center;
  padding: 37px 40px 40px;
}

.pcb-industries-card__title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 31px;
  color: #14363f;
  transition: color 0.3s ease;
}

.pcb-industries-card:hover .pcb-industries-card__title,
.pcb-industries-card:focus-within .pcb-industries-card__title { color: #008c11; }

.pcb-industries-card__text {
  max-width: 574px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #14363f;
}

/* View More 只在激活卡显示 */
.pcb-industries-card__more {
  display: none;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #008c11;
  text-decoration: none;
}

.pcb-industries-card:hover .pcb-industries-card__more,
.pcb-industries-card:focus-within .pcb-industries-card__more { display: inline-flex; }

.pcb-industries-card__more svg { width: 16px; height: 16px; }

/* ── 说明条 + 轮播按钮同一行（客户 1009 r3/r10）───────── */

/* 客户 1009 r3/r10「下面文字上移跟右侧箭头齐平」：
   原先 Project Fit Note（.pcb-industries__note）与翻页箭头（.pcb-industries__nav）
   各自成行（实测 PCB 页 nav y=8899 h=53、note y=8952 h=62）。模板改为把两者
   包进 .pcb-industries__meta 单行 flex：说明条靠左、箭头靠右、垂直居中。 */
.pcb-industries__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1718px;
  margin: 24px auto 0;
  padding: 0 40px;
}

/* ── 轮播按钮（右下角圆形）──────────────────────────── */

.pcb-industries__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  /* 行内布局由 .pcb-industries__meta 承担宽度与内边距；
     margin-left:auto 保证说明条缺省时箭头仍靠右。 */
  margin-left: auto;
}

.pcb-industries__nav-btn {
  display: grid;
  place-items: center;
  /* 设计稿（image58 实测）：直径约 53 的**绿色描边圆、无填充**，两圆间距 10。
     原实现是 48 + 白底 + 1px #B8D8BC 浅色描边 —— 客户需求表第 26 行「跟设计稿不一样」。 */
  width: 53px;
  height: 53px;
  color: #008c11;
  cursor: pointer;
  background: transparent;
  border: 2px solid #008c11;
  border-radius: 50%;
  transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease, opacity 0.24s ease;
}

.pcb-industries__nav-btn svg { width: 18px; height: 18px; }

.pcb-industries__nav-btn:hover:not(:disabled) {
  color: #ffffff;
  background: #008c11;
  border-color: #008c11;
}

.pcb-industries__nav-btn:disabled { cursor: default; opacity: 0.35; }

/* ── 底部注记 ───────────────────────────────────────── */

.pcb-industries__note {
  position: relative;
  /* 客户 1009 r3/r10：宽度与内边距改由 .pcb-industries__meta 承载，
     说明条在行内占满左侧剩余空间（内容边界仍与下方绿带 141..1779 对齐）。 */
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.pcb-industries__quote {
  position: absolute;
  top: -22px;
  /* 说明条不再自带 40px 内边距，引号对齐到行内容左缘。 */
  left: 0;
  font-family: var(--pcb-font-display);
  font-size: 88px;
  line-height: 1;
  color: #ecf7ef;
}

.pcb-industries__note-label {
  position: relative;
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #008c11;
}

.pcb-industries__note-body {
  position: relative;
  /* 设计稿正文是**两行**（image58：首行到「product certification,」约 795 宽）。
     742 时刚好差一点点，会掉成 3 行（客户需求表第 26 行「跟设计稿不一样」）。 */
  max-width: 800px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
}

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

@media (max-width: 1500px) {
  .pcb-industries__title { font-size: 34px; line-height: 62px; }
  .pcb-industries__rail {
    grid-auto-columns: 520px;
    padding-inline: max(24px, calc((100% - 520px) / 2));
  }
  .pcb-industries-card__media { height: 280px; }
  .pcb-industries-card__body { padding: 26px 28px 30px; }
}

@media (max-width: 1080px) {
  .pcb-industries { padding-block: 48px 72px; }
  .pcb-industries__head { margin-bottom: 44px; }
  .pcb-industries__title { font-size: 26px; line-height: 46px; }
  .pcb-industries__subtitle { font-size: 18px; line-height: 32px; }
  .pcb-industries__lead { font-size: 15px; line-height: 24px; margin-bottom: 28px; }
  .pcb-industries__cta { min-width: 0; width: 100%; }
  .pcb-industries__rail {
    grid-auto-columns: 340px;
    padding-inline: 24px;
    gap: 18px;
  }
  .pcb-industries-card__media { height: 200px; }
  .pcb-industries-card__title { font-size: 20px; line-height: 26px; }
  .pcb-industries__meta { padding-inline: 24px; }
}

@media (max-width: 640px) {
  .pcb-industries__rail { grid-auto-columns: 86%; }
  .pcb-industries-card__body { padding: 20px 20px 24px; }
  /* 窄屏放不下并排：说明条与箭头改回上下排列（客户 1009 r3/r10 的并排仅在桌面生效）。 */
  .pcb-industries__meta {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
    margin-top: 40px;
  }
  .pcb-industries__quote { font-size: 64px; }
  /* 375 实测：堆叠后箭头独占一行靠右、左侧整段空置，且箭头距下一段顶 72px。
     箭头改整行居中，段底 72 → 48（与段顶一致），两个中心页移动端一致。 */
  .pcb-industries { padding-bottom: 48px; }
  .pcb-industries__nav { width: 100%; justify-content: center; margin-left: 0; }
}