/* /work/ only: page-level fixes on top of main.css, scoped to body.page-work.
   Each block names the main.css change that would make it unnecessary; once the
   design track folds them into main.css, delete this file and the front-matter
   `stylesheet: page-work.css` line. */

/* 1. (folded into main.css: `.sample-band h2` is styled like `.sample-band h3`) */

/* 2. (folded into main.css: `.case-figures { grid-template-columns: auto minmax(min-content, 1fr); }`
   at every width; the home page's case columns overflowed at 320 and 360 without it) */

/* 3. Desktop, three columns: align the parts of the cases across a row (heads,
   Context, Solution, figures), so the figure rules sit on one line even when a
   label wraps to two lines (Highest and best use: "of district transactions").
   main.css: the same rule on `.case` at >= 1100px. */
@media (min-width: 1100px) {
  @supports (grid-template-rows: subgrid) {
    .page-work .case {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 1.1rem;
      align-content: start;
    }
    /* parts sit at the top of their shared row; stretched, their own grid rows
       would spread the label away from its text */
    .page-work .case > * { align-self: start; }
    .page-work .case-figures { margin-block-start: 0; }
  }
}

/* 4. (folded into main.css: `.cases { grid-template-columns: minmax(0, 1fr); }` in the
   <= 1099px block) */

/* 5. Phone: the figure rules span the column. The <= 1099px block leaves
   `align-items: start` on what becomes a flex column, so the dl shrank to its
   content and its rules stopped short. main.css: `.case { align-items: stretch; }`
   in the <= 760px block. */
@media (max-width: 760px) {
  .page-work .case { align-items: stretch; }
}