/* ============================================
   photos.css — Photos Page Styles
   ============================================ */

.photos-hero {
  padding: 12rem 4rem 6rem;
  background: var(--warm-white);
  text-align: center;
}

.photos-hero .section-label { justify-content: center; }

.photos-filter {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.filter-btn {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--blush);
  background: transparent;
  color: var(--light-mid);
  cursor: none;
  transition: all 0.3s;
  font-family: 'Jost', sans-serif;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--rose);
  border-color: var(--rose);
  color: white;
}

/* Masonry grid */
.photos-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 12px;
}

.photo-item {
  overflow: hidden;
  position: relative;
  cursor: none;
}

/* Layout sizes */
.photo-item.large  { grid-column: span 5; grid-row: span 5; }
.photo-item.wide   { grid-column: span 7; grid-row: span 4; }
.photo-item.medium { grid-column: span 4; grid-row: span 4; }
.photo-item.small  { grid-column: span 3; grid-row: span 3; }
.photo-item.tall   { grid-column: span 3; grid-row: span 5; }

/* Auto-layout fallback */
.photo-item:nth-child(1)  { grid-column: 1/6;  grid-row: 1/6;  }
.photo-item:nth-child(2)  { grid-column: 6/13; grid-row: 1/5;  }
.photo-item:nth-child(3)  { grid-column: 1/4;  grid-row: 6/10; }
.photo-item:nth-child(4)  { grid-column: 4/8;  grid-row: 5/9;  }
.photo-item:nth-child(5)  { grid-column: 8/13; grid-row: 5/8;  }
.photo-item:nth-child(6)  { grid-column: 1/5;  grid-row: 10/13;}
.photo-item:nth-child(7)  { grid-column: 5/9;  grid-row: 9/13; }
.photo-item:nth-child(8)  { grid-column: 9/13; grid-row: 8/12; }
.photo-item:nth-child(9)  { grid-column: 1/4;  grid-row: 13/16;}
.photo-item:nth-child(10) { grid-column: 4/8;  grid-row: 13/16;}
.photo-item:nth-child(11) { grid-column: 8/11; grid-row: 12/16;}
.photo-item:nth-child(12) { grid-column: 11/13;grid-row: 12/15;}

@media (hover: none), (pointer: coarse) {
  .filter-btn,
  .photo-item {
    cursor: pointer;
  }
}

.photo-item-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.photo-item-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-item:hover .photo-item-inner img {
  transform: scale(1.06);
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42,7,18,0.72), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.5rem;
}

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

.photo-overlay-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: white;
  font-weight: 300;
}

.photo-overlay-date {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 0.25rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(42,7,18,0.95);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}

.lightbox.open { display: flex; }

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
  background: none;
  border: none;
}

.lightbox-close:hover { opacity: 1; }

.lightbox-caption {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 900px) {
  .photos-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
    padding: 2rem;
  }

  .photo-item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .photos-hero { padding: 10rem 2rem 4rem; }
}