/* =========================================================
   派居尚官网 · 前端增强样式
   作用：滚动渐显 / 卡片悬停微交互 / 按钮扫光 / 导航吸顶 / 返回顶部
   设计：沿用品牌深蓝 #011753，浅蓝 #0754a3；纯增量，不覆盖原 style.css
   依赖：effects.js（IntersectionObserver 自动给目标加 .reveal 并交错显隐）
   ========================================================= */

/* 1) 字体优化：原站 CSS 无 font-family，补充系统中文字体栈 + 抗锯齿 */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html{scroll-behavior:smooth;}

/* 2) 滚动渐显：仅在 JS 给 <html> 加 .reveal-on 后生效（无 JS 则内容正常显示）
   注意：绝不使用 will-change —— 在 CSS 多列(columns)容器内会触发合成层错位，破坏瀑布流布局。 */
html.reveal-on .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
}
html.reveal-on .reveal.in{opacity:1;transform:none;}

/* 2.1) 安全网：CSS 多列瀑布流(.masonry)内的元素一律不做位移/隐藏（transform 会破坏列布局） */
.masonry .reveal,
.masonry.reveal,
.masonry .reveal.in{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
/* 同组元素错峰（由 effects.js 写入 data-d） */
html.reveal-on .reveal[data-d="1"]{transition-delay:.09s;}
html.reveal-on .reveal[data-d="2"]{transition-delay:.18s;}
html.reveal-on .reveal[data-d="3"]{transition-delay:.27s;}
html.reveal-on .reveal[data-d="4"]{transition-delay:.36s;}

/* 3) 卡片悬停微交互（强化原站已有过渡） */
.pcard,.case-item,.newslist .item,.ab-item,.brand-logo,.loop{
  transition:transform .35s ease,box-shadow .35s ease;
}
.pcard:hover,.case-item:hover,.newslist .item:hover,
.ab-item:hover,.brand-logo:hover,.loop:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 40px rgba(1,23,83,.16);
}
/* 图片 / 图块悬停缩放 */
.pcard .img img,.case-item img,.case-item .ci-img,
.newslist .item .thumb img,.ab-item img,.loop .img img{
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.pcard:hover .img img,.case-item:hover img,.case-item:hover .ci-img,
.newslist .item:hover .thumb img,.loop:hover .img img{
  transform:scale(1.06);
}

/* 4) 按钮扫光（原站 .btn / .btn-ab / .btn-more / .btn-row a） */
.btn,.btn-ab,.btn-more,a.btn,button.btn{
  position:relative;overflow:hidden;
}
.btn::after,.btn-ab::after,.btn-more::after{
  content:"";position:absolute;top:0;left:-130%;
  width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .65s ease;
}
.btn:hover::after,.btn-ab:hover::after,.btn-more:hover::after{left:140%;}

/* 5) 导航吸顶阴影（由 effects.js 在滚动后给头部加 .is-stuck） */
.topbar.is-stuck,.site-nav.is-stuck,header.is-stuck,.header.is-stuck,.ab-head.is-stuck{
  box-shadow:0 6px 24px rgba(1,23,83,.12);
  transition:box-shadow .3s ease;
}

/* 6) 返回顶部按钮（由 effects.js 动态创建 #toTop） */
#toTop{
  position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;
  background:#011753;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;z-index:998;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .35s ease,transform .35s ease,background .3s ease;
  box-shadow:0 8px 22px rgba(1,23,83,.30);
}
#toTop.show{opacity:1;visibility:visible;transform:none;}
#toTop:hover{background:#0754a3;}

/* 7) 数字滚动容器等宽数字（有 data-to 时效果更好） */
.counter,.num{font-variant-numeric:tabular-nums;}

/* 8) 尊重系统“减弱动画”偏好（无障碍） */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  html.reveal-on .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .pcard:hover,.case-item:hover,.newslist .item:hover,
  .ab-item:hover,.brand-logo:hover,.loop:hover{transform:none;}
  #toTop{transition:none;}
}

/* MASONRY-FIX-START */
/* ===== 列表卡片排版修正（2026-10-16）—— 产品/生产流程列表三列网格对齐 =====
   根因：.pcard(<a>) 未设置 display，计算值为 inline，在 CSS 多列(columns:3)
   布局中被跨列切分，导致卡片盒子异常撑大、图片错位与高低不齐。
   方案：列表容器改用 CSS Grid（等宽、行优先对齐）；卡片块级化为纵向 flex；
   图片统一 3:2 等比 + object-fit:cover，确保逐行工整。 */
.masonry{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;row-gap:26px;align-items:stretch;}
.pcard{display:flex;flex-direction:column;break-inside:auto;margin-bottom:0;height:100%;}
.pcard .img{height:auto;aspect-ratio:3/2;}
.pcard .img img{width:100%;height:100%;object-fit:cover;display:block;}
.pcard .body{flex:1 1 auto;}
@media(max-width:900px){.masonry{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.masonry{grid-template-columns:1fr;}}
/* MASONRY-FIX-END */

/* CONTACT-LAYOUT-START */
/* 联系页版式（2026-10-16）—— 仿索蓝：顶部标签栏(联系方式/在线留言) + 右侧面包屑 + 分隔线，下方通栏大标题 + 灰说明 */
.ct-bar{background:#fff;border-bottom:1px solid #e6e6e6;}
.ct-bar-in{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;}
.ct-tabs{display:flex;}
.ct-tabs a{position:relative;display:block;font-size:16px;color:#8a8a8a;line-height:60px;margin-right:48px;white-space:nowrap;transition:color .25s ease;}
.ct-tabs a:last-child{margin-right:0;}
.ct-tabs a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#c9a062;transition:width .3s ease;}
.ct-tabs a:hover::after,.ct-tabs a.on::after{width:100%;}
.ct-tabs a:hover,.ct-tabs a.on{color:#212121;font-weight:700;}
.ct-crumb{font-size:14px;color:#c9a062;line-height:30px;padding:15px 0;}
.ct-crumb a{color:#c9a062;}
.ct-crumb a:hover{color:#212121;}
.ct-crumb span{color:#8a8a8a;}
.ct-intro{margin:52px 0 38px;}
.ct-desc{font-size:16px;color:#8a8a8a;line-height:30px;}
.ct-desc p{font-size:16px;color:#8a8a8a;line-height:30px;margin:0 0 12px;}
/* 强制覆盖 DB 内联样式：首段提升为大标题，其余统一为灰色说明 */
.ct-desc > p:first-child{font-size:28px !important;color:#212121 !important;line-height:38px !important;font-weight:700 !important;margin:0 0 18px !important;}
.ct-desc > p:first-child span{font-size:28px !important;color:#212121 !important;font-weight:700 !important;}
.ct-desc > p:first-child strong{font-weight:700 !important;}
.ct-desc p span{color:#8a8a8a !important;}
#msg{scroll-margin-top:96px;}
@media (max-width:560px){
  .ct-tabs a{margin-right:28px;line-height:48px;font-size:15px;}
  .ct-tabs a::after{bottom:6px;}
  .ct-crumb{width:100%;}
  .ct-intro{margin:34px 0 26px;}
  .ct-desc > p:first-child{font-size:23px !important;line-height:32px !important;}
}
/* CONTACT-LAYOUT-END */

/* ============ HERO-SLIDER-BEGIN 首屏三图轮播（图片替换原黑底渐变） ============ */
.hero{
  height:82vh;
  min-height:600px;
  max-height:880px;
  background:#f3f1ec;
  background-image:none;
}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;
  background-position:center 42%;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.1s ease,transform 9s linear;
  will-change:opacity,transform;
}
.hero-slide.is-on{opacity:1;transform:scale(1)}
/* 白色浅遮罩：左侧提亮便于深字阅读，右侧渐透露出照片，上下淡白压边 */
.hero-mask{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 32%,rgba(255,255,255,.40) 60%,rgba(255,255,255,.08) 100%),
    linear-gradient(180deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 74%,rgba(255,255,255,.58) 100%);
}

/* 浅底深字：遮罩提亮后反白文字不可读，统一转深色 + 控件描边变深 */
.hero .ey{color:#8a7748}
.hero h1{color:#1c1c1c;text-shadow:none}
.hero .btn.ghost{border-color:rgba(28,28,28,.4);color:#1c1c1c}
.hero .btn.ghost:hover{background:#1c1c1c;color:#fff;border-color:#1c1c1c}
.hero-arrow{border-color:rgba(28,28,28,.3);background:rgba(255,255,255,.5)}
.hero-arrow::before{border-top-color:#1c1c1c;border-right-color:#1c1c1c}
.hero-arrow:hover{border-color:var(--gold)}
.hero-dots button{background:rgba(28,28,28,.22)}
/* 左右箭头 */
.hero-arrow{
  position:absolute;top:50%;margin-top:-24px;z-index:4;
  width:48px;height:48px;padding:0;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  background:rgba(10,14,22,.28);
  cursor:pointer;
  transition:background .25s,border-color .25s,opacity .25s;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.hero-arrow::before{
  content:"";position:absolute;top:50%;left:50%;
  width:11px;height:11px;margin:-6px 0 0 -8px;
  border-top:1.5px solid #fff;border-right:1.5px solid #fff;
  transform:rotate(45deg);
}
.hero-prev{left:34px}
.hero-next{right:34px}
.hero-prev::before{transform:rotate(-135deg);margin:-6px 0 0 -4px}
.hero-arrow:hover{background:var(--gold);border-color:var(--gold)}
.hero-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 指示点（细长条，金色当前项） */
.hero-dots{
  position:absolute;left:50%;bottom:32px;z-index:4;
  display:flex;gap:10px;transform:translateX(-50%);
}
.hero-dots button{
  width:26px;height:3px;padding:0;border:0;border-radius:2px;
  background:rgba(255,255,255,.34);cursor:pointer;transition:width .3s,background .3s;
}
.hero-dots button.is-on{width:42px;background:var(--gold)}
@media(max-width:900px){
  .hero{height:64vh;min-height:440px;max-height:600px}
  .hero-slide{background-position:center 40%}
  .hero-arrow{width:38px;height:38px;margin-top:-19px;opacity:.85}
  .hero-prev{left:12px}
  .hero-next{right:12px}
  .hero-dots{bottom:22px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .2s linear;transform:none}
  .hero-slide.is-on{transform:none}
}
/* HERO-SLIDER-END */

/* ============ ABOUT/CONTACT CLEANUP：去占位 + 补 h1 ============ */
/* 内页主标题（原为 h3，升为 h1 完善语义层级） */
.pg-h1{font-size:26px;font-weight:600;letter-spacing:1px;color:#1a1a1a;line-height:1.4;margin:0}
.two-col .pg-h1{grid-column:1 / -1;margin-bottom:18px}
/* 大图位：原蓝条占位 → 真实工厂图 */
.bigimg{background:#111;overflow:hidden}
.bigimg img{display:block;width:100%;height:100%;object-fit:cover}
/* 品牌实力：原灰色空框 → 白色文字卡 */
.strength-h{font-size:19px;font-weight:600;color:#1a1a1a;margin-bottom:22px}
.strength .grid4 div{
  height:auto;background:#fff;border:1px solid #eee;border-radius:12px;
  padding:24px 20px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s;
}
.strength .grid4 div:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.1)}
.strength .grid4 div b{font-size:22px;color:#1a1a1a;font-weight:700;line-height:1.2}
.strength .grid4 div span{font-size:13px;color:#888;line-height:1.6}
/* 联系页主标题（原无 h1） */
.ct-h1{font-size:30px;font-weight:700;color:#212121;margin:0 0 18px;line-height:1.3}
@media(max-width:768px){
  .pg-h1{font-size:22px}
  .ct-h1{font-size:24px}
  .bigimg{height:260px}
}

/* ============ 内页正文两栏（关于页 / 单页栏目） ============ */
.pg-2col{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:60px;align-items:start}
.pg-rich{font-size:15px;line-height:2;color:#4a4a4a;min-width:0;word-break:break-word}
.pg-rich p{margin:0 0 18px}
.pg-rich p.is-empty{display:none}
/* 正文内联字号/字体统一（后台富文本带 font-size:14px、宋体） */
.pg-rich span{font-size:inherit !important;font-family:inherit !important;color:inherit !important}
.pg-rich img{max-width:100%;height:auto;display:block;margin:6px 0 18px}
.pg-rich h2{font-size:17px;font-weight:600;line-height:1.75;color:#1a1a1a;letter-spacing:.5px;
  margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid #efece6}
.pg-rich h2 .h2-tag{display:block;margin-top:10px;font-size:12.5px;font-weight:400;
  font-style:normal;color:#a99b86;letter-spacing:1.5px;line-height:1.9}
.pg-rich h3{font-size:17px;font-weight:600;color:#1a1a1a;line-height:1.6;margin:30px 0 12px;
  padding-left:12px;border-left:3px solid #c8a063}
/* 发展历程：年份段 → 时间轴小节 */
.pg-rich p.tl-year{display:flex;align-items:baseline;gap:12px;margin:30px 0 10px;padding-left:16px;position:relative}
.pg-rich p.tl-year:before{content:"";position:absolute;left:0;top:7px;bottom:1px;width:2px;background:#e8dfd0}
.pg-rich p.tl-year b{font-size:15px;font-weight:700;color:#b08d4f;letter-spacing:1px;flex:none}
.pg-rich p.tl-year em{font-style:normal;font-size:15px;font-weight:600;color:#1a1a1a;letter-spacing:.5px}
/* 侧栏：实景图 + 行动卡 */
.pg-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:26px}
.pg-fig{margin:0}
.pg-fig img{width:100%;height:250px;object-fit:cover;display:block}
.pg-fig figcaption{font-size:12px;color:#9a9a9a;letter-spacing:1px;margin-top:10px}
.pg-card{background:#faf7f2;border:1px solid #efe9df;padding:24px 22px}
.pg-card b{display:block;font-size:16px;color:#1a1a1a;letter-spacing:1px;font-weight:600}
.pg-card p{font-size:12.5px;color:#8a8a8a;line-height:1.9;margin:10px 0 16px}
.pg-card a{display:inline-block;font-size:13px;color:#b08d4f;border-bottom:1px solid #c8a063;padding-bottom:3px}
.pg-card a:hover{color:#8a6a33}
/* 关于页数据条 / 大图 / 实力卡：与两栏间距对齐 */
.about-pg .stats{margin-top:56px}
@media(max-width:1024px){
  .pg-2col{grid-template-columns:1fr;gap:38px}
  .pg-side{position:static}
  .pg-fig img{height:220px}
}

/* ============ 产品展示：按系列分组 ============ */
.pg-groups{margin-top:4px}
.pg-group{margin-bottom:48px}
.pg-group:last-child{margin-bottom:6px}
.pg-group-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #ece4d6}
.pg-group-h h2{font-size:22px;font-weight:600;color:#2b2519;letter-spacing:1px;margin:0;padding-left:14px;position:relative}
.pg-group-h h2:before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:2px;background:#b89150}
.pg-group-h .pg-group-more{font-size:13px;color:#b89150;text-decoration:none;white-space:nowrap;transition:.2s}
.pg-group-h .pg-group-more:hover{color:#8a6a33}
.pg-group .masonry{margin-top:0}
@media(max-width:768px){
  .pg-group{margin-bottom:34px}
  .pg-group-h{margin-bottom:14px}
  .pg-group-h h2{font-size:19px}
}


/* 首页首屏：文案改为左侧（用户要求），背景大图保持整屏铺底不变 */
.hero{justify-content:flex-start}
.hero .wrap{
  margin:0;
  max-width:600px;
  padding-left:clamp(128px,9vw,168px);
  padding-right:24px;
  text-align:left;
}