/* ==========================================================================
   cozunet.com · 案例详情页样式 css/pages/case-jixie.css
   骨架：通栏大图页首 + 悬浮概览卡 → 左右概览 → 图文交替设计思路
         → 四宫格实现 → 深棕成果数据 → 更多案例 → 联系带
   ========================================================================== */

/* ---------- 案例页首：通栏大图 ---------- */
.case-hero{position:relative;min-height:76vh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:0}
.case-hero-media{position:absolute;inset:0}
.case-hero-media img{width:100%;height:100%;object-fit:cover}
.case-hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,40,33,.38) 0%,rgba(47,40,33,.18) 40%,rgba(47,40,33,.88) 100%)}
.case-hero-in{position:relative;z-index:2;padding-top:130px;padding-bottom:44px;width:100%}
.case-hero .crumb a{color:rgba(255,255,255,.72)}
.case-hero .crumb .now{color:rgba(255,255,255,.92)}
.case-hero .crumb i{color:rgba(255,255,255,.4)}
.case-hero .sec-eyebrow{color:rgba(255,255,255,.78)}
.case-hero .sec-eyebrow::before{background:rgba(255,255,255,.5)}
.case-hero h1{color:#fff;font-size:clamp(28px,4vw,48px);margin:14px 0 12px}
.case-hero-desc{color:rgba(255,255,255,.82);font-size:clamp(14px,1.5vw,17px);max-width:640px}

/* ---------- 项目概览 ---------- */
.overview{padding:104px 0 60px}
.ov-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
.ov-copy h2{margin:14px 0 20px}
.ov-copy p{color:var(--ink-2);font-size:15px;line-height:2.05;margin-bottom:16px}
.ov-copy strong{color:var(--brown)}
.ov-panel{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 30px;box-shadow:var(--shadow-sm)}
.ov-panel div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px dashed var(--line-2)}
.ov-panel div:last-child{border-bottom:0}
.ov-panel dt{font-size:13px;color:var(--muted);letter-spacing:.1em;flex:none}
.ov-panel dd{font-size:14.5px;color:var(--ink);text-align:right;font-weight:500}
@media (max-width:860px){.ov-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- 设计思路：图文交替 ---------- */
.design{background:var(--card);padding:104px 0 90px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.ds-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:72px}
.ds-row:last-child{margin-bottom:0}
.ds-rev .ds-media{order:2}
.ds-media{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.ds-media img{width:100%;height:100%;object-fit:cover;min-height:300px}
.ds-copy{position:relative;padding-left:34px}
.ds-no{position:absolute;left:0;top:-6px;font-family:var(--font-serif);font-size:64px;line-height:1;color:var(--brown-bg);font-weight:700}
.ds-copy h3{font-size:21px;margin-bottom:14px}
.ds-copy p{color:var(--ink-2);font-size:15px;line-height:2}
@media (max-width:860px){.ds-row{grid-template-columns:1fr;gap:26px}.ds-rev .ds-media{order:0}}

/* ---------- 功能与实现 ---------- */
.impl{padding:104px 0 60px}
.impl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.impl-item{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:30px 26px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s}
.impl-item:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:var(--card)}
.impl-ic{width:50px;height:50px;border-radius:14px;background:var(--brown);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.impl-ic svg{width:26px;height:26px}
.impl-item h3{font-size:17px;margin-bottom:10px}
.impl-item p{font-size:13.5px;color:var(--ink-2);line-height:1.9}
@media (max-width:900px){.impl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.impl-grid{grid-template-columns:1fr}}

/* ---------- 成果数据 ---------- */
.result{background:var(--brown);padding:90px 0}
.result-in{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.res-copy .sec-eyebrow{color:rgba(255,255,255,.6)}
.res-copy .sec-eyebrow::before{background:rgba(255,255,255,.4)}
.res-copy h2{color:#fff;margin:14px 0 16px}
.res-copy p{color:rgba(255,255,255,.7);font-size:14.5px;line-height:2}
.res-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.res-stats div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:26px 24px}
.res-stats b{font-family:var(--font-serif);font-size:clamp(30px,3.4vw,44px);color:#fff;display:block;line-height:1}
.res-stats b em{font-style:normal;font-size:.5em;color:rgba(255,255,255,.6);margin-left:3px}
.res-stats span{font-size:13px;color:rgba(255,255,255,.66);display:block;margin-top:10px;letter-spacing:.06em}
@media (max-width:860px){.result-in{grid-template-columns:1fr;gap:34px}.res-stats{grid-template-columns:1fr 1fr}}

/* ---------- 更多案例 ---------- */
.more-case{padding:104px 0 60px}
.mc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mc-card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mc-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.mc-card img{width:100%;height:190px;object-fit:cover;transition:transform .9s var(--ease)}
.mc-card:hover img{transform:scale(1.06)}
.mc-body{padding:20px 22px 24px}
.mc-body h3{font-size:16.5px;margin-top:12px}
.mc-more{text-align:center;margin-top:44px}
@media (max-width:820px){.mc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.mc-grid{grid-template-columns:1fr}}

/* ---------- 联系 CTA ---------- */
.case-cta{background:var(--brown-deep);padding:72px 0}
.case-cta-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.case-cta-copy h2{color:#fff;font-size:clamp(23px,2.8vw,32px);margin-bottom:10px}
.case-cta-copy p{color:rgba(255,255,255,.68);font-size:14.5px;letter-spacing:.05em}
.case-cta-btns{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- 客户反馈 ---------- */
.voice{padding:104px 0 60px}
.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.voice-card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:34px 32px;position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.voice-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.voice-card::before{content:"“";position:absolute;top:6px;left:22px;font-family:var(--font-serif);font-size:64px;color:var(--brown-bg);line-height:1}
.voice-card blockquote{font-size:15px;color:var(--ink-2);line-height:2.05;margin-bottom:20px;position:relative}
.voice-card figcaption{font-size:13px;color:var(--brown-soft);letter-spacing:.08em}
@media (max-width:760px){.voice-grid{grid-template-columns:1fr}}

/* ---------- 上线后的配合 ---------- */
.follow{background:var(--card);padding:104px 0 90px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.follow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.follow-item{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:30px 26px;position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s}
.follow-item:hover{transform:translateY(-6px);box-shadow:var(--shadow);background:#fff}
.follow-no{font-family:var(--font-serif);font-size:13px;letter-spacing:.22em;color:var(--brown-soft);display:block;margin-bottom:16px}
.follow-item h3{font-size:17px;margin-bottom:10px}
.follow-item p{font-size:13.5px;color:var(--ink-2);line-height:1.9}
@media (max-width:900px){.follow-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.follow-grid{grid-template-columns:1fr}}

/* ---------- 案例 FAQ ---------- */
.case-faq{padding:104px 0 60px}
.case-faq-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.case-faq-list{display:grid;gap:14px}
.case-faq-list details{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;transition:box-shadow .35s var(--ease)}
.case-faq-list details[open]{box-shadow:var(--shadow-sm)}
.case-faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink)}
.case-faq-list summary::-webkit-details-marker{display:none}
.cf-plus{position:relative;width:16px;height:16px;flex:none}
.cf-plus::before,.cf-plus::after{content:"";position:absolute;background:var(--brown);transition:transform .35s var(--ease)}
.cf-plus::before{left:0;right:0;top:7px;height:2px}
.cf-plus::after{top:0;bottom:0;left:7px;width:2px}
.case-faq-list details[open] .cf-plus::after{transform:scaleY(0)}
.case-faq-list details p{padding:0 22px 20px;font-size:14px;color:var(--ink-2);line-height:2}
@media (max-width:860px){.case-faq-in{grid-template-columns:1fr;gap:34px}}