/* Updated gallery sizing to avoid squished thumbnails */

/* container tweaks */
.gallery-stack {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start; /* align thumbs to top so captions line up */
}

/* thumbnail box — allow variable width but keep a sensible min/max */
.gallery-thumb,
.media-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;   /* ensures a readable minimum thumb width */
  max-width: 360px;   /* prevents very wide stretched thumbs on large screens */
  box-sizing: border-box;
}

/* make images larger, preserve aspect ratio, and avoid cropping important content */
.gallery-thumb img,
.media-item img {
  display: block;
  width: auto;               /* let width adapt to image proportions */
  height: 320px;             /* fixed height for legible thumbnails on desktop */
  object-fit: contain;       /* show full image, letterbox if needed */
  object-position: center;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform .18s ease, box-shadow .18s ease;
  background: #000;
}

/* smaller devices: reduce thumbnail height so layout fits */
@media (max-width: 900px) {
  .gallery-thumb img,
  .media-item img {
    height: 200px;
  }
  .gallery-thumb,
  .media-item {
    min-width: 160px;
  }
}

/* larger screens: slightly bigger thumbnails */
@media (min-width: 1200px) {
  .gallery-thumb img,
  .media-item img {
    height: 380px;
  }
  .gallery-thumb,
  .media-item {
    min-width: 240px;
  }
}

/* hover effect */
.gallery-thumb img:hover,
.media-item img:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.36);
}

/* caption styling */
.gallery-thumb .caption,
.media-item .caption {
  font-size: 0.78rem;
  color: var(--fg-dim);
  margin-top: 0.55rem;
  text-align: center;
}

/* optional: nicer horizontal scrollbar for gallery stacks */
.gallery-stack::-webkit-scrollbar {
  height: 10px;
}
.gallery-stack::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}
.gallery-stack::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.0);
}

/* ---------- Force white background for transparent PNGs and light mode backgrounds ---------- */

/* 1) Always show images on a white background (prevents transparent PNGs from showing dark site bg) */
.media-item img,
.gallery-thumb img,
.about-photo img,
img {
  /* white background behind any image (covers transparent pixels) */
  background-color: #ffffff;
  /* small padding so white background reads as a border if your image has rounded corners */
  padding: 2px;
  /* avoid changing natural image sizing */
  box-sizing: border-box;
}

/* Optional nicer border for images so they separate from white page background */
.media-item img,
.gallery-thumb img,
.about-photo img {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
}

/* 2) Make sure "light" theme surfaces are white.
   These override var(--bg / --bg-alt) for any leftover elements that might not use the CSS variables. */
[data-theme="light"] {
  background-color: #ffffff !important;
  color: #111827 !important;
}
[data-theme="light"] body,
[data-theme="light"] .projects-section,
[data-theme="light"] .project-article,
[data-theme="light"] .card,
[data-theme="light"] .about-photo,
[data-theme="light"] .media-item {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* 3) If you want the light-mode topbar to be fully white (not translucent) */
[data-theme="light"] .topbar {
  background: #ffffff !important;
  backdrop-filter: none;
}

/* 4) Keep dark-mode behavior unchanged (no rules needed) */

/* ---------- End of white-background overrides ---------- */
/* Strong overrides to ensure lightbox image centers and scales properly */
#lightbox-modal {
  position: fixed;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  background: rgba(9,11,13,0.85) !important;
}

#lightbox-modal .lightbox-inner {
  max-width: 95vw !important;
  max-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
  gap: 0.8rem;
}

#lightbox-modal .lightbox-img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 90vw !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  background: #fff; /* or remove if you prefer transparent */
}

/* Ensure close/arrow buttons are on top and clickable */
#lightbox-modal { z-index: 9999; pointer-events: auto; }
#lightbox-modal .lightbox-close,
#lightbox-modal .lightbox-arrow {
  z-index: 10001; /* above overlay and image */
  pointer-events: auto;
  cursor: pointer;
  border: none;
  background: rgba(22,26,34,0.75);
  color: #fff;
}
/* Make close button clearly visible and reachable */
#lightbox-modal .lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ensure arrows are centered vertically */
#lightbox-modal .lightbox-arrow.left { left: 18px; top: 50%; transform: translateY(-50%); position: fixed; }
#lightbox-modal .lightbox-arrow.right { right: 18px; top: 50%; transform: translateY(-50%); position: fixed; }

/* Make sure inner container sits above page header */
#lightbox-modal .lightbox-inner {
  z-index: 10000;
  outline: none; /* allow focusing without showing outline; change if needed for accessibility */
}

/* Slightly darken overlay so modal is prominent */
#lightbox-modal.lightbox-show {
  background: rgba(8,10,12,0.86) !important;
}

/* Ensure close/arrow buttons are on top and clickable */
#lightbox-modal { z-index: 9999; pointer-events: auto; }
#lightbox-modal .lightbox-close,
#lightbox-modal .lightbox-arrow {
  z-index: 10001; /* above overlay and image */
  pointer-events: auto;
  cursor: pointer;
  border: none;
  background: rgba(22,26,34,0.75);
  color: #fff;
}
/* Make close button clearly visible and reachable */
#lightbox-modal .lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ensure arrows are centered vertically */
#lightbox-modal .lightbox-arrow.left { left: 18px; top: 50%; transform: translateY(-50%); position: fixed; }
#lightbox-modal .lightbox-arrow.right { right: 18px; top: 50%; transform: translateY(-50%); position: fixed; }

/* Make sure inner container sits above page header */
#lightbox-modal .lightbox-inner {
  z-index: 10000;
  outline: none; /* allow focusing without showing outline; change if needed for accessibility */
}

/* Slightly darken overlay so modal is prominent */
#lightbox-modal.lightbox-show {
  background: rgba(8,10,12,0.86) !important;
}