/* ============================================================================
   CASE PAGE — tablet overrides (768–1023px)
   Design: Figma «Case page — Luk · Tablet» (768). Tokens switch automatically
   in css/tokens.css; this file only holds layout differences.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  /* ---- hero: 768×720 frame that scales with the width (not 100svh) ---- */
  .cs-hero { width: 100%; height: auto; aspect-ratio: 768 / 720; }
  .cs-cover--hero .cs-cover__text { --cov-dw: 768; --cov-dh: 720; --cov-top: 96; --cov-tw: 680; }
  /* the tablet title wraps on its own (Figma: «Редизайн сторінки / спільноти «Люка»») */
  .cs-cover--hero .cs-cover__br, .cs-cover--card.is-expanding .cs-cover__br { display: none; }

  /* folder → hero morph: the expanding folder takes the hero's box (768/720,
     capped at the screen), its frame and its collage, so the case fades in
     over an identical picture. Below the box the folder turns page-white. */
  .cs-cover__img--tablet { display: block; opacity: 0; transition: opacity 480ms ease; }
  .card-cover:has(.cs-cover--card.is-expanding) { background: var(--surface-page); }
  .cs-cover--card.is-expanding { height: min(100%, 100vw * 720 / 768, 100svh); }
  .cs-cover--card.is-expanding .cs-cover__text { --cov-dw: 768; --cov-dh: 720; --cov-top: 96; --cov-tw: 680; }
  .cs-cover--card.is-expanding .cs-cover__img--tablet { opacity: 1; }

  /* ---- header (Breakpoint=Tablet): avatar instead of the name ---- */
  .cs-name { display: none; }
  .cs-avatar { display: block; }
  /* ---- scroll nav: compact so it fits the 44px margin left of the text
     column (Figma has it at x24, 50 wide, which covers the text) ---- */
  .cs-nav { left: 6px; padding: 10px 5px; border-radius: 12px; }
  .cs-nav ol { gap: 8px; }
  .cs-nav__dash { width: 10px; }
  .cs-nav__row.is-active .cs-nav__dash { width: 18px; }
  .cs-nav__row { grid-template-columns: 18px 0fr; }
  .cs-nav.is-open .cs-nav__row, .cs-nav:hover .cs-nav__row, .cs-nav:has(.cs-nav__row:focus-visible) .cs-nav__row { grid-template-columns: 18px 1fr; }

  /* ---- intro: same 680 column as the article ---- */
  .cs-intro { width: min(var(--layout-text-column), 100% - 40px); }

  /* ---- figures: single plate 40 inset all round, caption 20 under ---- */
  .cs-plate { padding: 40px var(--layout-figure-inset); }
  .cs-caption { margin-top: 20px; }

  /* two-panel rows (РИС. 7 + 7б, 11 + 11б): side by side within 752,
     proportions come from --panel-w (case.css); panels inset 24 */
  .cs-fig--row .cs-plate, .cs-fig--bento .cs-plate { padding: 24px; }
  /* exact split of the outer widths (flex-grow alone splits what's left
     after padding): --fig-w − 14 is the sum of the desktop panel widths */
  .cs-fig--row .cs-plate {
    flex: 0 0 calc((100% - var(--layout-figure-gap)) * var(--panel-w) / (var(--fig-w) - 14));
  }

  /* РИС. 9–9в bento → two columns: phone (9б) spans both rows on the left,
     one-time card (9) over Ambassador card (9в) on the right — 300 / 440 */
  .cs-fig--bento {
    display: grid;
    grid-template-columns: 300fr 440fr;
    grid-template-areas: "phone once" "phone amb";
    align-items: stretch;
  }
  .cs-fig--bento .cs-panel--1 { grid-area: once; align-self: stretch; justify-content: flex-start; }
  .cs-fig--bento .cs-panel--2 { grid-area: phone; align-self: stretch; }
  .cs-fig--bento .cs-panel--3 { grid-area: amb; align-self: stretch; justify-content: flex-start; }

  /* РИС. 6: four pieces — tighter gap so they fit 672 */
  .cs-pieces { gap: 72px; }

  /* РИС. 11б: Figma scales the conditions card to 0.726 inside the narrow panel */
  .cs-conditions { zoom: .726; }

  /* РИС. 12: tablet shows the whole browser, not just the bottom strip */
  .cs-plate--browser-strip { padding-top: 40px; }
  .cs-strip { aspect-ratio: auto; clip-path: none; }
  .cs-plate--browser-strip .cs-caption { margin-top: 20px; }
  .cs-browser--strip { position: static; }

  /* ---- РИС. 14: thumbnail 170 + ruler left, legend 400 right ---- */
  .cs-plate--analytics { padding-top: 48px; }
  .cs-plate--analytics .cs-caption { margin-top: 28px; }
  .cs-an { gap: 50px; }
  .cs-an__legend { width: 400px; padding-top: 52px; gap: 46px; }
  .cs-an__group .t-legend-subtitle { margin: 2px 0 13px; }
  .cs-an__group ol { gap: 12px; }
  .cs-an__row { gap: 14px; }
  .cs-an__text { padding-top: 2px; }
  .cs-an__thumb .cs-marker { width: 24px; height: 24px; }
  .cs-an__legend .cs-marker { width: 26px; height: 26px; }
}

/* landscape tablets: the 768/720 hero would outgrow the screen */
@media (min-width: 768px) and (max-width: 1023px) {
  .cs-hero { max-height: 100svh; }
}