/*
  EIF / BMvX case page styles.

  Loaded only on this page, via the pageStylesheets front-matter field
  in src/cases/eif-bmvx.njk (see the comment in base.njk for how that
  mechanism works). Reads every color/font/spacing value from
  tokens.css custom properties, same rule as base.css: no hex codes or
  bare font names here.

  IMPORTANT: this page's top-level sections do NOT re-apply the
  .site-canvas class, because base.njk's <main> already wraps every
  page's content in .site-canvas once. Adding it again here would
  double the side padding. Only something that needs to break OUT of
  the canvas (full browser width, edge to edge) would need special
  handling, and per CLAUDE.md's structural rule, nothing on a case
  page does that, only the header/footer chrome is allowed to.

  This file no longer owns everything on the page. The divider rule,
  the CPRR opening block, the sticky sidebar + two-column layout, and
  the next-case teaser are sitewide "furniture", identical on every
  case page regardless of format - those now live in case-shared.css,
  loaded before this file (see the pageStylesheets list in
  eif-bmvx.njk). See docs/iteration-protocol.md's locked-values
  section, and case-shared.css's own header comment, for the Format
  A/B principle behind that split: format affects content rhythm
  (spacing around images, captions, body text - what stays in THIS
  file), never structural furniture.

  Numbering below is what's left after extracting sections 1, 3, 4
  and 6 (shared primitives, CPRR, two-column layout, next-case) into
  case-shared.css - the remaining sections (2, 5, 7) keep their
  original numbers rather than being renumbered, so the gaps are
  expected, not a mistake:
    2. Hero
    5. Sections and their sub-components (figure/caption and diagram
       primitives live here too, as 5a/5b - EIF-specific content,
       unlike the sitewide furniture above)
    7. 768px responsive pass
*/

/* ==========================================================================
   2. Hero
   ========================================================================== */

.case-hero {
  padding-block: 48px 40px;
}

.case-hero__eyebrow {
  color: var(--color-accent);
  margin: 0 0 20px;
}

.case-hero__title {
  /* 52px desktop per Briefing_EIF_Synthese.md, explicitly noted there
     as not fully final, still adjustable once judged live against
     the real hero image below it - not a value to treat as locked
     the way the color/font tokens are. */
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 900px;
  margin: 0 0 48px;
  text-wrap: balance; /* avoids a single orphan word on its own last line */
}

/* Two-layer overlapping image composite. eif-01.png (background) sits
   top-left; eif-02.png (foreground) is offset down-right over it with
   a drop shadow, per reference/screenshots/eif.png. Both images are
   real product screenshots with confidential data already blurred in
   the source file, nothing to blur here in CSS. */
.case-hero__media {
  position: relative;
  /* Background sits in normal flow and sizes the container via its
     own aspect-ratio below; this padding-bottom covers both the room
     the absolutely-positioned foreground needs (it hangs ~103px past
     the background's own bottom edge, at the foreground's current 50%
     width) AND the visible whitespace before the divider that follows
     - without the second part the foreground collides with that
     divider instead of leaving a gap, which is what "12.5%" fixes
     over the previous "5.5%" (sized only for the overlap, before the
     foreground's width was corrected in the last fix pass, which made
     it taller and pushed its bottom edge further down). */
  padding-bottom: 12.5%;
}

.case-hero__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.case-hero__image--background {
  /* Reference shows only the top ~62.5% of this source image's height
     (the "Transaction dates" panel and the full "Tranches" table,
     cutting off before the next row of panels) - object-fit crops to
     that, the aspect-ratio locks the crop regardless of rendered
     width. Indented from the canvas's left edge, not flush to it. */
  width: 69%;
  aspect-ratio: 1920 / 1007;
  object-fit: cover;
  object-position: top;
  margin-left: 66px;
  box-shadow: 0 32px 64px -24px rgba(20, 24, 31, 0.18);
}

.case-hero__image--foreground {
  /* Essentially uncropped (its own aspect ratio already matches the
     source), just scaled down and offset over the background - not
     flush to the media container's right edge. Width corrected to
     50% during verification: direct pixel edge-detection against the
     reference (sidebar rail boundaries, checked at several scan
     lines) measured it at 600px/1200px, not the plan's estimated
     44%/525px - outside that estimate's own stated uncertainty. */
  position: absolute;
  top: 219px;
  right: 102px;
  width: 50%;
  box-shadow: 0 24px 48px -16px rgba(20, 24, 31, 0.22);
}

/* ==========================================================================
   5. Sections
   ========================================================================== */

.case-section {
  padding-block: 40px;
  scroll-margin-top: 24px; /* keeps a clicked/jumped-to heading clear of the viewport edge */
}

.case-layout > .case-article > .case-section:first-child {
  padding-top: 0;
}

.case-section__number {
  color: var(--color-accent);
  margin: 0 0 8px;
}

.case-section__heading {
  font-size: 30px;
  margin: 0 0 20px;
  text-wrap: balance;
}

.case-section__text {
  font-size: 18px;
  max-width: 700px;
  margin: 0 0 20px;
}

.case-section__text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   5a. Figures and captions (C5: real-image figures AND hand-built
   diagrams share this caption treatment - a decision-stating caption
   below the visual, with a left accent-blue rule, per
   Componenteninventaris.md's C5 component spec).
   ========================================================================== */

.case-figure {
  margin: 32px 0;
}

.case-figure__image {
  display: block;
  max-width: 100%;
  height: auto;
}

.case-figure__caption {
  max-width: 520px;
  margin: 16px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--color-accent);
  font-size: 15px;
  color: var(--color-body);
}

/* Click-to-enlarge trigger, used only on figures marked
   .case-figure--enlargeable (sections 05 and 06 - see
   case-eif-lightbox.js). A real button wrapping the image, not a div
   with a click handler, so it is keyboard-operable and announced as a
   control by default. */
.case-figure__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

.case-figure__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* ==========================================================================
   5b. Hand-built diagrams: shared parts (legend, numbered notes)
   Used by both the section 02 wireframe and the section 03 affinity
   board. Colors follow docs/Diagramtaal.md literally, see the specific
   diagram blocks below for the parts that are unique to each one.
   ========================================================================== */

.case-diagram {
  margin: 32px 0;
}

/* Section 07 only: a diagram immediately following a screenshot
   figure (the Waterfall/Excel image above the row-states diagram)
   needs more breathing room than two diagrams/figures back to back
   elsewhere on the page get from their collapsed 32px margins. */
.case-figure + .case-diagram {
  margin-top: 48px;
}

.case-diagram__callouts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.case-diagram__callout-number {
  font-family: var(--font-label);
  font-size: 11px;
  fill: var(--color-accent);
}

.case-diagram__notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--color-body);
}

.case-diagram__note-number {
  font-family: var(--font-label);
  color: var(--color-accent);
  margin-right: 6px;
}

.case-diagram__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a; /* Diagramtaal.md's neutral diagram-label color, distinct from --color-muted used sitewide */
}

.case-diagram__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-diagram__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.case-diagram__legend-swatch--boundary {
  border: 1px solid var(--color-accent);
}

.case-diagram__legend-swatch--line {
  width: 14px;
  height: 3px;
  align-self: center;
  background: #dce4f7;
}

.case-diagram__legend-swatch--emphasis {
  width: 14px;
  height: 3px;
  align-self: center;
  background: #8fa8e4;
}

.case-diagram__legend-swatch--point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
  background: var(--color-accent);
}

.case-diagram__legend-swatch--sub {
  border: 1px solid #9aa8c7;
}

.case-diagram__legend-swatch--dot {
  background: #dce4f7;
}

.case-diagram__legend-swatch--dot-dominant {
  background: var(--color-accent);
}

/* ==========================================================================
   5c. Section 02 diagram: the redrawn BMv3 wireframe
   ========================================================================== */

/* Outer frame, sized to the full 936px article column: holds the
   (narrower) wireframe box plus the callout SVG, which is sized to
   the whole frame so its numbers can land in the box's right-hand
   margin instead of being clipped to the box itself. */
.case-diagram__frame {
  position: relative;
}

.case-wireframe {
  width: 85%;
  /* Fixed to the reference's measured height rather than left to grow
     with content: the 18-item module list is taller than the tab
     content next to it, and CSS Grid would otherwise stretch the box
     to match it. Clipping reads correctly here, this is a mockup of a
     real app screen with more sidebar items than fit on screen, not a
     document meant to show all of them in full. */
  height: 371px;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  padding: 16px;
}

.case-wireframe__topbar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 12px;
}

.case-wireframe__pill {
  width: 32px;
  height: 8px;
  border-radius: 4px;
  background: #dce4f7;
}

.case-wireframe__body {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  border-top: 1px solid var(--color-accent);
  padding-top: 12px;
}

.case-wireframe__main {
  border-left: 1px solid #dce4f7;
  padding-left: 16px;
}

.case-wireframe__sidebar-label {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin: 0 0 8px;
}

.case-wireframe__module-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.9;
}

.case-wireframe__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: 16px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.case-wireframe__tab--active {
  color: var(--color-accent);
}

.case-wireframe__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-wireframe__row {
  display: flex;
  gap: 12px;
}

.case-wireframe__row--split {
  border-top: 1px dashed #dce4f7;
  padding-top: 14px;
}

/* Empty placeholder row: no bars, just the outline, used to pad out
   the content area to match the reference's taller box. */
.case-wireframe__row--empty {
  height: 24px;
  border: 1px solid #dce4f7;
}

.case-wireframe__bar {
  display: block;
  height: 10px;
  background: #dce4f7;
}

.case-wireframe__bar--emphasis {
  background: #8fa8e4;
}

/* ==========================================================================
   5d. Section 03 diagram: the research affinity board
   ========================================================================== */

.case-affinity {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: 16px;
  align-items: stretch;
}

.case-affinity__flank {
  border: 1px solid #dce4f7;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.case-affinity__flank-label,
.case-affinity__panel-header,
.case-affinity__subpanel-label {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin: 0 0 8px;
}

.case-affinity__panel-header strong {
  font-family: var(--font-base);
  font-size: 13px;
  color: var(--color-title);
  text-transform: none;
  letter-spacing: normal;
  margin-right: 6px;
}

.case-affinity__count,
.case-affinity__subpanel-count {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--color-muted);
  margin: auto 0 0;
  padding-top: 8px;
}

.case-affinity__subpanel-count--dominant {
  color: var(--color-accent);
}

.case-affinity__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
  flex: 1;
}

.case-affinity__dot {
  width: 6px;
  height: 6px;
  background: #dce4f7;
}

.case-affinity__dot--dominant {
  background: #8fa8e4;
}

.case-affinity__panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-affinity__panel {
  background: #f1f4fa;
  border: 1px solid var(--color-accent);
  padding: 12px;
}

.case-affinity__subpanels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.case-affinity__subpanel {
  background: var(--color-bg);
  border: 1px solid #dce4f7;
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-height: 96px;
}

.case-affinity__subpanel--dominant {
  border-color: var(--color-accent);
}

/* ==========================================================================
   5e. Pull-quote (section 04)
   Pairs with the sitewide .pullquote utility class in base.css (see
   the class list on the <blockquote> in eif-bmvx.njk): that utility
   supplies the font-family/italic/style, this file only adds what is
   genuinely case-specific - larger size, accent color, and the thin
   rules above/below. If the sitewide .pullquote style ever changes,
   this still inherits it rather than duplicating it.
   ========================================================================== */

.case-pullquote-block {
  padding-block: 48px;
}

.case-pullquote-block__rule {
  border-top-color: var(--color-accent);
}

.case-pullquote {
  font-size: 30px;
  color: var(--color-accent);
  max-width: 760px;
  margin: 40px 0;
}

/* ==========================================================================
   5f. Figures that need to scroll instead of shrink (section 05's
   ultra-wide journey map source image - see the comment on that
   figure in eif-bmvx.njk for why).
   ========================================================================== */

.case-figure--scroll {
  overflow-x: auto;
}

.case-figure--scroll .case-figure__image {
  max-width: none;
  width: 100%;
  min-width: 900px;
}

/* ==========================================================================
   5g. Section 07's second diagram: table row states
   Reuses .case-wireframe__bar/.case-wireframe__pill/
   .case-wireframe__sidebar-label from the section 02 diagram - same
   visual vocabulary, no need to redefine it.
   ========================================================================== */

.case-rowstates {
  width: 57%;
  border: 1px solid var(--color-accent);
  padding: 16px;
}

.case-rowstates__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: 12px;
}

.case-rowstates__body {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 16px;
}

.case-rowstates__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-rowstates__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
}

.case-rowstates__handle {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--color-muted);
}

.case-rowstates__checkbox {
  width: 12px;
  height: 12px;
  border: 1px solid #9aa8c7;
  flex-shrink: 0;
}

.case-rowstates__row--selected {
  border-color: var(--color-accent);
}

.case-rowstates__row--dragging {
  border-color: var(--color-accent);
  border-style: dashed;
}

.case-rowstates__row--bookmarked .case-rowstates__checkbox {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.case-rowstates__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--color-accent);
}

.case-diagram__notes--four {
  grid-template-columns: repeat(4, 1fr);
}

.case-diagram__legend-swatch--dragging {
  border: 1px dashed var(--color-accent);
}

/* ==========================================================================
   5h. Stats row (section 08, Componenteninventaris.md C6)
   ========================================================================== */

.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 32px 0;
}

.case-stats__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-stats__number {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.case-stats__label {
  font-size: 14px;
  color: var(--color-muted);
}

/* ==========================================================================
   5i. Result and reflection (section 09)
   ========================================================================== */

.case-reflection {
  /* Top space moved from padding to margin so the border-left below
     doesn't paint through it - it should start right at the "09"
     eyebrow, not extend upward through the gap before the section. */
  margin-top: 81px;
  padding: 0 0 40px 32px;
  border-left: 3px solid var(--color-accent);
}

/* ==========================================================================
   5j. Click-to-enlarge lightbox overlay
   Built and inserted into the page by case-eif-lightbox.js, not
   present in the .njk markup - see that file for the open/close
   logic. Hidden by the [hidden] attribute until opened; the explicit
   [hidden] rule below is needed because this file also sets
   display: flex on the bare class, which would otherwise win over the
   browser's default [hidden] { display: none } on equal specificity.
   ========================================================================== */

.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 31, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease;
  overscroll-behavior: contain;
}

.case-lightbox[hidden] {
  display: none;
}

.case-lightbox--open {
  opacity: 1;
}

.case-lightbox--no-motion {
  transition: none;
}

.case-lightbox__image {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.5);
}

.case-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-title);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.case-lightbox__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   7. 768px responsive pass (partial - extended as later sections are added)
   ========================================================================== */

@media (max-width: 767px) {
  .case-hero__title {
    /* 32px mobile per Briefing_EIF_Synthese.md, same not-fully-final
       note as the desktop value above. */
    font-size: 32px;
  }

  /* Mobile shows the hero's background layer only, per the confirmed
     decision in docs/Case_EIF_BMvX.md - not a different image, the
     foreground layer is simply hidden. */
  .case-hero__image--foreground {
    display: none;
  }

  .case-hero__media {
    /* No foreground image to leave room for on mobile - the background
       image's own aspect-ratio is enough to size the container. */
    padding-bottom: 0;
  }

  .case-hero__image--background {
    width: 100%;
    margin-left: 0;
  }

  .case-wireframe__body {
    grid-template-columns: 1fr;
  }

  .case-wireframe__sidebar {
    display: none; /* the 18-item module list does not add anything at this width, the tabs+content half still makes the same point */
  }

  /* Known approximation: the callout SVG's viewBox coordinates were
     tuned for the two-column (sidebar + content) desktop layout.
     With the sidebar hidden above, the dots will sit slightly off
     their intended targets on mobile. Acceptable for a first pass -
     there is no full mobile reference screenshot for this page to
     match exactly (see the plan's iteration-protocol note), revisit
     if this looks wrong when checked live on a phone. */

  .case-diagram__notes {
    grid-template-columns: 1fr;
  }

  .case-affinity {
    grid-template-columns: 1fr;
  }

  .case-affinity__subpanels {
    grid-template-columns: 1fr;
  }

  .case-pullquote {
    font-size: 22px;
  }

  .case-rowstates__body {
    grid-template-columns: 1fr;
  }

  .case-rowstates__actions {
    border-left: none;
    border-top: 1px solid var(--color-accent);
    padding-left: 0;
    padding-top: 12px;
  }

  .case-diagram__notes--four {
    grid-template-columns: 1fr;
  }

  .case-stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .case-reflection {
    padding-left: 20px;
  }
}