/* ============================================================
   LogiRed — Galería fotográfica de una jornada
   Grilla + visor (lightbox con carrusel). Pensada para reusarse
   en cualquier página: la lista de fotos la lee js/galeria.v1.js
   del propio DOM, así que Los Andes es pegar su grilla y listo.

   Archivo nuevo y versionado: no está cacheado en ningún
   navegador, así que no necesita ir inline como los añadidos
   sobre logired.v5.css.
   ============================================================ */

/* ---------- Grilla ---------- */
.gal__grid {
  margin-top: var(--space-4);
  display: grid;
  /* dense rellena los huecos que dejan las celdas destacadas de 2x2; sin él la grilla
     queda con agujeros cada vez que una foto grande no cabe en la fila en curso. */
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.gal__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pale-blue-soft);
  cursor: zoom-in;
  border: 0;
  padding: 0;
}
/* Una de cada siete ocupa 2x2. Rompe la retícula lo justo para que no se lea como una
   hoja de contactos, sin depender de las proporciones de cada foto. */
/* La proporción se mantiene en 4:3, no 1:1: dos columnas (2w+g) sobre dos filas de
   celdas 4:3 (2·0,75w+g) dan justamente 4:3. Con 1:1 la celda grande era más alta que
   las dos filas que ocupa, estiraba sus tracks y dejaba huecos blancos a los lados. */
.gal__item--big { grid-column: span 2; grid-row: span 2; aspect-ratio: 4 / 3; }

.gal__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease), filter .35s var(--ease);
}
.gal__item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,44,83,0) 55%, rgba(4,44,83,.55));
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.gal__item:hover img,
.gal__item:focus-visible img { transform: scale(1.07); }
.gal__item:hover::after,
.gal__item:focus-visible::after { opacity: 1; }

/* La lupa aparece con la capa oscura: es la señal de que la foto se abre, no solo
   de que la celda responde al mouse. */
.gal__zoom {
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 1;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--navy);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gal__item:hover .gal__zoom,
.gal__item:focus-visible .gal__zoom { opacity: 1; transform: translateY(0); }

.gal__count { margin-top: var(--space-2); font-size: 14px; color: var(--gray); }

@media (max-width: 560px) {
  .gal__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  /* En dos columnas una celda de 2x2 ocuparía la fila entera y rompería el ritmo. */
  .gal__item--big { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* ---------- Visor ---------- */
.gallox { position: fixed; inset: 0; z-index: 220; display: flex; flex-direction: column; }
.gallox[hidden] { display: none; }
/* Opaco, no translúcido: a .94 se leían el logo y el menú del sitio por detrás de la
   barra del visor, y en móvil se veía media página encima de la foto. Un visor de fotos
   no gana nada dejando ver lo que hay debajo. */
.gallox__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 0%, #0a2947, transparent 70%),
    #04182b;
  opacity: 0;
  transition: opacity .3s ease;
}
.gallox.is-open .gallox__backdrop { opacity: 1; }

.gallox__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 18px;
  color: rgba(255,255,255,.92);
}
.gallox__meta { min-width: 0; }
.gallox__kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-light); font-weight: 600; }
.gallox__pos { font-weight: 700; font-size: 15px; }
.gallox__close {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.gallox__close:hover { background: var(--orange); color: var(--navy); }

.gallox__stage {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 0 var(--space-2);
  min-height: 0;
}
.gallox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gallox__img.is-ready { opacity: 1; transform: scale(1); }

.gallox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.gallox__nav:hover { background: var(--orange); color: var(--navy); }
.gallox__nav--prev { left: 14px; }
.gallox__nav--next { right: 14px; }

/* Tira de miniaturas: da el sentido de "cuántas quedan" que un contador solo no da. */
.gallox__strip {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 12px 18px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gallox__strip::-webkit-scrollbar { display: none; }
.gallox__thumb {
  flex: none;
  width: 92px; height: 62px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.gallox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallox__thumb:hover { opacity: .85; }
.gallox__thumb[aria-current="true"] { opacity: 1; border-color: var(--orange); }

@media (max-width: 640px) {
  .gallox__nav { width: 44px; height: 44px; }
  .gallox__nav--prev { left: 6px; }
  .gallox__nav--next { right: 6px; }
  .gallox__thumb { width: 68px; height: 46px; }
  .gallox__strip { padding: 10px 12px 14px; }
}