/* =====================================================================
   Index — the combined Projects / Objects overlay
   ===================================================================== */

/* ---------- Mobile category toggle ---------- */
/* The header nav collapses into the burger below 720px, taking the
   category toggle with it; this repeats it above the grid there. */
.index-filter { display: none; }

/* ---------- Tile grid ---------- */
.index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 70px;
  row-gap: 71px;
}

.index-grid__item {
  line-height: 1.25;
  transition:
    opacity var(--t-med) var(--ease),
    filter  var(--t-med) var(--ease);
}

/* De-selected category: blurred in place rather than removed, so the
   grid never reflows. Still a working link. */
.index-grid__item.is-dimmed { opacity: .5; filter: blur(6px); }

.index-grid__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.index-grid__link:hover { opacity: 1; }
.index-grid__link:hover .index-grid__media { opacity: .85; }

/* Every thumbnail renders at the same height, with width following the
   image's own proportions — portraits narrow, landscapes wide. Nothing
   is cropped.

   The box ratio sets that shared height (= column width / ratio), so it
   has to be at least as wide as the widest image or that one would be
   clamped by max-width and come out shorter. The widest cover in the
   content is 3:2, hence 3/2 here. A wider upload would letterbox rather
   than distort, but bump this if that becomes the norm. */
.index-grid__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  transition: opacity var(--t-med) var(--ease);
}
/* Absolute so the image can't size the box: in flow, height:100% resolves
   against a content-sized flex item, falls back to the intrinsic height
   and stretches it, defeating the aspect-ratio. */
.index-grid__media img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.index-grid__title {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--ink);
}

@media (max-width: 720px) {
  .index-filter {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 32px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
  }

  .index-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
  }
}