/* Custom overrides for project modal carousel controls and responsiveness */

.project-modal .carousel { overflow: hidden; }
.project-modal .carousel-inner { height: 55vh; }
.project-modal .carousel-item { height: 55vh; background: #111; border-radius: 8px; }
.project-modal .carousel-item img { width: 100%; height: 100%; object-fit: contain; }

.project-modal .carousel-indicators { position: static; margin-top: 10px; gap: 8px; z-index: 1; display: flex; justify-content: center; }
.project-modal .carousel-indicators .thumb-indicator {
  width: 64px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.5);
  background: transparent;
  overflow: hidden;
  opacity: .75;
}
.project-modal .carousel-indicators .thumb-indicator img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-modal .carousel-indicators .thumb-indicator.active { opacity: 1; border-color: #ffbd39; }

.project-modal .project-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.project-modal .project-carousel-control:hover { background: rgba(0, 0, 0, 0.65); border-color: rgba(255, 255, 255, 0.6); }
.project-modal .project-prev { left: 10px; }
.project-modal .project-next { right: 10px; }
.project-modal .project-carousel-control i { color: #fff; line-height: 1; }

@media (max-width: 576px) {
  .project-modal .project-carousel-control { width: 36px; height: 36px; }
}

@media (max-width: 1200px) { /* xl */
  .project-modal .carousel-inner,
  .project-modal .carousel-item { height: 52vh; }
}
@media (max-width: 992px) { /* lg */
  .project-modal .carousel-inner,
  .project-modal .carousel-item { height: 48vh; }
}
@media (max-width: 576px) { /* sm */
  .project-modal .carousel-inner,
  .project-modal .carousel-item { height: 42vh; }
}