/* ═══════════════════════════════════════════════════════════

       GALLERY SECTION  —  Bento Grid + Lightbox
    ═══════════════════════════════════════════════════════════ */

#gallery {
  padding: var(--section-pad-y) var(--section-pad-x);
  padding-top: calc(var(--section-pad-y) + var(--diag-h));
  padding-bottom: calc(var(--section-pad-y) + var(--diag-h));
  background-color: var(--color-black);
  clip-path: polygon(0 var(--diag-h), 100% 0, 100% 100%, 0 calc(100% - var(--diag-h)));
  margin-top: calc(var(--diag-h) * -1);
  margin-bottom: calc(var(--diag-h) * -1);
  position: relative;
  z-index: 1;
}

.gallery__header {
  max-width: var(--max-width);
  margin: 0 auto 3.5rem;
}

/* ─── BENTO GRID ─────────────────────────────────────────── */

.gallery__bento {
  display: grid;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 6px;

  /*
   * 4-column bento for 10 landscape photos.
   * Row heights calibrated so landscape images fill cleanly.
   * The grid uses named areas for visual clarity and easy
   * responsive overrides.
   *
   * Layout:
   *   ┌──────────┬─────┬─────┐
   *   │    A     │  B  │  C  │  row 1 (hero + 2 small)
   *   │  (2col)  │     │     │
   *   ├─────┬────┴──┬──┴─────┤
   *   │  D  │  E    │   F    │  row 2 (3 cells)
   *   ├─────┼───────┼────┬───┤
   *   │  G  │   H   │ I  │ J │  row 3 (4 cells)
   *   └─────┴───────┴────┴───┘
   */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 280px 240px 220px;

  grid-template-areas:
    "gi-a gi-a gi-a gi-a gi-a gi-a  gi-b  gi-b  gi-b gi-c gi-c gi-c"
    "gi-d gi-d gi-d gi-e gi-e gi-e  gi-e  gi-f  gi-f gi-f gi-f gi-f"
    "gi-g gi-g gi-g gi-h gi-h gi-h  gi-h  gi-i  gi-i gi-i gi-j gi-j";
}

/* ─── INDIVIDUAL BENTO ITEMS ──────────────────────────────── */

.bento-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid rgba(111, 97, 192, 0.18);
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.bento-item:hover {
  border-color: var(--color-purple);
  transform: scale(1.018);
  box-shadow: 0 0 28px rgba(111, 97, 192, 0.35);
  z-index: 2;
}

/* Grid area assignments */
.gi-a { grid-area: gi-a; }
.gi-b { grid-area: gi-b; }
.gi-c { grid-area: gi-c; }
.gi-d { grid-area: gi-d; }
.gi-e { grid-area: gi-e; }
.gi-f { grid-area: gi-f; }
.gi-g { grid-area: gi-g; }
.gi-h { grid-area: gi-h; }
.gi-i { grid-area: gi-i; }
.gi-j { grid-area: gi-j; }

/* ─── IMAGE DISPLAY ──────────────────────────────────────── */

.bento-item__pic {
  display: block;
  width: 100%;
  height: 100%;
}

.bento-item__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);
}

.bento-item:hover .bento-item__pic img {
  transform: scale(1.06);
}

/* ─── HOVER OVERLAY ──────────────────────────────────────── */

.bento-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 25, 0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-item:hover .bento-item__overlay {
  opacity: 1;
}

.bento-item__overlay-zoom {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, border-color 0.35s ease;
}

.bento-item:hover .bento-item__overlay-zoom {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}

.bento-item__overlay-zoom svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

/* ─── LIGHTBOX ───────────────────────────────────────────── */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.15s;
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.gallery-lightbox__card {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(111, 97, 192, 0.55);
  box-shadow: 0 0 60px rgba(111, 97, 192, 0.3), 0 40px 80px rgba(0, 0, 0, 0.7);
  max-width: 920px;
  width: 100%;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-lightbox.is-open .gallery-lightbox__card {
  transform: scale(1) translateY(0);
}

.gallery-lightbox__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: #0a0518;
}

.gallery-lightbox__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}



/* Close button */
.gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background: rgba(10, 5, 25, 0.65);
  border: 1.5px solid rgba(111, 97, 192, 0.4);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.gallery-lightbox__close:hover {
  background: rgba(111, 97, 192, 0.5);
  border-color: var(--color-purple);
  transform: rotate(90deg);
}

.gallery-lightbox__close svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
}

/* Prev / Next arrows */
.gallery-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(10, 5, 25, 0.55);
  border: 1.5px solid rgba(111, 97, 192, 0.35);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.gallery-lightbox__arrow:hover {
  background: rgba(111, 97, 192, 0.45);
  border-color: var(--color-purple);
}

.gallery-lightbox__arrow svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
}

.gallery-lightbox__arrow--prev {
  left: 1rem;
}

.gallery-lightbox__arrow--next {
  right: 1rem;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */

/* Tablet: 2-column bento, all 10 images visible */
@media (max-width: 900px) {
  #gallery {
    padding: calc(5rem + var(--diag-h)) 1.5rem;
  }

  .gallery__bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 180px);
    grid-template-areas:
      "gi-a gi-a"
      "gi-b gi-c"
      "gi-d gi-e"
      "gi-f gi-g"
      "gi-h gi-i";
  }

  /* Hide the 10th item on tablet to keep balanced pairs */
  .gi-j {
    display: none;
  }
}

/* Mobile: single-column, 6 best images */
@media (max-width: 560px) {
  #gallery {
    padding: calc(4rem + var(--diag-h)) 1rem;
  }

  .gallery__header {
    margin-bottom: 2rem;
  }

  .gallery__bento {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 200px);
    gap: 5px;
    grid-template-areas:
      "gi-a"
      "gi-b"
      "gi-e"
      "gi-d"
      "gi-h"
      "gi-i";
  }

  /* Hide less critical images on small screens */
  .gi-c,
  .gi-f,
  .gi-g,
  .gi-j {
    display: none;
  }

  .gallery-lightbox__arrow--prev {
    left: 0.4rem;
  }

  .gallery-lightbox__arrow--next {
    right: 0.4rem;
  }

  .gallery-lightbox__card {
    border-radius: 10px;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .gallery__bento {
    grid-template-rows: repeat(6, 170px);
  }
}