/* 加工案例页：编辑式真实影像档案 */
.casex-page {
  --casex-paper: #ffffff;
  --casex-paper-2: #f7fafc;
  --casex-ink: #132435;
  --casex-muted: #536576;
  --casex-line: rgba(37, 68, 94, .15);
  --casex-orange: #f27645;
  --casex-blue: #6eb6ed;
  --casex-dark: #0d1c2b;
  --casex-ease: cubic-bezier(.16, .82, .24, 1);
  background: var(--casex-paper);
}

.casex-page ::selection { color: #fff; background: #244a6d; }
.casex-page main { background: var(--casex-paper); }
.casex-page main :where(a, button, summary) { text-underline-offset: 4px; }

.casex-hero {
  position: relative;
  overflow: hidden;
  padding: 138px 0 76px;
  background:
    radial-gradient(circle at 78% 13%, rgba(110, 182, 237, .11), transparent 27%),
    var(--casex-paper);
}

.casex-hero::before {
  content: "";
  position: absolute;
  inset: 76px 0 auto;
  height: 1px;
  background: var(--casex-line);
}

.casex-hero-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: center;
}

.casex-hero-copy { position: relative; z-index: 2; }
.casex-hero-index {
  margin: 0 0 28px;
  color: #587083;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}

.casex-hero-copy h1 {
  margin: 0;
  color: var(--casex-ink);
  font-size: clamp(52px, 4.8vw, 68px);
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.casex-hero-copy h1 span {
  display: block;
  white-space: nowrap;
}

.casex-hero-lead {
  max-width: 35em;
  margin: 28px 0 0;
  color: var(--casex-muted);
  font-size: 14px;
  line-height: 1.9;
}

.casex-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.casex-action,
.casex-conversion-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  transition: transform .35s var(--casex-ease), box-shadow .35s ease, color .25s ease, background-color .25s ease;
}

.casex-action--primary,
.casex-conversion-button {
  color: #fff;
  background: var(--casex-ink);
  box-shadow: 0 17px 34px rgba(19, 36, 53, .18);
}

.casex-action--secondary { color: var(--casex-ink); border: 1px solid var(--casex-line); }
.casex-action:hover,
.casex-action:focus-visible,
.casex-conversion-button:hover,
.casex-conversion-button:focus-visible { transform: translateY(-3px); }
.casex-action--primary:hover,
.casex-action--primary:focus-visible,
.casex-conversion-button:hover,
.casex-conversion-button:focus-visible { box-shadow: 0 22px 42px rgba(19, 36, 53, .24); }

.casex-hero-gallery {
  position: relative;
  min-height: 596px;
}

.casex-hero-image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #e8eef3;
  box-shadow: 0 28px 65px rgba(17, 38, 58, .17);
}

.casex-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.84) contrast(1.03);
  transition: transform 1.1s var(--casex-ease), filter .5s ease;
}

.casex-hero-gallery:hover .casex-hero-image--main img { transform: scale(1.025); }
.casex-hero-image--main { top: 0; right: 0; width: 82%; height: 420px; }
.casex-hero-image--detail { right: 56%; bottom: 0; width: 32%; height: 260px; }
.casex-hero-image--field { right: 0; bottom: 0; width: 50%; height: 210px; }
.casex-hero-image--detail img { object-position: center 44%; }

.casex-hero-ledger {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 8px 0 0;
  border-top: 1px solid var(--casex-line);
  border-bottom: 1px solid var(--casex-line);
}

.casex-hero-ledger > div { padding: 19px 24px; border-right: 1px solid var(--casex-line); }
.casex-hero-ledger > div:first-child { padding-left: 0; }
.casex-hero-ledger > div:last-child { border-right: 0; }
.casex-hero-ledger dt { color: var(--casex-ink); font-size: 21px; font-weight: 900; line-height: 1; }
.casex-hero-ledger dd { margin: 8px 0 0; color: #687987; font-size: 10px; font-weight: 750; letter-spacing: .08em; }

.casex-library {
  position: relative;
  padding: 112px 0 126px;
  background: var(--casex-paper);
}

.casex-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(46px, 8vw, 120px);
  align-items: end;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--casex-line);
}

.casex-section-head h2 {
  max-width: 9em;
  margin: 0;
  color: var(--casex-ink);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.casex-section-head p { max-width: 47em; margin: 0; color: var(--casex-muted); font-size: 13px; line-height: 1.9; }
.casex-section-head > div > span { display: block; margin-top: 18px; color: #637684; font-size: 9px; font-weight: 850; letter-spacing: .18em; }

.casex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 30px;
  margin-top: 58px;
}

.casex-case {
  --case-x: 50%;
  --case-y: 30%;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  opacity: 1;
  transition: opacity .25s ease, transform .5s var(--casex-ease);
}

.casex-case.is-filtered-out { opacity: 0; pointer-events: none; transform: translateY(14px); }
.casex-case.is-filtered-in { animation: casexCaseIn .58s var(--casex-ease) both; }
@keyframes casexCaseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.casex-media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: #e8eef3;
}

.casex-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--case-x) var(--case-y), rgba(255,255,255,.17), transparent 28%);
  opacity: 0;
  transition: opacity .35s ease;
}

.casex-media picture,
.casex-media img { display: block; width: 100%; height: 100%; }
.casex-media img {
  object-fit: cover;
  filter: saturate(.74) contrast(1.06) brightness(.96);
  transition: transform .85s var(--casex-ease), filter .4s ease;
}
.casex-media--position-top img { object-position: center 24%; }
.casex-media--position-left img { object-position: 38% center; }
.casex-case:hover .casex-media::after { opacity: 1; }
.casex-case:hover .casex-media img { transform: scale(1.025); filter: saturate(.9) contrast(1.06) brightness(.98); }

.casex-copy { padding-top: 24px; border-top: 1px solid var(--casex-line); }
.casex-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.casex-meta span { color: #697b89; font-size: 9px; font-weight: 850; letter-spacing: .18em; }
.casex-meta b { color: var(--casex-orange); font-size: 10px; font-weight: 850; }
.casex-copy h3 {
  max-width: 17em;
  margin: 15px 0 14px;
  color: var(--casex-ink);
  font-size: clamp(25px, 2.5vw, 38px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.casex-copy > p { max-width: 51em; margin: 0; color: var(--casex-muted); font-size: 12px; line-height: 1.85; }

.casex-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 23px 0 0;
  border-top: 1px solid rgba(19, 36, 53, .11);
}
.casex-evidence > div { padding: 16px 18px 0 0; }
.casex-evidence > div + div { padding-left: 18px; border-left: 1px solid rgba(19, 36, 53, .11); }
.casex-evidence dt { color: #263d50; font-size: 10px; font-weight: 900; }
.casex-evidence dd { margin: 7px 0 0; color: #637482; font-size: 10px; line-height: 1.75; }

.casex-process-section {
  position: relative;
  overflow: hidden;
  padding: 112px 0 96px;
  color: #dce7ee;
  background: var(--casex-dark);
}

.casex-process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 84% 18%, rgba(110, 182, 237, .14), transparent 30%);
}

.casex-process-section > div { position: relative; z-index: 1; }
.casex-section-head--dark { border-color: rgba(225, 237, 244, .2); }
.casex-section-head--dark h2 { color: #f2f5f4; }
.casex-section-head--dark p { color: #a7b8c5; }

.casex-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 52px 24px;
  align-items: start;
  margin-top: 56px;
}
.casex-process-item { margin: 0; }
.casex-process-item > div { aspect-ratio: 4 / 3; overflow: hidden; background: #1d2d3d; }
.casex-process-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); transition: transform .9s var(--casex-ease), filter .4s ease; }
.casex-process-item:hover img { transform: scale(1.03); filter: saturate(.9) contrast(1.06); }
.casex-process-item figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; padding-top: 18px; border-top: 1px solid rgba(225, 237, 244, .2); }
.casex-process-item figcaption span { grid-row: 1 / 3; color: var(--casex-orange); font-size: 10px; font-weight: 850; }
.casex-process-item h3 { margin: 0; color: #f0f4f3; font-size: 17px; }
.casex-process-item p { margin: 8px 0 0; color: #9fb0bc; font-size: 10px; line-height: 1.75; }

.casex-sources { margin-top: 72px; border-top: 1px solid rgba(225, 237, 244, .2); border-bottom: 1px solid rgba(225, 237, 244, .2); }
.casex-sources summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 20px; color: #dbe5ea; font-size: 11px; font-weight: 850; cursor: pointer; list-style: none; }
.casex-sources summary::-webkit-details-marker { display: none; }
.casex-sources summary span { color: var(--casex-orange); font-size: 20px; font-weight: 400; transition: transform .3s var(--casex-ease); }
.casex-sources[open] summary span { transform: rotate(45deg); }
.casex-sources > div { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 50px; padding: 8px 0 28px; }
.casex-sources p { max-width: 58em; margin: 0; color: #9fb0bc; font-size: 10px; line-height: 1.85; }
.casex-sources ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.casex-sources a { color: #c9d8e1; font-size: 10px; text-decoration-color: rgba(242, 118, 69, .55); }
.casex-sources a:hover,
.casex-sources a:focus-visible { color: #fff; }

.casex-conversion-section { padding: 82px 0 92px; background: var(--casex-paper-2); }
.casex-conversion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  align-items: center;
  padding: 44px 0 0;
  border-top: 1px solid var(--casex-ink);
}
.casex-conversion h2 { margin: 0; color: var(--casex-ink); font-size: clamp(36px, 4vw, 54px); font-weight: 950; line-height: 1.06; letter-spacing: -.035em; white-space: nowrap; }
.casex-conversion-button { justify-self: end; min-width: 220px; margin-right: 72px; background: var(--casex-orange); box-shadow: 0 17px 34px rgba(180, 75, 37, .2); }
.casex-conversion-button:hover,
.casex-conversion-button:focus-visible { box-shadow: 0 22px 42px rgba(180, 75, 37, .27); }

html[data-language]:not([data-language="zh"]) .casex-hero-copy h1,
html[data-language]:not([data-language="zh"]) .casex-section-head h2,
html[data-language]:not([data-language="zh"]) .casex-copy h3,
html[data-language]:not([data-language="zh"]) .casex-conversion h2 { word-break: normal; overflow-wrap: normal; hyphens: auto; }
html[data-language]:not([data-language="zh"]) .casex-hero-copy h1 { max-width: 10em; font-size: clamp(42px, 4.5vw, 64px); }
html[data-language]:not([data-language="zh"]) .casex-hero-copy h1 span { white-space: normal; }
html[data-language]:not([data-language="zh"]) .casex-copy h3 { font-size: clamp(23px, 2.15vw, 32px); }
html[data-language]:not([data-language="zh"]) .casex-conversion h2 { white-space: normal; }

@media (max-width: 1080px) {
  .casex-hero-shell { grid-template-columns: minmax(0, .86fr) minmax(440px, 1.14fr); gap: 38px; }
  .casex-hero-gallery { min-height: 520px; }
  .casex-hero-image--main { height: 370px; }
  .casex-hero-image--detail { height: 220px; }
  .casex-hero-image--field { height: 180px; }
  .casex-grid { gap: 64px 24px; }
}

@media (max-width: 900px) {
  .casex-hero { padding-top: 120px; }
  .casex-hero-shell { grid-template-columns: 1fr; }
  .casex-hero-copy h1 { max-width: 8em; }
  .casex-hero-lead { max-width: 48em; }
  .casex-hero-gallery { min-height: 610px; }
  .casex-hero-image--main { width: 84%; height: 430px; }
  .casex-hero-image--detail { right: auto; left: 0; width: 31%; height: 240px; }
  .casex-hero-image--field { width: 48%; height: 205px; }
  .casex-section-head { grid-template-columns: 1fr; gap: 22px; }
  .casex-section-head h2 { max-width: 11em; }
  .casex-grid { gap: 58px 20px; }
  .casex-copy h3 { font-size: 26px; }
  .casex-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casex-sources > div { grid-template-columns: 1fr; gap: 24px; }
  .casex-conversion { grid-template-columns: 1fr; gap: 30px; }
  .casex-conversion h2 { font-size: clamp(33px, 4.5vw, 43px); }
  .casex-conversion-button { justify-self: start; margin-right: 0; }
}

@media (max-width: 640px) {
  .casex-hero { padding: 104px 0 54px; }
  .casex-hero-index { margin-bottom: 20px; font-size: 8px; }
  .casex-hero-copy h1 { max-width: none; font-size: clamp(38px, 11.5vw, 48px); line-height: 1.01; }
  .casex-hero-lead { margin-top: 22px; font-size: 12px; line-height: 1.8; }
  .casex-hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 25px; }
  .casex-action { width: 100%; min-height: 48px; }
  .casex-hero-gallery { min-height: 424px; margin-top: 6px; }
  .casex-hero-image--main { width: 88%; height: 270px; }
  .casex-hero-image--detail { width: 37%; height: 170px; }
  .casex-hero-image--field { width: 49%; height: 145px; }
  .casex-hero-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casex-hero-ledger > div { padding: 15px 12px; border-bottom: 1px solid var(--casex-line); }
  .casex-hero-ledger > div:nth-child(2) { border-right: 0; }
  .casex-hero-ledger > div:nth-last-child(-n+2) { border-bottom: 0; }
  .casex-hero-ledger > div:first-child { padding-left: 12px; }
  .casex-library { padding: 76px 0 86px; }
  .casex-section-head { padding-bottom: 24px; }
  .casex-section-head h2 { font-size: 39px; }
  .casex-section-head p { font-size: 12px; line-height: 1.8; }
  .casex-grid { grid-template-columns: 1fr; gap: 54px; margin-top: 42px; }
  .casex-copy { padding-top: 18px; }
  .casex-copy h3 { margin-top: 11px; font-size: 26px; }
  .casex-evidence { margin-top: 18px; }
  .casex-process-section { padding: 78px 0 68px; }
  .casex-process-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 38px; }
  .casex-process-item figcaption { padding-top: 15px; }
  .casex-sources { margin-top: 52px; }
  .casex-conversion-section { padding: 72px 0 82px; }
  .casex-conversion { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; }
  .casex-conversion h2 { font-size: 38px; white-space: normal; }
  .casex-conversion-button { width: 100%; justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .casex-action,
  .casex-conversion-button,
  .casex-hero-image img,
  .casex-case,
  .casex-media img,
  .casex-process-item img,
  .casex-sources summary span { animation: none !important; transition: none !important; }
}