/* ==========================================================================
   GALERÍA UNIFICADA (Hábitat y Construcción, Arte con la Gente,
   Bioculturalidad, Agroturismo) — mismo carrusel, mismas proporciones y
   misma disposición de textos en todas las páginas. Gestionado por una
   sola función en js/nina-sonqo.js (initGalleryInstance / initMiranchuroGallery).
   ========================================================================== */

.habitat-gallery-view,
.gallery-view {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 12px;
  height: 560px;
  overflow: hidden;
}

.habitat-gallery-main-wrap,
.gallery-main-wrap {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--olive-deep);
}

.habitat-gallery-main,
.gallery-main {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--olive-deep);
}

.habitat-gallery-context,
.gallery-context {
  position: absolute;
  right: 0px;
  bottom: 0;
  left: 30px;
  z-index: 1;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--white);
  background: linear-gradient(transparent, rgba(41, 41, 22, .9));
}

.habitat-gallery-context h3,
.gallery-context h3 {
  margin: 0 0 .35rem;
  color: var(--white);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 2px;
}

.habitat-gallery-context p,
.gallery-context p {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(.82rem, 1.4vw, 1rem);
  line-height: 1.4;
}

.habitat-gallery-next,
.gallery-next,
.habitat-gallery-prev,
.gallery-prev {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 54px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.habitat-gallery-next,
.gallery-next {
  right: 1.5rem;
}

.habitat-gallery-prev,
.gallery-prev {
  left: 1.5rem;
}

.habitat-gallery-next::after,
.gallery-next::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-top: 7px solid var(--lime);
  border-right: 7px solid var(--lime);
  transform: rotate(45deg);
  transition: transform .25s ease, border-color .25s ease;
}

.habitat-gallery-next:hover::after,
.gallery-next:hover::after {
  border-color: var(--white);
  transform: translateX(5px) rotate(45deg);
}

.habitat-gallery-prev::after,
.gallery-prev::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-top: 7px solid var(--lime);
  border-left: 7px solid var(--lime);
  transform: rotate(-45deg);
  transition: transform .25s ease, border-color .25s ease;
}

.habitat-gallery-prev:hover::after,
.gallery-prev:hover::after {
  border-color: var(--white);
  transform: translateX(-5px) rotate(-45deg);
}

.habitat-gallery-thumbs,
.thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.habitat-gallery-thumbs::-webkit-scrollbar,
.thumbs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.habitat-gallery-thumb,
.thumb {
  flex: none;
  height: 91px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  opacity: .7;
  transition: opacity .3s ease, outline .3s ease;
}

.habitat-gallery-thumb.is-active,
.habitat-gallery-thumb:hover,
.thumb.active,
.thumb:hover {
  opacity: 1;
  outline: 3px solid var(--cream);
  outline-offset: -3px;
}

.habitat-gallery-thumb img,
.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Indicadores móviles (contador + puntos) que sustituyen a las miniaturas */
.gallery-counter {
  display: none;
}

.gallery-dots {
  display: none;
}

@media (max-width: 767px) {
  .habitat-gallery-view,
  .gallery-view {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* La foto ocupa todo el ancho de la pantalla, sin los márgenes del .wrap */
  .habitat-gallery-main-wrap,
  .gallery-main-wrap {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    border-radius: 0;
  }

  .habitat-gallery-main,
  .gallery-main {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* Flechas: círculo oscuro con la chevron en el verde lima del proyecto */
  .habitat-gallery-next,
  .gallery-next,
  .habitat-gallery-prev,
  .gallery-prev {
    top: 52%;
    width: 44px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(20, 22, 10, .55);
  }

  .habitat-gallery-next,
  .gallery-next {
    /* Más separadas del borde para que no se salgan del margen de la foto */
    right: 30px;
  }

  .habitat-gallery-prev,
  .gallery-prev {
    left: 31px;
  }

  .habitat-gallery-next::after,
  .gallery-next::after,
  .habitat-gallery-prev::after,
  .gallery-prev::after {
    width: 6px;
    height: 6px;
  }

  /* Se reemplaza la tira de miniaturas por el contador y los puntos */
  .habitat-gallery-thumbs,
  .thumbs {
    display: none;
  }

  .gallery-counter {
    display: block;
    position: absolute;
    top: 14px;
    right: 42px;
    z-index: 3;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 46%);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .5px;
  }

  .gallery-dots {
    display: flex;
    position: static;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 8px;
  }

  .gallery-dot {
    width: 7px;
    height: 7px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(43, 43, 35, .3);
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
  }

  .gallery-dot.is-active {
    background: var(--olive, #5b6236);
    transform: scale(1.3);
  }

  /* Achica el texto superpuesto para que no tape la foto del carrusel */
  .habitat-gallery-context,
  .gallery-context {
    padding: .6rem .8rem !important;
  }

  .habitat-gallery-context h3,
  .gallery-context h3 {
    margin: 0 0 .2rem !important;
    font-size: .85rem !important;
    line-height: 1.25 !important;
  }

  .habitat-gallery-context p,
  .gallery-context p {
    font-size: .78rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
  }
}