/* Improved Photography Gallery Styles */

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0;
  max-width: 1400px;
  margin: 0 auto;
}

.photo-item {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.photo-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

.photo-item img.loaded { opacity: 1; }

.photo-watermark { position: absolute; bottom: 8px; right: 12px; color: rgba(255,255,255,0.35); font-size:0.72rem; pointer-events:none; z-index:2; }

.photo-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30,64,175,0.03), rgba(6,182,212,0.02)); opacity:0; transition:opacity 0.28s; z-index:1; }
.photo-item:hover::before { opacity: 1; }

/* Caption overlay on hover */
.photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.45));
  color: rgba(255,255,255,0.95);
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
  z-index: 2;
}

.photo-item:hover .photo-caption { transform: translateY(0); opacity: 1; }

/* Lightbox */
#lightbox { display: none; position: fixed; z-index: 1000; inset: 0; background-color: rgba(12,16,23,0.95); backdrop-filter: blur(8px); }
.lightbox-image-container { position: relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
#lightbox-img { max-width: 92%; max-height: 92%; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.85); }
.lightbox-watermark { position: absolute; bottom: 18px; right: 22px; color: rgba(255,255,255,0.45); font-weight:600; z-index:1002; pointer-events:none; }
.close { position:absolute; top:20px; right:28px; color:var(--text-primary); font-size:2.2rem; cursor:pointer; z-index:1002; }
.close:hover { color:var(--secondary-blue); }

/* Lightbox navigation buttons */
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; color:white; cursor:pointer; z-index:1002; }
.lightbox-prev { left:24px; }
.lightbox-next { right:24px; }
.lightbox-nav:hover { background:rgba(0,0,0,0.6); transform:translateY(-50%) scale(1.03); }

/* Loading and messages */
.photo-loading { display:flex; align-items:center; justify-content:center; min-height:260px; color:var(--text-secondary); }
.loading-spinner { width:36px; height:36px; border:3px solid transparent; border-top:3px solid var(--secondary-blue); border-radius:50%; animation:spin 1s linear infinite; margin-right:0.75rem; }
@keyframes spin { 0% { transform:rotate(0) } 100% { transform:rotate(360deg) } }

#gallery { padding: 2rem 1rem; }
#gallery h2 { text-align:center; margin-bottom:2.5rem; font-size:2.25rem; background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.no-photos { text-align:center; padding:2.5rem; color:var(--text-secondary); }

.photo-item::after { content:''; position:absolute; inset:0; background:transparent; z-index:1; pointer-events:none; }

@media (max-width:768px) { .gallery-container { grid-template-columns: 1fr; gap:1rem; padding:1rem } #gallery h2 { font-size:1.9rem; margin-bottom:1.5rem } #lightbox-img { max-width:95%; max-height:85%; } .close { top:14px; right:18px; font-size:1.8rem } }

@media (max-width:480px) { .photo-watermark { font-size:0.6rem; bottom:6px; right:8px } }