/* ==========================================================================
   MP Travel Services — Galería
   --------------------------------------------------------------------------
   La rejilla de fotos de destinos y su línea de créditos.

   Solo la carga `galeria.html`. El visor que las abre en grande está en
   `visor.css`, compartido con los paquetes.

   POR QUÉ NO SE PARECE A LA REJILLA DE PAQUETES
   Un paquete es una oferta: su tarjeta es de vidrio, tiene título en
   versalitas y un botón, y todas miden lo mismo porque compiten entre sí. Una
   foto de galería no vende nada, muestra. Así que acá no hay tarjeta, no hay
   vidrio y no hay borde: la foto va al ras, sin nada alrededor, y el título
   solo aparece cuando el cursor se apoya encima —o siempre, en celular, donde
   no hay cursor que apoyar—.

   Los tokens, el vidrio y los botones vienen de `base.css`.
   ========================================================================== */

/* La rejilla se adapta sola con `auto-fill`: la cantidad de fotos la decide la
   clienta desde el panel, y con columnas fijas una galería de cuatro fotos en
   pantalla ancha dejaría media fila vacía. */
.galeria{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--space-3);
}

.galeria-foto{
  position:relative;
  margin:0;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

/* El botón hereda el radio del recorte de arriba; el `overflow:hidden` de la
   figura no alcanza porque el foco visible se dibuja por fuera. */
.galeria-foto .abre-visor{border-radius:var(--r-md)}

.galeria-foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s var(--ease-out);
}

.galeria-foto:hover img{transform:scale(1.04)}

/* El título va sobre un degradado y no sobre una banda de color plano: la
   banda corta la foto en dos, el degradado la deja entera. Arranca en
   transparente para no ensuciar el centro de la imagen. */
.galeria-pie{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--space-5) var(--space-3) var(--space-3);
  background:linear-gradient(to top,rgba(12,26,30,.78),rgba(12,26,30,.35) 55%,transparent);
  color:#fff;
  font-size:var(--t-rotulo);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  pointer-events:none; /* el que recibe el toque es el botón de abajo */
}

/* La lupa. Es el único aviso de que la foto se puede abrir, así que en celular
   —donde no hay :hover que la revele— tiene que estar siempre puesta. */
.galeria-lupa{
  position:absolute;top:var(--space-3);right:var(--space-3);
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;
  background:rgba(12,26,30,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-size:1rem;line-height:1;
  pointer-events:none;
}

/* --- Créditos -------------------------------------------------------------
   Las fotos con las que arranca la galería son de Wikimedia Commons y su
   licencia pide que se nombre al autor. No es un adorno: si se cambia una
   foto, se cambia también su línea de acá y la de
   `assets/galeria/CREDITOS.md`.
   ------------------------------------------------------------------------ */
.creditos{
  max-width:70ch;margin:var(--space-6) auto 0;
  padding-top:var(--space-4);
  border-top:1px solid var(--acento-tenue);
  font-size:var(--t-pie);line-height:1.7;color:var(--text-soft);
  text-align:center;
}

.creditos p{margin:0 0 var(--space-2)}

.creditos ul{margin:0;padding:0;list-style:none}

.creditos li{display:inline}

/* Los créditos son una sola parrafada: cada entrada se separa con un punto
   medio puesto DESPUÉS, para que al partirse el renglón no empiece con él. */
.creditos li:not(:last-child)::after{content:" · "}

.creditos a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)}

.creditos a:hover{color:var(--text);border-bottom-color:var(--acento)}

@media (prefers-reduced-motion:reduce){
  .galeria-foto img{transition:none}
  .galeria-foto:hover img{transform:none}
}

/* --- Escritorio ---------------------------------------------------------
   Por qué el corte va en 960px de ancho y no por tipo de puntero: ver la
   cabecera de base.css.
   ----------------------------------------------------------------------- */
@media (min-width:960px){
  .galeria{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--space-4)}

  /* En escritorio el título se guarda hasta que el cursor se apoya: sin
     cursor —en celular— no habría manera de sacarlo, y una galería con nueve
     rótulos permanentes encima de las fotos se lee como un catálogo. */
  .galeria-pie{
    opacity:0;transform:translateY(6px);
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  }

  .galeria-foto:hover .galeria-pie,
  .galeria-foto:focus-within .galeria-pie{opacity:1;transform:none}

  @media (prefers-reduced-motion:reduce){
    .galeria-pie{transition:none}
  }
}