/* ==========================================================================
   Work card (Home/Work teaser). HAND-WRITTEN. Role tokens only.
   Specs: Figma file "2026 Personal Branding", Home frames, "case study teaser"
   (desktop 327:9518, tablet 327:9555, mobile 327:9592). Markup: src/_includes/work-card.njk.
   Mobile (up to 767): image on top, then title, two stats side by side, the sentence, the button.
   Tablet (768 to 1023): the same order; the stats and the sentence share one row.
   Desktop (1024 up): copy in columns 1 to 8, 16:9 image in columns 9 to 12, top aligned.
   ========================================================================== */
.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--arche-space-base-40);
  padding: var(--arche-space-base-48) var(--arche-page-pad);
  background: var(--arche-surface-neutral-base);
}
.work-card__image { order: -1; display: block; color: inherit; text-decoration: none; }
.work-card__image img {
  display: block;
  width: 100%;
  /* The img has width and height attributes (they reserve space). Browsers turn them into CSS sizes,
     so without height: auto the height attribute beats aspect-ratio. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.work-card__copy { display: flex; flex-direction: column; gap: var(--arche-space-base-32); min-width: 0; }
.work-card__title { margin: 0; color: var(--arche-text-neutral-primary); text-wrap: balance; }

/* Stats and the sentence. Mobile: two stats in a row (two equal columns), the sentence below. */
.work-card__body { display: flex; flex-direction: column; gap: var(--arche-space-base-24); }
.work-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--arche-space-base-24);
  margin: 0;
  padding: 0;
}
.work-card__stat { display: flex; flex-direction: column; gap: var(--arche-space-base-8); margin: 0; }
.work-card__number { order: -1; margin: 0; color: var(--arche-text-brand-primary); }
.work-card__label { margin: 0; color: var(--arche-text-neutral-body); }
.work-card__text { margin: 0; color: var(--arche-text-neutral-body); text-wrap: pretty; }

.work-card__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--arche-space-fine-12); padding-top: var(--arche-space-base-8); }
.work-card__helper { margin: 0; color: var(--arche-text-neutral-secondary); }

@media (min-width: 768px) {
  .work-card { padding: var(--arche-space-base-48) var(--arche-page-pad); }
  .work-card__title { max-width: 360px; }
  /* The two stats take 422px (two 199px columns and a 24px gap), then the sentence gets the rest
     (it starts at x 446, as in Figma). */
  .work-card__body {
    display: grid;
    grid-template-columns: 422px minmax(0, 1fr);
    column-gap: var(--arche-space-base-24);
    align-items: end;
  }
  .work-card__stats { grid-column: 1; grid-row: 1; grid-template-columns: 199px 199px; }
  .work-card__text { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1024px) {
  .work-card {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--arche-space-base-24);
    align-items: start;
    padding-block: var(--arche-space-base-64);
  }
  .work-card__copy { grid-column: 1 / span 8; grid-row: 1; gap: var(--arche-space-base-48); }
  /* Four of the 12 columns: half of the copy's eight columns, less half a gutter. */
  .work-card__title { max-width: none; width: calc((100% - var(--arche-space-base-24)) / 2); }
  .work-card__image { grid-column: 9 / span 4; grid-row: 1; order: 0; }
}
/* 1024 to 1279: the copy column is too narrow for the stats and the sentence side by side (the
   sentence would be about 140px wide). Figma has no layout for this range, so the sentence goes
   under the stats, as on mobile. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .work-card__body { grid-template-columns: minmax(0, 1fr); row-gap: var(--arche-space-base-24); }
  .work-card__text { grid-column: 1; grid-row: 2; }
}