/* /website/public/assets/css/projects.css */
/* Extends base.css tokens for projects listing and detail */

.project-card {
  overflow: hidden;
}
.project-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Progress bar */
.project-progress {
  --progress: 0%;
  position: relative;
  background: var(--color-bg-muted);
  border-radius: var(--radius-s);
  height: 0.75rem;
  overflow: hidden;
}
.project-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: var(--color-yellow);
  transition: width var(--duration-base) var(--easing-standard);
}
.project-progress__label {
  margin-top: var(--space-2);
  font-size: var(--font-sm);
}

/* Gallery grid */
.project-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-soft);
}
.project-gallery__item a {
  display: block;
}

/* Lightbox overlay */
.pg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
  display: none;
}
.pg-overlay.open {
  display: grid;
  place-items: center;
}
.pg-content {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  padding: var(--space-4);
  outline: none;
}
.pg-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
}
.pg-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-s);
}
.pg-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.pg-prev, .pg-next {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-s);
}
.pg-caption {
  color: var(--color-white);
  text-align: center;
  margin-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .project-progress__bar { transition: none; }
}