/* ============================================================
   GALLERY PREVIEW
   Clean gallery wall on the lightest surface. Each tile links
   through to the full gallery page.
   ============================================================ */

.gallery {
  background: var(--cream);
  padding-block: clamp(4rem, 9vw, 8rem);
}

/* ---- head ---- */
.gallery-head {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.gallery-overline {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wine);
  margin-bottom: var(--space-s);
}
.gallery-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gallery-title em {
  font-style: italic;
  color: var(--wine);
}
.gallery-intro {
  margin-top: var(--space-m);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---- grid ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.8vw, 1.4rem);
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

.gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
}
.gallery-tag {
  position: absolute;
  left: clamp(0.6rem, 1.5vw, 0.9rem);
  bottom: clamp(0.6rem, 1.5vw, 0.9rem);
  z-index: 1;
  padding: 0.42em 0.72em;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(42, 33, 28, 0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(247, 242, 234, 0.2);
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 460px) {
  .gallery-tag {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 0.4em 0.6em;
  }
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease);
}
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.05);
}

/* ---- cta ---- */
.gallery-cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---- stagger ---- */
.gallery-item.reveal:nth-child(1) { transition-delay: 0.04s; }
.gallery-item.reveal:nth-child(2) { transition-delay: 0.10s; }
.gallery-item.reveal:nth-child(3) { transition-delay: 0.16s; }
.gallery-item.reveal:nth-child(4) { transition-delay: 0.22s; }
.gallery-item.reveal:nth-child(5) { transition-delay: 0.28s; }
.gallery-item.reveal:nth-child(6) { transition-delay: 0.34s; }