/* ============================================================
   Case study media
   Additive. Load AFTER style.css (and after related.css).
   All new classes prefixed csm-. The two .cs-fig rules are
   deliberate overrides of style.css, kept narrow on purpose.
   ============================================================ */

/* ---------- hero image, full width under the case study header ---------- */
.csm-hero {
  margin: 0;
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
}
.csm-hero img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 0;
}
.csm-hero figcaption {
  font-family: var(--mono);
  font-size: 12px;
  color: #6a6a74;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px 14px;
}
@media (max-width: 760px) {
  .csm-hero img { max-height: 340px; }
  .csm-hero figcaption { padding: 10px 24px 14px; }
}

/* ---------- break a figure out of the 760px reading column ----------
   .cs-body is max-width 760px, so .cs-fig.full in style.css could never
   actually reach its 1200px. This makes the breakout real.

   overflow-x: CLIP, not hidden. `hidden` would turn <html> into a scroll
   container and silently kill the sticky nav. `clip` does not.
   The -80px absorbs a desktop scrollbar, which 100vw does not subtract. */
html { overflow-x: clip; }

.cs-fig.full,
.csm-wide {
  width: calc(100vw - 80px);
  max-width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 760px) {
  .cs-fig.full,
  .csm-wide { width: calc(100vw - 48px); }
}

/* ---------- side by side figures ---------- */
.csm-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 36px 0;
}
.csm-pair figure { margin: 0; }
.csm-pair img { width: 100%; display: block; }
.csm-pair figcaption {
  font-family: var(--mono);
  font-size: 12px;
  color: #6a6a74;
  margin-top: 10px;
}
@media (max-width: 700px) {
  .csm-pair { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- text left, image right, broken out of the reading column ----------
   Use with .csm-wide for the breakout width. Stacks text over image on mobile. */
.csm-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.csm-split-text h3 { margin-top: 0; }
.csm-split-text p:last-child { margin-bottom: 0; }
.csm-split .cs-fig { margin: 0; }
.csm-split .cs-fig img { width: 100%; display: block; }
@media (max-width: 900px) {
  .csm-split { grid-template-columns: 1fr; gap: 28px; }
}

/* Panel variant: text and image share one background.
   The color matches the backdrop baked into brand-system-voice.jpg
   (#ece9e4 at top fading to #e6e3de), so the image edge disappears. */
.csm-split--panel {
  background: linear-gradient(180deg, #ece9e4 0%, #e6e3de calc(100% - 40px), #e6e3de 100%);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.csm-split--panel .csm-split-text { padding: 56px 0 56px 56px; }
.csm-split--panel .cs-fig img { border-radius: 0; }
.csm-split--panel .cs-fig figcaption { padding: 0 32px 20px; margin-top: 0; }
@media (max-width: 900px) {
  /* stacked: text sits above the image, so match the image's top and bottom tones */
  .csm-split--panel { background: #e6e3de; }
  .csm-split--panel .csm-split-text { padding: 32px 24px 8px; background: #ece9e4; }
  .csm-split--panel .cs-fig figcaption { padding: 0 24px 18px; }
}

/* ---------- compact results row, replaces a paragraph of numbers ---------- */
.csm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 32px 0 8px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.csm-stats .n {
  font-family: var(--disp);
  font-weight: 850;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.csm-stats .n span { color: var(--blue); }
.csm-stats .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6a6a74;
  margin-top: 6px;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .csm-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* ---------- credits line ---------- */
.csm-credits {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: #4a4a55;
}
.csm-credits b {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

/* ---------- hero variant for cut-out mockups: show the whole image ---------- */
.csm-hero--contain img {
  object-fit: contain;
  height: auto;
  max-height: 620px;
  padding: 28px 24px 8px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .csm-hero--contain img { max-height: 420px; padding: 18px 16px 4px; }
}

/* ---------- figures with width/height attributes keep their ratio ---------- */
.cs-fig img { height: auto; }

/* ---------- looping video figures ---------- */
.cs-fig video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- positioning line under the case study title ---------- */
.cs-lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: #3a3a45;
  max-width: 62ch;
  margin-top: 18px;
}

/* ---------- small linked teaser to another case study ---------- */
.csm-teaser {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: center;
  margin: 36px 0;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease;
}
.csm-teaser:hover { border-color: var(--blue); }
.csm-teaser img { width: 100%; height: auto; border-radius: 8px; }
.csm-teaser-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.csm-teaser-t {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 6px 0 10px;
}
.csm-teaser-go { font-size: 14px; color: var(--blue); }
@media (max-width: 560px) {
  .csm-teaser { grid-template-columns: 1fr; }
}