/* ============ GRAFFT GALLERY WIDGET ============ */
.grafft-gallery{
  padding: 110px 0;
  background: #E4DCCB;
  --gallery-serif: 'Fraunces', serif;
  --gallery-mono: 'IBM Plex Mono', monospace;
  --gallery-heading-color: #1C1B19;
  --gallery-item-bg: #1C1B19;
  --gallery-cap-color: #FFFDF9;
  --gallery-gap: 18px;
}
.grafft-gallery *{ box-sizing: border-box; }

.grafft-gallery h2{
  font-family: var(--gallery-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--gallery-heading-color);
  margin-bottom: 44px;
}

.grafft-gallery .gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gallery-gap);
}
.grafft-gallery .gallery-grid .g1{
  grid-column: span 2;
  grid-row: span 2;
}

.grafft-gallery .g-item{
  background: var(--gallery-item-bg);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.grafft-gallery .g-item.g1{
  aspect-ratio: auto;
}
.grafft-gallery .g-item img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.grafft-gallery .g-item.has-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,27,25,0), rgba(28,27,25,.55));
  z-index: 1;
}
.grafft-gallery .g-cap{
  font-family: var(--gallery-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--gallery-cap-color);
  position: relative;
  z-index: 2;
}

.grafft-gallery .g-item{ cursor: pointer; }
.grafft-gallery .g-item:focus-visible{
  outline: 2px solid var(--gallery-item-bg);
  outline-offset: 3px;
}

.grafft-gallery .grafft-lightbox{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,10,9,.94);
  align-items: center;
  justify-content: center;
}
.grafft-gallery .grafft-lightbox.is-open{
  display: flex;
}
.grafft-gallery .lb-stage{
  max-width: 88vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grafft-gallery .lb-stage img{
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  display: block;
}
.grafft-gallery .lb-close,
.grafft-gallery .lb-prev,
.grafft-gallery .lb-next{
  position: absolute;
  background: transparent;
  border: none;
  color: var(--gallery-cap-color);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 12px;
}
.grafft-gallery .lb-close{ top: 16px; right: 16px; }
.grafft-gallery .lb-prev{ left: 16px; top: 50%; transform: translateY(-50%); }
.grafft-gallery .lb-next{ right: 16px; top: 50%; transform: translateY(-50%); }
.grafft-gallery .lb-counter{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--gallery-mono);
  font-size: 12px;
  color: var(--gallery-cap-color);
  opacity: .75;
}

@media(max-width: 760px){
  .grafft-gallery{ padding: 70px 0; }
  .grafft-gallery .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .grafft-gallery .gallery-grid .g1{ grid-column: span 2; }
}

@media(max-width: 520px){
  .grafft-gallery .gallery-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .grafft-gallery .gallery-grid .g1{
    grid-column: span 1;
    grid-row: span 1;
  }
  .grafft-gallery .g-item.g1{ aspect-ratio: 1/1; }
  .grafft-gallery .lb-prev,
  .grafft-gallery .lb-next{ font-size: 22px; padding: 8px; }
  .grafft-gallery .lb-close{ font-size: 22px; }
}