/* ==========================
   COLLAGE STACK (FULL WIDTH)
   ========================== */

.collage-section {
  width: 100%;
  max-width: 1320px;
  margin: 5rem auto 0;
  padding: clamp(0.6rem, 1.6vw, 1rem);
}

/* SIEMPRE vertical y PEGADAS */
.collage-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0; /* ✅ pegadas */
}

/* Card sin redondeo */
.collage-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0; /* ✅ sin esquinas redondeadas */
  background: #000; /* ✅ barras/espacios elegantes si sobran */
  box-shadow: none;

  /* ✅ mantiene siempre el “marco” 1320x700 sin depender de altura fija */
  aspect-ratio: 1320 / 700;

  /* ✅ por si el navegador viejo no soporta aspect-ratio */
  width: 100%;
}

/* Imagen: SIEMPRE COMPLETA (no recorta) */
.collage-card img {
  width: 100%;
  height: 100%;
  display: block;

  /* ✅ mostrar completa */
  object-fit: contain;
  object-position: center;

  /* Opcional: mejora visual en fondos oscuros */
  background: #000;

  /* Hover suave (sin deformar) */
  transform: scale(1);
  transition: transform 450ms ease;
}

.collage-card:hover img {
  transform: scale(1.01);
}

/* Focus accesible */
.collage-card:focus-visible {
  outline: 3px solid rgba(177, 13, 24, 0.75);
  outline-offset: 0;
}

/* ==========================
   RESPONSIVE
   ========================== */

/* En móvil, sigue siendo 1320/700 pero al ser más angosto, baja la altura automáticamente */
@media (max-width: 768px) {
  .collage-section {
    margin-top: 2.5rem;
    padding: 0.75rem;
    max-width: 100%;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .collage-card img {
    transition: none;
  }
}