/* ==========================================================================
   Lightbox, and the arrow edge-bands it shares with the carousel

   js/main.js creates the lightbox on every page (main.js:309), including the
   home page, so this file is linked on all five pages. Load it last.
   ========================================================================== */


/* ---- Arrow edge-bands (carousel and lightbox share these) ---- */
/* One edge-band rule for both the in-page carousel and the lightbox.
   The button is a full-height band down each side; the pill you see is drawn
   by ::before and is only decoration. Aiming at a 44px dot is the hard part of
   stepping a carousel, so the target is the whole band -- click anywhere in
   the outer sliver of the picture and it moves that way.
   isolation: isolate keeps the ::before's z-index: -1 inside the button, so
   the pill sits behind the chevron without falling behind the image. */
.carousel-arrow,
.lightbox-arrow {
  position: absolute;
  top: 20%;
  margin-top:auto;
  margin-bottom:auto;
  height:60%;
  width: var(--carousel-edge, 15%);
  min-width: 56px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  font-size: 42px;
  font-weight:bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  z-index: 2;
}
.carousel-arrow::before,
.lightbox-arrow::before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  background: rgba(var(--bg-rgb), 0.92);
  box-shadow: 0 2px 10px rgba(var(--bg-dark-rgb), 0.12);
  z-index: -1;
}
.carousel-arrow:hover::before,
.lightbox-arrow:hover::before { background: #fff; }
.carousel-arrow[data-dir="prev"],
.lightbox-arrow[data-dir="prev"] { left: 0; }
.carousel-arrow[data-dir="next"],
.lightbox-arrow[data-dir="next"] { right: 0; }
/* The lightbox shares the edge-band geometry defined with .carousel-arrow and
   overrides only the palette: a dark pill on the scrim instead of a cream one
   on the page. The three rules below restate selectors from that shared block
   at the same specificity, so they must stay after it. Do not merge them up. */
.lightbox-arrow {
  color: var(--on-dark);
  font-size: 42px;
  font-weight:bold;
}
.lightbox-arrow::before {
  width: 64px;
  height: 64px;
  border-color: rgba(var(--on-dark-rgb), 0.35);
  background: rgba(var(--bg-dark-rgb), 0.55);
  box-shadow: none;
}
.lightbox-arrow:hover::before { background: rgba(var(--bg-dark-rgb), 0.85); }
/* The arrow's hit area is a full-height band, so outlining the button itself
   would draw a tall rectangle down the side of the picture. Ring the pill the
   reader can actually see instead. */
.carousel-arrow:focus-visible,
.lightbox-arrow:focus-visible { outline: none; }
.carousel-arrow:focus-visible::before {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lightbox-arrow:focus-visible::before {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  /* The band keeps its width; only the pill inside it shrinks. */
  .carousel-arrow { font-size: 20px; }
  .carousel-arrow::before { width: 36px; height: 36px; }
  .lightbox-arrow { font-size: 22px; }
  .lightbox-arrow::before { width: 40px; height: 40px; }
  .carousel-arrow { min-width: 44px; }
}


/* ---- Lightbox overlay ---- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--bg-dark-rgb), 0.9);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px 48px;
}
.lightbox.single { padding: 40px; }
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 90vh !important;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: var(--on-dark);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.lightbox.single .lightbox-arrow { display: none; }
.lightbox-close:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .lightbox { padding: 20px 56px; }
  .lightbox.single { padding: 20px; }
}