/* ============================================================================
   CASE PAGE — mobile overrides (≤767px)
   Design: Figma «Case page — Luk · Mobile» (390), «· Mobile · menu open»,
   «· Mobile · lang open». Tokens switch automatically in css/tokens.css; this
   file only holds layout differences.
   ========================================================================== */
@media (max-width: 767px) {

  /* -------------------------------------------------------------------------
     Hero — the collage is recomposed for 390×640 (cover-mobile.jpg), so the
     box keeps that ratio instead of filling the viewport.
     ------------------------------------------------------------------------- */
  .cs-hero { height: auto; aspect-ratio: 390 / 640; }
  .cs-cover--hero .cs-cover__text {
    --cov-dw: 390; --cov-dh: 640;
    --cov-top: 92;
    --cov-tw: 350;
    --title: 40; --title-lh: 44;
  }
  .cs-cover--hero .cs-cover__tags { row-gap: calc(8 * var(--k)); }
  .cs-cover--hero .cs-cover__br { display: none; }

  /* -------------------------------------------------------------------------
     Header (Breakpoint=Mobile): burger · avatar · language toggle + close
     ------------------------------------------------------------------------- */
  .cs-actions, .cs-lang, .cs-name { display: none; }
  .cs-burger { display: inline-flex; }
  .cs-avatar { display: block; }
  .cs-langtoggle { display: block; position: relative; }
  .cs-langtoggle__btn { padding-left: .14em; } /* letter-spacing trails the last letter; re-centre "UA" */

  /* burger → close: same glass, dark tint, white icon */
  .cs-header.is-menu-open .cs-burger,
  .cs-header.is-menu-open .cs-burger:hover { background: var(--glass-tint-dark); color: var(--text-inverse); }
  .cs-header.is-menu-open .cs-burger:active { background: var(--glass-tint-dark-pressed); }
  .cs-header.is-menu-open .cs-burger svg:first-child { display: none; }
  .cs-header.is-menu-open .cs-burger svg + svg { display: block; }

  /* menu: three pills stacked under the burger, floating over the page */
  .cs-dropdown--menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cs-header.is-menu-open .cs-dropdown--menu { display: flex; }

  /* language: transparent glass toggle, two pills centred under it */
  .cs-header.is-lang-open .cs-langtoggle__btn { background: var(--glass-fill-pressed); }
  .cs-dropdown--lang {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .cs-header.is-lang-open .cs-dropdown--lang { display: flex; }

  /* -------------------------------------------------------------------------
     Scroll nav — bottom-left, level with the back-to-top button; first tap
     expands it upwards (JS adds .is-open on touch)
     ------------------------------------------------------------------------- */
  .cs-nav {
    top: auto;
    bottom: var(--header-padding-x);
    transform: none;
  }

  /* -------------------------------------------------------------------------
     Page + text column (350 at 390, 20px side margins)
     ------------------------------------------------------------------------- */
  .cs-article { width: calc(100% - 2 * var(--layout-text-margin)); }
  .cs-intro { width: calc(100% - 2 * var(--layout-text-margin)); }
  .cs-intro__meta { flex-direction: column; gap: 8px; }

  /* -------------------------------------------------------------------------
     Figures — every plate is 100vw − 16 (8px from the screen edges)
     ------------------------------------------------------------------------- */
  .cs-plate { padding: 16px var(--layout-figure-inset) 20px; }
  .cs-caption { margin-top: 16px; }

  /* two-panel rows and the bento stack, each panel full width */
  .cs-fig--row, .cs-fig--bento { flex-direction: column; align-items: stretch; }
  .cs-fig--row .cs-plate, .cs-fig--bento .cs-plate { flex: none; width: 100%; }
  .cs-fig--bento .cs-panel--1, .cs-fig--bento .cs-panel--2 { align-self: stretch; }

  /* РИС. 6: four pieces → 2×2, pieces at 70% */
  .cs-plate--pieces { padding-top: 20px; padding-bottom: 24px; }
  .cs-plate--pieces .cs-caption { margin: 0 0 24px; }
  .cs-pieces {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 24px 0;
    width: 100%;
  }
  .cs-pieces li { justify-content: flex-end; gap: 12px; }
  .cs-pieces img { width: calc(var(--w) * .7px); }

  /* РИС. 11б: conditions card fits the plate */
  .cs-conditions { max-width: 100%; }

  /* РИС. 12: the strip sits flush with the top of the plate */
  .cs-plate--browser-strip { padding-top: 0; }
  .cs-plate--browser-strip .cs-caption { margin-top: 24px; }

  /* -------------------------------------------------------------------------
     РИС. 14 — thumbnail with ruler centred on top, legend full width below
     ------------------------------------------------------------------------- */
  .cs-plate--analytics { padding-top: 20px; }
  .cs-plate--analytics .cs-caption { margin-top: 28px; }
  .cs-an { flex-direction: column; align-items: center; gap: 44px; }
  .cs-marker { width: 28px; height: 28px; }
  .cs-an__legend { width: 100%; padding-top: 0; gap: 40px; }
  .cs-an__group .t-legend-subtitle { margin-bottom: 13px; }
  .cs-an__group ol { gap: 13px; }
  .cs-an__row { gap: 14px; }
  .cs-an__text { min-width: 0; margin: 2px 0 -2px; }

  /* -------------------------------------------------------------------------
     Dense blocks
     ------------------------------------------------------------------------- */
  /* metrics: one column of full-width cards */
  .cs-metrics { flex-direction: column; gap: 12px; }
  .cs-metric { flex: none; max-width: none; }

  /* hypotheses table: every row becomes a card with a label above each cell */
  .cs-table__row { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; }
  .cs-table__row.cs-table__head { display: none; }
  .cs-table__cell { display: block; }
  .cs-table__label { display: block; margin-bottom: 4px; }

  /* principles keep the column width */
  .cs-principles .t-body { max-width: 100%; }
}

/* The nav sits over the text column on phones, so like the back-to-top button
   it only shows while scrolling (or while expanded) and gets out of the way
   when the reader stops. */
@media (max-width: 767px) {
  .cs .cs-nav.is-visible { opacity: 0; pointer-events: none; }
  .cs.is-scrolling .cs-nav.is-visible,
  .cs .cs-nav.is-visible.is-open,
  .cs .cs-nav:has(.cs-nav__row:focus-visible) { opacity: 1; pointer-events: auto; }
}