body.modal-open { overflow: hidden; }

.gallery-hero { background: var(--cream); padding-block: clamp(3.5rem, 7vw, 6rem); }
.gallery-hero .section-heading { margin-bottom: 0; }
.gallery-hero h1 { font-size: clamp(3.2rem, 7vw, 6.5rem); letter-spacing: -.06em; }
.gallery-intro { color: var(--muted); font-size: 1.1rem; max-width: 45rem; }

.full-gallery-grid { columns: 4 15rem; column-gap: 1rem; }
.full-gallery-card {
  background: #e4f1ea;
  border: 0;
  border-radius: 1rem;
  break-inside: avoid;
  cursor: zoom-in;
  display: block;
  margin: 0 0 1rem;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}
.full-gallery-card img { transition: transform 220ms ease; width: 100%; }
.full-gallery-card:hover img { transform: scale(1.025); }
.full-gallery-card::after { background: rgba(23,60,56,.86); bottom: .65rem; color: white; content: "View"; font-size: .7rem; font-weight: 900; letter-spacing: .1em; opacity: 0; padding: .45rem .65rem; position: absolute; right: .65rem; text-transform: uppercase; transition: opacity 160ms ease; }
.full-gallery-card:hover::after, .full-gallery-card:focus-visible::after { opacity: 1; }

.shadowbox {
  background: transparent;
  border: 0;
  height: 100%;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: clamp(3rem, 6vw, 5rem);
  width: 100%;
}
.shadowbox::backdrop { background: rgba(8, 26, 24, .94); backdrop-filter: blur(8px); }
.shadowbox[open] { align-items: center; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; }
.shadowbox figure { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; margin: 0; min-height: 0; }
.shadowbox img { box-shadow: 0 24px 80px rgba(0,0,0,.45); max-height: calc(100vh - 9rem); max-width: 100%; object-fit: contain; }
.shadowbox figcaption { color: white; display: flex; font-size: .8rem; gap: 1rem; justify-content: space-between; margin-top: .75rem; width: min(100%, 60rem); }
.shadowbox button { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: white; cursor: pointer; }
.shadowbox-close { border-radius: 999px; font-size: 1.9rem; height: 2.8rem; line-height: 1; position: absolute; right: 1.25rem; top: 1.25rem; width: 2.8rem; }
.shadowbox-nav { border-radius: 999px; font-size: 2.4rem; height: 3rem; line-height: .8; width: 3rem; }

@media (max-width: 640px) {
  .shadowbox { padding: 3.75rem .7rem 1rem; }
  .shadowbox[open] { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
  .shadowbox-nav { font-size: 1.9rem; height: 2.4rem; width: 2.4rem; }
}