/* ── Full-viewport dark canvas ── */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background: #1a1a1a;
}

/* ── Flexbox wrap: variable-width tiles, fixed row heights ── */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

/* ── Absorbs slack in the last row ── */
.gallery-grid::after {
  content: "";
  flex-grow: 999999999;
}

/* ── Tile: clipped overflow, flex-grow driven width ── */
.gallery-item {
  display: block;
  overflow: hidden;
  height: 640px;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 384px;
  position: relative;
  color: inherit;
  text-decoration: none;

  /* shimmer skeleton while image loads */
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Image: cover the tile, sit above shimmer ── */
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.4s ease;
}

/* ── Hover: subtle scale on image ── */
.gallery-item:hover img {
  transform: scale(1.03);
}

/* ── Keyboard accessibility ── */
.gallery-item:focus-visible {
  outline: 2px solid #f0f0f0;
  outline-offset: -2px;
}

/* ── Shimmer keyframes ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

  /* ───────────────────────────────────────
     Responsive breakpoints — scale tile height proportionally
     ──────────────────────────────────── */

  /* Tablet (768px–1199px) */
  @media (min-width: 768px) and (max-width: 1199px) {
    .gallery-item {
      height: 480px;
    }
  }

  /* Mobile (480px–767px) */
  @media (min-width: 480px) and (max-width: 767px) {
    .gallery-item {
      height: 384px;
    }
  }

  /* Small mobile (≤479px) — single column */
  @media (max-width: 479px) {
    .gallery-item {
      width: 100%;
      height: auto;
      flex-grow: 0;
    }
    .gallery-item img {
      position: static;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }