/* ==========================================================================
   Gallery page — filterable grid and lightbox
   ========================================================================== */

.gallery-title {
  margin-bottom: var(--stack-sm);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 2px;
}

/* Wide shots only span two tracks once two columns are guaranteed. */
@media (min-width: 600px) {
  .gallery-grid__item--wide {
    grid-column: span 2;
  }
}

.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  background-color: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: zoom-in;
}

.gallery-grid__item--wide .gallery-card {
  aspect-ratio: 16 / 9;
}

.gallery-grid__item--tall .gallery-card {
  aspect-ratio: 3 / 4;
}

.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 28%,
    color-mix(in srgb, var(--color-bg) 55%, transparent) 62%,
    color-mix(in srgb, var(--color-bg) 94%, transparent) 100%
  );
  pointer-events: none;
}

.gallery-card:focus-visible {
  outline-offset: -3px;
}

.gallery-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.gallery-card__caption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 1;
}

.gallery-card__tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 8px;
  background-color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  font: 400 var(--text-label)/1.3 var(--font-mono);
  letter-spacing: 0.18em;
}

.gallery-card__title {
  display: block;
  font-size: clamp(0.9375rem, 1.6vw, 1.25rem);
  font-weight: 800;
  letter-spacing: var(--tracking-title);
  line-height: 1.2;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery-card__image {
    transition: transform 0.45s var(--ease-out);
  }

  .gallery-card:hover .gallery-card__image {
    transform: scale(1.05);
  }
}

/* --------------------------------------------------------------------------
   Lightbox (dialog)
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(64px, 6vw, 88px) clamp(16px, 4vw, 56px) clamp(16px, 4vw, 40px);
  border: 0;
  background-color: var(--color-scrim-strong);
  color: var(--color-text);
  cursor: zoom-out;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
}

.lightbox__counter {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  left: clamp(16px, 4vw, 56px);
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  min-width: 48px;
  min-height: 48px;
  translate: 0 -50%;
  cursor: pointer;
}

.lightbox__nav--prev {
  left: clamp(8px, 2vw, 24px);
}

.lightbox__nav--next {
  right: clamp(8px, 2vw, 24px);
}

@media (max-width: 599px) {
  .lightbox__nav {
    top: auto;
    bottom: 16px;
    translate: none;
  }
}

/* .btn:active nudges buttons with `translate`, which would cancel the arrows'
   vertical centring; keep the 1px press nudge relative to it. */
.lightbox__nav:active {
  translate: 0 calc(-50% + 1px);
}

@media (max-width: 599px) {
  .lightbox__nav:active {
    translate: 0 1px;
  }
}

.lightbox__figure {
  width: 100%;
  max-width: 1400px;
}

.lightbox__image {
  width: 100%;
  height: min(74svh, 1040px);
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 599px) {
  .lightbox__caption {
    padding-bottom: 64px;
  }
}

.lightbox__hint {
  color: var(--color-text-subtle);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: kv-fade var(--duration-fast) var(--ease-out) both;
  }

  .lightbox[open] .lightbox__figure {
    animation: kv-zoom-in var(--duration-base) var(--ease-out) both;
  }

  .lightbox.is-closing {
    animation: kv-fade-out var(--duration-exit) var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox[open] {
    animation: kv-fade 0.15s var(--ease-out) both;
  }
}

/* Filter changes (see gallery.js): cards glide to their new grid positions. */
::view-transition-group(*) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}