/*
  WORK — the archive
  ------------------
  A grid of every project: thumbnail, title, tagline. Nothing else.

  WHY FLEX-WRAP AND NOT CSS GRID
  A real grid orphans the last item the moment the project count stops dividing
  by the column count — seven projects in three columns leaves one stranded on
  the left. Centred flex-wrap pulls any leftover row to the middle, so it reads
  as deliberate at six projects, at seven, at nineteen. Nothing here needs
  revisiting when Matt adds work; new entries just go in the list.
*/

:root {
  --card-w: clamp(200px, 24vw, 300px);
  --card-gap: clamp(22px, 3.2vw, 46px);
  --row-gap: clamp(34px, 4.5vw, 62px);
}

.work {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Clears the fixed frame nav on all four sides. */
  padding: clamp(84px, 13vh, 150px) clamp(66px, 8vw, 150px);
  box-sizing: border-box;
}

.work__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* the whole point — see the note above */
  align-items: flex-start;
  gap: var(--row-gap) var(--card-gap);
  /* Caps the grid at three across on a wide screen. Without this it would keep
     adding columns and the page would stop feeling calm. */
  max-width: calc(var(--card-w) * 3 + var(--card-gap) * 2);
  width: 100%;
}

.work__item {
  width: var(--card-w);
  display: block;
  text-decoration: none;
  /* Colour is inherited so the title turns pink with the site-wide a:hover.
     The caption opts out below. */
  color: var(--fg);
}

.work__thumb {
  display: block;
  width: 100%;
  /* Every thumbnail takes the site's usual shape regardless of the source
     still's own ratio, so the rows always line up. */
  aspect-ratio: 4448 / 3096;
  overflow: hidden;
  background: #2f2e2f;
  position: relative;      /* holds the hover veil below */
}

.work__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HOVER IS A VEIL, NOT A FILTER.
   A brightness filter multiplies what is already there, so it lifts a pale frame
   hard and a near-black one barely at all — the six thumbnails reacted by six
   different amounts. This lays the type grey over the still at 10% instead: the
   same amount of light on every frame regardless of what it contains, and it ties
   the hover to the palette rather than to the image.
   Kept off the <img> itself so nothing is applied to the pixels — it is a separate
   sheet of colour sitting on top. */
.work__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* Pointer devices only — on a touchscreen :hover latches after a tap and the veil
   would stay on a card you had merely touched. See the note in site.css. */
@media (hover: hover) {
  .work__item:hover .work__thumb::after {
    opacity: 0.1;
  }
}

.work__item:focus-visible .work__thumb::after,
.work__item:active .work__thumb::after {
  opacity: 0.1;
}

.work__title {
  display: block;
  margin-top: 1.1em;
  font-family: "5by7", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--type-nav);
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;          /* balances the trailing space — see site.css */
  text-transform: uppercase;
}

.work__caption {
  display: block;
  margin-top: 0.75em;
  font-family: "5by7", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--type-nav);
  line-height: 1.3;
  letter-spacing: 0.05em;
  /* Same colour as the title, inherited — so it also picks up the pink on hover
     and the whole card reads as one link. Hierarchy is case alone: the title is
     uppercase and tracked wide, the tagline is not. */
}

.work__item:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 6px;
}

@media (max-width: 860px) {
  .work {
    padding: clamp(76px, 11vh, 120px) clamp(28px, 7vw, 70px);
  }
  :root {
    --card-w: min(46vw, 300px);
  }
}

/* PHONES — ONE NARROW COLUMN, CENTRED.
   Cards drop to ~41vw, about 40% down from the old 78vw. Two of those fit a row, but
   one column is better here, and the reason is the corner nav: a single 41vw column
   centred on a 375px screen runs from x=110 to x=264, while ABOUT ends at 102 and
   CONTACT starts at 273. The column therefore passes cleanly BETWEEN them as it
   scrolls, and no title can ever collide with a label. A full-width two-column grid
   runs straight underneath both.
   It does scroll — six cards in one column is taller than a phone — but scrolling
   past the nav is only a problem where the content is wide enough to meet it. */
@media (max-width: 560px) {
  .work {
    padding: clamp(72px, 10vh, 100px) 20px;
  }
  :root {
    --card-w: 41vw;
    --card-gap: 18px;
    --row-gap: 30px;
    /* Set from measurement, not by eye. The longest pair is STONE ISLAND / 100
       Questions; this is the largest size that keeps every label clear of the
       corner nav as it scrolls past. See the note below the media query. */
    --type-card-mobile: 10px;
  }
  /* One card per row. The card spans the full column so its LABEL can use that
     width; the thumbnail keeps --card-w and is centred inside it. Without this the
     label would be trapped at the thumbnail's 154px and wrap. */
  .work__grid {
    max-width: 100%;
  }
  .work__item {
    width: 100%;
    text-align: center;
  }
  .work__thumb {
    width: var(--card-w);
    margin: 0 auto;
  }

  /* TITLE AND TAGLINE ON ONE CENTRED LINE — "OAKLEY  Crush The Ordinary".
     Stacked, they read as two separate things; on one line they read as one label.
     Both go inline so they share a line box and the card's text-align centres them
     together. Size drops so the longest pair still fits — see the note on the size. */
  .work__title,
  .work__caption {
    display: inline;
    font-size: var(--type-card-mobile);
    line-height: 1.35;
  }
  .work__title {
    margin-top: 0.9em;
    /* Tighter than the 0.2em used everywhere else. Wide tracking is what makes a
       short label read as deliberate, but here it is buying length on a line that
       has to stay inside 171px, and the hierarchy is already carried by the caps. */
    letter-spacing: 0.12em;
    text-indent: 0.12em;     /* must always equal the tracking — see site.css */
  }
  .work__caption {
    margin-top: 0;
    margin-left: 0.5em;    /* a clear gap, not just the collapsed word space */
    letter-spacing: 0.02em;
  }
  /* The pair sits under the thumbnail as one block. */
  .work__thumb + .work__title {
    display: inline-block;
    margin-top: 0.9em;
  }
}