/* Board flow — the tablet / phone layout for the absolutely-positioned 1440 work boards
   (works/poloniex.html, opinion.html, bitradex.html).

   Above 1023px nothing here applies: every layer keeps its Figma x / y and the board is zoomed as one picture.
   The wrappers below are `display: contents` there, so they add no box and change nothing.

   At 1023px and below the board stops zooming and reads top to bottom:
   - .fl-sec    one section of the page. Copy inside it is set in real CSS px and wraps to the window.
                A layer with .fl-bg (band, panel, photo) becomes the section's own background.
   - .fl-grp    a cluster whose Figma composition matters (overlapping devices, a staggered pair).
                It keeps the Figma positions and is scaled as one picture to fit (js/works/board-flow.js).
   - .fl-row    a set of like items (cards, phone screens). They wrap into rows; js/works/board-flow.js picks
                how many fit per row and scales them all the same.
   - any other picture in a section is scaled on its own to fit the column (never above its Figma size).
   Per-page type sizes for the copy live in each page's own css (css/works/<page>.css). */

.fl-sec, .fl-grp, .fl-row { display: contents; }

@media (max-width: 1023px) {
  .fl-board {
    display: flex; flex-direction: column;
    width: auto !important; height: auto !important; zoom: 1 !important;
  }

  .fl-sec {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
    padding: 48px var(--gutter);
  }
  .fl-sec--tight { padding-block: 24px; }
  .fl-sec--flush { padding-inline: 0; }   /* full-bleed pictures (hero bands, collages) */

  /* Every layer drops its Figma position and joins the column. */
  .fl-sec > .o, .fl-row > .o {
    position: static !important;
    transform: none !important;
    flex: none;
  }
  /* Copy: real sizes, wraps to the column. */
  .fl-sec > .o:not(img):not(figure):not(.fl-bg) {
    width: auto !important; max-width: 640px;
    white-space: normal !important; text-align: left;
  }
  .fl-sec > :is(h2, h3).o:not(:first-child):not(.fl-bg + *) { margin-top: 24px; }
  /* Pictures: the Figma size, scaled down by js/works/board-flow.js (inline zoom). */
  .fl-sec > :is(img, figure).o { align-self: center; }
  /* A figure can hold its own positioned layers (e.g. the BitradeX scroll demo): keep it their containing block. */
  .fl-sec > figure.o { position: relative !important; left: auto !important; top: auto !important; }

  /* Background layers fill their section. */
  .fl-sec > .fl-bg {
    position: absolute !important;
    inset: 0 !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: -1; transform: none !important;
    object-fit: cover;
    box-shadow: none; clip-path: none;
  }

  /* A cluster: its own Figma-px box, its layers shifted back by the cluster's top-left (--gx / --gy). */
  .fl-grp { display: block; position: relative; flex: none; align-self: center; }
  /* (margins, not `translate`: js/reveal.js animates `translate` for the fade-up) */
  .fl-grp > .o { position: absolute; margin: calc(var(--gy, 0) * -1px) 0 0 calc(var(--gx, 0) * -1px); }

  /* A row set: wraps, centred. */
  .fl-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    gap: 12px; align-self: stretch;
  }
}