/*
  figure — an image inside a case study, with an optional caption (component.json figure, 7 tokens).
  Decided by Vivek 2026-09-29 (build-decisions.txt BUILD 20).
  - A single image fills the 42rem text column. Images keep their own shape: the code never crops.
    Art is prepared landscape or square (never taller than square), exported at twice the display size.
    A pair half is landscape or square; both halves share one shape. (Portrait 3:4 halves were allowed at 426px wide;
    at 568px wide a 3:4 half is 757px tall, more than a laptop screen, so no longer: BUILD 26, 2026-10-03.)
    width and height are written on each <img>, so the page doesn't jump while it loads.
  - 20px corners; caption 16px, quiet color, 16px below, left-aligned.
  - A 1px hairline just inside the image's edge, in the divider color (Vivek, 2026-10-03, BUILD 26): art with white
    or near-white edges (the comic spreads) blended into the page and looked like a mistake. A hairline, not a
    shadow: it defines the edge without lifting the image (shadows mean "clickable" on this site).
    An outline, not a border, so it adds no size: it sits 1px inside the edge and follows the 20px corners.
    Opt out with .figure__media--frameless: art made to float on the page color (the tooltip image).
  - Nothing is interactive: no enlarge, no hover, no motion.
  - A pair (.figure-pair) widens to the full page width inside the page padding (1152px at most), centered on the
    text column, halves 16px apart, each half with its own caption; below 1024px the two stack at the column width.
    REVISED by Vivek 2026-10-03 (BUILD 26): was 900px wide, 48px apart, side by side from 768px. At 426px a half
    was smaller than a single image, so the pairs (often the heart of the story) had the least impact.
*/

.figure {
  margin: 0;
}

.figure__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--figure-radius-all);
  overflow: hidden; /* clips an image (or placeholder) to the corners */
  outline: var(--figure-border-width-all) solid var(--figure-border-all);
  outline-offset: calc(-1 * var(--figure-border-width-all)); /* inside the edge, so the image keeps its size */
}
.figure__media--frameless {
  outline: none; /* art made to float on the page color, with no visible frame */
}

.figure__caption {
  margin-block-start: var(--figure-caption-gap-all);
  font-family: var(--figure-caption-text-style-all-font-family);
  font-size: var(--figure-caption-text-style-all-font-size);
  font-weight: var(--figure-caption-text-style-all-font-weight);
  line-height: var(--figure-caption-text-style-all-line-height);
  color: var(--figure-caption-content-all);
}

/* Pair: stacked on phones... */
.figure-pair {
  display: flex;
  flex-direction: column;
  gap: var(--figure-pair-stacked-gap-all);
}

/* ...side by side from 1024px up, as wide as the page allows, centered on the text column.
   The section container is a size container (section.css), so 100cqw is the room inside the page padding:
   the pair never runs past it. */
@media (min-width: 1024px) {
  .figure-pair {
    --pair-width: min(var(--figure-pair-max-width-all), 100cqw);
    flex-direction: row;
    gap: var(--figure-pair-gap-all);
    width: var(--pair-width);
    margin-inline: calc((100% - var(--pair-width)) / 2);
  }
  .figure-pair > .figure {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Grid of pairs (.figure-grid, BUILD 23, decided by Claude 2026-10-01): two pairs meant as ONE set (e.g. four
   component squares). Back-to-back pairs are normally 64px apart, each its own scene (BUILD 21 DECISION 4);
   inside a grid the rows sit as far apart as the columns, so the four read as one set.
   Below 1024px: everything stacks, 32px apart (the stacked pair gap). From 1024px: rows 16px apart (the pair gap).
   No new tokens. */
.figure-grid {
  display: flex;
  flex-direction: column;
  gap: var(--figure-pair-stacked-gap-all);
}
@media (min-width: 1024px) {
  .figure-grid {
    gap: var(--figure-pair-gap-all);
  }
}