/* ==========================================================================
   components.css —— 内容组件外观
   每个组件一节，与 sections/*.html 里的 class 一一对应：
   轮播 / 数据条 / 商业模式 / 产品卡 / 参数 / 流程 / 表单 / 品牌 / 新闻 / 联系 / 页脚导航
   ========================================================================== */

/* ---------- 1. 首屏轮播（home） ---------- */
.carousel{position:relative;height:min(88vh,780px);min-height:520px;overflow:hidden;isolation:isolate;
  contain:paint;background:var(--sage-deep);touch-action:pan-y}
.carousel-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease),visibility var(--dur-slow)}
.carousel-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.slide-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.slide-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
/* 缓推镜头（Ken Burns）：只给当前这张建合成层，避免四张大图常驻显存 */
.carousel-slide.is-active .slide-media img{animation:kenburns 9s var(--ease) forwards;will-change:transform}
.hero-fade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(24,21,17,.42) 0%,rgba(24,21,17,.18) 38%,rgba(24,21,17,.72) 100%)}
.slide-body{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:5.5rem 5.75rem;max-width:min(var(--maxw),100% - 2.75rem)}
.slide-body>*{opacity:0;transform:translateY(14px)}
.carousel-slide.is-active .slide-body>*{opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease-out) .25s,transform var(--dur-slow) var(--ease-out) .25s}
.hero .eyebrow{color:#e8cfa8}
.hero h1{text-shadow:0 2px 30px rgba(20,16,12,.35)}
.lede{font-size:1.08rem;max-width:34rem;color:#eee5d7}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin:2rem 0 0}
.hero .btn-ghost{color:#f7f2e9;border-color:rgba(247,242,233,.5)}
.hero .btn-ghost::before{background:rgba(247,242,233,.22)}
.hero .btn-ghost:hover{background:rgba(247,242,233,.14);border-color:#f7f2e9;color:#f7f2e9}

/* 轮播控件 */
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border:1px solid rgba(247,242,233,.42);border-radius:50%;background:rgba(24,21,17,.45);
  color:#f7f2e9;font-size:1.6rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
/* 不用 backdrop-filter：箭头叠在持续运动的轮播图上，毛玻璃会每帧重新采样背景 */
.car-arrow:hover{background:rgba(24,21,17,.72);border-color:#f7f2e9}
.car-arrow:active{transform:translateY(-50%) scale(.92)}
.car-prev{left:1.25rem}
.car-next{right:1.25rem}
.car-dots{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);display:flex;gap:.6rem}
.car-dot{position:relative;width:10px;height:10px;padding:0;border-radius:50%;overflow:hidden;isolation:isolate;
  border:1px solid rgba(247,242,233,.75);background:transparent;cursor:pointer;flex:none;
  transition:background var(--dur-fast),width var(--dur) var(--ease-out),border-radius var(--dur)}
.car-dot::after{content:"";position:absolute;inset:-10px;border-radius:50%}/* 扩大点击热区 */
.car-dot:hover{background:rgba(247,242,233,.6)}
.car-dot.is-active{width:30px;border-radius:999px;background:rgba(247,242,233,.28)}
/* 自动播放进度：填充条 */
.car-dot .dot-fill{position:absolute;inset:0;z-index:1;transform-origin:0 50%;transform:scaleX(0);
  background:#f7f2e9}
.car-dot.is-active .dot-fill{animation:dot-progress var(--auto-dur,6s) linear forwards}
.carousel.is-paused .car-dot.is-active .dot-fill{animation-play-state:paused}

/* ---------- 2. 数据条（home） ---------- */
.stat-band{background:var(--sage-deep)}
/* 注意：.hero-stats 同时带 .shell，margin 必须保留 auto 才能居中 */
.hero-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem 2.6rem;
  margin:0 auto;padding-block:1.5rem}
.hero-stats dt{font-size:.78rem;letter-spacing:.18em;color:#dfd4c2}
.hero-stats dd{margin:.2rem 0 0;font-family:var(--serif);font-size:1.5rem}

/* ---------- 3. 商业模式（home） ---------- */
.promises{background:var(--paper);border-bottom:1px solid var(--line)}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;padding-block:3.4rem}
.promise-grid h3{display:flex;align-items:center;gap:.6rem}
.promise-grid h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--clay);flex:none}
.promise-grid p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* ---------- 4. 产品卡（products） ---------- */
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.series-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur),border-color var(--dur)}
.series-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d3c7b3}
.series-card img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform var(--dur-slow) var(--ease)}
.series-card:hover img{transform:scale(1.045)}
.series-card.tall{grid-row:span 2}
.series-card.tall img{aspect-ratio:16/11}
.series-copy{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.series-copy p{font-size:.94rem;color:var(--ink-soft);margin:0}
.tag{align-self:flex-start;font-size:.72rem;letter-spacing:.14em;color:var(--sage);
  border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.series-card:hover .tag{background:var(--sage-tint);border-color:var(--sage)}
.spec-line{font-size:.85rem;color:var(--ink-soft);margin-top:auto;padding-top:.7rem;
  border-top:1px dashed var(--line)}
.spec-line b{color:var(--ink);font-weight:500;margin-right:.35rem}
/* 智能电动：无实拍图的纹理卡 */
.pleat-tile{position:relative;justify-content:flex-end;color:#f4efe6;background:var(--sage-deep)}
.pleats{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 2px,transparent 2px 9px,rgba(0,0,0,.16) 9px 26px,transparent 26px 34px);
  mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,.35) 100%)}
.pleat-tile .series-copy{position:relative;padding-top:4rem;
  background:linear-gradient(180deg,transparent,rgba(20,26,19,.72))}
.pleat-tile .series-copy p{color:#ddd5c6}
.pleat-tile .tag{border-color:rgba(244,239,230,.35);color:#e9dfcc}
.pleat-tile::after{content:"";position:absolute;top:0;left:0;right:0;height:34%;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 8px)}

/* 适用空间胶囊 */
.scene-strip{margin-top:2.6rem;padding-top:1.9rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.scene-title{font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0;flex:none}
.scene-list{display:flex;flex-wrap:wrap;gap:.55rem}
.scene-list li{padding:.35rem .95rem;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);font-size:.88rem;color:var(--ink-soft);
  transition:transform var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.scene-list li:hover{transform:translateY(-2px);border-color:var(--sage);color:var(--sage)}

/* ---------- 5. 品牌介绍（brand） ---------- */
.about-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;margin-bottom:3.2rem}
.about-copy p{color:var(--ink-soft)}
.about-copy p:first-of-type{color:var(--ink);font-size:1.05rem}
.culture{background:var(--oat);border:1px solid var(--line);border-top:2px solid var(--clay);
  padding:1.6rem 1.7rem}
.culture h3{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:1.1rem}
.culture dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.1rem;margin:0;font-size:.93rem}
.culture dt{color:var(--ink-soft);white-space:nowrap}
.culture dd{margin:0;color:var(--ink)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  padding-block:2.6rem;border-block:1px solid var(--line)}
.feature-grid h3{display:flex;gap:.6rem;align-items:baseline}
.feature-grid h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--clay);flex:none}
.feature-grid p{font-size:.93rem;color:var(--ink-soft);margin:0}
.designer-grid>article{display:grid;grid-template-columns:1fr;gap:.4rem;padding:1.5rem 0;
  border-top:1px solid var(--line);transition:transform var(--dur) var(--ease-out)}
.designer-grid>article:hover{transform:translateX(.6rem)}
.designer-grid h3{margin:0;font-size:1.1rem}
.designer-grid h3 span{font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;color:var(--ink-soft);margin-left:.6rem}
.designer-grid p{margin:0;font-size:.94rem;color:var(--ink-soft)}

/* ---------- 6. 定制流程（service） ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.steps li{position:relative;padding-top:1.4rem;border-top:1px solid var(--line)}
/* 悬停时绿条从短拉通整列：用 scaleX 而不是 width，不触发布局重排 */
.steps li::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--sage);
  transform:scaleX(.12);transform-origin:0 50%;transition:transform var(--dur) var(--ease-out)}
.steps li:hover::before{transform:scaleX(1)}
.num{font-family:var(--serif);font-size:.85rem;letter-spacing:.18em;color:var(--clay);
  display:block;margin-bottom:.35rem}
.steps h3{margin-bottom:.3rem}
.steps p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ---------- 7. 勾选列表 / 参数表（quality） ---------- */
.craft-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.ticks{display:grid;gap:1.05rem;margin-top:1.6rem}
.ticks li{position:relative;padding-left:1.7rem;font-size:.98rem;color:var(--ink-soft);
  transition:transform var(--dur-fast)}
.ticks li:hover{transform:translateX(3px)}
.ticks li b{color:var(--ink);font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:9px;
  border:1px solid var(--clay);transform:rotate(45deg)}
.spec{background:var(--oat);border:1px solid var(--line);padding:1.7rem}
.spec h3{font-size:1rem;letter-spacing:.1em;margin-bottom:1.1rem}
.spec th,.spec td{text-align:left;padding:.72rem 0;border-bottom:1px dashed var(--line);
  font-size:.93rem;vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{color:var(--ink-soft);font-weight:400;width:6.5em}
.spec td{color:var(--ink)}
.fabric-figure{margin:3rem 0 0;border:1px solid var(--line);background:var(--oat);overflow:hidden}
.fabric-figure img{width:100%;aspect-ratio:16/7;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.fabric-figure:hover img{transform:scale(1.03)}
.fabric-figure figcaption{padding:.95rem 1.2rem;font-size:.9rem;color:var(--ink-soft)}
.store-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.store-list li{position:relative;overflow:hidden;isolation:isolate;padding:1.15rem 1.3rem;background:var(--oat);
  border:1px solid var(--line);border-left:2px solid var(--sage);
  transition:transform var(--dur-fast),background var(--dur-fast)}
.store-list li:hover{transform:translateY(-3px);background:var(--paper)}
.store-list b{display:block;font-weight:500;margin-bottom:.25rem}
.store-list span{font-size:.92rem;color:var(--ink-soft)}

/* ---------- 8. 预约表单（service） ---------- */
.booking{background:var(--paper);border:1px solid var(--line);
  padding:clamp(1.5rem,3.5vw,2.3rem);box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:.45rem .95rem;border:1px solid var(--line);border-radius:999px;
  font-size:.88rem;color:var(--ink-soft);cursor:pointer;background:var(--oat);
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
.chip span:hover{border-color:var(--sage);transform:translateY(-1px)}
.chip span:active{transform:scale(.96)}
.chip input:checked+span{background:var(--sage);border-color:var(--sage);color:#fdfaf5}
.chip input:focus-visible+span{outline:2px solid var(--sage);outline-offset:2px}
.form-note{font-size:.8rem;color:var(--ink-faint);margin:.9rem 0 0;text-align:center}
.result{margin-top:1.3rem;padding:1.35rem;background:var(--oat);border-left:2px solid var(--sage);font-size:.94rem}
.result h3{font-size:1rem;margin-bottom:.6rem}
.result dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;margin:0 0 1rem;font-size:.92rem}
.result dt{color:var(--ink-soft)}
.result dd{margin:0}
.result .btn{margin-top:.2rem}
.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.15rem}
.form-actions .btn-ghost{font-size:.86rem;padding:.6rem 1.1rem}

/* ---------- 9. 公司动态（news） ---------- */
.news-list{display:grid}
.news-list li{display:grid;grid-template-columns:9.5em 1fr;gap:1.6rem;padding:1.6rem 0;
  border-top:1px solid var(--line);transition:background var(--dur-fast),transform var(--dur) var(--ease-out)}
.news-list li:last-child{border-bottom:1px solid var(--line)}
.news-list li:hover{background:var(--paper);transform:translateX(.8rem)}
.news-list time{font-family:var(--serif);font-size:.95rem;color:var(--clay);letter-spacing:.04em}
.news-list h3{margin:0 0 .3rem;font-size:1.12rem}
.news-list p{margin:0;font-size:.94rem;color:var(--ink-soft)}
.news-tag{display:inline-block;margin-top:.6rem;font-size:.74rem;letter-spacing:.12em;color:var(--sage);
  border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem}
.news-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.news-filter button{position:relative;overflow:hidden;isolation:isolate;padding:.4rem 1rem;
  border:1px solid var(--line);border-radius:999px;
  background:var(--paper);font-size:.86rem;color:var(--ink-soft);cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
.news-filter button:hover{border-color:var(--sage);transform:translateY(-1px)}
.news-filter button:active{transform:scale(.96)}
.news-filter button.is-active{background:var(--sage);border-color:var(--sage);color:#fdfaf5}

/* ---------- 10. 联系方式（contact） ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.reserve-grid{margin-top:3.4rem}
.channels{margin-top:2rem;display:grid;gap:1.15rem}
.channels li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;padding-bottom:1.05rem;
  border-bottom:1px solid var(--line);font-size:.98rem}
.channels li span{width:6.5em;color:var(--ink-soft);font-size:.9rem;letter-spacing:.06em}
.channels a{font-family:var(--serif);font-size:1.2rem;letter-spacing:.02em;border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast)}
.channels a:hover{border-color:var(--clay)}
.channels em{font-style:normal;font-size:.76rem;color:var(--ink-faint);letter-spacing:.08em}
.map-card{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--sage);
  padding:clamp(1.5rem,3.5vw,2.2rem);box-shadow:var(--shadow)}
.map-card h3{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:1rem}
.map-card .ticks{margin-top:0}
.honour{margin-top:1.8rem;padding-top:1.5rem;border-top:1px dashed var(--line)}
.honour-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.honour-list li{font-size:.9rem;color:var(--ink-soft);padding-left:1.1rem;position:relative}
.honour-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border:1px solid var(--clay);transform:rotate(45deg)}

/* ---------- 11. 面板内翻页（上一页 / 下一页） ---------- */
.panel-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.8rem;border-top:1px solid var(--line);margin-top:3.4rem;font-size:.92rem}
.panel-nav a{display:inline-flex;flex-direction:column;gap:.15rem;padding:.7rem 1.1rem;
  border:1px solid var(--line);border-radius:4px;background:var(--paper);
  transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur)}
.panel-nav a:hover{transform:translateY(-2px);border-color:var(--sage);box-shadow:var(--shadow)}
.panel-nav a.is-next{margin-left:auto;text-align:right}
.panel-nav small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.panel-nav b{font-family:var(--serif);font-weight:500;font-size:1rem}