/* The case ROWS — shared by work.html and index.html (2026-10-08, Markiian: "on home page we need same view as on work").
   Five shots a row, the row runs off the right edge, drags with the mouse and flings (work-rows.js). */
/* ============ the cases: ROWS (Figma 469-2543, Markiian's new view, 2026-09-07) ============
   One case per row, 80 between rows: shots 480 tall, a third of the 1280 inside the 80 margins,
   20 apart — FOUR of them, so the row runs past its right edge and SCROLLS SIDEWAYS (Markiian:
   "the user should be able to scroll to the side by swiping with the trackpad or mouse"): a
   swipe on the trackpad is native, the mouse drags the row (work.html's script), the scrollbar
   is hidden, the row clips at the margins as the frame's does. The label bar is the HOME
   page's, mechanics and all — sticky at the viewport's middle — now the full width of the
   page with 40 in from either edge (the frame's 469-2735): the name General Sans 25, the
   labels the Tanker 20 standard, a blur of 10, no hover. */
/* 120 between rows on Home and Work (160 was "too much") (2026-10-16, Markiian: "increase space between cases"; was 80 on Work, 40 on Home) */
.work-grid{display:flex;flex-direction:column;gap:120px;}
.wcase{position:relative;height:480px;display:block;text-decoration:none;color:var(--black);}
/* the row runs from the 80 margin out to the page's RIGHT EDGE — the fourth shot shows, cut by
   the viewport, not by a box (Markiian, 2026-09-07: "the images should spread to the right and be
   visible — do not put them in a clip box"); each shot stays a third of the 1280, and 80 of air
   at the row's end lets the last shot scroll in to the margin */
.wcase .shots{
  position:absolute;left:80px;right:0;top:0;height:480px;display:flex;gap:20px;padding-right:80px;box-sizing:border-box;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;cursor:grab;
}
.wcase .shots::-webkit-scrollbar{display:none;}
.wcase .shots.dragging{cursor:grabbing;scroll-snap-type:none;}
.wcase .shots img,.wcase .shots video{flex:0 0 calc((100vw - 200px) / 3);min-width:0;width:calc((100vw - 200px) / 3);height:480px;object-fit:cover;border-radius:4px;display:block;scroll-snap-align:start;-webkit-user-drag:none;user-select:none;}   /* min-width:0 — a replaced flex item's automatic minimum is its intrinsic width */
.wbar{
  position:sticky;top:calc(50vh - 18px);z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:4px var(--margin);border-radius:2px;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.wbar .name{flex:1;min-width:0;padding-top:2px;font-size:25px;line-height:1;letter-spacing:.01em;color:var(--black);}
/* over a dark shot the name turns white (work-rows.js reads the picture under it; 2026-10-16, Markiian: "on a dark background it's not visible") */
.wbar .name{transition:color .35s ease;}
.wbar.on-dark .name{color:#fff;}
.wbar .tags{display:flex;gap:4px;align-items:center;}
.wbar .tags span{
  display:flex;align-items:center;padding:2px 8px;background:var(--black);
  font-family:'Tanker','Anton',sans-serif;font-weight:400;
  font-size:20px;line-height:1.25;letter-spacing:.01em;color:#fff;white-space:nowrap;
}
.wcase:focus-visible{outline:none;}
@media (max-width:1020px){
  .wcase .shots{left:var(--margin);padding-right:var(--margin);}
  .wcase .shots img,.wcase .shots video{flex-basis:calc((100vw - 2 * var(--margin) - 20px) / 2);width:auto;}
  .wbar{padding:4px var(--margin);}
}
/* phone (Markiian, 2026-10-15: "lower the height of the case so it fits nicely" — at 480 the two
   shots a screen were 169 × 480 slivers): the shots go 2:3 portrait at the same two-up width, and
   the bar keeps its labels — the name 20, the labels Tanker 13 — instead of dropping them */
@media (max-width:640px){
  .wcase{--shot-w:calc((100vw - 2 * var(--margin) - 20px) / 2);--shot-h:calc(var(--shot-w) * 1.5);height:var(--shot-h);}
  .work-grid{gap:60px;}
  .wcase .shots{height:var(--shot-h);}
  .wcase .shots img,.wcase .shots video{height:var(--shot-h);}
  .wbar{gap:8px;top:calc(50vh - 14px);}
  .wbar .name{font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wbar .tags{flex:none;gap:3px;}
  .wbar .tags span{font-size:13px;padding:2px 6px;}
}