/* ============================================
   SUBSONUS — GIGS PAGE STYLES
   ============================================ */

/* ── GIG MASONRY GRID ── */
.gig-grid {
  columns: 3;
  gap: 3px;
}

.gig-item {
  break-inside: avoid;
  margin-bottom: 3px;
  background: var(--grey);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  height: 300px;
}
.gig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.gig-photo-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: rgba(240,236,227,0.04);
  background: linear-gradient(135deg, var(--grey), #111);
}

/* Varied aspect ratios for masonry feel */
.gig-item:nth-child(3n+1) .gig-photo-placeholder { aspect-ratio: 3/4; }
.gig-item:nth-child(3n+2) .gig-photo-placeholder { aspect-ratio: 1/1; }
.gig-item:nth-child(3n)   .gig-photo-placeholder { aspect-ratio: 4/3; }

/* ── HOVER OVERLAY ── */
.gig-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.9), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
}

.gig-item:hover .gig-overlay { opacity: 1; }

.gig-overlay-info h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
}

.gig-overlay-info span {
  font-size: 0.65rem;
  color: var(--grey-lt);
}


/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .gig-grid { columns: 2; }
}

@media (max-width: 600px) {
  .gig-grid { columns: 1; }
}