/* site/system/work.css: page CSS for site/work.html, the five live products, and for that page only.
 *
 * Linked LAST in the head (S2), so a rule here can override a component without raising specificity.
 * The card, the card hover, the grid, the section label and the typographic classes all come from
 * components.css. This file adds the two things that page does not have: a card whose image bleeds
 * to its own edge, and a five-item grid that reads three then two.
 *
 * S1, and gate group 6 treats this file as a consumer exactly as it treats components.css: contract
 * tokens only, no colour literal, no pack primitive, no bare px on padding, margin, gap,
 * border-radius or font-size. No @import either, since an @import is invisible to the S2 order check.
 */

/* The lead sits at .lead's size; this carries the measure, so the list of five breaks where it
   reads rather than where the column ends. */
.page-shipped {
  max-width: 56ch;
}

.page-method {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-fg);
  max-width: 56ch;
}

/* The outbound note takes a rule rather than a box, the same shape index.css gives .page-proposal:
   it is a fact the reader needs before clicking, not a warning that needs a container. */
.page-outbound-note {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  max-width: 56ch;
}

/* THREE THEN TWO, on six columns rather than on three.
   .grid-3 would leave the fourth and fifth cards at a third of the width with a hole beside them.
   Six columns lets the first three span two each and the last two span three each, which is the
   proportion the reference layout reads at and the reason this grid does not reuse .grid-3. */
.work-grid {
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--spacing-xl);
}
.work-grid > * {
  grid-column: span 2;
}
.work-grid > :nth-child(n + 4) {
  grid-column: span 3;
}

@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-grid > *,
  .work-grid > :nth-child(n + 4) {
    grid-column: auto;
  }
}

/* .card ships 32px of padding. The thumbnail is meant to meet the card's own border, so the padding
   moves off the card and onto the body, and overflow is clipped so the image corners follow the
   card's radius rather than square off inside it. */
.work-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.work-thumb {
  margin: 0;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.work-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.work-body {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.work-kicker {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: var(--font-weight-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.work-name {
  color: var(--color-fg);
}

.work-note {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-fg-muted);
}

/* The foot line is the affordance, and the card is the link: it never becomes a nested <a>, because
   a link inside a link is invalid HTML and gives a screen reader two targets for one destination.
   margin-top:auto holds it on the card's floor whatever the description's length, which is what
   keeps the five feet on one line across a row. */
.work-foot {
  margin-top: auto;
  font-size: var(--type-caption);
  font-weight: var(--font-weight-ui);
  color: var(--color-fg);
}
.work-card:hover .work-foot {
  color: var(--color-accent);
}