/* Visor de imágenes ampliadas.
 *
 * Compartido por el backoffice, el portal y la landing. Es deliberadamente
 * oscuro y ajeno al tema del estudio: el visor existe para que la fotografía
 * mande, y un fondo con la paleta de la marca competiría con ella. Es también
 * la convención de cualquier galería, así que nadie tiene que aprenderla.
 */

.visor {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(12, 12, 11, .94);
  display: none; flex-direction: column;
  /* El área segura del iPhone: sin esto la descripción queda bajo la barra
     de inicio y los controles bajo el notch. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.visor[open], .visor.is-abierto { display: flex; }

.visor-barra {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1rem; color: rgba(255, 255, 255, .72);
  font-size: .8rem; flex: none;
}
.visor-conteo { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.visor-cerrar {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .72); font-size: 1.6rem; line-height: 1;
  padding: .2rem .5rem; font-family: inherit;
}
.visor-cerrar:hover { color: #fff; }

/* El marco de la imagen. Flex y no grid: en una rejilla la fila se
   dimensiona al contenido, así que
   la imagen imponía su alto natural, desbordaba la pantalla y empujaba la
   descripción fuera de la vista. Con flex + `overflow: hidden` el marco manda
   y la imagen se ajusta dentro. */
.visor-marco {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 0 .5rem;
}
.visor-img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  /* `touch-action: pan-y` deja al navegador el scroll vertical y nos reserva
     el horizontal, que es el gesto del visor. */
  touch-action: pan-y;
  user-select: none; -webkit-user-drag: none;
}

.visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; cursor: pointer; font-size: 1.3rem; line-height: 1;
  font-family: inherit; padding: 0;
}
.visor-nav:hover { background: rgba(0, 0, 0, .7); }
.visor-nav[hidden] { display: none; }
.visor-prev { left: .6rem; }
.visor-next { right: .6rem; }

.visor-pie {
  flex: none; padding: .9rem 1.2rem 1.4rem;
  color: rgba(255, 255, 255, .9); max-width: 46rem; margin: 0 auto;
  text-align: center;
  /* Un texto largo (hasta 1000 caracteres bajo una foto del portafolio) no
     se come la foto: el pie tiene un alto máximo y se desplaza por dentro. */
  max-height: 32vh; overflow-y: auto; overscroll-behavior: contain;
}
.visor-titulo { font-size: 1rem; font-weight: 600; margin: 0 0 .15rem; }
.visor-meta {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); margin: 0 0 .45rem;
}
.visor-texto {
  font-size: .85rem; line-height: 1.55; margin: 0;
  color: rgba(255, 255, 255, .78); white-space: pre-line;
}
.visor-titulo:empty, .visor-meta:empty, .visor-texto:empty { display: none; }

/* Mientras el visor está abierto la página de detrás no se desplaza: en el
   celular, deslizar dentro del visor arrastraba también el fondo. */
body.visor-abierto { overflow: hidden; }

@media (max-width: 560px) {
  .visor-nav { width: 38px; height: 38px; }
  .visor-pie { padding: .7rem 1rem 1.1rem; }
  .visor-texto { font-size: .8rem; }
}

/* Quien pide menos movimiento no recibe la transición de cambio de foto. */
@media (prefers-reduced-motion: no-preference) {
  .visor-img { transition: opacity .12s ease; }
  .visor-img.is-cambiando { opacity: .35; }
}

/* La miniatura invita a pulsarla. */
[data-visor] { cursor: zoom-in; }