/*
 * gallery.css — Grid masonry de galería (s-dark)
 * ════════════════════════════════════════════════════════════════
 */

/* ── Header de sección galería ─────────────────────────────────────────────── */
.gallery-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  margin-bottom:   48px;
}

.gallery-header h2 {
  font-family: var(--font-display);
  font-size:   clamp(48px, 7vw, 88px);
  line-height: 0.9;
  color:       var(--white);
}

.gallery-header h2 span {
  color: var(--yellow);
}

.gallery-header p {
  max-width: 340px;
  font-size: 14px;
  color:     rgba(255, 255, 255, 0.55);
  text-align: right;
}

/* ── Grid masonry ──────────────────────────────────────────────────────────── */
.gallery-masonry {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   4px;
  margin-top:            48px;
}

/* Primer ítem ocupa 2 columnas × 2 filas */
.gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row:    span 2;
}

/* Quinto ítem ocupa 2 columnas */
.gallery-item:nth-child(5) {
  grid-column: span 2;
}

.gallery-item {
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
  background: var(--charcoal); /* Placeholder mientras carga */
}

.gallery-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  min-height: 220px;
  display:    block;
}

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

/* ── Overlay con caption ────────────────────────────────────────────────────── */
.gallery-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, transparent 50%);
  opacity:    0;
  transition: opacity var(--transition);
  display:    flex;
  align-items: flex-end;
  padding:    20px;
}

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

.gallery-overlay-text {
  font-family:    var(--font-head);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--white);
}

/* ── Placeholder de imagen (cuando no hay foto real) ───────────────────────── */
.gallery-placeholder {
  width:           100%;
  min-height:      220px;
  background:      var(--charcoal);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             12px;
  color:           rgba(255, 255, 255, 0.2);
  font-family:     var(--font-head);
  font-size:       12px;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
}

.gallery-placeholder-icon {
  font-size: 32px;
  opacity:   0.3;
}

/* Asegurar altura mínima en el ítem grande */
.gallery-item:nth-child(1) .gallery-placeholder {
  min-height: 448px; /* 2 × (220px + 4px gap) */
}