/* =====================
   m_case — CMS Project page (Figma 2084:1597; alt state 2084:1755)
   Charcoal page + elevated white sheet: [case list 238 | content 750 | rail 90].

   Two states, driven by which gallery image is active:
     • first image active → hero (flex) + rich text below   (2084:1597)
     • any other image    → hero fills the column, no text  (2084:1755)
   The hero flexes and the rich text hugs, so the designed 514/896 heights
   fall out of the layout instead of being hard-coded.
===================== */

/* body kept white (per request). Figma 2084:1597 draws a charcoal page under
   an elevated white sheet; on white the sheet's drop-shadow barely reads, so
   the page now looks flat white edge-to-edge instead of a floating card. */
.is-case { background: var(--swatch--white); }

/* on the case page the sidebar's white ground runs to the page edge
   (Figma: the navbar block is 278 wide from x=0), so the sheet's shadow
   falls on white just like in the design */
.is-case .m_navbar {
  margin-left: calc(var(--site--margin) * -1);
  padding-inline: var(--site--margin) 0;
}

.m_case {
  /* Figma 2084:1597 — the sheet is 1182×968 at x=258: full viewport height,
     flush to the right edge. Starts at grid column 3 (right after the
     sidebar) and bleeds over .page_wrap's right padding; its own 20px
     padding makes the 928-tall columns. */
  grid-column: 3 / -1;
  /* the sheet starts flush against the sidebar content (Figma x=258 = the
     navbar's right edge), so it eats the gutter, and bleeds over the page
     margin on the right */
  margin-left: calc(var(--grid--gutter) * -1);
  margin-right: calc(var(--site--margin) * -1);
  min-width: 0;
  height: 100svh;
  display: flex;
  align-items: stretch;
  gap: 2rem;
  padding: 1.25rem;
  background: var(--color--bg-main);
  box-shadow: 0 0.25rem 12.5rem rgba(0, 0, 0, 0.1);
}

/* ---- column 1: case list — a Collection List (Figma 2084:1598 / Frame 519).
   .m_case_list is the wrapper, .m_case_list_items the item stack. ---- */
.m_case_list {
  width: 14.875rem;
  flex-shrink: 0;
  padding-block: 1rem;
}
.m_case_list_items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.m_case_list_item {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size--label);
  line-height: var(--line-height--tight);
  color: var(--color--text-secondary);
  transition: color 0.2s ease;
  white-space: nowrap;
}
/* hover = drawn underline (via [data-underline], same as m_navbar_link) +
   accent colour #0A0071 */
.m_case_list_item:hover { color: var(--color--accent); }
.m_case_list_item.is-active { color: var(--color--text-primary); }

/* blue dot on the active case — same accent + size as the rail marker (#2),
   absolutely placed just after the label so it never pads the link box */
.m_case_list_dot {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--color--accent);
  transform: translate(0.375rem, -50%);
  opacity: 0;
}
.m_case_list_item.is-active .m_case_list_dot { opacity: 1; }

/* ---- column 2: content (Figma 2084:1614) ---- */
.m_case_content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 1rem;
}

.m_case_hero {
  flex: 1 1 auto;   /* takes whatever the rich text leaves (514 → 896) */
  min-height: 0;
  position: relative;
  cursor: zoom-in;
  background-size: cover;
  background-position: center;
}
/* stacked crossfade layers (gallery-interactions pattern) */
.m_case_hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.55s cubic-bezier(.4, 0, .15, 1);
}
.m_case_hero img.is-entering { opacity: 0; }

/* rich text: hugs its content, hidden unless the first image is active */
.m_case_body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.m_case[data-state="gallery"] .m_case_body { display: none; }
.m_case[data-state="gallery"] .m_case_content { gap: 1rem; }

/* ---- portable text inside the case body ----
   Rendered as a Webflow-shaped .w-richtext: plain tags, styled by DESCENDANT
   selectors (the "All … within Rich Text" model) so it ports to Webflow with
   no per-element classes. */
.m_case_body_rt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.m_case_body_rt p,
.m_case_body_rt h2,
.m_case_body_rt h3,
.m_case_body_rt blockquote,
.m_case_body_rt ul,
.m_case_body_rt ol {
  margin: 0;
  font-size: var(--font-size--label);
  line-height: var(--line-height--tight);
  color: var(--color--text-primary);
}
.m_case_body_rt h2 { font-size: var(--font-size--h3); line-height: var(--line-height--card); }
.m_case_body_rt h3 { font-size: var(--font-size--h3-mob); line-height: var(--line-height--card); }
.m_case_body_rt p { white-space: pre-line; }   /* honour soft \n (meta lists) */
.m_case_body_rt figure { margin: 0; }
.m_case_body_rt figure img { width: 100%; height: auto; display: block; }
.m_case_body_rt ul,
.m_case_body_rt ol { padding-left: 1.2em; }

.m_case_link { display: none; }               /* shown only when the CMS has one */
.m_case[data-has-link="true"] .m_case_link {
  display: block;
  font-size: var(--font-size--label);
  line-height: var(--line-height--tight);
}

/* caption under an inline body image (native <figcaption>) — small, grey */
.m_case_body_rt figcaption {
  margin: 0;
  font-size: var(--font-size--caption);
  line-height: var(--line-height--tight);
  color: var(--color--text-secondary);
}

/* =====================
   NEW article mode (Two roofs, Figma 2242:3202): title + a flowing Portable
   Text body with inline images, captions and subheadings. Everything here is
   scoped to [data-mode="article"] so the old gallery layout is untouched.
===================== */
.m_case_title {
  margin: 0;
  font-size: 2.75rem;                  /* 44 — Figma 2242:3220 */
  line-height: var(--line-height--tight);
  color: var(--color--text-primary);
}

/* the article is taller than one screen, so the sheet grows and the page
   scrolls; the list + rail stay pinned while the content column moves */
.m_case[data-mode="article"] {
  height: auto;
  min-height: 100svh;
  align-items: flex-start;
}
.m_case[data-mode="article"] .m_case_list,
.m_case[data-mode="article"] .m_case_rail {
  position: sticky;
  top: 1.25rem;
  align-self: flex-start;
}
.m_case[data-mode="article"] .m_case_rail { height: calc(100svh - 2.5rem); }

/* content column: block flow, spacing carried by margins (32 between blocks,
   12 between stacked paragraphs, 8 image→caption — Figma 2242 frames) */
.m_case[data-mode="article"] .m_case_content { display: block; padding-block: 1rem 0; }
/* deck / subtitle under the title (Figma 2259:2433) — article description.
   12px under the title, then a 32px gap to the rule (pixel-perfect). */
.m_case_deck {
  margin: 0.75rem 0 0;
  font-size: var(--font-size--label);
  line-height: var(--line-height--tight);
  color: var(--color--text-secondary);
}
.m_case[data-mode="article"] .m_case_title + .u-hairline,
.m_case[data-mode="article"] .m_case_deck + .u-hairline { margin-top: 2rem; }
.m_case[data-mode="article"] .m_case_body { display: block; margin-top: 2rem; }
.m_case[data-mode="article"] .m_case_body_rt { display: block; }

.m_case[data-mode="article"] .m_case_body_rt p { margin: 0; line-height: var(--line-height--body); }
.m_case[data-mode="article"] .m_case_body_rt p + p { margin-top: 0.75rem; }        /* 12 */
.m_case[data-mode="article"] .m_case_body_rt figure {
  margin: 2rem 0 0;               /* 32 above image */
  scroll-margin-top: 1.25rem;    /* ↑/↓ anchor-scroll lands 20px off the top */
}
.m_case[data-mode="article"] .m_case_body_rt > figure:first-child { margin-top: 0; }
/* figcaption lives INSIDE the figure now — 8px under the image */
.m_case[data-mode="article"] .m_case_body_rt figcaption { margin-top: 0.5rem; }
.m_case[data-mode="article"] .m_case_body_rt figure + p,
.m_case[data-mode="article"] .m_case_body_rt figure + h3 { margin-top: 2rem; }
.m_case[data-mode="article"] .m_case_body_rt h3 {
  margin: 2rem 0 0;                          /* 32 above subheading */
  font-size: var(--font-size--h3);          /* 24 — Figma 2242:3233 */
  line-height: var(--line-height--card);
}
.m_case[data-mode="article"] .m_case_body_rt h3 + p { margin-top: 0.75rem; }      /* 12 */

/* ---- column 3: gallery rail (Figma 2084:1633) ---- */
.m_case_rail {
  width: 5.625rem;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-block: 1rem;
}

.m_case_rail_spacer { width: 1rem; flex-shrink: 0; }

.m_case_rail_col {
  position: relative;   /* anchor for the marker dot */
  width: 4rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  min-height: 0;
}

/* blue position-marker gliding to the active thumbnail (gallery-interactions
   pattern; PMO accent, sits in the spacer just left of the strip) */
.m_case_rail_dot {
  position: absolute;
  left: calc(100% + 0.375rem);   /* to the RIGHT of the thumbnail strip */
  top: 0;
  width: 0.5rem;
  height: 0.5rem;              /* 8px — Figma 2259:2583 (Ellipse 2) */
  border-radius: 50%;
  background: var(--color--accent);
  opacity: 0;
  pointer-events: none;
  /* animate TRANSFORM (composited), not top — top is a layout property and
     re-flows every frame, which is what made the dot judder on switch */
  will-change: transform;
  transition: transform 0.45s cubic-bezier(.4, 0, .1, 1), opacity 0.3s ease;
}

.m_case_close {
  font-size: var(--font-size--label);
  line-height: var(--line-height--tight);
  flex-shrink: 0;
}

.m_case_thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 12.5rem;   /* Figma 2084:1638 — the strip starts low on purpose */
  padding-bottom: 1rem;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}
.m_case_thumbs::-webkit-scrollbar { display: none; }

.m_case_thumb {
  width: 4rem;
  height: 5rem;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.m_case_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.35s ease, opacity 0.6s ease;
}
/* hover blurs the thumbnail image itself (full blur) */
.m_case_thumb:hover { opacity: 0.85; }
.m_case_thumb:hover img { filter: blur(6px); }
.m_case_thumb.is-active { opacity: 1; }

/* reveal-on-load (Tomasi reference): the photo fades in over its dominant-
   colour block once decoded; .is-loading is the transparent start state */
.m_case img.is-loading { opacity: 0; }
.m_case_body_rt figure img,
.m_case_stack_img img { transition: opacity 0.6s ease; }
.m_case_body_rt figure > div,
.m_case_stack_img { background-size: cover; background-position: center; }

/* ---- loading / empty ---- */
.m_case_state {
  font-size: var(--font-size--label);
  line-height: var(--line-height--tight);
  color: var(--color--text-secondary);
}

/* ---- mobile (Figma 2084:1909): plain vertical flow, no rail, no switching.
       Image 1 → rich text → the rest of the gallery, all full-width, gap 56.
       The case list moves into the navbar (.m_navbar_mob_cases). ---- */
@media (max-width: 991px) {
  .m_case {
    margin-left: 0;
    margin-right: 0;
    height: auto;
    flex-direction: column;
    box-shadow: none;
    /* Figma Frame 532: pad 40/20 — the 20 side padding comes from .page_wrap,
       the top offset clears the fixed glass navbar (measured into the var) */
    /* the fallback stays px — that var is measured in px by JS */
    padding: calc(var(--navbar-mob-h, 170px) + 2.5rem) 0 2.5rem;
  }

  /* sidebar list and the whole rail are desktop-only */
  .m_case_list,
  .m_case_rail { display: none; }

  .m_case_content {
    gap: 3.5rem;
    padding-block: 0;
  }

  .m_case_stack_img img {
    width: 100%;
    height: auto;      /* natural aspect, as the design's stacked rectangles */
    display: block;
  }
  .m_case_stack_img { cursor: zoom-in; }

  .m_case_body { gap: 1rem; }
  .m_case[data-state="gallery"] .m_case_body { display: flex; } /* no state on mobile */

  /* body copy breathes on mobile: 16/130 vs 16/110 on desktop */
  .m_case_body_rt p,
  .m_case_body_rt h2,
  .m_case_body_rt h3,
  .m_case_body_rt blockquote,
  .m_case_body_rt ul,
  .m_case_body_rt ol { line-height: var(--line-height--body); }
}

/* the closing hairline after the link exists on mobile only (Figma Line 40) */
.m_case_body .u-show-mob { display: none; }
@media (max-width: 991px) {
  .m_case_body .u-show-mob { display: block; }
}

/* ---- article mode on mobile: the thumbnail strip is HIDDEN for now (kept in
   the DOM and JS — desktop still uses it — only display is switched off; the
   fixed-bottom-bar treatment lived here and can be brought back). The rail is
   already display:none on mobile via the block above; this just makes the
   intent explicit and future-proof if the rail is ever un-hidden. ---- */
@media (max-width: 991px) {
  .m_case[data-mode="article"] .m_case_thumbs { display: none; }
}