// ==========================================================================
// b-image-gallery — Responsive image grid with optional lightbox
// ==========================================================================
//
// Modifier classes (set on the .b-image-gallery section):
//
//   Aspect ratio (applied to every .b-image-gallery__media):
//     --ar-auto   → natural image proportions (no rule, default browser behaviour)
//     --ar-1x1    → 1:1 square
//     --ar-4x3    → 4:3 standard
//     --ar-3x2    → 3:2 photo
//     --ar-16x9   → 16:9 widescreen
//
//   Hover effect (applied via __item:hover):
//     --hover-zoom → image scales up slightly
//
//   Caption mode:
//     --caption-always → copyright shown on image
//     --caption-hover  → copyright shown on hover
// ==========================================================================

.b-image-gallery {
  // -------------------------
  // Heading
  // -------------------------
  &__title {
  }

  &__subtitle {
    color: $gray-700;
    margin-bottom: $spacer * 1.5;
  }

  // -------------------------
  // Grid row
  // -------------------------
  &__grid {
    // Bootstrap's row + row-cols-* + g-* handle all layout
  }

  // -------------------------
  // Each gallery item (figure)
  // -------------------------
  &__item {
    margin: 0; // Reset <figure> default margin
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  // -------------------------
  // Lightbox anchor
  // -------------------------
  &__link {
    display: block;
    overflow: hidden; // Contains the zoom effect cleanly
    line-height: 0; // Collapse inline whitespace under <picture>
    color: inherit;
    text-decoration: none;

    @include focus-visible($width: 3px);
  }

  // -------------------------
  // Media wrapper (also used without lightbox)
  // -------------------------
  &__media {
    overflow: hidden;
    line-height: 0;

    picture {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  // -------------------------
  // Image
  // -------------------------
  &__image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
  }

  .c-copyright--overlay {
    display: none;
  }

  // ==========================================================================
  // Aspect ratio variants
  // Applied to the media wrapper; image fills it with object-fit: cover.
  // The <a> link (when present) wraps only the media, so it also inherits.
  // ==========================================================================

  @each $ratio,
    $value in ("1x1": "1 / 1", "4x3": "4 / 3", "3x2": "3 / 2", "16x9": "16 / 9")
  {
    &--ar-#{$ratio} {
      .b-image-gallery__link,
      .b-image-gallery__media {
        aspect-ratio: #{$value};
      }

      .b-image-gallery__image {
        height: 100%;
        object-fit: cover;
      }
    }
  }

  // ==========================================================================
  // Hover: zoom
  // ==========================================================================

  &--hover-zoom {
    .b-image-gallery__item:hover .b-image-gallery__image,
    .b-image-gallery__link:focus-visible .b-image-gallery__image {
      transform: scale(1.03);
    }
  }

  // ==========================================================================
  // Caption: always visible (below image, normal flow)
  // ==========================================================================

  &--caption-always {
    .c-copyright--overlay {
      display: block;
    }
  }

  &--caption-hover {
    .b-image-gallery__item:hover .c-copyright--overlay,
    .b-image-gallery__item:focus-within .c-copyright--overlay {
      display: block;
    }
  }
}

// ==========================================================================
// b-image-gallery-slideshow — Single-image Splide carousel
// Nav layout: heading left / nav right on desktop (CSS Grid areas)
// Nav tokens match .b-slideshow / .b-testimonials--slideshow pattern
// ==========================================================================

.b-image-gallery-slideshow {
  &--nav-in-image {
    .b-image-gallery-slideshow__inner {
      position: relative;
    }

    .b-image-gallery-slideshow__navigation {
      position: absolute;
      right: 0;
      bottom: 0;
      margin-top: 0;
      justify-content: flex-end;
      grid-area: auto;
      z-index: 3;
    }
  }

  &__inner {
    display: grid;
    grid-template-areas:
      "header"
      "slider"
      "nav";

    @include media-breakpoint-up(lg) {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "header nav"
        "slider slider";
      align-items: flex-start;
      column-gap: 2rem;
    }
  }

  &__header {
    grid-area: header;
  }

  &__slider {
    grid-area: slider;
    min-width: 0; // prevent grid item overflowing container
  }

  // Navigation visuals and layout are shared with other slideshow blocks
  // in content-blocks/_slideshow.scss.

  &__figure {
    margin: 0;
    position: relative;
    overflow: hidden;

    picture {
      display: block;
      width: 100%;
    }

    img {
      width: 100%;
      height: auto;
      display: block;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

  }
}

// ==========================================================================
// GLightbox overrides — align with HKS brand
// ==========================================================================

.glightbox-clean {
  .gclose,
  .gnext,
  .gprev {
    @extend .btn;
    @extend .btn-primary;
    @extend .btn-icon-only;

    --hks-btn-offset: 0;
    opacity: 1;

    svg {
      width: 1.125rem;
      height: 1.125rem;
      max-width: none;
    }

    svg path {
      fill: currentColor;
    }
  }

  .gdesc-inner {
    background-color: $primary-15;
    color: $primary;
    padding: $spacer * 0.375 $spacer * 1;

    .gslide-title {
      display: none;
    }

    .gslide-desc {
      font-family: $font-family-base;
      font-size: $font-size-caption;
      line-height: $line-height-base;
      color: $primary;
      opacity: 0.9;
      margin-top: $spacer * 0.125;
    }
  }
}