/* ==========================================================================
   CASES PAGE — three projects on one long page (Figma «Mobile Projects»)
   --------------------------------------------------------------------------
   Every case is the same component, in the same order:

     name + kind of business            (who)
     evidence line + intro              (the result, in words)
     before / after screenshots         (the result, shown) — not every case
     process text + a row of the work   (how it was made)
     one line + the client's message    (the reaction)

   Gaps — box to box, as in the Figma panel of case 01 (Bonbonky Kids),
   applied to all three so the page reads as one system. Figma had drifted
   on cases 02 and 03 (17 / 82 / 33 / 32 where case 01 has 56 / 56 / 56),
   and those were brought back to case 01:

     screen top  → name             56   same as About on the main page
     name        → kind             16
     kind        → evidence         56
     evidence    → intro            32
     intro       → before           56
     screenshot  → its caption      16
     «Було»      → «Стало» shot     32   (31 in Figma, rounded to the scale)
     «Стало»     → process text    120
     intro       → process text     32   case 03, which has no before/after
     paragraph   → paragraph        16   paragraph spacing
     process     → row of work      56
     row of work → review line     120
     review line → message          32
     case        → next case       120   and the last one → footer (120)
   ========================================================================== */

.cases {
  padding-top: var(--space-between);
}

.case + .case {
  margin-top: var(--space-section);
}

/* --- Who ------------------------------------------------------------------
   M/Display 34/38 for the name, set in capitals by the role (the HTML keeps
   the client's own spelling, so screen readers read «Bonbonky Kids», not
   letters). The kind of business is READ, so it takes ink-soft — the same
   pair as a role name and its clarifier in the services block. */

.case__kind {
  margin-top: var(--space-pair);
  color: var(--color-ink-soft);
}

/* --- Result in words ------------------------------------------------------ */

.case__summary {
  margin-top: var(--space-between);
}

.case__intro {
  margin-top: var(--space-group);
}

/* --- Before / after -------------------------------------------------------
   Full field width; each screenshot keeps its own proportion, so the two
   are at ONE scale — the numbers in «Було» and «Стало» are the same size
   and can be compared at a glance. */

.case__result {
  margin-top: var(--space-between);
}

.case__shot {
  margin: 0;
}

.case__shot + .case__shot {
  margin-top: var(--space-group);
}

.case__shot img,
.case__review img {
  width: 100%;
  height: auto;
}

.case__caption {
  margin-top: var(--space-pair);
  text-align: center;
  color: var(--color-ink-soft);
}

/* --- Process --------------------------------------------------------------- */

.case__process {
  margin-top: var(--space-section);
}

/* Case 03 has no screenshots between the intro and the process: the two
   texts are one group then. */
.case__process--no-result {
  margin-top: var(--space-group);
}

.case__text p + p {
  margin-top: var(--paragraph-spacing);
}

/* The row of work: one height (400), each piece at its own width — 225 for
   a 9:16 story, 320 for a 4:5 post — so nothing is cropped to fit a cell.
   It runs edge to edge and is swiped sideways; the first piece starts on
   the 20-px field line and snaps back to it. */
.case__works {
  display: flex;
  gap: 0.625rem;                               /* 10, Figma */
  margin-top: var(--space-between);
  padding-inline: var(--page-margin);
  overflow-x: auto;
  overscroll-behavior-x: contain;              /* a swipe never turns the page */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-margin);
  scrollbar-width: none;                       /* Firefox */
}

.case__works::-webkit-scrollbar {
  display: none;                               /* Safari, Chrome */
}

/* The row takes keyboard focus (tabindex="0") so it can be scrolled with
   the arrow keys; the ring is drawn inside, where the screen can show it. */
.case__works:focus-visible {
  outline-offset: -2px;
}

.case__work {
  flex: none;
  scroll-snap-align: start;
}

.case__work img {
  width: auto;
  height: 25rem;                               /* 400 */
}

/* --- Review ---------------------------------------------------------------- */

.case__review {
  margin-block: var(--space-section) 0;
}

.case__review picture {
  display: block;
  margin-top: var(--space-group);
}

/* --- Two lengths of the same text ------------------------------------------
   Phones get the short cut of each text (Figma «Mobile Projects»), desktop
   the full one (Figma «Кейсы»). Hidden with display: none, so a screen
   reader hears only the version on screen. */
@media (max-width: 63.99em) {
  .v-d { display: none !important; }
}

@media (min-width: 64em) {
  .v-m { display: none !important; }
}

/* --------------------------------------------------------------------------
   DESKTOP (Figma «Кейсы», 1920)
   --------------------------------------------------------------------------
   The field is 79 … 1699: four columns of 389 with 22 between them
   (Figma: 384 / 22). The 142 to the right of it belong to the case
   indicator. Every case is laid on these four columns, and the three
   cases alternate their sides:

     01 Bonbonky      name | · | evidence | intro          then Було / Стало
     02 Español       Було | Стало | name — evidence | intro (at the bottom)
     03 Shishatskaya  name — evidence | intro | Лікар | Клініка

   Gaps (desktop scale):
     screen top     → first case    64 bar + 56
     part → part (result / process / review)   120
     process text   → row of work    56
     caption        → its shot       16   caption is ABOVE on desktop
     case           → case          --space-section (160 / 200)
   Figma values on the way were 32 / 150 / 153 / 280, and columns at
   445 / 541 / 630 / 866 / 1017 / 1097 / 1330 — brought to the grid.
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .cases {
    padding-top: calc(4rem + var(--space-between));
    padding-left: var(--page-margin);
    padding-right: 11.51vw;                     /* 221 at 1920: 1699 + indicator */
  }

  .cases .container {
    padding-inline: 0;
  }

  .case {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.375rem;                       /* 22 */
    align-items: start;
    scroll-margin-top: 4rem;
  }

  .case + .case {
    margin-top: var(--space-section);
  }

  .case__summary,
  .case__result,
  .case__text.v-d {
    display: contents;
  }

  .case__kind {
    margin-top: var(--space-pair);
    color: var(--color-ink);
  }

  .case__evidence,
  .case__intro,
  .case__summary,
  .case__result {
    margin-top: 0;
  }

  .case__intro p + p,
  .case__col p + p {
    margin-top: var(--paragraph-spacing);
  }

  /* Two text columns side by side (evidence | intro, process a | b) sat
     only the grid's 22 apart — two blocks of text read as one ragged
     block (Figma has them ~100 apart). The LEFT text of each pair gives
     up 34 on its right, so the texts are 56 apart (the scale's gap
     between groups; the evidence stays ~355 wide, Figma 364) while both
     columns keep their left edges on the grid, over the images below. */
  .case__evidence,
  .case__col--a {
    padding-right: calc(var(--space-between) - 1.375rem);   /* 56 − 22 */
  }

  .case__intro strong,
  .case__col strong {
    font-weight: 700;
  }

  /* Shots: caption above, centred on its shot. */
  .case__shot {
    display: flex;
    flex-direction: column;
  }

  .case__shot + .case__shot {
    margin-top: 0;
  }

  .case__caption {
    order: -1;
    margin: 0 0 var(--space-pair);
  }

  /* Process and review span the whole grid and reuse its columns. */
  .case__process,
  .case__review {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    margin-top: 7.5rem;                         /* 120 */
  }

  .case__process { grid-row: 3; }
  .case__review  { grid-row: 4; }

  /* Row of work: four columns, every piece the column's width; stories
     (9:16) and posts (4:5) stand on one baseline. */
  .case__works {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: subgrid;
    gap: 1.375rem;                              /* the grid's 22, not the phone row's 10 */
    align-items: end;
    margin-top: var(--space-between);
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .case__work {
    order: var(--d-order, 0);
  }

  .case__work img {
    width: 100%;
    height: auto;
  }

  .case__review picture {
    margin-top: 0;
  }

  .case__review img {
    width: 100%;
  }

  /* --- 01 · Bonbonky Kids --------------------------------------------- */
  .case--1 .case__head     { grid-column: 1 / 3; grid-row: 1; }
  .case--1 .case__evidence { grid-column: 3;     grid-row: 1; }
  /* The intro runs down beside the shots (rows 1–2), as in Figma: the
     shots start 120 below the name + evidence, not below the long intro
     — otherwise a hole opens under the short evidence line. */
  .case--1 .case__intro    { grid-column: 4;     grid-row: 1 / span 2; }
  .case--1 .case__shot     { grid-row: 2; margin-top: 7.5rem; }
  .case--1 .case__shot:nth-child(1) { grid-column: 1; }
  .case--1 .case__shot:nth-child(2) { grid-column: 2; }
  .case--1 .case__col--a   { grid-column: 3; grid-row: 1; }
  .case--1 .case__col--b   { grid-column: 4; grid-row: 1; }
  .case--1 .case__review-lead { grid-column: 2; grid-row: 1; }
  .case--1 .case__review picture { grid-column: 3 / 5; grid-row: 1; width: 75.6%; }  /* 604 */

  /* --- 02 · Español con limón (mirrored) ------------------------------- */
  .case--2 .case__shot:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .case--2 .case__shot:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
  .case--2 .case__head     { grid-column: 3 / 5; grid-row: 1; text-align: right; }
  .case--2 .case__evidence { grid-column: 3;     grid-row: 2; align-self: end; }
  .case--2 .case__intro    { grid-column: 4;     grid-row: 2; align-self: end; }
  .case--2 .case__col--a   { grid-column: 1; grid-row: 1; }
  .case--2 .case__col--b   { grid-column: 2; grid-row: 1; }
  .case--2 .case__review picture { grid-column: 1 / 3; grid-row: 1; width: 82.6%; }  /* 660 */
  .case--2 .case__review-lead { grid-column: 3; grid-row: 1; }

  /* --- 03 · Shishatskaya ------------------------------------------------ */
  .case--3 .case__head     { grid-column: 1 / 3; grid-row: 1; }
  .case--3 .case__shot:nth-child(1) { grid-column: 3; grid-row: 1 / 3; }
  .case--3 .case__shot:nth-child(2) { grid-column: 4; grid-row: 1 / 3; }
  .case--3 .case__evidence { grid-column: 1;     grid-row: 2; align-self: end; }
  .case--3 .case__intro    { grid-column: 2;     grid-row: 2; align-self: end; }
  .case--3 .case__col--a   { grid-column: 2; grid-row: 1; }
  .case--3 .case__col--b   { grid-column: 3; grid-row: 1; }
  .case--3 .case__review picture { grid-column: 2 / 4; grid-row: 1; width: 75.6%; justify-self: end; }
  .case--3 .case__review-lead { grid-column: 4; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   ALSO — a one-off job under case 03 (SELF-MAKEUP price list)
   Not a case: a marker above the name says so, and there is no process
   and no review — name, kind, one line, the row of work. Same gaps as a
   case (120 from the case above, 16 / 16 / 56 / 56 inside), same row of
   work at the same scale, so the stories sit level with case 03's.
   -------------------------------------------------------------------------- */
.case-also {
  margin-top: var(--space-section);
}

.case-also__marker {
  margin-bottom: var(--space-pair);
  color: var(--color-ink-soft);
}

.case-also__evidence {
  margin-top: var(--space-between);
}

@media (min-width: 64em) {
  .case-also {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.375rem;                       /* the cases' 22 */
    align-items: start;
  }

  .case-also__head { grid-column: 1 / 3; grid-row: 1; }

  /* Level with the bottom of the head, in the column where case 01 keeps
     its evidence line. */
  .case-also__evidence {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
    padding-right: calc(var(--space-between) - 1.375rem);   /* 56 − 22 */
  }
}

/* --------------------------------------------------------------------------
   THE THREAD — desktop only (js/case-thread.js)
   One hairline down the right margin of the whole page, through a ring at
   the start of each case, ending wrapped around the footer's «В дірект».
   Gold up to the reading point; bends like a rope while the page moves.
   The SVG is one fixed screen-sized layer; the script draws the visible
   stretch of the page-long thread into it every frame the page moves.
   -------------------------------------------------------------------------- */
.case-thread {
  display: none;
}

@media (min-width: 64em) {
  .case-thread:not([hidden]) {
    position: fixed;
    z-index: 5;                                 /* over the page, under the header bar */
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .case-thread svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .case-thread__base { fill: none; stroke: var(--color-hairline); stroke-width: 1; }
  .case-thread__fill { fill: none; stroke: var(--color-accent); stroke-width: 1; }

  .case-thread__ring {
    fill: var(--color-bg);
    stroke: var(--color-accent);
    stroke-width: 1;
    transition: fill 250ms ease;
  }

  .case-thread__ring.is-on {
    fill: var(--color-accent);
  }
}