/*
  Shared case-page furniture.

  Loaded on EVERY case page (EIF, Frits, EIB, and any future case),
  via the pageStylesheets front-matter field, listed BEFORE that
  page's own stylesheet (e.g. case-frits.css) so the page-specific
  file can still win the cascade if it ever needs to. See the
  comment in base.njk for how pageStylesheets works.

  WHY THIS FILE EXISTS (read this before adding a case page's own
  version of any of the classes below):

  docs/Portfolio_Caseformat.md splits every case along two axes:
  presentation FORMAT (A, image-led, e.g. Frits; or B, text/diagram-
  led, e.g. EIF and EIB) and depth. Format changes CONTENT RHYTHM -
  how much space sits around images, captions and body paragraphs,
  how wide the reading column is, how generous the pacing feels.
  Those values legitimately differ per case and stay in that case's
  own stylesheet (case-eif.css, case-frits.css, ...).

  Format does NOT change a page's STRUCTURAL FURNITURE: the CPRR
  opening block, the sticky section sidebar and its two-column
  layout, and the next-case teaser. These are sitewide identity, the
  same on every case page regardless of what format that case uses.
  Before this file existed, EIF's stylesheet was the only place they
  were defined, and building Frits as a second, separate stylesheet
  would have duplicated all three - which is exactly what happened
  during Frits' planning: nine content/layout deltas turned up
  between EIF's tuned CSS and Frits' own Design reference, and most
  of them turned out to be furniture that should never have been
  free to drift in the first place, not a real per-case decision.
  This file is the fix: one definition, reused everywhere. When EIB
  is built next, it loads this file the same way and does not
  re-litigate the CPRR/sidebar/next-case question from scratch.

  Values below are EIF's own tuned values (checked against
  reference/screenshots/eif.png across several iteration rounds),
  used as-is, EXCEPT two deliberate, confirmed changes made when this
  file was extracted:
    1. .case-sidebar__item's hover state, upgraded from a plain color
       change to a background tint + rightward shift (matching
       Frits' own Design reference), applied sitewide.
    2. .case-next's top spacing, increased from 56px to 120px
       (Frits' Format A value: more breathing room before the
       outro), applied sitewide.
  Everything else here is a pure relocation, not a value change - if
  you diff a page's rendered output against a version from before
  this file existed, only those two things should differ.

  File order: divider, CPRR block, sidebar + two-column layout,
  next-case teaser, then their 768px responsive overrides together
  at the bottom (matching the per-page stylesheets' own convention
  of a single responsive pass at the end, not scattered inline).
*/

/* ==========================================================================
   1. Divider
   ========================================================================== */

/* Thin, solid, full-canvas-width divider line. Reused between the
   hero and the CPRR block, between CPRR rows, above/below a
   pull-quote or stats row, and above each numbered section. Never
   faded at the edges, per CLAUDE.md's structural-lines rule. */
.case-divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

/* ==========================================================================
   2. CPRR opening block (Componenteninventaris.md C2: label above,
   text full width, thin divider between each of the 4 rows).
   ========================================================================== */

.case-cprr {
  padding-block: 40px;
}

.case-cprr__row {
  padding-block: 28px;
  border-top: 1px solid #e3e6ec;
}

.case-cprr__row:first-child {
  border-top: none;
  padding-top: 0;
}

.case-cprr__row--last {
  padding-bottom: 0;
}

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

.case-cprr__text {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-body);
  max-width: 900px;
}

/* The Result row reads as a summary statement in the reference
   screenshots - visibly heavier than the other three rows, title
   color and a heavier weight, not a new font size. */
.case-cprr__text--result {
  color: var(--color-title);
  font-weight: 600;
}

/* ==========================================================================
   3. Sticky sidebar + two-column layout
   ========================================================================== */

.case-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 64px;
  padding-block: 80px 64px;
}

.case-sidebar {
  /* Sticky, but only clears the viewport top for now: the site
     header itself is not sticky yet (built later, in the sitewide
     integration session - see Handoff_Code_Fase.md's build order).
     Once the header becomes sticky, this top value needs to change
     to "header height + 24px", or the sidebar will sit under it. */
  position: sticky;
  top: 24px;
  align-self: start;
}

.case-sidebar__label {
  margin: 0 0 16px;
}

.case-sidebar__list {
  display: flex;
  flex-direction: column;
}

/* Every item gets a divider above it: the first one (label -> first
   item) is a step darker than the ones between items. .case-sidebar__list
   is a column flex container, so each item (an <a>, block-ified via
   display:flex below) stretches to its full 100% cross-axis width by
   default - the hover/active background below therefore paints the
   whole row, edge to edge with the divider lines and the SECTIONS
   label above them, not just a box hugging the text. No horizontal
   padding here: an earlier padding+negative-margin version (meant to
   let the hover background breathe slightly past the text) widened
   the item's own box beyond the sidebar's actual column, which read
   as misaligned once actually checked against the row - simpler is
   correct here.

   Spacing between items is padding-block (12px top AND bottom), not
   a mix of padding-top and the next item's margin-top: with a
   margin-based gap, an item's own box (and so its hover/active
   background) stopped at its own content, leaving the margin as a
   visible unhighlighted strip between the highlight and the divider
   below it - confirmed directly against a screenshot, not a guess.
   Padding on both sides means the item's box - and its background -
   extends all the way down to the next divider, with no gap, while
   the total 24px rhythm between two items' text (12px+12px either
   way) stays exactly the same as before. */
.case-sidebar__item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding-block: 12px;
  font-size: 14px;
  color: var(--color-muted);
  border-top: 1px solid #eff1f4;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease;
}

.case-sidebar__item:first-child {
  border-top: 1px solid #e3e6ec;
}

/* Hover treatment: background tint + a small rightward nudge, per
   Frits' own Design reference, adopted sitewide rather than left as
   a one-page difference (see the file header). */
.case-sidebar__item:hover {
  background-color: #f1f4fd;
  color: var(--color-accent);
  transform: translateX(4px);
}

.case-sidebar__number {
  font-family: var(--font-label);
  color: var(--color-accent);
}

/* Current section, toggled by the page's own case-*-sidebar.js as
   the reader scrolls (each case page loads its own copy of that
   script - see that file's header comment for why it isn't shared
   the way this CSS is). Without JS, every item just looks like this
   one does not, a fine, fully usable default. */
.case-sidebar__item--active {
  color: var(--color-title);
  font-weight: 600;
}

.case-article {
  min-width: 0; /* allow wide figures to size against the grid track, not their own content */
}

/* ==========================================================================
   4. Next-case teaser
   ========================================================================== */

.case-next {
  display: block;
  /* Top spacing is Frits' Format A value (120px, more breathing room
     before the outro), applied sitewide - see the file header for
     why this changed from EIF's original 56px. Bottom spacing is
     unchanged. */
  padding-top: 120px;
  padding-bottom: 56px;
}

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

.case-next__title {
  /* No max-width: this is a full-width display heading, meant to
     span the whole 1200px content column like the hero title above
     it in the page, not wrap into a narrower sub-column. An earlier
     820px cap here wrapped a short two-line title down into three
     lines at this font size, which read as a layout defect once
     actually rendered, not a deliberate reading-width choice - see
     the same fix on .case-hero__title in each page's own stylesheet. */
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
  transition: color 0.15s ease;
}

.case-next:hover .case-next__title {
  color: var(--color-accent);
}

/* ==========================================================================
   5. 768px responsive pass
   ========================================================================== */

@media (max-width: 767px) {
  .case-cprr__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Sidebar collapses to a numbers-only column: stays sticky and
     tappable, just narrower - section titles are hidden, not
     removed, so a screen reader still announces them. */
  .case-layout {
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
  }

  .case-sidebar__label {
    display: none;
  }

  .case-sidebar__item {
    /* 44x44 minimum tap target, per the confirmed mobile spec. */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }

  .case-sidebar__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .case-next__title {
    font-size: 28px;
  }
}