/* ==========================================================================
   Recent Work Section
   Block: .recent-work / .recent-work-section
   --------------------------------------------------------------------------
   Project cards in a row. The card itself is the theme's .work-card, shared
   with Work Section, so both bands read the same. What this file adds is the
   row: a grid on a wide screen, a sideways scroller on a phone.
   ========================================================================== */

.work-cards {
  display: grid;
  gap: var(--space-medium);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

@media (width >= 46rem) {
  .work-cards--columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 62rem) {
  .work-cards--columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-cards--columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------- Aside layout */

/* The home page shape: the heading in a column of its own, the projects listed
   beside it one under the next. Below the breakpoint it is one column, heading
   first, exactly as it reads in the markup. */

.recent-work__layout {
  display: grid;
  gap: var(--space-2x-large);
}

@media (width >= 64rem) {
  .recent-work__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3x-large);
  }

  /* The heading parks itself while the projects scroll past it. */
  .recent-work__aside {
    position: sticky;
    /* Clear of the sticky site header, plus a breath. */
    inset-block-start: calc(var(--header-height) + var(--space-large));
    align-self: start;
  }
}

.recent-work__aside .recent-work__footer {
  margin-block-start: var(--space-large);
}

.work-cards--list {
  grid-template-columns: minmax(0, 1fr);
}

/* Each listed card is picture and body side by side, once there is room for
   two columns to be worth reading. */
@media (width >= 40rem) {
  .work-cards--list > .work-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }

  .work-cards--list > .work-card > .work-card__thumbnail {
    height: 100%;
    aspect-ratio: auto;
    border-block-end: 0;
    border-inline-end: 1px solid var(--color-border-subtle);
  }
}

/* ------------------------------------------------------- Card additions */

/* Only the link is the target. The theme's work card stretches its title link
   across the whole tile for the archive grid; here the card carries a tag, a
   meta line and sometimes a second link, so a surface-wide target would
   swallow them. */
.recent-work .work-card__title a::after {
  content: none;
}

.recent-work .work-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2x-small) var(--space-x-small);
  margin-block-end: var(--space-3x-small);
}

.recent-work .work-card__summary {
  font-size: var(--font-size-small);
}

.recent-work .work-card__summary > :first-child {
  margin-block-start: 0;
}

.recent-work .work-card__summary > :last-child {
  margin-block-end: 0;
}

.recent-work .work-card__action {
  margin-block-start: auto;
  padding-block-start: var(--space-small);
}

/* A card with both a result line and a link keeps the result against the rule
   and the link below it, rather than both fighting for the bottom. */
.recent-work .work-card__result + .work-card__action {
  margin-block-start: 0;
}

/* ------------------------------------------------------- Phone scroller */

@media (width < 46rem) {
  .work-cards--scroll {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Out to the screen edges and back in, so the first card starts on the
       text column and the last one can scroll clear of it. */
    margin-inline: calc(var(--container-gutter) * -1);
    padding-inline: var(--container-gutter);
    padding-block-end: var(--space-x-small);
    scrollbar-width: thin;
  }

  .work-cards--scroll > .work-card {
    flex: 0 0 min(80%, 19rem);
    scroll-snap-align: start;
  }

  /* A card in the scroller is too narrow to be read in two columns, so the
     listed card's split is undone for as long as it is scrolling. */
  .work-cards--scroll.work-cards--list > .work-card {
    display: flex;
    flex-direction: column;
  }

  .work-cards--scroll.work-cards--list > .work-card > .work-card__thumbnail {
    height: auto;
    aspect-ratio: 16 / 10;
    border-block-end: 1px solid var(--color-border-subtle);
    border-inline-end: 0;
  }

  /* The script makes the list focusable while it overflows, because a region
     that only scrolls sideways is otherwise unreachable from the keyboard. */
  .work-cards--scroll:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-medium);
  }
}