/* V40 — FIXED LIGHTBOX THUMBNAIL TRAY GEOMETRY

   Purpose:
   eliminate continuous flex/repacking while the browser is dragged.

   The Lightbox thumbnail size, gaps and tray width remain fixed inside each
   breakpoint range. Only a discrete breakpoint change can alter the tray.

   Desktop thumb: 78 x 64, gap 8
   Mobile thumb: 66 x 54, gap 6
   Arrow columns remain 44px with 8px outer grid gaps.
*/

/* DESKTOP / LARGE: 8 complete thumbnails */
@media (min-width: 900px) {
  .dl-lightbox-thumb-nav {
    width: 784px !important; /* 44 + 8 + 680 + 8 + 44 */
    max-width: 784px !important;
    grid-template-columns: 44px 680px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 680px !important;
    max-width: 680px !important;
    min-width: 680px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumb {
    width: 78px !important;
    height: 64px !important;
  }
}

/* MEDIUM: 7 complete desktop thumbnails */
@media (min-width: 800px) and (max-width: 899px) {
  .dl-lightbox-thumb-nav {
    width: 698px !important;
    max-width: 698px !important;
    grid-template-columns: 44px 594px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 594px !important;
    max-width: 594px !important;
    min-width: 594px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumb {
    width: 78px !important;
    height: 64px !important;
  }
}

/* TABLET: 6 complete desktop thumbnails */
@media (min-width: 701px) and (max-width: 799px) {
  .dl-lightbox-thumb-nav {
    width: 612px !important;
    max-width: 612px !important;
    grid-template-columns: 44px 508px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 508px !important;
    max-width: 508px !important;
    min-width: 508px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumb {
    width: 78px !important;
    height: 64px !important;
  }
}

/* MOBILE LARGE: 6 complete mobile thumbnails */
@media (min-width: 600px) and (max-width: 700px) {
  .dl-lightbox-thumb-nav {
    width: 514px !important;
    max-width: 514px !important;
    grid-template-columns: 44px 410px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 410px !important;
    max-width: 410px !important;
    min-width: 410px !important;
    gap: 6px !important;
  }

  .dl-lightbox-thumb {
    width: 66px !important;
    height: 54px !important;
  }
}

/* MOBILE MEDIUM: 5 complete mobile thumbnails */
@media (min-width: 520px) and (max-width: 599px) {
  .dl-lightbox-thumb-nav {
    width: 442px !important;
    max-width: 442px !important;
    grid-template-columns: 44px 338px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 338px !important;
    max-width: 338px !important;
    min-width: 338px !important;
    gap: 6px !important;
  }

  .dl-lightbox-thumb {
    width: 66px !important;
    height: 54px !important;
  }
}

/* MOBILE SMALL: 4 complete mobile thumbnails */
@media (min-width: 440px) and (max-width: 519px) {
  .dl-lightbox-thumb-nav {
    width: 370px !important;
    max-width: 370px !important;
    grid-template-columns: 44px 266px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 266px !important;
    max-width: 266px !important;
    min-width: 266px !important;
    gap: 6px !important;
  }

  .dl-lightbox-thumb {
    width: 66px !important;
    height: 54px !important;
  }
}

/* NARROW: 3 complete mobile thumbnails */
@media (max-width: 439px) {
  .dl-lightbox-thumb-nav {
    width: 298px !important;
    max-width: 298px !important;
    grid-template-columns: 44px 194px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 194px !important;
    max-width: 194px !important;
    min-width: 194px !important;
    gap: 6px !important;
  }

  .dl-lightbox-thumb {
    width: 66px !important;
    height: 54px !important;
  }
}

/* Prevent flex geometry from overriding the fixed tray inside each range. */
.dl-lightbox-thumb-nav {
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.dl-lightbox-thumbs {
  box-sizing: border-box !important;
}


/* V48 — LIGHTBOX ACTIVE THUMBNAIL STATE FIX
   Intended visual logic:
   - non-selected thumbnails = normal/full brightness
   - selected/current thumbnail = darkened
   No geometry, sizing, scrolling or Lightbox transition changes. */

.dl-lightbox-thumb {
  opacity: 1 !important;
  filter: none !important;
}

.dl-lightbox-thumb img {
  opacity: 1 !important;
  filter: none !important;
}

.dl-lightbox-thumb.active,
.dl-lightbox-thumb.is-active,
.dl-lightbox-thumb[aria-current="true"] {
  opacity: 1 !important;
  filter: brightness(0.58) !important;
}

.dl-lightbox-thumb.active img,
.dl-lightbox-thumb.is-active img,
.dl-lightbox-thumb[aria-current="true"] img {
  opacity: 1 !important;
  filter: brightness(0.58) !important;
}


/* V50 — LIGHTBOX ACTIVE THUMBNAIL CONSISTENCY
   Match the normal-page treatment exactly:
   parent remains at normal brightness; only the selected image is darkened once. */

.dl-lightbox-thumb.active,
.dl-lightbox-thumb.is-active,
.dl-lightbox-thumb[aria-current="true"] {
  opacity: 1 !important;
  filter: none !important;
}

.dl-lightbox-thumb.active img,
.dl-lightbox-thumb.is-active img,
.dl-lightbox-thumb[aria-current="true"] img {
  opacity: 1 !important;
  filter: brightness(0.58) !important;
}

/* V50 — PORTRAIT PHONE LIGHTBOX
   Show 4 complete thumbnails instead of 3 on narrow portrait phones.
   Thumb size/gap remain the approved mobile Lightbox values. */
@media (orientation: portrait) and (max-width: 439px) {
  .dl-lightbox-thumb-nav {
    width: 386px !important;       /* 44 + 8 + 282 + 8 + 44 */
    max-width: calc(100vw - 4px) !important;
    grid-template-columns: 44px 282px 44px !important;
    gap: 8px !important;
  }

  .dl-lightbox-thumbs {
    width: 282px !important;       /* 4*66 + 3*6 */
    max-width: 282px !important;
    min-width: 282px !important;
    gap: 6px !important;
  }

  .dl-lightbox-thumb {
    width: 66px !important;
    height: 54px !important;
  }
}


/* V51 — REMOVE GOLD SELECTED/FOCUS OUTLINE FROM LIGHTBOX THUMBNAILS
   Keep selected thumbnail darkening exactly as V50.
   Remove only border/outline/box-shadow visual rings. */

.dl-lightbox-thumb,
.dl-lightbox-thumb:focus,
.dl-lightbox-thumb:focus-visible,
.dl-lightbox-thumb.active,
.dl-lightbox-thumb.is-active,
.dl-lightbox-thumb[aria-current="true"] {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.dl-lightbox-thumb img,
.dl-lightbox-thumb:focus img,
.dl-lightbox-thumb:focus-visible img,
.dl-lightbox-thumb.active img,
.dl-lightbox-thumb.is-active img,
.dl-lightbox-thumb[aria-current="true"] img {
  outline: none !important;
  outline-offset: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}