/* Gallery styling for the database-backed demo page on edge.
 *
 * This lives in a stylesheet rather than in the page because the page is
 * content and this is presentation. On a real site it would be theme assets;
 * edge already has its own theme and installing another one to demonstrate a
 * data source would be the wrong trade. One file, editable, no inline style
 * attributes anywhere.
 */

.dbg-intro { max-width: 40rem; }
.dbg-intro code { font-size: .92em; }

.dbg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2.4rem 1.6rem;
  margin: 2rem 0 1rem;
}

.dbg-work { margin: 0; }

/* Uniform cells, picture CONTAINED. The set deliberately mixes portrait,
   landscape and square; left to their own heights the rows go ragged. */
.dbg-work a {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  text-decoration: none;
  background: rgba(0, 0, 0, .04);
  transition: opacity .25s ease;
}
.dbg-work a:hover { opacity: .82; }
.dbg-work img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

.dbg-work figcaption { margin-top: .6rem; font-size: .82rem; line-height: 1.5; }
.dbg-work figcaption b { display: block; font-weight: 600; }
.dbg-work figcaption span { opacity: .72; }

/* Lightbox: CSS :target only, so it needs no script. Controls are fixed to the
   VIEWPORT, never to the picture - an image box sized per aspect ratio moves
   its controls between works and puts them on the artwork. */
.dbg-lb {
  display: none;
  position: fixed; inset: 0; z-index: 900;
  padding: 4.5rem 6rem 5.5rem;
  background: rgba(18, 18, 20, .96);
  overflow: auto;
}
.dbg-lb:target { display: flex; }
.dbg-lb-back { position: absolute; inset: 0; z-index: 0; cursor: zoom-out; }
.dbg-lb figure {
  position: relative; z-index: 1; margin: auto; max-width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.dbg-lb-frame { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.dbg-lb img { display: block; height: 68vh; width: auto; max-width: 100%; }
.dbg-lb figcaption {
  margin: 1rem auto 0; max-width: 38rem; text-align: center;
  font-size: .85rem; line-height: 1.6; color: #d8d6d4;
}
.dbg-lb figcaption b { display: block; color: #fff; font-size: .95rem; }

/* Raised specificity on purpose: the host theme styles links inside content,
   and a lightbox control that inherits a page link colour looks like a mistake.
   Scoping through .dbg-lb wins without reaching for !important. */
.dbg-lb-close, .dbg-lb-prev, .dbg-lb-next, .dbg-lb-index { position: fixed; z-index: 3; }
.dbg-lb a.dbg-lb-close, .dbg-lb a.dbg-lb-prev, .dbg-lb a.dbg-lb-next {
  color: #fff; text-decoration: none; border: 0; box-shadow: none;
}
.dbg-lb-close {
  top: 1rem; right: 1.2rem; padding: .5rem .85rem;
  font-size: .75rem; letter-spacing: .1em; text-transform: lowercase;
  text-decoration: none; color: #fff; background: rgba(255, 255, 255, .14);
}
.dbg-lb-index {
  top: 1.35rem; left: 1.4rem; font-size: .74rem; letter-spacing: .12em;
  color: #b4b1ae; font-variant-numeric: tabular-nums;
}
.dbg-lb-prev, .dbg-lb-next {
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  text-decoration: none; font-size: 1.4rem; line-height: 1;
}
.dbg-lb-prev { left: 1.25rem; }
.dbg-lb-next { right: 1.25rem; }
.dbg-lb-prev::before { content: '\2190'; }
.dbg-lb-next::before { content: '\2192'; }
.dbg-lb-prev:hover, .dbg-lb-next:hover { background: rgba(255, 255, 255, .26); }
.dbg-lb-prev span, .dbg-lb-next span {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 46rem) {
  .dbg-lb { padding: 3.4rem .8rem 5.2rem; }
  .dbg-lb img { height: 58vh; }
  .dbg-lb-prev, .dbg-lb-next { top: auto; bottom: 1rem; transform: none; width: 2.8rem; height: 2.8rem; }
  .dbg-lb-index { top: auto; bottom: 1.8rem; left: 50%; transform: translateX(-50%); }
}