/* The image gallery (/images/) and the thumbnail strip on magazine
   landing pages. Each tile is a print on a contact sheet: the picture,
   then where it ran and who made it. */

.images-lede { max-width: 60ch; font-size: 1.05rem; }
.images-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .9rem 1rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0;
  border-block: 1px solid var(--rule);
}
.images-filters label { display: flex; flex-direction: column; gap: .35rem; margin: 0; font-size: .8rem; color: var(--ink-soft); }
.images-filters label[hidden] { display: none; }
.images-filters select { width: 100%; min-width: 0; }
.images-count { margin: 1rem 0; font: 1rem var(--hand); color: var(--ink-soft); }

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 2rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-tile { display: flex; flex-direction: column; min-width: 0; }
.image-tile__frame { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--field); outline: 1px solid var(--rule); outline-offset: 3px; }
.image-tile__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-tile__frame:hover { outline-color: var(--ink); }
.image-tile__frame:focus-visible { outline: 2px solid var(--ink); }
.image-tile__text { padding-top: .75rem; }
.image-tile__text p { margin: 0; }
.image-tile__title { font-weight: 700; line-height: 1.35; }
.image-tile__title a { color: var(--ink); }
.image-tile__place { margin-top: .15rem !important; font: .95rem/1.4 var(--hand); color: var(--ink-soft); }
.image-tile__credit { margin-top: .4rem !important; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }

/* Strip: a single row of prints on a magazine landing page. */
.image-strip__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.image-strip__row a { display: block; color: var(--ink); text-decoration: none; }
.image-strip__row img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; outline: 1px solid var(--rule); outline-offset: 3px; }
.image-strip__row span { display: block; margin-top: .55rem; font-size: .85rem; line-height: 1.35; }
.image-strip__row a:hover span { text-decoration: underline; }
.image-strip__more { margin: 1rem 0 0; font-size: .9rem; }
.image-strip__empty { color: var(--ink-soft); }

@media (max-width: 36rem) {
  .images-filters { grid-template-columns: 1fr 1fr; }
  .images-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem .9rem; }
  .image-tile__credit { font-size: .72rem; }
}