/* ==========================================================================
   gallery.css
   --------------------------------------------------------------------------
   Galería de instalaciones de la home: carrusel Swiper con flechas y puntos.

   Se carga DESPUÉS de swiper-bundle.min.css (para poder sobrescribir sus
   estilos por defecto) y ANTES de responsive.css.

   Mismo criterio que hero.css y stats.css: una sección = un módulo, con sus
   media queries dentro.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .gt-gallery — contenedor de la sección
   --------------------------------------------------------------------------
   FONDO GRIS CLARO (--color-bg-alt), no blanco. Los contadores que van justo
   encima están sobre blanco y no tienen caja: sin un cambio de fondo, galería
   y contadores se leerían como un único bloque continuo. El gris claro los
   separa sin necesidad de bordes ni líneas, que es justo para lo que se
   definió ese token.

   Además, las fotos recortan mejor sobre gris que sobre blanco: el blanco
   compite con las zonas claras de las imágenes.
   -------------------------------------------------------------------------- */

.gt-gallery {
  background-color: var(--color-bg-alt);
  padding-block: 56px;

  /* Colores de la librería, redefinidos con nuestros tokens. Swiper los lee
     de estas variables, así que no hace falta pelear con sus selectores. */
  --swiper-theme-color: var(--color-primary);
  --swiper-navigation-color: var(--color-primary);
  --swiper-pagination-color: var(--color-primary);

  /* Las flechas por defecto de Swiper son muy grandes; se reduce el glifo y
     el círculo se dibuja abajo. */
  --swiper-navigation-size: 20px;
}


/* --------------------------------------------------------------------------
   .gt-gallery__title — título de sección
   -------------------------------------------------------------------------- */

.gt-gallery__title {
  margin: 0 0 28px;

  font-family: var(--font-primary);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
  text-align: center;
}


/* --------------------------------------------------------------------------
   .gt-gallery__carousel — contenedor Swiper
   El padding inferior deja sitio a los puntos, que van fuera de las imágenes
   para no taparlas.
   -------------------------------------------------------------------------- */

.gt-gallery__carousel {
  /* Espacio reservado bajo las imágenes para los puntos. Se declara como
     variable porque las flechas necesitan restarlo para quedar centradas
     respecto a las FOTOS, no respecto al bloque entero. */
  --gt-dots-space: 44px;

  padding-bottom: var(--gt-dots-space);

  /* Sin esto, en el momento inicial de carga las 11 imágenes se apilan en
     vertical antes de que Swiper tome el control. */
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   .gt-gallery__slide — cada diapositiva
   --------------------------------------------------------------------------
   ALTURA UNIFORME: la proporción fija 4:3 en el contenedor, más object-fit
   cover en la imagen, hace que todas las fotos se vean exactamente igual de
   grandes aunque los originales tengan proporciones distintas (aquí las hay
   panorámicas y casi cuadradas). Se recorta lo que sobra, nunca se deforma.

   Usar aspect-ratio en lugar de una altura en píxeles evita además el salto
   de maquetación al cargar: el hueco está reservado antes de que llegue la
   imagen.
   -------------------------------------------------------------------------- */

.gt-gallery__slide {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--color-primary);   /* se ve mientras carga la foto */
}

/* Botón que envuelve la imagen. Se le quitan todos los estilos propios de
   botón para que sea la foto lo que se vea, pero conserva el comportamiento
   de botón (foco, teclado). */
.gt-gallery__trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;                 /* indica que la imagen se amplía */
  overflow: hidden;
}

.gt-gallery__trigger:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;            /* hacia dentro: si no, lo recorta el slide */
}

.gt-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gt-gallery__trigger:hover .gt-gallery__img,
.gt-gallery__trigger:focus-visible .gt-gallery__img {
  transform: scale(1.04);
}


/* --------------------------------------------------------------------------
   .gt-gallery__arrow — flechas de navegación
   --------------------------------------------------------------------------
   OCULTAS EN MÓVIL a propósito: con una sola imagen en pantalla, dos flechas
   encima taparían buena parte de la foto. En móvil se navega con el dedo, que
   es el gesto natural, y quedan los puntos como indicador. Aparecen a partir
   de 768px, cuando ya hay dos imágenes y sobra sitio.
   -------------------------------------------------------------------------- */

.gt-gallery__arrow {
  display: none;
}


/* --------------------------------------------------------------------------
   .gt-gallery__dots — puntos de paginación
   -------------------------------------------------------------------------- */

.gt-gallery .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background-color: var(--color-primary);
  opacity: 0.28;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gt-gallery .swiper-pagination-bullet:hover {
  opacity: 0.6;
}

.gt-gallery .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.25);
}

/* Foco de teclado visible sobre los puntos, que son clicables */
.gt-gallery .swiper-pagination-bullet:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Ampliaciones por breakpoint
   -------------------------------------------------------------------------- */

/* Móvil grande — a partir de 480px */
@media (min-width: 480px) {

  .gt-gallery__title { font-size: 1.75rem; }

}

/* Tablet — a partir de 768px: aparecen las flechas */
@media (min-width: 768px) {

  .gt-gallery {
    padding-block: 80px;
  }

  .gt-gallery__title {
    font-size: 2rem;
    margin-bottom: 36px;
  }

  /* --------------------------------------------------------------------
     Flechas.

     CENTRADO: Swiper las coloca con top + un margin-top negativo calculado a
     partir de --swiper-navigation-size. Mezclar ese margin con un top propio
     hacía que la compensación se aplicara dos veces y la flecha quedara alta.
     Aquí se anula el margin y se centra con translate, que no depende de
     conocer el alto del botón.

     El translate lleva también el -50% horizontal a 0 para no perder el
     desplazamiento en el hover (que usa scale sobre el mismo eje).
     -------------------------------------------------------------------- */
  .gt-gallery__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    /* Centrado sobre las FOTOS: se descuenta el espacio de los puntos. */
    top: calc((100% - var(--gt-dots-space)) / 2);
    margin-top: 0;
    translate: 0 -50%;

    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    z-index: 2;                 /* por encima de las imágenes */

    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  /* El glifo de Swiper es una fuente de iconos; sin esto hereda el
     interlineado del contenedor y queda descentrado dentro del círculo. */
  .gt-gallery__arrow::after {
    line-height: 1;
    font-weight: 700;
  }

  .gt-gallery__arrow:hover {
    background-color: var(--color-bg);
    transform: scale(1.08);
  }

  .gt-gallery__arrow:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
  }

  /* Las flechas se apoyan en el borde del carrusel, ligeramente por dentro */
  .gt-gallery .swiper-button-prev { left: 8px; }
  .gt-gallery .swiper-button-next { right: 8px; }

}

/* Desktop — a partir de 1024px */
@media (min-width: 1024px) {

  .gt-gallery {
    padding-block: 96px;
  }

  .gt-gallery__title {
    font-size: 2.25rem;
    margin-bottom: 44px;
  }

  .gt-gallery__carousel {
    padding-bottom: 52px;
  }

}

/* Desktop ancho — a partir de 1280px */
@media (min-width: 1280px) {

  .gt-gallery {
    padding-block: 104px;
  }

}

}


/* --------------------------------------------------------------------------
   Accesibilidad — movimiento reducido
   El autoplay lo desactiva el propio JS. Aquí se quitan las transiciones de
   los controles y la aparición del visor.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .gt-gallery__arrow,
  .gt-gallery .swiper-pagination-bullet,
  .gt-gallery__img {
    transition: none;
  }

  .gt-gallery__arrow:hover {
    transform: none;
  }

  .gt-gallery__trigger:hover .gt-gallery__img,
  .gt-gallery__trigger:focus-visible .gt-gallery__img {
    transform: none;
  }

}