/* Shared gallery & carousel styles extracted from projects.html */

.project-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  transform: translateY(0);
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(212, 175, 55, 0.3);
  border-color: rgba(212, 175, 55, 0.4);
}

/* carousel */
.image-carousel { position: relative; height: 240px; overflow: hidden; }
.carousel-images { display: flex; height: 100%; transition: transform 0.5s ease; }
.carousel-image { min-width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: all 0.3s ease; }
.carousel-image:hover { transform: scale(1.02); }

.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color:#fff; border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.2rem; transition:all .3s ease; display:flex; align-items:center; justify-content:center; }
.carousel-arrow:hover { background: rgba(0,0,0,0.8); }
.carousel-arrow.prev { left:15px; }
.carousel-arrow.next { right:15px; }

.carousel-nav { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.nav-dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:all .3s ease; }
.nav-dot.active { background:#fff; transform:scale(1.2); }

/* modal */
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal.active { display:flex; }
.modal-content { max-width:90vw; max-height:90vh; position:relative; }
.modal-image { max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5); }
.modal-close { position:absolute; top:-40px; right:0; background:#fff; color:#000; border:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; font-weight:bold; }
.modal-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.9); border:none; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; transition:all .3s ease; }
.modal-nav:hover { background:#fff; transform:translateY(-50%) scale(1.1); }
.modal-prev { left:-70px; }
.modal-next { right:-70px; }

/* nav dot / arrow icon sizes inherit from Lucide */