/*
 * The dialog itself.
 *
 * Every one of the design's template sheets carries this rule -- except
 * contact.css. The lightbox is rendered site-wide, so on Contact it had no
 * rule at all: it fell into the page as an ordinary block and its next and
 * previous arrows and "1 / 1" counter sat in the middle of the banner. It
 * belongs here, in the theme's own sheet, which loads on every page.
 */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: rgba(1, 19, 33, .93);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility .35s;
}

.lightbox.open {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   Gallery lightbox — the browsable version.

   A separate file on purpose: base.css / <page>.css / overrides.css are copied
   from the approved static build, so anything added here would be lost the next
   time they are refreshed. This is theme-only and loads last.

   The dialog itself (backdrop, image scale-in, close button) is already styled
   in base.css; this adds the next/prev controls and the counter, and makes the
   whole thing behave on a phone.
   ========================================================================== */

/* The stage needs to be a positioning context for the controls, and the image
   must not stretch under them. */
.lightbox {
  --lb-gutter: 88px;
}

.lightbox img {
  max-width: min(1024px, calc(100vw - (var(--lb-gutter) * 2)));
}

/* ---------- next / previous ---------- */

.lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(1, 19, 33, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

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

.lightbox .lb-nav:hover,
.lightbox .lb-nav:focus-visible {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  outline: none;
}

.lightbox .lb-nav:focus-visible {
  box-shadow: 0 0 0 3px rgba(77, 151, 210, .45);
}

.lightbox .lb-nav[hidden] { display: none; }

.lightbox .lb-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- counter ---------- */

.lightbox .lb-count {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(1, 19, 33, .55);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .8);
}

.lightbox .lb-count[hidden] { display: none; }

/* ---------- phones and small tablets ----------
   Full-bleed arrows at that size would sit on top of the photo. They move to
   the bottom corners instead, beside the counter, where a thumb reaches them. */
@media (max-width: 760px) {
  .lightbox {
    --lb-gutter: 16px;
    padding: 16px;
  }

  .lightbox img {
    max-height: 74vh;
  }

  .lightbox .lb-nav {
    top: auto;
    bottom: 18px;
    transform: none;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

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

  .lightbox .lb-count { bottom: 32px; }

  .lightbox .lb-close {
    top: 12px;
    right: 14px;
    font-size: 2rem;
  }
}

/* Very short windows: keep the photo clear of the controls. */
@media (max-height: 520px) {
  .lightbox img { max-height: 68vh; }
  .lightbox .lb-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox .lb-nav { transition: none; }
}

/* ---------- article contents rail ----------
   The rail now carries the sub-headings too, so a long article's second level
   needs to read as subordinate rather than as more top-level sections. */
.toc a.sub {
  padding-left: 28px;
  font-size: .63rem;
  letter-spacing: .04em;
  opacity: .85;
}

.toc a.sub::before {
  content: "";
  display: inline-block;
  width: 8px;
  margin-left: -14px;
  margin-right: 6px;
  border-top: 1px solid currentColor;
  vertical-align: middle;
  opacity: .5;
}

@media (max-width: 900px) {
  .toc a.sub { padding-left: 32px; }
  /* The collapsed panel has to fit the longer list. */
  .toc.open { max-height: 900px; }
}