/* ============================================================
   EL COLLAGE
   ------------------------------------------------------------
   Columnas CSS y no rejilla. Las fotos de una fiesta vienen de
   todas las proporciones —verticales de celular, horizontales,
   capturas cuadradas— y una rejilla obliga a recortarlas todas
   al mismo molde. Las columnas las dejan completas y acomodan
   solas, que es justo lo que hace que parezca un collage y no
   un catálogo.
   ============================================================ */
.collage {
  column-count: 2;
  column-gap: 6px;
  padding: 0 6px var(--e-7);
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 560px)  { .collage { column-count: 3; column-gap: 8px; padding-inline: 8px; } }
@media (min-width: 900px)  { .collage { column-count: 4; } }
@media (min-width: 1300px) { .collage { column-count: 5; } }

.pieza {
  /* break-inside es lo único que evita que una foto se parta a la
     mitad entre el final de una columna y el principio de la otra. */
  break-inside: avoid;
  position: relative;
  margin: 0 0 6px;
  cursor: pointer;
  background: var(--papel-2);
  overflow: hidden;
  border-radius: var(--radio);
}

.pieza img,
.pieza video {
  display: block;
  width: 100%;
  height: auto;
  /* El gris de fondo se ve mientras baja la foto; sin esto queda un
     salto blanco que en una pared de fotos se nota mucho. */
  background: var(--papel-2);
  transition: opacity var(--trans);
}

.pieza:hover img,
.pieza:hover video { opacity: .9; }

.pieza:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* El nombre de quien la subió. Encima de la foto y no debajo: debajo
   rompería el mosaico con una franja de texto por pieza. */
.pieza figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--e-5) var(--e-2) var(--e-2);
  font-family: var(--serif);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Triángulo de reproducir, dibujado con bordes: un video en el
   mosaico tiene que distinguirse de una foto de un vistazo. */
.pieza-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  pointer-events: none;
}
.pieza-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--tinta);
}

/* ============================================================
   VISOR
   ============================================================ */
/* El [hidden] del navegador es display:none con muy poca fuerza, y
   cualquier clase con display: lo pisa. Sin esta línea el visor
   nace abierto y tapa el collage entero. Pasó. */
.visor[hidden] { display: none; }

.visor {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(14, 19, 24, .94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  /* La muesca del iPhone: sin esto el botón de cerrar queda debajo. */
  padding: max(var(--e-5), env(safe-area-inset-top)) var(--e-4)
           max(var(--e-5), env(safe-area-inset-bottom));
}

.visor-cuerpo {
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visor-cuerpo img,
.visor-cuerpo video {
  max-width: 100%;
  max-height: 80vh;
  width: auto; height: auto;
  object-fit: contain;
}

.visor-quien { color: rgba(255, 255, 255, .72); margin: 0; }

.visor-cerrar {
  position: absolute;
  top: max(var(--e-4), env(safe-area-inset-top));
  right: var(--e-4);
  width: 48px; height: 48px;      /* objetivo de dedo, de noche */
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.visor-cerrar:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }