/* Medwiki case study: project accent + Medwiki-specific blocks (template lives in case.css). */
.case--medwiki { --accent: #e75301; --accent-soft: #fdeee6; }

/* ---------- hero (no top pattern block: hero starts at the top of the column) ---------- */
.case--medwiki .case-hero { margin-top: 0; }
.case--medwiki .case-hero__title { line-height: 42px; letter-spacing: -0.01em; }
.case--medwiki .case-hero__intro { color: #000; }

/* ---------- sections ---------- */
.case--medwiki .case-sec { gap: 28px; }
.case--medwiki .case-sec.mw-features { gap: 36px; }
.case--medwiki .case-sub--icon svg { stroke-width: 1.5; }
.case--medwiki .case-h2 { letter-spacing: 0; }

/* ---------- feature cards: 400 card + text pinned to the bottom ---------- */
.mw-feature { display: flex; align-items: flex-end; gap: 28px; }
.mw-feature picture { flex: none; }
.mw-feature__card { display: block; width: 400px; height: 400px; border-radius: 31px; }   /* the card art carries its own background */
.mw-feature__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mw-feature__eyebrow { font-size: 12px; line-height: 18px; color: var(--accent); }
.mw-feature__title { font-weight: 500; font-size: 18px; line-height: 22px; color: #000; }

/* ---------- dashed "to add before launch" callout (Figma dash 6/6, r16) ---------- */
.mw-callout { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 25px; }
.mw-callout__border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mw-callout__border rect {
  x: 0.5px; y: 0.5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: 15.5px;
  fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 6 6;
}

/* ---------- shipped gallery: Desktop / Mobile view toggle (1443:7789 · 1443:8273) ---------- */
.case--medwiki .gallery__stage { aspect-ratio: 960 / 600; background: #f5f5f5; }
.case--medwiki .gallery__view > span:first-child svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case--medwiki .gallery__stage img.gallery__phone {
  inset: auto; left: 356.5px; top: 32px; width: 247px; height: 536px;
  border-radius: 24px; outline: 1px solid rgba(18, 18, 18, 0.1); outline-offset: -1px;
}
.case--medwiki .gallery[data-view="mobile"] { --thumb-w: 30px; --thumb-h: 64px; }

/* ---------- mobile 390 ---------- */
@media (max-width: 767px) {
  .case--medwiki .case-hero__title { line-height: 33px; }
  .case--medwiki .case-chips li { font-size: 12px; line-height: 18px; }
  .case--medwiki .case-meta { grid-template-columns: repeat(2, 160px); gap: 16px 20px; }
  .case--medwiki .case-meta dt { font-size: 11px; line-height: 17px; }
  .case--medwiki .case-meta dd { font-size: 12px; line-height: 18px; }
  .case--medwiki .case-eyebrow { font-size: 11px; line-height: 17px; top: 0; }
  .case--medwiki .case-sub { line-height: 23px; }

  .mw-feature { flex-direction: column; align-items: stretch; gap: 16px; }
  .mw-feature__card { width: 100%; height: auto; aspect-ratio: 1; border-radius: 28px; }
  .mw-feature__title { font-size: 17px; line-height: 20px; }
  .mw-feature .case-p { font-size: 13px; line-height: 20px; top: 0; }

  .mw-callout { padding: 21px; }

  .case--medwiki .gallery { --thumb-w: 32px; --thumb-h: 20px; }
  .case--medwiki .gallery[data-view="mobile"] { --thumb-w: 16px; --thumb-h: 34px; }
  .case--medwiki .gallery__stage { aspect-ratio: 342 / 214; border-radius: 10px; }
  .case--medwiki .gallery[data-view="mobile"] .gallery__stage { aspect-ratio: 342 / 380; }
  .case--medwiki .gallery__stage img.gallery__phone { left: 90.5px; top: 16px; width: 161px; height: 348px; border-radius: 16px; }
  .case--medwiki .gallery__views { gap: 16px; }
  .case--medwiki .gallery__view { gap: 10px; font-size: 15px; line-height: 18px; }
  .case--medwiki .gallery__view > span:first-child { width: 32px; height: 32px; border-radius: 7px; }
}

/* <picture>-wrapped figures (one DOM, mobile raster via <source>) */
.case--medwiki .case-fig picture, .case--medwiki .case-fig picture img { display: block; width: 100%; height: auto; }

/* half-pixel snapping vs Figma's render (blocks that sit on .5 rows at 1280) */
@media (min-width: 768px) {
  #approach .case-sub--icon span { top: 1px; }
  .mw-feature picture { position: relative; top: -0.5px; }
  .mw-feature__eyebrow { position: relative; top: -1px; }
}
.case--medwiki .mw-cover img { aspect-ratio: 840 / 477.75; }
#design-system .case-fig img { aspect-ratio: 840 / 551.6; }
@media (max-width: 767px) {
  .case--medwiki .case-sub--icon span { top: 0.5px; }
  .case--medwiki .mw-cover img { aspect-ratio: 342 / 195; }
  #design-system .case-fig img { aspect-ratio: 342 / 224; }
}