/* ════ #cases 零库存 POD 模式对比 + 真实场景案例（P11 · 源 App.tsx L1943-2380 1:1）════
   模式对比大卡（时间差横条 / 传统 7 步 vs POD 4 步 / 3 数据卡）+ tab 三案例（SSR 全渲染 + cases.mjs 显隐，无 JS = 全展示）*/

.sec-cases{background:#f8f7f5;padding-block:64px;padding-inline:var(--section-px)}

/* ── 头行（区块头行范式第 5 例：胶囊+副题+H2+右注记）── */
.c-head{margin-bottom:32px}
.c-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:#fff2eb;color:#c44000;border:1px solid #ffdabf;margin-bottom:16px}
.c-pill i{width:6px;height:6px;border-radius:50%;background:var(--c-brand);animation:blink 2s infinite}
.c-sub{display:none}
.c-title{font-family:var(--font-latin);font-size:clamp(26px,4vw,52px);font-weight:700;line-height:1.05;
  letter-spacing:-.03em;color:#111}
.c-title span{color:var(--c-brand)}
.c-note{display:none}

/* ── 模式对比大卡 ── */
.c-cmp{border-radius:24px;overflow:hidden;margin-bottom:20px;background:#fff;border:1.5px solid #ede9e4}

/* ① 时间差 */
.c-gap{padding:24px 20px;border-bottom:1px solid #f0ede8}
.c-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#888;margin-bottom:20px}
.c-bar-h{margin-bottom:16px}
.c-bar-h--last{margin-bottom:0}
.c-bar-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.c-bar-label{font-size:13px;font-weight:700}
.c-bar-num{font-family:var(--font-latin);font-size:24px;font-weight:900;line-height:1;letter-spacing:-.04em}
.c-bar-num small{font-size:14px;font-weight:900;margin-left:4px}
.c-bar{position:relative;height:40px;border-radius:12px;overflow:hidden}
.c-bar--trad{background:#e8e5e0}
.c-bar--trad .c-bar-label{color:#444}
.c-bar--trad .c-bar-num{color:#555}
.c-bar-fill{position:absolute;inset:0;border-radius:12px;background:linear-gradient(90deg,#9e9a92 0%,#8e8a82 100%)}
.c-words{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding:0 16px;overflow:hidden}
.c-words span{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.95);flex-shrink:0}
.c-words em{font-style:normal;font-size:9px;color:rgba(255,255,255,.45);flex-shrink:0}
.c-bar--pod{background:#ffe0cc}
.c-bar--pod .c-bar-label{color:var(--c-brand)}
.c-bar--pod .c-bar-num{color:var(--c-brand)}
.c-bar-seg{position:absolute;left:0;top:0;bottom:0;width:9%;border-radius:16px;display:flex;align-items:center;padding:0 20px;
  background:linear-gradient(90deg,#ff5200 0%,#ff7830 100%);box-shadow:4px 0 20px rgba(255,82,0,.5)}
.c-bar-seg span{font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.c-words--pod{position:absolute;left:9%;top:0;bottom:0;display:flex;align-items:center;gap:6px;padding:0 12px}
.c-words--pod span{font-size:11.5px;font-weight:700;color:rgba(180,60,0,.7)}
.c-words--pod em{font-style:normal;font-size:9px;color:rgba(180,60,0,.35)}
.c-bar-tag{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.c-bar-tag span{display:block;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:8px;
  background:rgba(255,82,0,.2);color:#cc3d00}
.c-ticks{display:flex;justify-content:space-between;margin-top:8px;padding:0 2px}
.c-ticks span{font-size:10px;font-weight:500;color:#999}

/* ② 流程对比（传统列 desktop-only · 源 hidden lg:block 无 mobile 版）*/
.c-flow{display:grid;grid-template-columns:1fr;border-bottom:1px solid #f0ede8}
.c-trad{display:none}
.c-pod{padding:20px;background:#fff8f4}
.c-flow-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.c-flow-eyebrow--trad{color:#c0bcb4}
.c-flow-eyebrow--pod{color:#ffaa70}
.c-steps{display:flex;flex-direction:column;gap:8px}
.c-step{position:relative;display:flex;align-items:center;gap:12px}
.c-step:not(:last-child)::before{content:"";position:absolute;left:13px;top:26px;width:1px;height:calc(100% + 8px)}
.c-trad .c-step:not(:last-child)::before{background:#e8e5e0}
.c-pod .c-step:not(:last-child)::before{background:#ffd8c0}
.c-step-n{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-latin);font-size:10px;font-weight:900;flex-shrink:0}
.c-trad .c-step-n{background:#edebe6;color:#aaa;border:1.5px solid #e0ddd8}
.c-pod .c-step-n{background:#ffe8d8;color:#ff5200;border:1.5px solid #ffd0b0}
.c-step-card{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;border-radius:12px}
.c-trad .c-step-card{background:#f4f2ee;border:1px solid #edeae6}
.c-pod .c-step-card{background:#fff5f0;border:1px solid #ffe0cc}
.c-step-card b{font-size:12.5px;font-weight:700}
.c-trad .c-step-card b{color:#555}
.c-pod .c-step-card b{color:#111}
.c-step-card i{font-style:normal;font-size:12.5px;color:#777}
.c-pod .c-step-card i{font-size:11px;font-weight:500;color:#ff8040}
.c-checks{padding-top:20px;border-top:1px solid #ffe8d8}
.c-check{display:flex;align-items:center;gap:10px;padding:8px 0}
.c-check-ico{width:16px;height:16px;border-radius:50%;background:#ff5200;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-check b{font-size:12.5px;font-weight:700;color:#222}
.c-check-d{margin-left:auto;font-size:11.5px;color:#c09070}

/* ③ 数据对比 */
.c-data{display:grid;grid-template-columns:1fr}
.c-dcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 0;text-align:center}
.c-dcard:nth-child(1){background:#f8f7f5}
.c-dcard:nth-child(2){background:#fff5ee}
.c-dcard:nth-child(3){background:#f8f7f5}
.c-dcard:nth-child(-n+2){border-bottom:1px solid #f0ede8}
.c-dlabel{font-size:12px;font-weight:700;letter-spacing:.025em;text-transform:uppercase;color:#888}
.c-dval{display:flex;align-items:baseline;gap:8px}
.c-dold{font-size:13px;font-weight:600;color:#d0ccc4;text-decoration:line-through}
.c-dnew{font-family:var(--font-latin);font-size:20px;font-weight:900;line-height:1;letter-spacing:-.03em;color:#ff5200}

/* ── 场景案例 ── */
.c-real-h{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.c-rlabel{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ff5200;flex-shrink:0}
.c-rline{flex:1;height:1px;background:#ede9e4}
.c-rnote{font-size:13px;color:#888;flex-shrink:0}

/* tab bar（三色收敛 --tc 内联变量 · Single Sink）*/
.c-tabs{display:flex;gap:8px;margin-bottom:16px;padding:6px;border-radius:16px;background:#f4f3f0}
.c-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:0;border-radius:12px;
  background:transparent;cursor:pointer;font-family:inherit;transition:all .2s}
.c-tab-label{font-size:11px;font-weight:700;text-align:center;line-height:1.25;color:#999;transition:color .2s}
.c-tab-sub{display:none;font-size:10.5px;font-weight:600;color:#888;transition:color .2s}
.c-tab-dot{display:none;width:20px;height:2.5px;border-radius:999px;margin-top:2px;background:var(--tc)}
.c-tab[aria-selected="true"]{background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.09)}
.c-tab:hover .c-tab-label{color:#111}   /* P15 hover 补缺（未选中态文字加深；选中态已白底） */
.c-tab[aria-selected="true"] .c-tab-label{color:#111}
.c-tab[aria-selected="true"] .c-tab-sub{color:var(--tc)}
.c-tab[aria-selected="true"] .c-tab-dot{display:block}

/* 面板：三 Case 共用结构 · 色彩变量族（--cc 主色/--cc-bg 浅底/--cc-qbg 引用底/--cc-bd 边线/--cc-deep 引用文）*/
.c-panel{border-radius:16px;overflow:hidden;border:1.5px solid #ede9e4}
.c-case{display:grid;grid-template-columns:1fr;min-height:400px}
.c-case[hidden]{display:none}
.c-case--trend{--cc:#ff5200;--cc-bg:#fff0e8;--cc-qbg:#fff8f5;--cc-bd:#ffd8c0;--cc-deep:#994020}
.c-case--longtail{--cc:#7c3aed;--cc-bg:#f5f0ff;--cc-qbg:#f8f5ff;--cc-bd:#ddd6fe;--cc-deep:#5b21b6}
.c-case--scale{--cc:#059669;--cc-bg:#ecfdf5;--cc-qbg:#ecfdf5;--cc-bd:#a7f3d0;--cc-deep:#065f46}

/* 左图媒体卡 */
.c-media{position:relative;overflow:hidden;min-height:220px}
.c-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-mask{position:absolute;inset:0}
.c-case--trend .c-mask{background:linear-gradient(160deg,rgba(10,5,0,.3) 0%,rgba(10,5,0,.72) 100%)}
.c-case--longtail .c-mask{background:linear-gradient(160deg,rgba(20,10,50,.3) 0%,rgba(20,10,50,.75) 100%)}
.c-case--scale .c-mask{background:linear-gradient(160deg,rgba(2,30,20,.3) 0%,rgba(2,30,20,.78) 100%)}
.c-media-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.c-mpill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  backdrop-filter:blur(6px)}
.c-mpill span{font-size:11px;font-weight:700;color:#fff}
.c-case--trend .c-mpill{background:rgba(255,82,0,.85)}
.c-case--longtail .c-mpill{background:rgba(124,58,237,.85)}
.c-case--scale .c-mpill{background:rgba(5,150,105,.88)}
.c-mcap{font-size:13px;font-weight:500;color:rgba(255,255,255,.6);margin-bottom:16px}
.c-mnum{font-family:var(--font-latin);font-size:clamp(56px,6vw,80px);font-weight:900;line-height:1;color:#fff;
  letter-spacing:-.05em;margin-bottom:8px}
.c-mnum small{font-size:.45em;font-weight:900;margin-left:4px}
.c-case--trend .c-mnum small{color:#ffcc70}
.c-case--longtail .c-mnum small{color:#c4b5fd}
.c-case--scale .c-mnum small{color:#6ee7b7}
.c-msub{font-size:13px;font-weight:600;color:rgba(255,255,255,.65)}
.c-mpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.c-mpill2{padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.2)}
.c-mpill2 i{font-style:normal;font-size:10px;color:rgba(255,255,255,.55)}
.c-mpill2 b{font-size:12px;font-weight:700;color:#fff}

/* 右文：机会背景 / timeline / 引用 */
.c-body{display:flex;flex-direction:column;padding:20px;background:#fff}
.c-bg{margin-bottom:24px;padding-left:16px;border-left:3px solid var(--cc-bd)}
.c-bg-e{font-size:11px;font-weight:700;letter-spacing:.025em;text-transform:uppercase;color:var(--cc);margin-bottom:6px}
.c-bg-t{font-size:14.5px;font-weight:600;line-height:1.625;color:#333}
.c-tl{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex:1}
.c-tl-n{display:flex;align-items:flex-start;gap:16px}
.c-tl-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-latin);font-size:10px;font-weight:900;background:var(--cc-bg);color:var(--cc);border:1.5px solid var(--cc-bd)}
.c-tl-main{flex:1;padding-bottom:12px;border-bottom:1px solid #f4f2ee}
.c-tl-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.c-tl-h b{font-size:13px;font-weight:700;color:#111}
.c-tl-h span{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;background:var(--cc-bg);color:var(--cc)}
.c-tl-main p{font-size:12px;line-height:1.625;color:#888}
.c-quote{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-radius:16px;
  background:var(--cc-qbg);border:1px solid var(--cc-bd)}
.c-quote > span{font-size:22px;flex-shrink:0;line-height:1}
.c-quote b{font-size:13.5px;font-weight:600;line-height:1.625;color:var(--cc-deep)}
.c-quote i{display:block;font-style:normal;font-size:11px;font-weight:500;color:#ccc;margin-top:8px}

/* ── desktop ≥1024 ── */
@media (min-width:1024px){
  .sec-cases{padding-block:96px}
  .c-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px}
  .c-head > div:first-child .c-pill{margin-bottom:20px}
  .c-sub{display:block;font-size:15px;font-weight:500;color:#777;margin-bottom:6px}
  .c-note{display:block;font-size:14px;font-weight:500;color:#aaa;line-height:1.7;max-width:280px;text-align:right;padding-bottom:4px}
  .c-gap{padding:32px 32px 28px}
  .c-bar-num{font-size:28px}
  .c-bar-num small{font-size:16px}
  .c-bar{height:48px;border-radius:16px}
  .c-bar-fill{border-radius:16px}
  .c-words span{font-size:11.5px}
  .c-flow{grid-template-columns:1fr 1fr}
  .c-trad{display:block;padding:24px 32px;border-right:1px solid #f0ede8;background:#f8f7f5}
  .c-pod{padding:24px 32px}
  .c-tab{padding:14px 16px}
  .c-tab-label{font-size:13px}
  .c-tab-sub{display:block}
  .c-case{grid-template-columns:420px 1fr}
  .c-body{padding:32px}
}

/* ── 数据对比 3col ≥640 ── */
@media (min-width:640px){
  .c-data{grid-template-columns:repeat(3,1fr)}
  .c-dcard{padding:20px 0}
  .c-dcard:nth-child(-n+2){border-bottom:0;border-right:1px solid #f0ede8}
}