/* ==========================================================================
   GLOBAL LIGHTBOX — PREMIUM PHOTO VIEW
   assets/css/lightbox-global.css
========================================================================== */

:root {
  --lb-top-gap: 24px;
  --lb-bottom-gap: 14px;
  --lb-side-gap: 24px;
  --lb-desktop-left-rail: 78px;
  --lb-desktop-right-rail: 104px;
  --lb-desktop-panel-width: 320px;
  --lb-desktop-panel-gap: 20px;

  --lb-thumbs-size: 80px;
  --lb-thumbs-gap: 14px;
  --lb-thumbs-pad-top: 12px;
  --lb-thumbs-pad-bottom: 18px;

  --lb-top-ui-top: 24px;
  --lb-close-right: 24px;
  --lb-counter-right: 76px;

  --lb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lb-viewport-height: var(--lb-real-vh, 100dvh);
  --lb-thumbs-strip-height: calc(
    var(--lb-thumbs-size)
    + var(--lb-thumbs-pad-top)
    + var(--lb-thumbs-pad-bottom)
    + var(--lb-safe-bottom)
  );
  --lb-stage-height: calc(var(--lb-viewport-height) - var(--lb-thumbs-strip-height));

  --lb-backdrop: #040506;
  --lb-panel-bg: #0d1117;
  --lb-panel-border: rgba(255,255,255,.12);
  --lb-panel-shadow: 0 20px 48px rgba(0,0,0,.32);
  --lb-panel-text: #ffffff;
  --lb-panel-text-muted: rgba(255,255,255,.76);
  --lb-panel-text-soft: rgba(255,255,255,.56);
  --lb-meta-bg: rgba(255,255,255,.04);
  --lb-meta-border: rgba(255,255,255,.08);
  --lb-control-bg: #11161d;
  --lb-control-hover-bg: #171d25;
  --lb-control-border: rgba(255,255,255,.20);
  --lb-control-color: #fff;
  --lb-control-icon-filter: brightness(0) saturate(100%) invert(1);
  --lb-control-count-color: #fff;
  --lb-nav-hover-bg: rgba(255,255,255,.12);
  --lb-nav-hover-border: rgba(255,255,255,.28);
}

.lb-root[data-theme-mode="light"] {
  --lb-backdrop: #eef3f9;
  --lb-panel-bg: #ffffff;
  --lb-panel-border: rgba(15,23,42,.10);
  --lb-panel-shadow: 0 20px 48px rgba(15,23,42,.16);
  --lb-panel-text: #15202b;
  --lb-panel-text-muted: rgba(21,32,43,.76);
  --lb-panel-text-soft: rgba(21,32,43,.56);
  --lb-meta-bg: #f6f8fb;
  --lb-meta-border: rgba(15,23,42,.08);
  --lb-control-bg: #f3f7fc;
  --lb-control-hover-bg: #e7eef7;
  --lb-control-border: rgba(15,23,42,.14);
  --lb-control-color: #15202b;
  --lb-control-icon-filter: brightness(0) saturate(100%) invert(13%) sepia(16%) saturate(805%) hue-rotate(174deg) brightness(95%) contrast(88%);
  --lb-control-count-color: #15202b;
  --lb-nav-hover-bg: rgba(21,32,43,.08);
  --lb-nav-hover-border: rgba(15,23,42,.14);
}

.lb-root,
.lb-wrapper,
.lb-stage,
.lb-image-frame {
  overscroll-behavior: contain;
}

.lb-root.is-idle .lb-btn,
.lb-root.is-idle .lb-close,
.lb-root.is-idle .lb-thumbs,
.lb-root.is-idle .lb-counter,
.lb-root.is-idle .lb-actions,
.lb-root.is-idle .lb-info-toggle {
  opacity: 0;
}

.lb-root {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  touch-action: pan-x;
}

.lb-root.is-open {
  display: block;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: var(--lb-backdrop);
}

.lb-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, var(--lb-stage-height)) auto;
  align-content: start;
}

.lb-stage {
  min-height: 0;
  height: var(--lb-stage-height);
  padding: var(--lb-top-gap) var(--lb-side-gap) var(--lb-bottom-gap);
  box-sizing: border-box;
}

.lb-stage-inner {
  width: calc(100vw - var(--lb-desktop-left-rail) - var(--lb-desktop-right-rail));
  max-width: calc(100vw - var(--lb-desktop-left-rail) - var(--lb-desktop-right-rail));
  height: 100%;
  margin: 0 var(--lb-desktop-right-rail) 0 var(--lb-desktop-left-rail);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lb-desktop-panel-width);
  gap: var(--lb-desktop-panel-gap);
  align-items: stretch;
}

.lb-root:not(.is-info-open) .lb-stage-inner {
  grid-template-columns: minmax(0, 1fr);
}

.lb-media-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-image-frame {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lb-image-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity .35s ease, transform .35s ease;
}

.lb-image-frame img.is-visible {
  opacity: 1;
  transform: scale(1);
}

.lb-info-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 24px;
  border: 1px solid var(--lb-panel-border);
  background: var(--lb-panel-bg);
  box-shadow: var(--lb-panel-shadow);
  overflow: hidden;
}

.lb-root:not(.is-info-open) .lb-info-panel,
.lb-root:not(.has-info) .lb-info-panel {
  display: none;
}

.lb-info-scroll {
  height: 100%;
  padding: 18px 18px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
}

.lb-owner-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lb-panel-text);
  text-decoration: none;
}

.lb-owner-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--lb-panel-border);
}

.lb-owner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lb-owner-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-owner-label {
  color: var(--lb-panel-text-soft);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lb-owner-name {
  color: var(--lb-panel-text);
  font-size: 16px;
  font-weight: 700;
}

.lb-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lb-title {
  margin: 0;
  color: var(--lb-panel-text);
  font-size: 14px;
  line-height: 1.24;
}

.lb-description {
  margin: 0;
  color: var(--lb-panel-text-muted);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;
}

.lb-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--lb-meta-bg);
  border: 1px solid var(--lb-meta-border);
}

.lb-meta-label {
  color: var(--lb-panel-text-soft);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lb-meta-value {
  color: var(--lb-panel-text);
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lb-panel-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.lb-panel-actions:empty {
  display: none;
}

.lb-btn {
  position: absolute;
  top: calc(var(--lb-stage-height) / 2);
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.94);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}

.lb-btn:hover {
  transform: translateY(-50%) scale(1.04);
  background: var(--lb-nav-hover-bg);
  border-color: var(--lb-nav-hover-border);
}

.lb-btn-glyph,
.lb-btn > span,
.lb-btn {
  line-height: 1;
}

.lb-prev {
  left: 22px;
}

.lb-next {
  right: 22px;
}

.lb-close {
  position: absolute;
  top: var(--lb-top-ui-top);
  right: var(--lb-close-right);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.94);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  z-index: 7;
  transition: background .2s ease, transform .2s ease;
}

.lb-close:hover {
  background: rgba(255,255,255,.12);
  transform: scale(1.05);
}

.lb-counter {
  position: absolute;
  top: var(--lb-top-ui-top);
  right: var(--lb-counter-right);
  z-index: 7;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 36px;
  transition: opacity .2s ease;
}

.lb-actions,
.lb-info-toggle,
.lb-thumbs {
  transition: opacity .2s ease, transform .2s ease;
}

.lb-actions {
  position: absolute;
  right: 24px;
  bottom: calc(var(--lb-thumbs-strip-height) + 18px);
  z-index: 7;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.lb-actions:empty {
  display: none;
}

.lb-info-toggle {
  position: absolute;
  left: 24px;
  bottom: calc(var(--lb-thumbs-strip-height) + 18px);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(229, 243, 255, .75);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}

.lb-info-toggle:hover,
.lb-info-toggle.is-active {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

.lb-info-toggle[hidden] {
  display: none !important;
}

.lb-thumbs {
  min-height: var(--lb-thumbs-strip-height);
  padding: var(--lb-thumbs-pad-top) 20px calc(var(--lb-thumbs-pad-bottom) + max(var(--lb-safe-bottom), 8px));
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--lb-thumbs-gap);
  overflow: hidden;
}

.lb-thumb {
  width: var(--lb-thumbs-size);
  height: var(--lb-thumbs-size);
  flex: 0 0 auto;
  opacity: .45;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease, transform .2s ease;
}

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

.lb-thumb.is-active {
  opacity: 1;
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px #0a0e17,
    0 0 0 4px rgba(255,255,255,.92);
}

.lb-root.is-clean .lb-thumbs {
  display: none;
}

.lb-panel-actions .interaction-action-button--lb,
.lb-actions .interaction-action-button--lb {
  background: var(--lb-control-bg);
  border-color: var(--lb-control-border);
}

.lb-panel-actions .interaction-action-button--lb:hover,
.lb-actions .interaction-action-button--lb:hover {
  background: var(--lb-control-hover-bg);
}

.lb-panel-actions .interaction-action-button,
.lb-actions .interaction-action-button {
  width: 46px;
  min-width: 46px;
  height: 46px;
}

.lb-panel-actions .interaction-action-button--counted,
.lb-actions .interaction-action-button--counted {
  width: 46px;
  min-width: 46px;
  height: 56px;
  padding: 8px 6px;
  border-radius: 18px;
  flex-direction: column;
  gap: 4px;
}

.lb-panel-actions .interaction-count-badge,
.lb-actions .interaction-count-badge {
  position: static;
  min-width: 0;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  color: var(--lb-control-count-color);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.lb-panel-actions .interaction-icon,
.lb-actions .interaction-icon {
  width: 18px;
  height: 18px;
  filter: var(--lb-control-icon-filter);
}

.lb-panel-actions .interaction-action-button.active,
.lb-actions .interaction-action-button.active {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
}

.lb-panel-actions .interaction-action-button.active .interaction-icon,
.lb-actions .interaction-action-button.active .interaction-icon {
  filter: brightness(0) saturate(100%) invert(1);
}

.lb-panel-actions .interaction-action-button:not(.interaction-action-button--counted),
.lb-actions .interaction-action-button:not(.interaction-action-button--counted) {
  align-self: flex-end;
}

.lb-root[data-theme-mode="light"] .lb-btn,
.lb-root[data-theme-mode="light"] .lb-close,
.lb-root[data-theme-mode="light"] .lb-counter {
  color: #15202b;
}

.lb-root[data-theme-mode="light"] .lb-close:hover {
  background: rgba(21,32,43,.08);
}

.lb-root[data-theme-mode="light"] .lb-thumb.is-active {
  box-shadow:
    0 0 0 2px #eef3f9,
    0 0 0 4px rgba(21,32,43,.75);
}

@media (min-width: 1025px) {
  .lb-actions,
  .lb-info-toggle {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  :root {
    --lb-desktop-left-rail: 68px;
    --lb-desktop-right-rail: 96px;
    --lb-side-gap: 20px;
    --lb-desktop-panel-width: 300px;
  }
}

@media (max-width: 1024px) {
  :root {
    --lb-top-gap: 18px;
    --lb-bottom-gap: 12px;
    --lb-side-gap: 14px;
    --lb-thumbs-size: 64px;
    --lb-thumbs-gap: 10px;
    --lb-thumbs-pad-top: 8px;
    --lb-thumbs-pad-bottom: 12px;
    --lb-top-ui-top: 14px;
    --lb-close-right: 12px;
    --lb-counter-right: 44px;
  }

  .lb-stage {
    padding-top: 52px;
    padding-bottom: 10px;
  }

  .lb-stage-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    display: block;
  }

  .lb-info-panel {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 52px;
    bottom: calc(var(--lb-thumbs-strip-height) + 62px);
    max-height: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease;
    z-index: 7;
  }

  .lb-root.is-info-open .lb-info-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .lb-panel-actions {
    display: none !important;
  }

  .lb-actions {
    right: 14px;
    bottom: calc(var(--lb-thumbs-strip-height) + 10px);
    gap: 8px;
    align-items: flex-end;
  }

  .lb-info-toggle {
    left: 14px;
    bottom: calc(var(--lb-thumbs-strip-height) + 10px);
    display: inline-flex;
  }

  .lb-btn {
    width: 42px;
    height: 42px;
    font-size: 32px;
    line-height: 1;
    border-color: rgba(255,255,255,.58);
    background: rgba(8,10,14,.78);
    top: 50%;
    opacity: 1;
  }

  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }

  .lb-counter {
    font-size: 12px;
  }

  .lb-close {
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: transparent;
    border: none;
  }

  .lb-close:hover {
    background: transparent;
    transform: none;
  }

  .lb-root[data-theme-mode="light"] .lb-btn {
    border-color: rgba(21,32,43,.30);
    background: rgba(255,255,255,.88);
  }
}

@media (max-width: 768px) {
  :root {
    --lb-side-gap: 10px;
    --lb-thumbs-size: 48px;
    --lb-thumbs-gap: 7px;
    --lb-thumbs-pad-top: 5px;
    --lb-thumbs-pad-bottom: 8px;
    --lb-top-ui-top: 12px;
    --lb-close-right: 10px;
    --lb-counter-right: 42px;
  }

  .lb-stage {
    padding-top: 56px;
  }

  .lb-stage-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .lb-media-column {
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
  }

  .lb-image-frame {
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
  }

  .lb-image-frame img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  .lb-info-panel {
    left: 10px;
    right: 10px;
    top: 56px;
    bottom: calc(var(--lb-thumbs-strip-height) + 58px);
    border-radius: 18px;
  }

  .lb-info-scroll {
    padding: 14px 14px 22px;
    gap: 14px;
  }

  .lb-description {
    font-size: 14px;
  }

  .lb-title {
    font-size: 13px;
  }

  .lb-owner-avatar {
    width: 42px;
    height: 42px;
  }

  .lb-info-toggle {
    left: 10px;
    bottom: calc(var(--lb-thumbs-strip-height) + 10px);
    min-width: 104px;
    height: 40px;
    font-size: 12px;
  }

  .lb-actions {
    right: 10px;
    bottom: calc(var(--lb-thumbs-strip-height) + 10px);
    align-items: flex-end;
  }

  .lb-actions .interaction-action-button,
  .lb-panel-actions .interaction-action-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .lb-actions .interaction-action-button--counted,
  .lb-panel-actions .interaction-action-button--counted {
    width: 40px;
    min-width: 40px;
    height: 50px;
    padding: 7px 5px;
    border-radius: 16px;
  }

  .lb-btn {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
}