/* Moe's Mobile Detailing, gallery page.

   The header comes from subpage.css and everything shared from site.css.
   What lives here is only the grid of work.

   The grid is static on purpose. The photographs are the argument, and a
   photograph does not need to slide, zoom or reveal to make it. One frame
   is larger because one job earned the space, the way a print shop pins
   its best work bigger than the rest. */

/* ------------------------------------------------------------------ grid */

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: stretch;
}

.work__shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.work__shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-panel);
  background: var(--surface);
}

/* the one frame that earned the space */
.work__shot--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.work__shot--feature img {
  flex: 1;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

.work__shot figcaption b {
  display: block;
  margin-top: var(--s1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}

.work__shot figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 34em;
}

.work__more {
  margin: var(--s5) 0 0;
  max-width: 44em;
  color: var(--muted);
}

.work__more a {
  font-weight: 600;
  color: var(--royal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------- narrower */

@media (max-width: 980px) {
  .work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work__shot--feature {
    grid-column: span 2;
    grid-row: auto;
  }

  .work__shot--feature img {
    flex: none;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  /* the last frame would otherwise sit alone beside an empty cell */
  .work__grid > .work__shot:last-child {
    grid-column: span 2;
  }

  .work__grid > .work__shot:last-child img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .work__grid {
    grid-template-columns: 1fr;
  }

  .work__shot--feature,
  .work__grid > .work__shot:last-child {
    grid-column: auto;
  }

  .work__shot--feature img,
  .work__grid > .work__shot:last-child img {
    aspect-ratio: 3 / 4;
  }
}