/* =========================================================
   work-grid — the bento that arranges four case-study-cards on
   the homepage. Mobile-first: a single-column stack by default;
   at viewport ≥ 651px it becomes the two-column bento with a lead
   card spanning two rows and a full-width card below. The bordered
   container lines up with the app-bar.
   ========================================================= */

/* Full-width band carrying the outer 32px gutter, so the bordered container's
   edges line up with the app-bar's bordered row. */
.work-section {
  padding-inline: var(--spacing-07);   /* 32px — matches the app-bar outer gutter */
}

/* Bordered container: max 2000px and centred like .app-bar__inner, with
   left/right/bottom borders (no top — it continues from the bar above). */
.work-container {
  max-width: 2000px;       /* matches .app-bar__inner */
  margin-inline: auto;
  padding: var(--spacing-10) var(--spacing-07);   /* 64px block; 32px inline insets content from the border */
  border-left: 1px solid var(--color-border-dark);
  border-right: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
}

/* Single-column treatment: shed the border and tighten the side padding to 8px
   (from the bento's 32px). Keyed to the same 650.98px viewport point as the bento
   switch below, so the frame, the padding and the stack all flip together. (Keyed
   to the viewport rather than a container query so the padding change can't feed
   back into the width the switch depends on.) */
@media (max-width: 650.98px) {
  .work-container {
    padding-inline: var(--spacing-03);   /* 8px in the single column (was 32px in the bento) */
    border: 0;
  }
}

.work-grid {
  display: grid;
  gap: var(--spacing-06);   /* 24px */
  max-width: 800px;
  margin-inline: auto;
  grid-template-columns: 1fr;   /* mobile base: one column, four stacked cards */
}

/* Stacked cards need a height to read as cards before any image lands. */
.work-grid > .case-study-card {
  min-height: 20rem;   /* ~320px — the reference's stacked card height */
}

/* ---------- Bento (viewport ≥ 651px) ----------
   Two columns: the lead card spans both rows on the left, the upper/lower cards
   stack on the right, and the wide card runs full width beneath. Keyed to the
   viewport (not a container query) so the bento switch can't feed back into the
   work-container padding it depends on — it flips in lockstep with the
   single-column treatment above at the same 650/651px boundary. */
@media (min-width: 651px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "lead  upper"
      "lead  lower"
      "wide  wide";
    grid-template-rows: 15.5rem 12.5rem 21.5rem;   /* 248 / 200 / 344 — lead spans rows 1–2 (448) */
  }
  .work-grid__lead  { grid-area: lead; }
  .work-grid__upper { grid-area: upper; }
  .work-grid__lower { grid-area: lower; }
  .work-grid__wide  { grid-area: wide; }

  /* Heights come from the grid tracks now. */
  .work-grid > .case-study-card { min-height: 0; }
}