// =============================================================================
// GALLERY — Task #21 (v2 update)
// Desktop: white bg, 2-3-2 seven-image grid, rows 467px, gap 24px.
// Mobile: white bg, single-image Swiper carousel (343×248px), right-bleed.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// Measurements: design/measurements-v2.json → "gallery"
//   Web:    bg white; 12-col grid py-80 row-gap 48; images h-467px gap-24
//   Mobile: bg white; pl-16 pt-56 (no right pad — bleed); img 343×248
// =============================================================================

@import '../mixins';

.gallery {
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space, tokens.scss).
  padding-block: var(--section-space);
}

// ─── Heading ─────────────────────────────────────────────────────────────────
.gallery__heading {
  display: flex;
  flex-direction: column;
  gap: 14.955px;                          // mobile: eyebrow → heading gap (~15px)
  padding-bottom: 16px;
  max-width: 343px;                       // mobile: contained
}

// ─── Mobile carousel (d-lg-none) ─────────────────────────────────────────────
// Container-aligned heading, full-bleed-right track — shared technique, see
// @mixin slider-breakout (_mixins.scss). This slider only shows below 992px
// (d-lg-none) so it never reaches the >=1200px tier in practice, but sharing
// the one complete implementation is simpler than a second, partial variant.
.gallery__mobile-slider {
  margin-top: 16px;

  @include slider-breakout;
}

.gallery__mobile-slider .swiper-slide {
  width: 343px;
  height: 248px;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

// Mobile nav row
.gallery__mobile-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.gallery__nav-btn {
  @include slider-nav-btn;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);  // Figma-confirmed (20px, same as testimonials nav)
  background-color: var(--color-satin-linen);
  color: var(--color-mantle);

  img {
    width: 24px;
    height: 24px;
    display: block;
  }
}

.gallery__nav-btn--prev {
  opacity: 0.35;
}

.gallery__nav-btn--next {
  opacity: 1;
}

// ─── Desktop grid (d-none d-lg-block) ────────────────────────────────────────
// .gallery__grid-inner (not __grid) is the flex column that holds the rows —
// keep display/gap on the actual row container or the 24px row gap never renders.
.gallery__grid-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;                              // row gap 24px
}

.gallery__row {
  display: flex;
  gap: 24px;                              // column gap 24px
  height: 467px;
}

// Row A: wide(flex) + narrow(384px)
.gallery__row--a {
  .gallery__item--flex { flex: 1; }
  .gallery__item--narrow { width: 384px; flex-shrink: 0; }
}

// Row B: 3 equal
.gallery__row--b {
  .gallery__item { flex: 1; }
}

// Row C: narrow(384px) + wide(flex)
.gallery__row--c {
  .gallery__item--narrow { width: 384px; flex-shrink: 0; }
  .gallery__item--flex { flex: 1; }
}

.gallery__item {
  margin: 0;
  overflow: hidden;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  &:hover img {
    transform: scale(1.04);
  }
}

// ─── Desktop overrides ───────────────────────────────────────────────────────
@include respond-to('desktop') {
  .gallery__heading {
    gap: 16px;
    max-width: 67.5rem;                   // 1080px
    // Figma 18580:8609 — heading→grid gap is 48px total (margin-bottom alone).
    // Was stacking padding-bottom:33px UNDER margin-bottom:48px (~81px combined).
    margin-bottom: var(--space-12);       // 48px gap to grid
  }
}

// ─── Lightbox (GLightbox) — theme overrides to match the design system ───────
// GLightbox JS builds its instance from the rendered <img> tags above (see
// gallery-lightbox.js); these rules just restyle its default chrome.
.glightbox-clean {
  .gclose,
  .gnext,
  .gprev {
    background-color: var(--color-satin-linen);
    border-radius: var(--radius-full);
    opacity: 1;

    .garrow {
      stroke: var(--color-mantle);
    }

    path {
      fill: var(--color-mantle);
    }

    &:hover {
      background-color: var(--color-gold);

      .garrow {
        stroke: var(--color-white);
      }

      path {
        fill: var(--color-white);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 2px;
    }
  }
}