/* ===== Misc / Photography page =====
   Always dark — the photos are night shots and set the mood. */

body.misc-page {
  background: #0b0b0c;
  color: #d6d2cd;
}

/* ----- Hero ----- */
.misc-hero {
  position: relative;
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
  padding: 9rem 2rem 3.25rem;
  overflow: hidden;
}

.misc-hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: url('../img/photography/fireworks/large/DSC_2882.jpg') center 35% / cover no-repeat;
  transform: scale(1.02);
  animation: heroDrift 24s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .misc-hero-bg { animation: none; }
}

.misc-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(11,11,12,0.55) 0%,
      rgba(11,11,12,0.05) 35%,
      rgba(11,11,12,0.35) 68%,
      #0b0b0c 100%);
}

.misc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.misc-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--princeton-orange-light);
  margin-bottom: 0.9rem;
}

.misc-kicker a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.misc-kicker a:hover { color: var(--princeton-orange-light); }

.misc-kicker .sep { margin: 0 0.5em; color: rgba(255,255,255,0.3); }

.misc-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 1rem;
}

.misc-hero h1 strong {
  font-weight: 600;
  background: linear-gradient(100deg, var(--princeton-orange) 0%, var(--princeton-orange-light) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--princeton-orange);
}

.misc-sub {
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

/* ----- Main container ----- */
.misc-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

/* ----- Collection header ----- */
.collection { margin-top: 1.5rem; }

.collection-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.collection-head h2 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f5f0eb;
  margin: 0 0 0.45rem;
}

.collection-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

.collection-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}

.collection-meta i { color: var(--princeton-orange); font-size: 0.85em; }

.collection-hint {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}

.collection-hint i { margin-right: 0.4em; color: var(--princeton-orange); }

/* ----- Gallery (justified rows, built by gallery.js) ----- */
.photo-gallery { min-height: 200px; }

.photo-row { display: flex; }

/* Full rows grow to the container edges; the sparse last row keeps its size */
.photo-row:not(.photo-row--last) .photo-item { flex: 1 1 auto; }
.photo-row--last .photo-item { flex: 0 0 auto; }

.photo-item {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  min-width: 0;
  background: #161617;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease,
              opacity 0.6s ease;
}

.photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

.photo-item::after {
  content: '\2922';
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(11,11,12,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 9px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .photo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  }

  .photo-item:hover img {
    transform: scale(1.045);
    opacity: 0.92;
  }

  .photo-item:hover::after { opacity: 1; }
}

/* reveal-on-scroll */
.photo-item.pending-reveal {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  .photo-item.pending-reveal { opacity: 1; transform: none; }
}

/* ----- Lightbox ----- */
.lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* fallback for browsers without `inset` */
  inset: 0;
  z-index: 2000;
  background: rgba(8,8,8,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.28s ease;
}

.lightbox[hidden] { display: none; }

.lightbox.lb-fading { opacity: 0; }

/* Thumbnail clone that flies between the grid cell and the lightbox */
.lb-ghost {
  position: fixed;
  z-index: 2100;
  margin: 0;
  pointer-events: none;
  will-change: transform;
  object-fit: cover;
  overflow: hidden;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}

.lb-stage {
  max-width: calc(100vw - 130px);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

.lb-stage img {
  max-width: 100%;
  max-height: calc(100vh - 90px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.7);
}

.lb-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  text-align: center;
}

.lb-btn {
  position: absolute;
  z-index: 2101;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  font-family: inherit;
}

.lb-btn:hover {
  background: var(--princeton-orange);
  border-color: var(--princeton-orange);
  color: #fff;
}

.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .misc-hero { min-height: 52vh; padding: 7.5rem 1.25rem 2.5rem; }

  .misc-main { padding: 2rem 1.25rem 4rem; }

  .collection-head { flex-direction: column; align-items: flex-start; }

  .collection-hint { display: none; }

  .lb-stage { max-width: 100vw; padding: 0 0.5rem; }

  .lb-stage img { max-height: calc(100vh - 140px); }

  .lb-prev { left: 0.5rem; top: auto; bottom: 1rem; transform: none; }
  .lb-next { right: 0.5rem; top: auto; bottom: 1rem; transform: none; }
}