/* ============================================================
   case-brand.css —— 品牌门店案例（大图瀑布 + 数据堆叠）
   布局：Hero / 引言条 / 不对称瀑布网格 / 左文右竖向数据块 /
   评价 / 相关案例 / CTA
   ============================================================ */

/* ---------- 1. Hero ---------- */
.b-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.bh-bg{background-position:center 40%}
.bh-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(20,20,20,.9) 0%,rgba(20,20,20,.62) 50%,rgba(20,20,20,.3) 100%),
    linear-gradient(0deg,rgba(20,20,20,.5),transparent 42%);
}
.bh-inner{position:relative;z-index:2;max-width:800px;padding-top:120px;padding-bottom:80px}
.crumb{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;font-size:14px;color:#D8CFBF}
.crumb a{color:#fff;font-weight:600}
.crumb a:hover{color:var(--coffee-bright)}
.crumb span{color:var(--coffee)}
.crumb em{font-style:normal;color:var(--coffee-bright);font-weight:700}
.bh-eyebrow{color:var(--coffee-bright);font-size:13px;font-weight:800;letter-spacing:.28em;margin-bottom:16px}
.bh-title{color:#fff;font-size:clamp(36px,5.6vw,64px);font-weight:900;line-height:1.14;letter-spacing:-.02em;margin-bottom:20px}
.bh-gold{color:var(--coffee)}
.bh-sub{color:#D8CFBF;font-size:16px;line-height:1.9;max-width:600px;margin-bottom:34px}
.bh-cta{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:640px){.bh-cta .btn{width:100%}}

/* ---------- 2. 引言条 ---------- */
.brand-bg{background:var(--coffee-bg)}
.brand-bg-inner{max-width:900px;margin:0 auto;text-align:center}
.brand-bg-inner .sec-eyebrow{justify-content:center}
.brand-lead{font-size:clamp(17px,2vw,20px);line-height:2.1;color:var(--ink);font-weight:600}

/* ---------- 3. 瀑布网格 ---------- */
.brand-water{background:#fff}
.water-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  grid-auto-flow:dense;
}
.water-item{
  position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);
}
.water-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.water-item:hover img{transform:scale(1.06)}
.water-big{grid-column:span 2;min-height:420px}
.water-tall{grid-row:span 2;min-height:420px}
.water-item:not(.water-big):not(.water-tall){min-height:280px}
.water-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:60px 24px 20px;
  background:linear-gradient(0deg,rgba(20,20,20,.9),transparent);
  color:#fff;
}
.water-item figcaption b{display:block;font-size:17px;margin-bottom:6px}
.water-item figcaption span{font-size:13px;color:#D8CFBF;line-height:1.7}
@media (max-width:1024px){
  .water-grid{grid-template-columns:1fr 1fr}
  .water-big{grid-column:span 2}
}
@media (max-width:640px){
  .water-grid{grid-template-columns:1fr}
  .water-big,.water-tall{grid-column:span 1;grid-row:auto;min-height:300px}
}

/* ---------- 4. 数据堆叠 ---------- */
.brand-stats{background:var(--ink);color:#E9E2D6}
.stats-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.stats-text .sec-title{color:#fff}
.stats-text .sec-lead{color:#B7AE9E}
.stats-text p{color:#B7AE9E;font-size:15px;line-height:1.9;max-width:440px;margin-top:16px}
.stats-stack{display:flex;flex-direction:column;gap:18px}
.stat-block{
  position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(201,168,124,.25);
  border-radius:18px;padding:28px 32px;display:flex;align-items:center;gap:24px;
  transition:all .35s;
}
.stat-block:hover{background:rgba(201,168,124,.12);transform:translateX(8px)}
.stat-block b{
  font-size:clamp(36px,4vw,52px);font-weight:900;color:#fff;line-height:1;
  min-width:170px;font-variant-numeric:tabular-nums;
}
.stat-block p{color:var(--coffee-bright);font-size:14.5px;line-height:1.6}
@media (max-width:1024px){.stats-inner{grid-template-columns:1fr;gap:40px}.stat-block{flex-direction:column;align-items:flex-start;gap:10px}}

/* ---------- 5. 评价 ---------- */
.brand-quote{background:#fff}
.brand-quote-inner{max-width:780px;margin:0 auto}
.brand-quote blockquote{
  background:var(--coffee-bg);border-radius:24px;padding:48px 44px;
  border-left:6px solid var(--grad-coffee);border-style:solid;border-width:6px 1px 1px 6px;
  border-color:var(--coffee) var(--line) var(--line) var(--coffee);
}
.brand-quote blockquote>p:first-child{
  font-size:48px;font-weight:900;line-height:.5;color:var(--coffee);height:26px;
}
.brand-quote blockquote>p:nth-child(2){font-size:16.5px;line-height:2;color:var(--text);margin-bottom:22px}
.brand-quote footer b{display:block;font-size:15px;margin-bottom:5px}
.brand-quote footer span{font-size:13px;color:var(--coffee-deep);font-weight:700}

/* ---------- 6. 相关案例 ---------- */
.brand-rel{background:var(--coffee-bg)}
.brand-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.br-card{display:block;background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:all .4s}
.br-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.br-card img{width:100%;height:180px;object-fit:cover;transition:transform .6s}
.br-card:hover img{transform:scale(1.07)}
.br-card h3{font-size:16px;padding:18px 20px 6px}
.br-card p{font-size:13px;color:var(--coffee-deep);font-weight:700;padding:0 20px 20px}
.br-card:hover h3{color:var(--coffee-deep)}
@media (max-width:1024px){.brand-rel-grid{grid-template-columns:1fr}}