/**
 * @file
 * MLT Modern — Image gallery + lightbox.
 *
 * Pattern: one large "hero" image at the top, a row of thumbnails
 * underneath, click anything to open a native <dialog> lightbox with
 * prev/next/close controls.
 *
 * The markup is emitted by field templates like:
 *   templates/field--node--field-mt-shw-image.html.twig
 *   templates/field--node--field-mt-pst-image.html.twig
 *
 * Both use the same class names (.mlt-gallery, .mlt-gallery__hero, etc.)
 * so this one stylesheet covers every gallery instance.
 *
 * The lightbox <dialog> is INJECTED INTO THE DOM by gallery.js the first
 * time any gallery on the page is opened. It's a single shared dialog
 * (only one is ever open at a time), reused for whichever gallery is
 * triggered. CSS below targets it via its data attribute.
 */

/* =======================================================================
 * GALLERY (the inline page content — hero + thumbs)
 * ======================================================================= */

.mlt-gallery {
  margin: 0 0 32px 0;
}

/* ----- Hero image (large, top) ----- */
.mlt-gallery__hero {
  position: relative;
  margin-bottom: 14px;
}

.mlt-gallery__hero-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--mlt-bg-soft);
  border-radius: var(--mlt-radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  /* Remove the default focus outline; we add our own visible one. */
  outline: none;
}

.mlt-gallery__hero-button:focus-visible {
  outline: 3px solid var(--mlt-primary);
  outline-offset: 3px;
}

.mlt-gallery__hero-button img {
  display: block;
  width: 100%;
  height: auto;
  /* Smooth zoom-in feedback on hover. */
  transition: transform 0.4s ease;
}

.mlt-gallery__hero-button:hover img {
  transform: scale(1.02);
}

/* Optional caption under the hero. */
.mlt-gallery__caption {
  font-size: 14px;
  color: var(--mlt-text-light);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

/* ----- Thumbnail strip ----- */
.mlt-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.mlt-gallery__thumb {
  padding: 0;
  border: 0;
  background: var(--mlt-bg-soft);
  border-radius: var(--mlt-radius-md);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mlt-gallery__thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--mlt-shadow-elevated);
}

.mlt-gallery__thumb:focus-visible {
  outline: 3px solid var(--mlt-primary);
  outline-offset: 2px;
}

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

/* =======================================================================
 * LIGHTBOX (the <dialog> element, injected by gallery.js)
 * =======================================================================
 *
 * Markup structure (built in JS):
 *   <dialog class="mlt-lightbox" data-mlt-lightbox>
 *     <button class="mlt-lightbox__close" aria-label="Close">×</button>
 *     <button class="mlt-lightbox__nav mlt-lightbox__nav--prev">‹</button>
 *     <button class="mlt-lightbox__nav mlt-lightbox__nav--next">›</button>
 *     <figure class="mlt-lightbox__figure">
 *       <img class="mlt-lightbox__image" src="..." alt="...">
 *       <figcaption class="mlt-lightbox__caption">...</figcaption>
 *     </figure>
 *     <div class="mlt-lightbox__counter">1 / 5</div>
 *   </dialog>
 */

/* The native <dialog>'s default styles vary by browser — reset them. */
.mlt-lightbox {
  /* Remove the default centered chrome. We position our own children. */
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  /* The dialog is fixed-positioned by the user-agent. We just need to
   * make sure it spans the viewport when open. */
  color: #fff;
}

/* The native ::backdrop pseudo-element styles the area behind the dialog. */
.mlt-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.92);
}

/* Older Chromium (pre-2022) needed -webkit-backdrop. Modern browsers
 * don't need it, but it's a cheap safety net. */
.mlt-lightbox::-webkit-backdrop {
  background: rgba(0, 0, 0, 0.92);
}

/* The figure holds the image + caption, centred in the viewport. */
.mlt-lightbox__figure {
  margin: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  box-sizing: border-box;
}

.mlt-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--mlt-radius-md);
  /* Soft fade-in when the src is swapped. */
  animation: mlt-lightbox-fade 0.2s ease;
}

@keyframes mlt-lightbox-fade {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

.mlt-lightbox__caption {
  margin-top: 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  max-width: 800px;
  font-style: italic;
}

/* ----- Controls (close + prev + next) ----- */
.mlt-lightbox__close,
.mlt-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
  /* Buttons sit above the figure. */
  z-index: 2;
}

.mlt-lightbox__close:hover,
.mlt-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mlt-lightbox__close:focus-visible,
.mlt-lightbox__nav:focus-visible {
  outline: 2px solid var(--mlt-accent);
  outline-offset: 2px;
}

.mlt-lightbox__close {
  top: 16px;
  right: 16px;
  /* Slightly larger × for visual weight. */
  font-size: 32px;
}

.mlt-lightbox__nav--prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.mlt-lightbox__nav--next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.mlt-lightbox__nav--prev:hover {
  transform: translateY(-50%) translateX(-2px);
}

.mlt-lightbox__nav--next:hover {
  transform: translateY(-50%) translateX(2px);
}

/* Hide nav buttons when there's only one image. JS adds .mlt-lightbox--single. */
.mlt-lightbox--single .mlt-lightbox__nav {
  display: none;
}

/* ----- Counter (1 / N) ----- */
.mlt-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--mlt-radius-pill);
  font-size: 13px;
  font-weight: 600;
  z-index: 2;
}

.mlt-lightbox--single .mlt-lightbox__counter {
  display: none;
}

/* =======================================================================
 * RESPONSIVE
 * ======================================================================= */

@media (max-width: 768px) {
  .mlt-gallery__thumbs {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
  }

  .mlt-lightbox__figure {
    padding: 70px 16px 70px;
  }

  .mlt-lightbox__close,
  .mlt-lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .mlt-lightbox__close {
    top: 12px;
    right: 12px;
  }

  .mlt-lightbox__nav--prev {
    left: 8px;
  }

  .mlt-lightbox__nav--next {
    right: 8px;
  }

  .mlt-lightbox__caption {
    font-size: 14px;
  }
}