/* WE-WIN 案例库 — page stylesheet (loads after ../shared/site.css). The SCM umbrella page: gold accent; each business group
   uses its own gem (FooD emerald, AIR sapphire, LAB amethyst) only on its small group label. */

/* ============ SWAPPABLE IMAGES — change one line to replace a picture (sources in CREDITS.txt) ============
   Paths are written as ../cases/assets/… so they resolve the same from this file or from ../shared/site.css (where some are used). */
:root{
  --img-hero:     url("../cases/assets/hero.webp");       /* hero — late-night desk: frames, node line, papers, 941x1412 crop of the 9:16 mobile version (WE-WIN live site) */
  --img-surround: url("../cases/assets/surround.webp");   /* desktop side areas — the same render, landscape, heavily blurred + darkened */
  --img-crates:   url("../cases/assets/t-crates.webp");   /* FooD case 采购 — crates of greens, cucumber, eggplant (WE-WIN, user-created) */
  --img-rice:     url("../cases/assets/t-rice.webp");     /* FooD case 订单链 — rice bowl, sack and eggs (WE-WIN, user-created) */
  --img-samples:  url("../cases/assets/t-samples.webp");  /* AIR case 样品 — short-film still, X-ray of a sample bag (剧情演绎; WE-WIN live site) */
  --img-nodes:    url("../cases/assets/t-nodes.webp");    /* AIR case 节点 — six-node diagram (WE-WIN live site) */
  --img-brand:    url("../cases/assets/t-brand.webp");    /* LAB case 品牌 — WE-WIN LAB book, tablet, card (WE-WIN LAB design work) */
  --img-ingya:    url("../cases/assets/t-ingya.webp");    /* LAB work ingya — folder, tent card, box (WE-WIN LAB design work) */
  --img-timeline: url("../cases/assets/timeline.webp");   /* closing band — gold node line on the dark wall (crop of the hero render's landscape version) */
}
.phero{--hero-ratio:941/1412; --hero-pos:50% 0; --hero-card-at:1;   /* frames + node line above the card; card over the desk */
  --hero-shade:linear-gradient(180deg,rgba(6,13,31,.4) 0,rgba(6,13,31,0) 10%,rgba(6,13,31,0) 56%,rgba(6,13,31,.25) 76%,var(--bg) 100%)}
#closing{--band:var(--img-timeline); --band-size:auto 230px; --band-pos:40% 0; --band-h:330px; --band-pad:160px;   /* node line above, text below */
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.2) 0%,rgba(6,13,31,0) 16%,rgba(6,13,31,0) 36%,rgba(6,13,31,.55) 52%,rgba(6,13,31,.85) 66%,var(--bg) 100%)}

/* light fields behind the glass cards: navy base, each group's gem + gold, low alpha */
#food{--lf:radial-gradient(260px 220px at 6% 18%,rgba(34,168,115,.18),transparent 70%),radial-gradient(260px 220px at 96% 60%,rgba(74,127,240,.2),transparent 70%),radial-gradient(220px 180px at 8% 92%,rgba(226,196,106,.13),transparent 70%)}
#air {--lf:radial-gradient(260px 220px at 94% 16%,rgba(74,127,240,.26),transparent 70%),radial-gradient(260px 220px at 4% 58%,rgba(226,196,106,.13),transparent 70%),radial-gradient(240px 200px at 92% 92%,rgba(74,127,240,.2),transparent 70%)}
#lab {--lf:radial-gradient(260px 220px at 6% 18%,rgba(160,106,224,.22),transparent 70%),radial-gradient(260px 220px at 96% 60%,rgba(226,196,106,.13),transparent 70%),radial-gradient(240px 200px at 6% 92%,rgba(74,127,240,.2),transparent 70%)}

/* hero: gold dash before the eyebrow (no business icon — this is the umbrella page) + the disclosure line */
.eyebrow span{display:flex;align-items:center;gap:8px}
.eyebrow span::before{content:"";width:12px;height:2px;border-radius:1px;background:var(--gold-2)}
.phero h1{margin-top:12px}
.hero-card .note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;line-height:1.7}

/* group heading: official business icon + label replaces the gold rule */
.grp .head h2::before{display:none}
.line-label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--gold-2);margin-bottom:6px}
.line-label img{height:26px;width:auto}

/* case cards: picture on top (fully inside the glass), label, title, 问题 / 结果, link line */
.cases{display:grid;gap:14px}
.case{display:block;padding:8px 8px 16px;--g-r:22px}
.thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:15px;background:#0a1530 50% 50%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.thumb{--veil:linear-gradient(rgba(6,13,31,.12),rgba(6,13,31,.12))}   /* light navy veil on the brightest pictures (keeps the floating bar labels >= 4.5:1) */
.t-crates {background-image:var(--img-crates)}
.t-rice   {background-image:var(--veil),var(--img-rice);background-position:78% 50%}
.t-samples{background-image:var(--img-samples)}
.t-nodes  {background-image:var(--img-nodes)}
.t-brand  {background-image:var(--veil),var(--img-brand);background-position:55% 50%}
.t-ingya  {background-image:var(--veil),var(--img-ingya)}
.js .thumb.lazy-bg:not(.is-in){background-image:none}
.tag{position:absolute;left:10px;top:10px;font-size:11.5px;letter-spacing:.08em;line-height:1;padding:6px 9px;border-radius:999px;color:var(--tx);
  background:rgba(6,13,31,.78);border:1px solid rgba(226,196,106,.55)}
.case .body{display:block;padding:12px 10px 0}
.case small{display:block;font-size:12.5px;color:var(--tx2);letter-spacing:.04em;line-height:1.6}
.case .title{display:block;font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.45;margin:4px 0 8px}
.qa{display:grid;grid-template-columns:34px 1fr;gap:8px;margin-top:4px}
.qa b{font-size:12.5px;font-weight:600;color:var(--gold-2);letter-spacing:.06em;padding-top:1px}
.qa>span{color:var(--tx2)}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.facts span{font-size:12px;line-height:1.4;padding:5px 9px;border-radius:999px;color:var(--tx);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.case .more{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--gold-2);transition:transform .25s var(--ease)}
.case .plain{display:block;color:var(--tx2)}
@media (hover:hover){ a.case:hover .more{transform:translateX(3px)} }