/*
 * The photo viewer.
 *
 * Deliberately outside .dea-mod: the overlay is appended to <body>, so it
 * cannot inherit the module tokens and carries its own. The values match the
 * site's own: navy scrim, Mulish for the counter, the card corner on the photo.
 */
.dea-lb {
  --lb-ink: #f9f7f2;
  position: fixed; inset: 0; z-index: 100000;
  /* minmax(0, 1fr), not 1fr: an implicit row is minmax(auto, 1fr), whose auto
     minimum is the content, so the panel grew past the viewport and the photo
     had no height to be capped against. */
  display: grid; grid-template-rows: minmax(0, 1fr);
  opacity: 0;
  transition: opacity .28s cubic-bezier(.16, 1, .3, 1);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dea-lb.is-open { opacity: 1; }
.dea-lb[hidden] { display: none; }

html.dea-lb-open { overflow: hidden; }

/* Solid, not a 93% wash: the header pill and the stomp button read through a
   translucent scrim and looked like they were sitting on top of the photo. */
.dea-lb__scrim { position: absolute; inset: 0; background: #120b1c; border: 0; }

.dea-lb__panel {
  position: relative;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  padding: 0 0 18px;
}

/* ---------------- bar ---------------- */
.dea-lb__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px;
  color: var(--lb-ink);
}
.dea-lb__count {
  margin: 0;
  font-family: Mulish, Inter, system-ui, sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.dea-lb__close {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid rgba(249, 247, 242, .4); border-radius: 50%;
  background: transparent; color: var(--lb-ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.dea-lb__close:hover { background: rgba(249, 247, 242, .14); border-color: var(--lb-ink); }

/* ---------------- stage ---------------- */
.dea-lb__stage {
  position: relative;
  /* The implicit row would be auto, i.e. as tall as the photo, so the figure's
     height: 100% resolved against the photo rather than the space available. */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch; gap: 14px;
  padding: 0 18px;
  min-height: 0;
  touch-action: pan-y;
}
/* Flex, not grid: max-height on a grid item resolves against its grid area,
   and an auto-sized row is as tall as the photo, so the cap never bit. In a
   flex container with a definite height it resolves against that height. */
.dea-lb__figure {
  margin: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.dea-lb__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: 18px;
  object-fit: contain;
  /* A photo that has not decoded yet should not flash the scrim through. */
  background: rgba(249, 247, 242, .06);
}
.dea-lb__arrow {
  display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0;
  border: 1.5px solid rgba(249, 247, 242, .4); border-radius: 50%;
  background: rgba(15, 8, 22, .45); color: var(--lb-ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dea-lb__arrow:hover { background: var(--lb-ink); color: #1b1028; border-color: var(--lb-ink); transform: scale(1.06); }
.dea-lb__arrow[hidden] { display: none; }

/* ---------------- thumbnails ---------------- */
.dea-lb__strip {
  display: flex; gap: 10px;
  padding: 16px 22px 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.dea-lb__strip::-webkit-scrollbar { display: none; }
.dea-lb__strip[hidden] { display: none; }

.dea-lb__thumb {
  flex: 0 0 auto;
  width: 84px; height: 62px; padding: 0;
  border: 0; border-radius: 10px; overflow: hidden;
  background: rgba(249, 247, 242, .08);
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s ease, outline-color .2s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.dea-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dea-lb__thumb:hover { opacity: .85; }
.dea-lb__thumb.is-on { opacity: 1; outline-color: #f58a3e; }

.dea-lb :focus-visible { outline: 3px solid #f58a3e; outline-offset: 3px; }

@media (max-width: 700px) {
  .dea-lb__stage { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
  .dea-lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
  .dea-lb__arrow:hover { transform: translateY(-50%) scale(1.06); }
  .dea-lb__arrow--prev { left: 10px; }
  .dea-lb__arrow--next { right: 10px; }
  .dea-lb__thumb { width: 64px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .dea-lb, .dea-lb__arrow, .dea-lb__thumb, .dea-lb__close { transition: none; }
  .dea-lb__strip { scroll-behavior: auto; }
}