/* ===========================================================
   首页专属样式
   （原静态首页的内联样式，EJS 迁移时未并入共享 site.css）
   仅首页加载，不影响内页
   =========================================================== */

/* 首屏 */
.hero{position:relative;height:560px;background:var(--ink);overflow:hidden;}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% center;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.9) 0%,rgba(20,18,16,.62) 50%,rgba(20,18,16,.4) 100%);}
.hero .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1200px;margin:0 auto;padding:0 24px;color:#fff;}
.hero h1{font-family:var(--serif);font-size:64px;font-weight:700;letter-spacing:8px;line-height:1.1;}
/* 首屏主标题图片：覆盖 .hero img 的绝对定位，回到 flex 正常流；左对齐 + 放大 */
.hero .hero-title-img-wrap{margin:0;line-height:0;align-self:flex-start;}
.hero .hero-title-img{position:relative !important;inset:auto !important;display:block;width:auto !important;height:auto !important;max-width:520px;max-height:100px;object-fit:contain;margin:0;align-self:flex-start;}
.hero p{font-size:20px;margin-top:18px;color:#ECE6D8;max-width:520px;}
/* 深色首屏上的次要按钮用白描边（浅底区块仍走 site.css 的酱色描边） */
.hero .btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff;}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.cta-row{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}

/* 古法工艺 七步（首页深色时间线） */
.craft{background:var(--ink);color:#fff;position:relative;overflow:hidden;}
/* 上下用硬边分节，不用渐变：纸色到墨黑在短距离内插值必然留下一条中间灰带，
   像蒙了层灰，比锐利接缝更脏。改用一道 3px 酱色压线标记分节。 */
.craft::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--soy);z-index:3;}
.craft::after{content:none;}
.craft .sec-head,.craft .craft-video,.craft .timeline{position:relative;z-index:2;}
.craft .sec-head h2{color:#fff;}
.timeline{position:relative;max-width:920px;margin:0 auto;}
.step{display:grid;grid-template-columns:120px 1fr 300px;gap:28px;align-items:center;padding:26px 0;}
.step .idx{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--gold);line-height:1;}
.step .idx small{display:block;font-size:14px;font-family:var(--serif);color:#C9C0B0;letter-spacing:2px;margin-top:6px;}
.step h3{font-family:var(--serif);font-size:24px;color:#fff;margin-bottom:8px;}
.step p{font-size:14px;color:#C9C0B0;max-width:46ch;}
.step .pic{height:150px;border-radius:8px;background:var(--ink) center/cover;}

/* 首页主推产品：4 列，与内页产品中心统一 */
.home-products{grid-template-columns:repeat(4,1fr);}

@media(max-width:900px){
  .hero h1{font-size:44px;}
  .hero .hero-title-img{max-width:380px;max-height:80px;}
  .step{grid-template-columns:70px 1fr;gap:16px;}
  .step .idx{font-size:24px;white-space:nowrap;}
  .step .pic{grid-column:1/-1;height:160px;}
  .whyus-list{grid-template-columns:1fr;gap:40px;}
  .voices{grid-template-columns:1fr;gap:40px;}
  /* 平板 769–900px：首页主推降为 2 列，避免 site.css 的 4 列在此区间被 home.css 覆盖成过窄的 4 列 */
  .home-products{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:768px){
  .hero{height:460px;}
  .hero h1{font-size:36px;}
  .hero .hero-title-img{max-width:260px;max-height:60px;}
  .hero p{font-size:18px;}
  /* 560–900 维持 2 列，避免直接跳 1 列 */
  .home-products{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:560px){
  .hero{height:420px;}
  .hero h1{font-size:28px;letter-spacing:4px;}
  .hero .hero-title-img{max-width:200px;max-height:48px;}
  .hero p{font-size:16px;}
  .cta-row{gap:12px;}
  .cta-row .btn{width:100%;justify-content:center;}
  .home-products{grid-template-columns:1fr;}
  .card .thumb{height:150px;}
}