/* LAF 2027 gallery enhancement (progressive). Remove the `laf-gallery`
   enqueue in functions.php to revert. Tokens come from light-2027.css. */

/* Original slider is hidden only after laf-gallery.js has built the replacement. */
.wpb_gallery[data-laf-gallery="done"] .flexslider { display: none !important; }

.laf-gallery { margin: 0 0 1.2em; max-width: 100%; }
.laf-gallery * { box-sizing: border-box; }

.laf-gallery__figure { margin: 0; }
.laf-gallery__stage {
  display: block; position: relative; width: 100%; padding: 0; margin: 0; cursor: zoom-in;
  aspect-ratio: 3 / 2; max-height: 75vh;
  background: radial-gradient(120% 100% at 50% 0%, var(--laf-indigo-2, #1d1150), var(--laf-ink, #0b021d));
  border: 1px solid rgba(0,218,230,.6); border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(137,0,236,.55), 0 0 22px rgba(0,218,230,.22), inset 0 0 18px rgba(0,0,0,.45);
  line-height: 0; -webkit-appearance: none; appearance: none;
}
.laf-gallery .laf-gallery__stage img, .row .col .laf-gallery__stage img {
  /* Absolute fill: % height doesn't resolve inside an aspect-ratio <button>, which let tall images overflow and get clipped. */
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; margin: 0; border-radius: 0;
}
.laf-gallery__stage:hover { box-shadow: 0 0 0 1px rgba(137,0,236,.7), 0 0 28px rgba(0,218,230,.4), inset 0 0 18px rgba(0,0,0,.45); }
.laf-gallery__stage:focus-visible, .laf-gallery__thumb:focus-visible, .laf-lb button:focus-visible {
  outline: 3px solid var(--laf-yellow, #ffdf05); outline-offset: 3px;
}
.laf-gallery__caption {
  margin: .6em 0 0; min-height: 1.5em; font-size: .9em; line-height: 1.4;
  color: var(--laf-text-muted, #d3c9f0); text-align: left;
}
.laf-gallery__thumbs {
  display: flex; gap: 8px; margin-top: 10px; padding: 4px 4px 8px; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--laf-purple, #8900ec) transparent;
}
.laf-gallery__thumb {
  flex: 0 0 auto; width: 84px; height: 64px; padding: 0; margin: 0; cursor: pointer;
  background: var(--laf-ink, #0b021d); border: 2px solid rgba(201,160,255,.35); border-radius: 6px;
  overflow: hidden; opacity: .75; scroll-snap-align: center; line-height: 0;
  -webkit-appearance: none; appearance: none;
}
.laf-gallery .laf-gallery__thumb img, .row .col .laf-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.laf-gallery__thumb:hover { opacity: 1; }
.laf-gallery__thumb[aria-current="true"] {
  opacity: 1; border-color: var(--laf-cyan, #00dae6);
  box-shadow: 0 0 8px rgba(0,218,230,.8), 0 0 16px rgba(0,218,230,.4);
}
@media (max-width: 690px) {
  .laf-gallery__stage { aspect-ratio: 4 / 3; }
  .laf-gallery__thumb { width: 72px; height: 56px; }
}

/* Lightbox */
.laf-lb {
  position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column;
  background: rgba(11,2,29,.985); color: var(--laf-text, #f6f2ff);
}
.laf-lb[hidden] { display: none; }
.laf-lb__img {
  flex: 1 1 auto; min-height: 0; width: 100%; padding: 56px 64px 8px; display: flex;
  align-items: center; justify-content: center; touch-action: pan-y pinch-zoom;
}
.laf-lb__img img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; }
.laf-lb__bar { flex: 0 0 auto; padding: 8px 64px 18px; text-align: center; }
.laf-lb__caption { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--laf-text, #f6f2ff); min-height: 1.4em; }
.laf-lb__count { margin: 4px 0 0; font-size: .85rem; color: var(--laf-text-muted, #d3c9f0); }
.laf-lb button {
  position: absolute; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--laf-indigo, #140a3a); color: var(--laf-text, #f6f2ff); font-size: 22px; line-height: 1;
  border: 2px solid var(--laf-cyan, #00dae6); box-shadow: 0 0 10px rgba(0,218,230,.5);
  display: flex; align-items: center; justify-content: center;
}
.laf-lb button:hover { background: var(--laf-cyan, #00dae6); color: var(--laf-ink, #0b021d); }
.laf-lb__close { top: 10px; right: 12px; }
.laf-lb__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.laf-lb__next { right: 10px; top: 50%; transform: translateY(-50%); }
.laf-lb[data-single="1"] .laf-lb__prev, .laf-lb[data-single="1"] .laf-lb__next { display: none; }
@media (max-width: 690px) {
  .laf-lb__img { padding: 56px 8px 8px; }
  .laf-lb__bar { padding: 8px 12px 16px; }
  .laf-lb__prev, .laf-lb__next { top: auto; bottom: 10px; transform: none; }
  .laf-lb__prev { left: 10px; } .laf-lb__next { right: 10px; }
}
body.laf-lb-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .laf-gallery__stage img.laf-fade, .laf-lb__img img.laf-fade { animation: laf-g-fade .25s ease-out; }
  .laf-gallery__thumb, .laf-gallery__stage { transition: opacity .15s, box-shadow .15s; }
}
@keyframes laf-g-fade { from { opacity: 0; } to { opacity: 1; } }

/* Reserve the enhanced gallery's box before first paint (html[data-laf-js] is set in <head>;
   without it, or if the build fails, the original slider shows as before). */
html[data-laf-js] .main-content .wpb_gallery:not([data-laf-gallery="done"]) .flexslider {
  visibility: hidden; overflow: hidden; height: auto; box-sizing: content-box;
  aspect-ratio: 3 / 2; padding-bottom: 118px;
}
@media (max-width: 690px) {
  html[data-laf-js] .main-content .wpb_gallery:not([data-laf-gallery="done"]) .flexslider { aspect-ratio: 4 / 3; padding-bottom: 138px; }
  .laf-gallery__caption { min-height: 2.8em; }
}