/* ==========================================================================
   Featured work grid — modeled on the "Featured work" section of
   remedyeditorial.com, with its geometry measured off the live site.

   The cards are NOT an aligned two-column grid. Every card takes its own
   flex line (an even card's 52.94% left offset plus its own width can't
   share a line with the card before it), and every card is then pulled up
   by 116px against a matching 116px of padding on the list. The result is
   a staircase: each card starts roughly 70% of a card-height below the
   previous one, so neighbours overlap vertically while alternating sides.

   On top of that, js/work-grid.js gives the two sides a small difference in
   scroll drift. The motion is deliberately restrained so the staircase
   keeps its shape instead of loosening as cards enter the viewport.

   This section sets the home page's measure: the hero and info columns above
   and below it use .page-container--home, which mirrors this box so the whole
   page shares one left edge.
   ========================================================================== */

/* Horizontal room comes from padding, not margins: the section is a
   width:100% grid item, so side margins would push it past the viewport
   (box-sizing is border-box here, so padding stays inside the 100%).

   The box mirrors .site-nav__row's at every breakpoint — 1200px of content
   inside 20/32/16px gutters — so the cards, the hero above them and the bar
   over both start on one left edge. */

.work-grid-section {
  width: 100%;
  max-width: 1240px;
  margin: 112px 0 0;
  padding: 0 20px 24px;
}

@media screen and (max-width: 991px) {
  .work-grid-section {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media screen and (max-width: 479px) {
  .work-grid-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.works-list {
  display: flex;
  flex-wrap: wrap;
  margin: -56px -10px 0;
  padding: 0;
  list-style: none;
}

.work-item {
  width: 100%;
  padding: 0 10px;
  margin-top: 56px;
}

/* Tablet up: the staircase begins. Each item claims its own flex line and
   is pulled up into the list's padding, exactly as the reference does. */

@media screen and (min-width: 768px) {
  .work-grid-section {
    margin-top: 160px;
    padding-bottom: 72px;
  }


  /* The pull is a percentage so it tracks card size across viewports:
     percentage margins/padding resolve against the container's width, and
     9% lands on ~116px at 1440px — the reference's exact figure — while
     staying proportionate on narrower screens, where a fixed 116px would
     swallow nearly half a card. The list's padding cancels the first
     card's pull so the grid still starts where it should. */

  .works-list {
    margin-top: 0;
    padding-top: 9%;
  }

  .work-item {
    width: 47.06%;
    margin-top: -9%;
  }

  .work-item:nth-child(even) {
    margin-left: 52.94%;
  }
}

.work-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Captions rather than headlines, with the client name carrying the emphasis
   and the description dropping back to muted.

   These were 13px uppercase mono. They are full sentences, though — "designing
   the future in-store digital interfaces" — and a column of them was the
   heaviest run of mono on the site. In sans they still read as captions
   because of the size and the muted colour, not because of the family. */

.work-card__title {
  margin: 0 0 16px;
  max-width: 86%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

/* The client name is what makes the caption scannable, so it takes the weight
   as well as the full-strength colour. */

.work-card__highlight {
  font-weight: 500;
}

/* Give every image the same caption baseline on the two-column layout. Long
   project names still wrap naturally, while shorter titles sit against the
   image rather than making the staircase change pace from card to card.

   The flex alignment has to land on .work-card__title-inner, not the
   title itself: the title's own children are a highlight <span> followed
   by a run of text, and flexbox wraps each of those in its own anonymous
   item — splitting the sentence into two side-by-side boxes instead of
   letting it wrap as one line. Wrapping both in a single inner span gives
   flex exactly one item to align, so the sentence still flows normally. */

@media screen and (min-width: 768px) {
  .work-card__title {
    max-width: 100%;
    min-height: 3.4em;
    display: flex;
    align-items: flex-end;
  }

  .work-card__title-inner {
    display: block;
  }
}

.work-card__highlight {
  color: var(--text);
}

/* Only the cards that actually go somewhere respond — several projects have
   no case study behind them and render as a div. */

a.work-card:hover .work-card__title {
  color: var(--text);
}

/* 6px matches the case pages' own images. The 18px this used to carry read as
   soft next to a layout with no other rounded edge on it. */

.work-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 1.7862;
  background-color: var(--border-subtle);
}

.work-card__media img,
.work-card__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__media img {
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.work-card__media video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.work-card__media video.is-active {
  opacity: 1;
}

/* Zooms in on the video so its centered logo reads bigger, cropping the
   footage's edges rather than the whole card's layout. */
.work-card__media--zoom video {
  transform: scale(1.35);
}

/* A very small image response makes linked work feel intentional without
   introducing a new visual effect. Static cards remain completely still. */

@media (hover: hover) and (pointer: fine) {
  a.work-card:hover .work-card__media img {
    transform: scale(1.012);
  }
}

a.work-card:focus-visible {
  outline: none;
}

a.work-card:focus-visible .work-card__title {
  color: var(--text);
}

a.work-card:focus-visible .work-card__media {
  box-shadow: 0 0 0 1px var(--text);
}

/* Scroll parallax is a desktop-only enhancement layered on by JS
   (js/work-grid.js); it never affects layout, only transform. */

@media (prefers-reduced-motion: reduce) {
  .work-item {
    transform: none !important;
  }

  .work-card__media img {
    transition: none;
  }
}