/* Case-study galleries: each item says its own size, so items can be added, removed and reordered
   without the grid shifting (2026-10-19; replaced per-page `.work-content :nth-child(n)` CSS).
   Vocabulary, on each top-level `.content-item` in live-pages/work/<slug>.html
   (content/work/README.md, Gallery):
     data-span="full | half | quarter"   required. full: the whole row; half: one of two columns;
                                         quarter: half a column.
     data-ratio="W:H"                    shape, e.g. 16:9, 1:1, 3:2, 2:1, 3:4, 1:2. Default 1:1, phones too.
     data-ratio-phone="W:H"              shape on phones, if different.
     data-align="start | end | center"   half: alone in its row, on that side (start: left);
                                         quarter: that side of its column (default start).
     data-height="row"                   as tall as its row on desktop (a tall quarter beside a
                                         square half); the ratio still applies on phones.
   scripts/case_study.mjs checks the tags and turns data-ratio into --ratio for the rules below.
   Child combinators only: nothing here reaches inside an item. */

.work-content > .content-item[data-span="full"] { grid-column: span 2; }
.work-content > .content-item[data-span="half"] { grid-column: span 1; }
.work-content > .content-item[data-span="half"][data-align] {
  grid-column: span 2;
  width: calc(50% - var(--spacing--tiny, 7.5px) / 2);
}
.work-content > .content-item[data-span="quarter"] {
  grid-column: span 1;
  width: calc(50% - var(--spacing--tiny, 7.5px) / 2);
}
.work-content > .content-item[data-align="start"] { justify-self: start; }
.work-content > .content-item[data-align="end"] { justify-self: end; }
.work-content > .content-item[data-align="center"] { justify-self: center; }
.work-content > .content-item[data-span] { aspect-ratio: var(--ratio, 1 / 1); }
.work-content > .content-item[data-height="row"] { height: 100%; }

/* Phones: one column, every item full width (the shared CSS stacks the gallery below 480px). */
@media (max-width: 767px) {
  .work-content > .content-item[data-span] { width: 100% !important; }
  .work-content > .content-item[data-ratio-phone] { aspect-ratio: var(--ratio-phone); }
}

/* data-layout="tiles" on .work-content: a wall of equal square tiles, five across and two on
   phones (/work/icons); its items need no tags. */
.work-content[data-layout="tiles"] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 479px) {
  .work-content[data-layout="tiles"] { grid-template-columns: 1fr 1fr; }
}