/* gallery.css — strip controls + lightbox. Logical properties only. */

/* ---------- Strip controls ---------- */

.gallery-controls {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  margin-block-start: .75rem;
  margin-block-end: .25rem;
  flex-wrap: wrap;
}
.gallery-controls[hidden] { display: none; }

.gallery-btn {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: .9rem;
  padding-block: 0;
  border: 1px solid rgba(0, 0, 0, .18);
  background: #fff;
  color: inherit;
  border-radius: 8px;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.gallery-btn:hover:not(:disabled) { background: #f3f3f3; }
.gallery-btn:disabled { opacity: .4; cursor: default; }
.gallery-btn:focus-visible { outline: 2px solid #315c52; outline-offset: 2px; }

.gallery-prev::before { content: "\2039"; }
.gallery-next::before { content: "\203A"; }
[dir="rtl"] .gallery-prev::before { content: "\203A"; }
[dir="rtl"] .gallery-next::before { content: "\2039"; }

.gallery-counter {
  min-inline-size: 5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}

.gallery-dots {
  display: flex;
  gap: .4rem;
  align-items: center;
  justify-content: center;
  margin-block-end: .5rem;
  flex-wrap: wrap;
}
.gallery-dots[hidden] { display: none; }

.gallery-dot {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .4);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.gallery-dot::after {
  content: '';
  position: absolute;
  inset: -17px;
}
.gallery-dot[aria-current="true"] { background: currentColor; }
.gallery-dot:focus-visible { outline: 2px solid #315c52; outline-offset: 2px; }

/* ---------- Lightbox ---------- */

html.lb-open { overflow: hidden; padding-inline-end: var(--lb-sbw, 0); }

.lightbox {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}
.lightbox[hidden] { display: none; }
.lightbox:not([open]):not([role="dialog"]) { display: none; }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .9);
}

.lightbox-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 3.5rem;
  padding-inline: 3.5rem;
  gap: .5rem;
}

.lightbox-img {
  display: block;
  max-inline-size: 100%;
  max-block-size: calc(100dvh - 7rem);
  object-fit: contain;
  background: #000;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-fallback {
  color: #fff;
  text-decoration: underline;
}

.lightbox-close,
.lightbox-btn {
  position: absolute;
  min-inline-size: 44px;
  min-block-size: 44px;
  border: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  padding-inline: .85rem;
  padding-block: 0;
}
.lightbox-close:hover,
.lightbox-btn:hover { background: rgba(0, 0, 0, .75); }
.lightbox-close:focus-visible,
.lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox-close {
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
}
.lightbox-close::before { content: "\00D7"; font-size: 1.9rem; }

.lightbox-btn {
  inset-block-start: 50%;
  transform: translateY(-50%);
}
.lightbox-prev { inset-inline-start: .75rem; }
.lightbox-next { inset-inline-end: .75rem; }
.lightbox-prev::before { content: "\2039"; font-size: 2rem; }
.lightbox-next::before { content: "\203A"; font-size: 2rem; }
[dir="rtl"] .lightbox-prev::before { content: "\203A"; }
[dir="rtl"] .lightbox-next::before { content: "\2039"; }
.lightbox-btn[hidden] { display: none; }

.lightbox-counter {
  position: absolute;
  inset-block-start: .9rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .55);
  padding-inline: .7rem;
  padding-block: .25rem;
  border-radius: 999px;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.lightbox-caption {
  position: absolute;
  inset-block-end: .75rem;
  inset-inline: 1rem;
  margin: 0;
  text-align: center;
  font-size: .9rem;
  color: #fff;
  max-block-size: 4.5em;
  overflow: hidden;
}

@media (max-width: 480px) {
  .lightbox-stage { padding-inline: 2.75rem; padding-block: 3rem; }
  .lightbox-caption { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-btn, .gallery-btn, .lightbox-img { transition: none !important; }
}