/* Works ====================================================================
   Figma: works (…) · W 1280 · padding 48 48 0 48 · vertical, gap 72
   title:     W 580, gap 12 → eyebrow Title (16) + headline Headline (28)
   container: W 1184 (fill), centres the media column
   media:     580 wide, 3:2 images, gap 12 within an item, 72 between items
              dap keeps the square image but is 580 wide like the rest
   Every section gets three colours: background, title, body.
   ========================================================================== */

.work {
  background: var(--work-bg);
  padding-block: var(--container-pad);

  /* A hairline of the section's OWN colour, 1px below it.

     The bands are laid out edge to edge — measured, every boundary has a gap
     of exactly 0 — but behind them is <main>, which is transparent, and
     behind that the body's #1F1F1F. When a boundary does not land on a whole
     device pixel, the row at the seam can round away from both bands and show
     that dark colour instead: a black line across the page, reported on an
     iPhone at the bio/dap boundary. It came and went with how the page was
     loaded (a restore from memory keeps a fractional scroll offset, a reload
     starts at 0), which is what a rounding artefact looks like.

     This shadow fills that row with the colour of the band above it, so
     whichever way the seam rounds, the result is one of the two colours that
     belong there. No blur, no spread, no layout change: the strip sits under
     the next section's box and is invisible unless the seam opens.

     The hero and the footer need no such rule — both are #1F1F1F already, the
     same as what shows through. */
  box-shadow: 0 1px 0 0 var(--work-bg);
}

/* dap is the only section that ends with an image: there the image runs to
   the section boundary, so there is no bottom padding (as in the design). The
   others end with a caption or a button and have equal top and bottom
   padding. */
.work--dap {
  padding-block-end: 0;
}

/* Grid container: every column in this section resolves against it */
.work__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-72);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* The title is left-aligned and the media centred, both 6 columns (50%).
   dap used to run 8 columns wide; it was pulled back into line so every
   section measures the same half-page.
   No grid on mobile: everything is full width. */

.work__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  color: var(--work-title-color);
}

.work__eyebrow {
  font-size: var(--title-16-size);
  line-height: var(--title-16-leading);
  letter-spacing: var(--title-16-tracking);
  font-weight: var(--title-16-weight);
}

.work__headline {
  /* base.css balances every heading, which keeps each line the same length
     and so holds the text well inside its 6-column track — measured at 1280,
     the Burger King headline reached only 62% of the 573px track, reading as
     a third of the page rather than a half. pretty fills the track (85-100%)
     while still keeping a lone word off the last line. */
  text-wrap: pretty;
  font-family: var(--font-display);
  font-size: var(--headline-28-size);
  line-height: var(--headline-28-leading);
  font-weight: var(--headline-28-weight);
}

.work__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-72);
  width: 100%;
  margin-inline: auto;
}

.work__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Lead above the image: Title (20).
   A deliberate departure from the design: layher's lead is Title (16) there,
   but it stays at 20 here to match the dap and mak leads. Do not "fix" it to
   16 from Figma. */
.work__lead {
  color: var(--work-body-color);
  font-size: var(--title-20-size);
  line-height: var(--title-20-leading);
  letter-spacing: var(--title-20-tracking);
  font-weight: var(--title-20-weight);
}

/* Caption below the image: Title (16) — one step smaller than the lead */
.work__caption {
  color: var(--work-body-color);
  font-size: var(--title-16-size);
  line-height: var(--title-16-leading);
  letter-spacing: var(--title-16-tracking);
  font-weight: var(--title-16-weight);
}

.work__image {
  width: 100%;
  aspect-ratio: var(--work-image-ratio, 3 / 2);
  object-fit: cover;
}

/* Text block without an image (article) */
.work__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  margin-inline: auto;
  color: var(--work-body-color);
}

.work__text p {
  font-size: var(--title-20-size);
  line-height: var(--title-20-leading);
  letter-spacing: var(--title-20-tracking);
  font-weight: var(--title-20-weight);
}

.work__actions {
  display: flex;
  justify-content: center;
}

/* columns only from 64rem — see hero.css */
@media (width >= 64rem) {
  /* The section container is no longer held to the 1280 frame, so the title
     hugs the left outer margin. Column widths stay tied to the frame
     (--w-*-max) though, or they would outgrow it on a wide display. The media
     is still centred with auto margins — in a full-width container that means
     the middle of the page, exactly where it was before. */
  .work__inner { max-width: none; }

  .work__title,
  .work__media,
  .work__text { width: min(var(--w-6), var(--w-6-max)); }
}

/* --- Per-section colours (Figma Variables) --------------------------------
   In the light sections (bk, layher) the title is dark, not white. */

.work--dap {
  --work-bg: var(--accent-dap);
  --work-title-color: var(--grey-98);
  --work-body-color: var(--accent-dap-pair);
  --work-image-ratio: 1 / 1;
}

.work--bk {
  --work-bg: var(--accent-bk);
  --work-title-color: var(--grey-12);
  --work-body-color: var(--accent-bk-pair);
}

.work--euronics {
  --work-bg: var(--accent-euronics);
  --work-title-color: var(--grey-98);
  --work-body-color: var(--accent-euronics-pair);
}

.work--mak {
  --work-bg: var(--accent-mak);
  --work-title-color: var(--grey-98);
  --work-body-color: var(--accent-mak-pair);
}

.work--article {
  --work-bg: var(--grey-12);
  --work-title-color: var(--grey-98);
  --work-body-color: var(--grey-74);
}

.work--layher {
  --work-bg: var(--accent-layher);
  --work-title-color: var(--grey-12);
  --work-body-color: var(--accent-layher-pair);
}

.work--origo {
  --work-bg: var(--accent-origo);
  --work-title-color: var(--grey-98);
  --work-body-color: var(--accent-origo-pair);
}

/* The clipReveal (4A) media frame: it has exactly one child, the image — the
   image takes the zoom-out, the frame takes the upward-unfolding clip. */
.work__frame {
  overflow: hidden;
}