/* ============================================================
   BURDS NERDS — bn-photography.css
   Photography portfolio page: masonry grid, empty state,
   closing CTA, and PhotoSwipe v5 lightbox skin.

   Loaded after bn-brand.css and bn-pages.css. Relies on the
   existing var(--bn-*) tokens and the .page-hero structure
   defined in bn-pages.css.
   ============================================================ */


/* ── MASONRY GRID ────────────────────────────────────────────
   CSS multi-column layout. No JS required, no library, no
   image-load reflow risk. Items flow column-by-column (top to
   bottom of column 1, then top of column 2, etc.) so the NN-
   prefix on filenames maps to a vertical reading order.

   If we want strict row-major ordering later, switch to
   grid-template-rows: masonry once Firefox-only support reaches
   the other engines, or replace with a small JS row-span pass.
   ────────────────────────────────────────────────────────── */

.photo-grid-section {
  background: var(--bn-bg);
  padding: 24px 24px 64px;
}

.photo-grid {
  max-width: 1400px;
  margin: 0 auto;
  column-count: 3;
  column-gap: 16px;
  /* Hint to the layout engine that columns should fill from left
     before flowing to the next, which tightens the bottom of the
     grid when totals don't divide evenly. */
  column-fill: balance;
}

@media (max-width: 900px) {
  .photo-grid { column-count: 2; column-gap: 12px; }
  .photo-grid-section { padding: 20px 16px 48px; }
}

@media (max-width: 600px) {
  .photo-grid { column-count: 1; }
  .photo-grid-section { padding: 16px 12px 40px; }
}


/* ── CLICK-TO-ENLARGE HINT ─────────────────────────────────────
   Small, muted line above the grid. Tells visitors a tap opens
   the lightbox. Sits above the masonry on every viewport size.
   ────────────────────────────────────────────────────────── */

.photo-grid__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--bn-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bn-text-muted);
  text-align: center;
  margin: 0 auto 24px;
  /* Allow the icon and text to wrap together on narrow screens
     without breaking the line layout. */
  flex-wrap: wrap;
}

.photo-grid__hint svg {
  flex-shrink: 0;
  /* Track the surrounding text colour but pull it back a touch so
     the icon reads as visual hint, not as a button. */
  color: var(--bn-acc-text);
  opacity: 0.85;
}


/* ── GRID TILE ────────────────────────────────────────────── */

.photo-grid__item {
  display: block;
  position: relative;
  margin-bottom: 16px;
  /* break-inside is the magic that keeps a tile from being split
     across columns — without it, tall images would get sliced. */
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--bn-radius-sm);
  background: var(--bn-surf);
  /* aspect-ratio is set inline per tile from server-read dimensions,
     reserving exact space so lazy-loaded thumbs don't shift layout. */
  cursor: zoom-in;
  /* Subtle pop on hover — matches the rest of the site's restraint. */
  transition: transform var(--bn-transition), box-shadow var(--bn-transition);
}

@media (max-width: 600px) {
  .photo-grid__item { margin-bottom: 12px; }
}

.photo-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No idle filter — images sit at full brightness, so the hover state
     reads as a clear "wake up" rather than a return to normal. */
  transition: filter var(--bn-transition), transform 400ms var(--bn-ease);
}

.photo-grid__item:hover {
  transform: translateY(-2px);
  /* Gold ring + lift shadow stacked. The ring is a 2 px box-shadow,
     not a real border, so toggling it doesn't shift layout. The
     ring stays inside the existing border-radius automatically. */
  box-shadow:
    0 0 0 2px var(--bn-acc),
    0 12px 32px rgba(0,0,0,0.18);
}
.photo-grid__item:hover img {
  /* Subtle brightness + saturation lift without going blown-out. */
  filter: brightness(1.05) saturate(1.05);
  transform: scale(1.02);
}

[data-theme="dark"] .photo-grid__item:hover {
  box-shadow:
    0 0 0 2px var(--bn-acc),
    0 12px 32px rgba(0,0,0,0.5);
}

/* Keyboard focus ring — accent-gold, AA-contrast in both themes. */
.photo-grid__item:focus-visible {
  outline: 2px solid var(--bn-acc);
  outline-offset: 4px;
}

/* Reduced motion — no movement or scale transitions */
@media (prefers-reduced-motion: reduce) {
  .photo-grid__item,
  .photo-grid__item img {
    transition: none;
  }
  .photo-grid__item:hover {
    transform: none;
  }
  .photo-grid__item:hover img {
    transform: none;
  }
}


/* ── EMPTY STATE ─────────────────────────────────────────────
   Renders when /assets/photography/large/ has no .webp files
   yet. Hidden in production once images are uploaded.
   ────────────────────────────────────────────────────────── */

.photo-grid-section--empty { padding: 80px 24px 96px; }

.photo-grid-empty {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--bn-bdr-strong);
  border-radius: var(--bn-radius-lg);
}

.photo-grid-empty__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bn-acc-text);
  margin-bottom: 12px;
}

.photo-grid-empty__body {
  font-size: 16px;
  color: var(--bn-text-muted);
  line-height: 1.6;
}

.photo-grid-empty__body a { color: var(--bn-acc-text); }


/* ── CLOSING CTA ─────────────────────────────────────────────
   Subdued rule + line + ghost link. Mirrors the footer of
   other inner pages — never a hard sell on a portfolio.
   ────────────────────────────────────────────────────────── */

.photo-cta {
  background: var(--bn-bg);
  border-top: 1px solid var(--bn-bdr);
  padding: 64px 24px 96px;
}

.photo-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.photo-cta__inner .rule {
  margin: 0 auto 24px;
}

.photo-cta__body {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--bn-text);
  margin-bottom: 24px;
  line-height: 1.6;
}


/* ============================================================
   PHOTOSWIPE V5 SKIN
   We keep the library defaults (transitions, gestures, zoom,
   keyboard), and override:
     1. Hide the default top toolbar's prev/next/zoom (we keep
        the close button reachable via a custom bottom-bar.
     2. Hide the edge-hugging arrow buttons.
     3. Add our own bottom toolbar with prev / counter / next,
        fixed to the viewport bottom and respecting iOS safe area.
     4. Force a near-black backdrop in both themes (images read
        better against dark, standard lightbox practice).
   ============================================================ */

/* Backdrop — near-black, slightly above pure black so the image
   edges still register as image vs. void in low-key shots. */
.pswp__bg {
  background: #0a0a0a;
}

/* Hide the default top toolbar entirely — close lives in our
   bottom bar, zoom is a pinch/double-tap gesture, no other
   buttons are needed. */
.pswp__top-bar {
  display: none !important;
}

/* Hide the default vertical-center edge arrows. We replace
   them with stationary buttons in the bottom bar. */
.pswp__button--arrow--prev,
.pswp__button--arrow--next,
.pswp__button--arrow {
  display: none !important;
}


/* ── CUSTOM BOTTOM BAR ─────────────────────────────────────── */

/* The wrapper element registered in bn-photography.js.
   PhotoSwipe inserts it as a child of .pswp via ui.registerElement. */
.pswp__bn-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Respect iPhone home indicator and any browser bottom UI */
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  /* Soft top-to-bottom dim so controls read against any image
     content underneath without a hard chrome rectangle. */
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 100%);
  pointer-events: none; /* let the buttons claim their own hit-area */
}

.pswp__bn-bar > * {
  pointer-events: auto;
}

/* Prev / Next / Close buttons — circular, restrained, 48×48
   minimum touch target on mobile. */
.pswp__bn-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #FAFAF7;
  width: 48px;
  height: 48px;
  border-radius: var(--bn-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  /* Backdrop blur lets the button float over the photograph
     without obscuring composition. Falls back gracefully. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pswp__bn-btn:hover,
.pswp__bn-btn:focus-visible {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.3);
}

.pswp__bn-btn:active {
  transform: scale(0.94);
}

.pswp__bn-btn:focus-visible {
  outline: 2px solid var(--bn-acc);
  outline-offset: 2px;
}

.pswp__bn-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.pswp__bn-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Counter pill — center of bar, sits between prev and next. */
.pswp__bn-counter {
  font-family: var(--bn-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #FAFAF7;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0 14px;
  height: 36px;
  min-width: 72px;
  border-radius: var(--bn-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  /* Tabular nums keep "12 / 28" aligned as the index changes
     so the bar doesn't jitter between digits. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
}

/* Close button — top-right corner. Separate from the bottom
   bar so dismissing doesn't conflict with navigation. */
.pswp__bn-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  z-index: 10;
}

/* Mobile — slightly smaller buttons, tighter gap so the bar
   doesn't wrap on narrow phones. */
@media (max-width: 480px) {
  .pswp__bn-bar { gap: 6px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .pswp__bn-btn { width: 44px; height: 44px; }
  .pswp__bn-counter { height: 32px; min-width: 64px; font-size: 12px; padding: 0 12px; }
}

/* Reduced motion — no scale on press */
@media (prefers-reduced-motion: reduce) {
  .pswp__bn-btn { transition: none; }
  .pswp__bn-btn:active { transform: none; }
}