/* V0.27 case detail system — real project evidence, complete media, restrained presentation. */
body[data-page="case-detail"] .case-v027-detail {
  --case-line: rgba(80, 173, 255, .2);
  --case-muted: rgba(224, 237, 250, .7);
  min-height: 100vh;
  overflow: clip;
  color: var(--case-muted);
  background:
    radial-gradient(circle at 84% 8%, rgba(48, 80, 192, .2), transparent 32%),
    linear-gradient(180deg, #030912 0%, #06121e 52%, #040b13 100%);
}

body[data-page="case-detail"] .case-v027-detail .container {
  width: min(1460px, calc(100% - 96px));
  margin-inline: auto;
}

body[data-page="case-detail"] .case-v027-hero {
  position: relative;
  padding: clamp(132px, 15vh, 194px) 0 clamp(68px, 8vh, 108px);
  border-bottom: 1px solid var(--case-line);
}

body[data-page="case-detail"] .case-v027-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent 5%, #20c2ef 34%, rgba(21, 93, 252, .25) 72%, transparent 95%);
}

body[data-page="case-detail"] .case-v027-hero-inner { max-width: 1460px; }

body[data-page="case-detail"] .case-breadcrumb {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 clamp(48px, 7vh, 78px);
  color: rgba(210, 225, 240, .5);
  font-size: 13px;
}

body[data-page="case-detail"] .case-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

body[data-page="case-detail"] .case-breadcrumb a:hover,
body[data-page="case-detail"] .case-breadcrumb a:focus-visible { color: #fff; }

body[data-page="case-detail"] .case-v027-category {
  margin: 0 0 16px;
  color: #20c2ef;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
}

body[data-page="case-detail"] .case-v027-hero h1 {
  max-width: 1380px;
  margin: 0 0 30px;
  color: #fff;
  font-size: clamp(44px, 5.15vw, 82px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

body[data-page="case-detail"] .case-v027-summary {
  max-width: 1260px;
  margin: 0;
  color: rgba(229, 239, 249, .74);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.82;
  text-wrap: pretty;
}

body[data-page="case-detail"] .case-v027-media {
  padding: clamp(66px, 8vw, 116px) 0 clamp(88px, 9vw, 132px);
}

body[data-page="case-detail"] .case-v027-section-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.03em;
}

body[data-page="case-detail"] .case-v027-primary-media {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: stretch;
  min-height: min(76vh, 920px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(66, 169, 255, .24);
  border-radius: 12px;
  background:
    linear-gradient(45deg, rgba(15, 41, 67, .25) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(-45deg, rgba(15, 41, 67, .25) 25%, transparent 25%) 0 0 / 20px 20px,
    #01070d;
  box-shadow: 0 38px 100px rgba(0, 0, 0, .42);
}

body[data-page="case-detail"] .case-v027-primary-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(82vh, 1040px);
  place-self: center;
  object-fit: contain;
  background: #01070d;
}

body[data-page="case-detail"] .case-v027-primary-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(82vh, 1040px);
  place-self: center;
  object-fit: contain;
  background: #000;
}

body[data-page="case-detail"] .case-v027-primary-video {
  min-height: 0;
  background: #000;
}

body[data-page="case-detail"] .case-v027-primary-media figcaption,
body[data-page="case-detail"] .case-v027-highlight-media figcaption {
  position: static;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding: 11px 16px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  color: rgba(255, 255, 255, .76);
  background: rgba(2, 10, 20, .92);
  font-size: 12px;
  text-align: right;
}

body[data-page="case-detail"] .case-v027-overview {
  position: relative;
  padding: clamp(88px, 10vw, 150px) 0;
  border-block: 1px solid rgba(97, 156, 214, .12);
  background:
    radial-gradient(circle at 74% 30%, rgba(35, 87, 180, .13), transparent 34%),
    linear-gradient(180deg, rgba(7, 20, 34, .96), rgba(4, 12, 21, .98));
}

body[data-page="case-detail"] .case-v027-overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, .64fr) minmax(0, 1.36fr);
  gap: clamp(64px, 10vw, 180px);
  align-items: start;
}

body[data-page="case-detail"] .case-v027-overview-copy {
  padding-top: 22px;
  border-top: 1px solid rgba(32, 194, 239, .5);
}

body[data-page="case-detail"] .case-v027-overview-copy p {
  max-width: 930px;
  margin: 0;
  color: rgba(224, 237, 249, .78);
  font-size: clamp(17px, 1.28vw, 21px);
  line-height: 2;
  text-wrap: pretty;
}

body[data-page="case-detail"] .case-v027-highlights {
  padding: clamp(100px, 11vw, 176px) 0 clamp(126px, 14vw, 214px);
}

body[data-page="case-detail"] .case-v027-highlights > .container > .case-v027-section-heading {
  margin-bottom: clamp(54px, 7vw, 92px);
}

body[data-page="case-detail"] .case-v027-highlight-list {
  display: grid;
  gap: clamp(74px, 10vw, 146px);
}

body[data-page="case-detail"] .case-v027-highlight {
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
  gap: clamp(58px, 8vw, 132px);
  align-items: center;
}

body[data-page="case-detail"] .case-v027-highlight.is-reverse {
  grid-template-columns: minmax(0, 1.28fr) minmax(310px, .72fr);
}

body[data-page="case-detail"] .case-v027-highlight.is-reverse .case-v027-highlight-copy { order: 2; }
body[data-page="case-detail"] .case-v027-highlight.is-reverse .case-v027-highlight-media { order: 1; }

body[data-page="case-detail"] .case-v027-highlight-copy h3 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(32px, 3.1vw, 50px);
  font-weight: 620;
  line-height: 1.18;
  letter-spacing: -.028em;
}

body[data-page="case-detail"] .case-v027-highlight-copy p {
  margin: 0;
  color: rgba(218, 232, 246, .7);
  font-size: clamp(16px, 1.14vw, 19px);
  line-height: 1.9;
  text-wrap: pretty;
}

body[data-page="case-detail"] .case-v027-highlight-media {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: stretch;
  height: clamp(390px, 38vw, 610px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(73, 161, 244, .22);
  border-radius: 12px;
  background: #020a13;
  box-shadow: 0 28px 74px rgba(0, 0, 0, .34);
}

body[data-page="case-detail"] .case-v027-highlight-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #020a13;
  transition: transform .55s cubic-bezier(.2, .75, .25, 1);
}

@media (hover: hover) {
  body[data-page="case-detail"] .case-v027-highlight-media:hover img { transform: scale(1.012); }
}

@media (max-width: 1080px) {
  body[data-page="case-detail"] .case-v027-detail .container { width: min(100% - 56px, 1460px); }
  body[data-page="case-detail"] .case-v027-highlight,
  body[data-page="case-detail"] .case-v027-highlight.is-reverse { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: 48px; }
}

@media (max-width: 820px) {
  body[data-page="case-detail"] .case-v027-detail .container { width: min(100% - 36px, 1460px); }
  body[data-page="case-detail"] .case-v027-overview-grid,
  body[data-page="case-detail"] .case-v027-highlight,
  body[data-page="case-detail"] .case-v027-highlight.is-reverse { grid-template-columns: 1fr; }
  body[data-page="case-detail"] .case-v027-highlight.is-reverse .case-v027-highlight-copy,
  body[data-page="case-detail"] .case-v027-highlight.is-reverse .case-v027-highlight-media { order: initial; }
  body[data-page="case-detail"] .case-v027-primary-media { min-height: 0; }
  body[data-page="case-detail"] .case-v027-highlight-media { height: min(66vw, 520px); }
}

@media (max-width: 560px) {
  body[data-page="case-detail"] .case-v027-hero { padding-top: 110px; }
  body[data-page="case-detail"] .case-breadcrumb { margin-bottom: 38px; }
  body[data-page="case-detail"] .case-v027-hero h1 { font-size: clamp(36px, 10vw, 54px); }
  body[data-page="case-detail"] .case-v027-highlight-media { height: 72vw; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="case-detail"] .case-v027-highlight-media img { transition: none; }
}