/* ============================================================
   B&N International — 产品列表 / 产品详情 局部增强样式
   ------------------------------------------------------------
   作用页面：business.php（主营产品列表卡片）
             product-detail.php（产品独立详情页）
   说明：本文件不在构建 manifest 中，bn_asset() 会直接回退到源文件
         （路径?=mtime），无需触动 dist 产物，改完即生效。
   ============================================================ */

/* ---------- 1. 产品列表卡片：简介限制 2 行，超出省略 ---------- */
/* business.php 卡片 .biz-body 内唯一的 <p> 即「简介」(desc) */
.biz-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* 行数上限：2 行 */
  line-clamp: 2;                  /* 标准属性（部分新内核已支持） */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;        /* 末尾省略号（webkit 行截断时自动呈现） */
  flex: 0 0 auto;                 /* 不再撑满卡片，避免裁切内容下方留白 */
}
/* 「查看详情 →」始终贴卡片底部，与简介高度解耦 */
.biz-body .biz-more { margin-top: auto; }

/* ============================================================
   2. 产品详情：规格参数独立整行区块
   ============================================================ */
.pd-specs { margin: 0 0 2.25rem; scroll-margin-top: 100px; }
.pd-sec-title {
  position: relative;
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.pd-sec-title::before {
  content: "";
  position: absolute;
  left: 0; top: .12em; bottom: .12em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-light) 100%);
}
/* 规格表：两列网格 + 1px 发丝分隔线（圆角容器裁切），
   每行「参数名 / 参数值」清晰对应，全部参数按提交顺序铺开。 */
.pd-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
.pd-spec-item {
  background: var(--bg);
  display: flex;
  align-items: stretch;
}
.pd-spec-item dt {
  flex: 0 0 40%;
  max-width: 40%;
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--bg-soft);
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.pd-spec-item dd {
  flex: 1;
  margin: 0;
  padding: 1rem 1.15rem;
  color: var(--ink-700);
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  align-items: center;
  word-break: break-word;
}
/* 窄屏：单列堆叠，保证参数名/值不被挤压 */
@media (max-width: 640px) {
  .pd-spec-grid { grid-template-columns: 1fr; }
  .pd-spec-item dt { flex-basis: 36%; max-width: 36%; }
}

/* ============================================================
   3. 产品详情页整体美化（专业感增强）
   设计意图：桌面端两栏布局（左图集 ｜ 右信息），两栏在同一文档流中
            一起滚动、等高对齐 → 视觉平衡、滚动体验协调统一；
            左图集拉伸填满栏高、产品图以 cover 充满画框，消除下方留白；
            统一区块标题节奏、配色与留白；固定图集纵横比，避免换图跳动；
            桌面 / 移动端一致的阅读体验。
   ============================================================ */

/* 3.1 容器与两栏栅格 */
.pd { max-width: 1140px; margin: 0 auto; line-height: 1.7; }
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;          /* 移动端单列时各自自然高度 */
}
.pd-main { display: flex; flex-direction: column; gap: 2.25rem; align-self: start; }
.pd-main > .pd-summary { margin: 0; }
/* 面板内的区块在标签态内外都保持自然间距（不再直接挂在 .pd-main 下） */
.pd-tab-panel > .pd-spec-grid,
.pd-tab-panel > .pd-text-card { margin: 0; }

/* 桌面端：恢复图集吸顶固定（上一版视觉）—— 左图集钉在视口上方，
   右栏内容较长时顺畅滚过；右栏较短时两栏自然等高对齐。 */
@media (min-width: 901px) {
  .pd-media {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* 3.2 左栏图集：装裱画框（细边框 + 柔影 + 内衬），使产品图更具质感 */
.pd-media {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: .85rem;
  box-shadow: var(--shadow-sm);
}
.pd-media .bn-carousel.pd-gallery { margin-bottom: 0; }

/* 3.3 轮播主图：固定 4:3 纵横比，所有幻灯片等高 → 切换不跳动；
        去内边框，由外层画框提供边框，避免「框中框」。 */
.pd .bn-carousel-viewport {
  border: none;
  box-shadow: none;
  border-radius: var(--radius);
  background: var(--bg-soft);
  aspect-ratio: 4 / 3;
}
.pd .bn-carousel-track { height: 100%; }
.pd .bn-slide { height: 100%; }
.pd .bn-slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* 3.4 右栏概要：层级清晰、留白舒适 */
.pd-summary { gap: 1rem; align-items: flex-start; }
.pd-cat { margin-bottom: .15rem; }
.pd-title {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}
.pd-desc {
  max-width: 60ch;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink-700);
}
/* 注：概要区不再放按钮（原 .pd-actions 已移除）。
   咨询 / 返回两个链接统一后移到正文末尾的「行动区」与页尾，见本文件第 5 节。 */
/* 通用描边式幽灵按钮（about.php 等处也在用，此处保留定义） */
.btn-ghost {
  background: var(--surface);
  color: var(--ink-800);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover {
  background: rgba(10, 31, 68, .04);
  border-color: var(--brand);
  color: var(--brand);
}

/* 3.5 统一三大区块标题（规格参数 / 全部图片 / 相关产品）的视觉节奏 */
.pd-gallery-all-title,
.pd-related-title {
  position: relative;
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.pd-gallery-all-title::before,
.pd-related-title::before {
  content: "";
  position: absolute;
  left: 0; top: .12em; bottom: .12em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-light) 100%);
}

/* 3.6 「全部图片」网格：卡片化边框 + 悬停抬升 + 图片微缩放；点击放大全屏 */
.pd-gallery-all { margin-top: 2.75rem; }
.bn-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.bn-gallery-cell {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.bn-gallery-cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--transition);
}
.bn-gallery-cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand-light);
}
.bn-gallery-cell:hover img { transform: scale(1.06); }

/* 3.7 材质说明 / 应用场景：卡片化 + 悬停抬升 */
.bd-sec.pd-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.bd-sec.pd-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border);
}
.pd-card-title {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .85rem;
  padding-left: 12px;
  border-left: 3px solid var(--brand);
  line-height: 1.4;
}
.bd-sec.pd-card p {
  font-size: .96rem;
  color: var(--ink-800);
  line-height: 1.8;
  margin: 0;
}

/* 3.8 相关产品：卡片化 + 悬停微缩放 + 名称加重 */
.bd-related.pd-related {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
}
.bd-rel-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}
.bd-rel {
  display: flex;
  flex-direction: column;
  text-align: left;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.bd-rel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--brand-light);
}
.bd-rel img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform var(--transition);
}
.bd-rel:hover img { transform: scale(1.05); }
.bd-rel span {
  display: block;
  padding: .75rem .85rem .9rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-700);
  line-height: 1.45;
}

/* 3.9 响应式：窄屏单列堆叠、按钮整行、网格收敛 */
@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; gap: 2rem; }
  .pd-media { position: static; }
  .pd-main { gap: 1.75rem; }
}
@media (max-width: 560px) {
  .pd { line-height: 1.65; }
  .pd-title { letter-spacing: -0.01em; }
  .pd-gallery-all-title,
  .pd-related-title { font-size: 1.15rem; }
  .bn-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; }
  .bd-rel-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
  .bd-rel img { height: 120px; }
  /* 窄屏标签组与卡片内边距收敛，保证「规格 / 材质 / 场景」三个标签同排可读 */
  .pd-tab-btn { font-size: .9rem; padding: .66rem .35rem .76rem; }
  .pd-text-card { padding: 1.3rem 1.25rem; }
  .pd-intro-body { padding: 1.35rem 1.25rem; font-size: .98rem; }
  .pd-spec-item dt { padding: .85rem .8rem; font-size: .85rem; }
  .pd-spec-item dd { padding: .85rem .8rem; font-size: .9rem; }
}

/* ============================================================
   4. 产品详情：规格 / 材质 / 场景「标签组」+ 下部简介
   ------------------------------------------------------------
   上部右栏的三个信息块各占一个标签页。有内容的标签 ≥2 个时进入
   标签态（.pd-tabbed，服务端先标注以避免首屏闪现堆叠态）：
   标签组横条出现、面板交叉淡入淡出、容器高度平滑过渡；
   自动轮显，鼠标移入即静止不动（见 product-detail.php 内联脚本）。
   ============================================================ */

/* 4.1 标签导航：默认隐藏；标签态下成为一条「标签组」横条 */
.pd-tabs-nav {
  position: relative;
  display: none;
  gap: .15rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--border);
}
.pd-tabbed .pd-tabs-nav { display: flex; }
.pd-tab-btn {
  flex: 1 1 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.4;
  text-align: center;
  padding: .72rem .6rem .82rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease;
}
.pd-tab-btn:hover { color: var(--brand); background: rgba(10, 31, 68, .035); }
.pd-tab-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pd-tab-btn.is-active { color: var(--brand); }
/* 滑动指示条：由 JS 定位到当前激活标签的正下方 */
.pd-tabs-ink {
  position: absolute;
  left: 0; bottom: -1px;
  height: 3px;
  width: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
  transition: transform .38s cubic-bezier(.4, 0, .2, 1), width .38s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  will-change: transform, width;
}

/* 4.2 面板容器：默认纵向 flex —— 三个面板按文档流顺序全部铺开（无 JS 也能读全，
       搜索引擎抓取完整）。JS 收敛为标签组后（.pd-tabbed）改为块级，只显示当前面板，
       容器高度即激活面板的自然高度：**不需要脚本计算高度**，
       因此不存在「脚本未执行 → 容器塌成 0 高度 → 内容整片不可见」的风险。
       （前台 CSP 禁止内联脚本，标签逻辑一律走外部 js，见 assets/js/bn-product-detail.js） */
.pd-tabs-body { display: flex; flex-direction: column; gap: 2rem; }
.pd-tabbed .pd-tabs-body { display: block; gap: 0; }

/* 4.3 面板切换：只显示激活面板，切换时做一次淡入 + 轻微上移；非激活面板 display:none，
       自然地移出无障碍树，屏幕阅读器不会读到隐藏内容 */
.pd-tabbed .pd-tab-panel { display: none; }
.pd-tabbed .pd-tab-panel.is-active {
  display: block;
  animation: pd-tab-in .42s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes pd-tab-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 4.4 材质 / 场景 文案卡片：与规格表同处一个标签容器，视觉节奏一致 */
.pd-text-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow-sm);
}
.pd-text-card p {
  margin: 0;
  font-size: .98rem;
  color: var(--ink-800);
  line-height: 1.85;
}

/* 4.5 尊重「减少动态效果」系统偏好（脚本侧同时也会关掉自动轮显） */
@media (prefers-reduced-motion: reduce) {
  .pd-tabbed .pd-tab-panel.is-active { animation: none; }
  .pd-tabs-ink { transition: none; }
}

/* 4.6 下部简介：整页宽卡片，渲染后台所见即所得输出的安全 HTML */
.pd-intro { margin-top: 2.75rem; }
.pd-intro-body {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.9rem 2.1rem;
  box-shadow: var(--shadow-sm);
  color: var(--ink-700);
  line-height: 1.9;
  font-size: 1.02rem;
}
.pd-intro-body > :first-child { margin-top: 0; }
.pd-intro-body > :last-child  { margin-bottom: 0; }
.pd-intro-body p { margin: 0 0 1em; }
.pd-intro-body h3,
.pd-intro-body h4,
.pd-intro-body h5 { margin: 1.4em 0 .6em; color: var(--ink); line-height: 1.4; }
.pd-intro-body h3:first-child,
.pd-intro-body h4:first-child,
.pd-intro-body h5:first-child { margin-top: 0; }
.pd-intro-body ul,
.pd-intro-body ol { margin: .4em 0 1em; padding-left: 1.5em; }
.pd-intro-body li { margin: .35em 0; }
.pd-intro-body a { color: var(--brand); text-decoration: underline; }
.pd-intro-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.pd-intro-body strong { color: var(--ink-800); }
.pd-intro-body blockquote {
  margin: 1em 0;
  padding: .2em 0 .2em 1rem;
  border-left: 3px solid var(--brand-light);
  color: var(--ink-700);
}

/* ============================================================
   5. 正文末尾「行动区」+ 页尾返回
   ------------------------------------------------------------
   调整前的两个问题：
   · 「咨询该产品 →」「← 返回主营业务」两个按钮并排紧贴 H1，
     把「标题 → 规格 / 材质 / 场景」这条信息动线从中间截断，
     且两个按钮等宽并列，视觉重量与 H1 相互争抢；
   · 「返回主营业务」与页首面包屑（主营业务 / 分类 / 产品名）
     功能重复，同一出口在首尾出现两次，制造无效噪点。
   调整后：全部移到正文读完之处 ——
   · 咨询：升为页内唯一的醒目主行动（.pd-cta 行动区，含引导语）；
   · 返回：降为页尾安静的次要文字链接（.pd-back），只作「读完后」的出口。
   ============================================================ */

/* 5.1 行动区：柔和的品牌底色块 + 左侧引导语 / 右侧主按钮，
       与「简介」「全部图片」同处一个区块节奏，不再插入阅读动线之中 */
.pd-cta {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  padding: 1.7rem 2rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--surface) 58%);
  box-shadow: var(--shadow-sm);
}
.pd-cta-lead {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
}
.pd-cta-btn {
  flex: 0 0 auto;
  min-width: 190px;
  justify-content: center;
}

/* 5.2 页尾返回：居中、无边框的文字链接，悬停才出现品牌色与浅底，
       视觉重量远低于主按钮 → 提供出口但不干扰收尾 */
.pd-back {
  margin-top: 2.25rem;
  text-align: center;
}
.pd-back a {
  display: inline-block;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.pd-back a:hover {
  color: var(--brand);
  background: rgba(10, 31, 68, .04);
}
.pd-back a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 5.3 窄屏：行动区改为纵向、按钮整行，避免引导语被挤压成多行窄条 */
@media (max-width: 560px) {
  .pd-cta { padding: 1.4rem 1.25rem; }
  .pd-cta-btn { width: 100%; min-width: 0; }
  .pd-back { margin-top: 1.75rem; }
}