/* ==========================================================================
   Base + header
   --------------------------------------------------------------------------
   These custom properties are the main things to edit to match your site's
   real stylesheet exactly (font stack, colors, spacing). Pull the values
   from your site's existing CSS and drop them in here.
   ========================================================================== */

:root {
  --gallery-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gallery-text: #111;
  --gallery-muted: #767676;
  --gallery-bg: #fff;
  --gallery-max-width: 900px;      /* container width — matches the archive page */
  --gallery-side-padding: 1.5rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--gallery-font);
  color: var(--gallery-text);
  background: var(--gallery-bg);
}

.site-header {
  max-width: var(--gallery-max-width);
  margin: 0 auto;
  padding: 1.5rem var(--gallery-side-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-header__title {
  font-weight: 600;
  text-decoration: none;
  color: var(--gallery-text);
}

.site-header__nav {
  display: flex;
  gap: 1.25rem;
}

.site-header__nav a {
  color: var(--gallery-text);
  text-decoration: none;
}

.site-header__nav a:hover {
  text-decoration: underline;
}

/* Gallery -------------------------------------------------------------- */

.gallery-page {
  max-width: var(--gallery-max-width);
  margin: 0 auto;
  padding: 0 var(--gallery-side-padding) 4rem;
}

.gallery-page__title {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.gallery-page__description {
  margin: 0 0 2rem;
  color: var(--gallery-muted);
  max-width: 60ch;
}

.gallery-empty {
  color: var(--gallery-muted);
}

/* Images stack full-width, one per row, at their natural aspect ratio —
   matching how a single photo fills the container on an individual post
   page on jarrettfuller.photo. */
.gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.15s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  opacity: 0.9;
}

.gallery-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Lightbox ------------------------------------------------------------
   White, semi-transparent backdrop — the page stays faintly visible
   behind the enlarged image rather than going to black. */

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
}

.lightbox.is-active {
  display: flex;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 92vw;
  max-height: 90vh;
  margin: 0;
}

.lightbox__image {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  user-select: none;
}

.lightbox__caption {
  color: var(--gallery-muted);
  font-size: 0.85rem;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: 0;
  color: var(--gallery-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--gallery-text);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 1rem;
  opacity: 0.7;
}

.lightbox__nav:hover {
  opacity: 1;
}

.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }

.lightbox__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gallery-muted);
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  .lightbox__nav { font-size: 2rem; padding: 0.5rem 0.5rem; }
  .lightbox__close { font-size: 1.75rem; }
  .site-header { padding: 1.25rem 1rem; }
  .gallery-page { padding: 0 1rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img { transition: none; }
}