* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.banner { position: relative; width: 100%; background: #000; color: #fff; }
.banner-inner { position: relative; width: 100%; max-height: 40vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.banner-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Title overlay */
.banner-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 16px 24px 24px 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.35), rgba(0,0,0,0));
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}
.banner-title h1 { margin: 0; font: 600 28px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
@media (min-width: 640px) { .banner-title h1 { font-size: 34px; } }
@media (min-width: 1024px) { .banner-title h1 { font-size: 40px; } }

/* No-image fallback: keep title visible even without a banner image */
.banner.no-image .banner-inner { min-height: 140px; background: linear-gradient(180deg, #222 0%, #111 100%); }
.banner.no-image img { display: none; }
/* If title is disabled, collapse the no-image fallback space */
.banner.no-image.title-off .banner-inner { min-height: 0; background: none; }
.banner.title-off .banner-title { display: none; }

main { width: 100%; }

/* Masonry with explicit columns to avoid reflow */
.masonry { display: flex; width: 100%; gap: 0; align-items: flex-start; }
.masonry-col { flex: 0 0 auto; }
.masonry-col .wall-link { display: block; text-decoration: none; color: inherit; }
.masonry-col .wall-image { width: 100%; display: block; margin: 0; padding: 0; }

.sentinel { height: 1px; }

/* Tooltip for image titles */
.img-tooltip {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: 60ch;
  padding: 6px 8px;
  font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #fff;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
  user-select: none;
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.9);
  z-index: 10000;
}
.lightbox-content {
  position: relative;
  max-width: 96vw;
  max-height: 92vh;
  width: 96vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.lb-image { position: relative; max-height: 80vh; display: flex; align-items: center; justify-content: center; }
.lb-image img { max-width: 96vw; max-height: 80vh; opacity: 0; transition: opacity 300ms ease-in-out; }
.lb-image img.in { opacity: 1; }
.lb-caption { color: #eee; font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; text-align: center; max-width: 80vw; margin-bottom: 56px; }
.lb-btn { position: absolute; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 26px; padding: 0; cursor: pointer; border-radius: 6px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; line-height: 1; text-align: center; vertical-align: middle; }
.lb-btn:hover { background: rgba(255,255,255,0.25); }
.lb-prev { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 10002; }
.lb-next { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 10002; }
.lb-close { position: fixed; right: 12px; top: 12px; font-size: 32px; z-index: 10002; }
.lb-btn svg { width: 66%; height: 66%; display: block; }
.lb-controls .lb-btn svg { width: 62%; height: 62%; }
.lb-controls { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: center; justify-content: center; color: #ddd; font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; z-index: 10002; background: rgba(0,0,0,0.2); padding: 6px 10px; border-radius: 6px; }
.lb-controls .lb-btn { position: static; font-size: 20px; width: 36px; height: 36px; padding: 0; }
.lb-controls label { display: inline-flex; align-items: center; gap: 6px; }
.lb-controls input { width: 56px; }

/* Full-height side hit zones for prev/next navigation */
.lb-hit { position: absolute; top: 0; bottom: 0; width: 50%; background: transparent; border: none; padding: 0; margin: 0; z-index: 0; }
.lb-hit-left { left: 0; cursor: pointer; }
.lb-hit-right { right: 0; cursor: pointer; }

/* Ensure the image link sits above the hit zones so it receives clicks */
.lb-image .lb-link { position: relative; z-index: 1; display: inline-block; }

/* Prevent background scroll when open */
.lb-open, .lb-open body { overflow: hidden; }