.projects{
  background: var(--color-bg);
}
.projects-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.project-card{
  background: var(--color-white);
  border: 1px solid var(--color-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-photo{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  flex: 0 0 auto;
}
.project-photo img{ width: 100%; height: 100%; object-fit: cover; }
.project-caption{
  padding: 1.1rem 1.2rem 1.3rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-quote{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
}
.project-name{
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Before / After slider — same fixed image-area box as the other two
   cards (aspect-ratio 4/5, same width now that the grid column is equal),
   so it can never render taller just because it holds two image layers. */
.ba-slider{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  flex: 0 0 auto;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.ba-slider img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-slider .ba-after{
  clip-path: inset(0 0 0 50%);
}
.ba-tag{
  position: absolute;
  top: 1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  background: rgba(17,17,17,0.75);
  color: var(--color-white);
  padding: 0.3rem 0.6rem;
}
.ba-tag.before{ right: 1rem; }
.ba-tag.after{ left: 1rem; }
.ba-handle{
  position: absolute;
  top: 0; bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: 3px;
  background: var(--color-lime);
  z-index: 3;
  pointer-events: none;
}
.ba-handle::after{
  content: '';
  position: absolute;
  top: 50%; right: 50%;
  transform: translate(50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-lime);
  background-image:
    linear-gradient(to left, var(--color-black) 1.5px, transparent 1.5px),
    linear-gradient(to right, var(--color-black) 1.5px, transparent 1.5px);
  background-size: 10px 2px, 10px 2px;
  background-position: 30% center, 70% center;
  background-repeat: no-repeat;
}

@media (max-width: 900px){
  .projects-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .projects-grid{ grid-template-columns: 1fr; }
}