/* ════════════════════════════════════════════════════════════════
   GALERÍAS · Miss Pepi   ·   mokakopa invertido
   La estructura y el color de acento (--accent = var(--c-<categoría>))
   los inyecta js/gallery.js; aquí va el layout del scroll cruzado.
   Estética: fondo blanco, tipografía del sitio, que manden las imágenes.
   ════════════════════════════════════════════════════════════════ */

/* raíz de la vista: ocupa el #app-view (position:fixed; inset:0) */
.gallery {
  position: absolute;
  inset: 0;
  background: #fff;
  color: #111;
}

/* ---- track HORIZONTAL: pasa de proyecto con snap x mandatory ----
   Cada columna encaja a pantalla completa; la scrollbar se oculta
   (se navega con gesto/rueda). El scroll-snap manda en el eje X.     */
.gallery__track {
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; /* evita el "atrás" del navegador al llegar al borde */
  scrollbar-width: none;          /* Firefox */
}
.gallery__track::-webkit-scrollbar { display: none; } /* WebKit/Blink */

/* ---- COLUMNA = un proyecto: 100dvw × 100dvh, snap al inicio ----
   Dentro se scrollea en VERTICAL (imágenes apiladas + ficha al final);
   esa scrollbar sí la dejamos, pero discreta.                         */
.gallery__col {
  flex: 0 0 100dvw;
  width: 100dvw;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;       /* un gesto = un proyecto, sin saltarse ninguno */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;          /* Firefox: discreta */
  /* snap vertical por imagen, como mokakopa pero en columna */
  scroll-snap-type: y mandatory;
}
.gallery__col::-webkit-scrollbar { width: 6px; }
.gallery__col::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

/* ---- pila de imágenes: como mokakopa, en vertical ----
   Imágenes a su proporción (máx 80dvh × 85dvw), centradas, con aire
   entre ellas. El padding-top que centra la PRIMERA imagen en el
   viewport lo calcula js/gallery.js por columna (varía por imagen).  */
.gallery__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4dvh;
  padding: 10dvh 0 4dvh;   /* provisional; el JS afina el de arriba */
}
.gallery__img {
  display: block;
  max-height: 80dvh;
  max-width: 85dvw;
  width: auto;
  height: auto;
  object-fit: contain;
  scroll-snap-align: center;

  /* fade-in individual al cargar (js añade .loaded) */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gallery__img.loaded { opacity: 1; }
/* los clones son copias ya cacheadas: visibles desde el principio */
.gallery__col--clone .gallery__img { opacity: 1; }

/* ---- ficha técnica: pantalla propia al final del scroll vertical ----
   Texto plano alineado a la izquierda (como el menú), sin adornos.   */
.gallery__card {
  min-height: 100dvh;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  padding-left: 8vw;
  padding-right: 1.5rem;
  text-align: left;
}
.gallery__title {
  font-weight: normal;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
.gallery__caption {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
  max-width: 34rem;
}

/* ---- botón "menu": texto y ya, con el color de la categoría ---- */
.gallery__menu-btn {
  padding: 0;
  margin-top: 1.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: lowercase;
  color: var(--accent, #111);
  background: none;
  border: none;
  cursor: pointer;
}
.gallery__menu-btn:hover,
.gallery__menu-btn:focus-visible {
  text-decoration: underline;
}

/* ---- placeholder (categoría vacía / error): a la izquierda, con su color ---- */
.gallery__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  text-align: left;
  padding-left: 8vw;
  padding-right: 1.5rem;
}
.gallery__empty-text {
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--accent, #111);
}