body { font-family: 'Poppins', sans-serif; }

/* project gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #e5e7eb; }
.gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.06); }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; color: #fff; font-size: .8rem; line-height: 1.3;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }

/* play badge on video thumbnails */
.play-badge { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(220, 38, 38, .9); color: #fff;
  display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.play-badge svg { width: 26px; height: 26px; margin-left: 3px; }
.project-card .play-badge { width: 44px; height: 44px; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .94); display: none; align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb-stage { max-width: 94vw; max-height: 84vh; display: flex; align-items: center; justify-content: center; }
.lb-stage img, .lb-stage video { max-width: 94vw; max-height: 84vh; border-radius: 6px; background: #000; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #e5e7eb; padding: 0 70px; font-size: .95rem; }
.lb-count { position: absolute; top: 18px; left: 22px; color: #9ca3af; font-size: .9rem; }
.lb button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer; border-radius: 50%; width: 46px; height: 46px; font-size: 24px; line-height: 1; }
.lb button:hover { background: rgba(220, 38, 38, .9); }
.lb-close { top: 14px; right: 16px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } .lb-cap { bottom: 74px; padding: 0 16px; } }

/* project cards: centred rows, up to 3 per row; a lone or leftover card sits in the middle */
.project-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.project-grid > .project-card { width: 100%; max-width: 26rem; }
@media (min-width: 640px)  { .project-grid > .project-card { width: calc((100% - 2rem) / 2); max-width: none; } }
@media (min-width: 1024px) { .project-grid > .project-card { width: calc((100% - 4rem) / 3); } }