/* =====================================================================
   PROJECT POPUP
   ===================================================================== */

.popup {
  border: 0; padding: 0; margin: auto;
  width: min(940px, 100vw - 32px);
  max-height: min(90vh, 100% - 32px);
  background: var(--bg); color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.popup::backdrop { background: rgba(10, 10, 10, .8); backdrop-filter: blur(3px); }
.popup[open] { animation: popup-in .22s ease-out; }
@keyframes popup-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Three rows: top bar, scrolling content, bottom prev/next */
.popup-frame { display: grid; grid-template-rows: auto 1fr auto; max-height: inherit; }

.popup-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.popup-address { flex: 1; min-width: 0; font: 12px var(--mono); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-bar button {
  background: transparent; border: 1px solid var(--line); color: var(--heading);
  font: inherit; font-size: 13px; padding: 5px 10px; cursor: pointer;
}
.popup-bar button:hover { border-color: var(--nav); }

.popup-content { overflow: auto; padding-bottom: 28px; }
.popup-hero { width: 100%; aspect-ratio: var(--hero-ratio); object-fit: cover; }
.popup-content .img-missing.popup-hero { aspect-ratio: var(--hero-ratio); }
.photo-credit { margin: 6px 14px 0; text-align: right; font-size: 12px; color: var(--text-dim); }   /* credits.hero in content.js */
.popup-text { display: grid; gap: 12px; padding: 24px 28px 0; max-width: 74ch; margin-inline: auto; }   /* centred in the popup */
.popup-text h2 { font-size: clamp(24px, 3vw, 34px); }

.popup-nav {
  display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.popup-nav button {
  background: transparent; border: 0; color: var(--nav); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; padding: 4px 2px;
}
.popup-nav button span { display: block; color: var(--heading); font-size: 14px; }
.popup-nav button:hover { color: var(--heading); }
.popup-nav .next { text-align: right; }

/* Phones: popup fills the screen */
@media (max-width: 760px) {
  .popup { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; }
  .popup-text { padding: 20px 18px 0; }
}
@media (prefers-reduced-motion: reduce) { .popup[open] { animation: none; } }


/* =====================================================================
   FULL-SCREEN IMAGE VIEWER (js/lightbox.js)
   ===================================================================== */

/* Images you can click to see full screen */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom:hover img { opacity: .9; }

.lightbox {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: rgba(10, 10, 10, .96);
  display: none; place-items: center;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: transparent; }

/* The image: as large as fits, never cropped */
#lightbox-img { max-width: calc(100vw - 120px); max-height: calc(100dvh - 80px); object-fit: contain; }

.lightbox button {
  position: absolute; background: transparent; border: 0; color: var(--heading);
  font: 300 28px/1 var(--font); padding: 14px 18px; cursor: pointer; opacity: .75;
}
.lightbox button:hover { opacity: 1; }
.lightbox-close { top: 8px; right: 8px; }
.lightbox-prev  { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--nav); }

/* Phones: image uses the full width, arrows sit at the bottom */
@media (max-width: 760px) {
  #lightbox-img { max-width: 100vw; max-height: calc(100dvh - 140px); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 4px; transform: none; }
}