/* ─── ART — PAGE-BY-PAGE SNAP GALLERY ───────────────────────────────────── */

body { overflow: hidden; }


/* ─── GALLERY WRAPPER ────────────────────────────────────────────────────── */

.gallery-wrap {
  position: fixed;
  top: 76px; left: 0; right: 0; bottom: 0;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery-wrap::-webkit-scrollbar { display: none; }


/* ─── SCREENS ────────────────────────────────────────────────────────────── */

.art-screen {
  width: 100vw;
  flex-shrink: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* ─── SCREEN --1 — 7 items  (fila 1 ancha, fila 2 angosta) ──────────────── */
/*  Row 1: [────4────][────4────][────4────]
    Row 2: [──3──][──3──][──3──][──3──]           */

.art-screen--1 .gallery-item:nth-child(1) { grid-column: 1/5;   grid-row: 1; }
.art-screen--1 .gallery-item:nth-child(2) { grid-column: 5/9;   grid-row: 1; }
.art-screen--1 .gallery-item:nth-child(3) { grid-column: 9/13;  grid-row: 1; }
.art-screen--1 .gallery-item:nth-child(4) { grid-column: 1/4;   grid-row: 2; }
.art-screen--1 .gallery-item:nth-child(5) { grid-column: 4/7;   grid-row: 2; }
.art-screen--1 .gallery-item:nth-child(6) { grid-column: 7/10;  grid-row: 2; }
.art-screen--1 .gallery-item:nth-child(7) { grid-column: 10/13; grid-row: 2; }


/* ─── SCREEN --2 — 5 items  (BIG derecha) ────────────────────────────────── */
/*  Row 1: [──3──][──3──][────── BIG 6 ↕1-2 ──────]
    Row 2: [──3──][──3──][────── BIG cont ─────────]   */

.art-screen--2 .gallery-item:nth-child(1) { grid-column: 1/4;  grid-row: 1;   }
.art-screen--2 .gallery-item:nth-child(2) { grid-column: 4/7;  grid-row: 1;   }
.art-screen--2 .gallery-item:nth-child(3) { grid-column: 7/13; grid-row: 1/3; } /* BIG */
.art-screen--2 .gallery-item:nth-child(4) { grid-column: 1/4;  grid-row: 2;   }
.art-screen--2 .gallery-item:nth-child(5) { grid-column: 4/7;  grid-row: 2;   }


/* ─── SCREEN --3 — 7 items  (fila 1 angosta, fila 2 ancha — invertido) ───── */
/*  Row 1: [──3──][──3──][──3──][──3──]
    Row 2: [────4────][────4────][────4────]        */

.art-screen--3 .gallery-item:nth-child(1) { grid-column: 1/4;   grid-row: 1; }
.art-screen--3 .gallery-item:nth-child(2) { grid-column: 4/7;   grid-row: 1; }
.art-screen--3 .gallery-item:nth-child(3) { grid-column: 7/10;  grid-row: 1; }
.art-screen--3 .gallery-item:nth-child(4) { grid-column: 10/13; grid-row: 1; }
.art-screen--3 .gallery-item:nth-child(5) { grid-column: 1/5;   grid-row: 2; }
.art-screen--3 .gallery-item:nth-child(6) { grid-column: 5/9;   grid-row: 2; }
.art-screen--3 .gallery-item:nth-child(7) { grid-column: 9/13;  grid-row: 2; }


/* ─── SCREEN --4 — 5 items  (BIG izquierda) ──────────────────────────────── */
/*  Row 1: [────── BIG 6 ↕1-2 ──────][──3──][──3──]
    Row 2: [────── BIG cont ─────────][──3──][──3──]   */

.art-screen--4 .gallery-item:nth-child(1) { grid-column: 1/7;  grid-row: 1/3; } /* BIG */
.art-screen--4 .gallery-item:nth-child(2) { grid-column: 7/10; grid-row: 1;   }
.art-screen--4 .gallery-item:nth-child(3) { grid-column: 10/13;grid-row: 1;   }
.art-screen--4 .gallery-item:nth-child(4) { grid-column: 7/10; grid-row: 2;   }
.art-screen--4 .gallery-item:nth-child(5) { grid-column: 10/13;grid-row: 2;   }


/* ─── SCREEN --5 — 5 items  (BIG centro) ─────────────────────────────────── */
/*  Row 1: [──3──][────── BIG 6 ↕1-2 ──────][──3──]
    Row 2: [──3──][────── BIG cont ─────────][──3──]   */

.art-screen--5 .gallery-item:nth-child(1) { grid-column: 1/4;  grid-row: 1;   }
.art-screen--5 .gallery-item:nth-child(2) { grid-column: 4/10; grid-row: 1/3; } /* BIG */
.art-screen--5 .gallery-item:nth-child(3) { grid-column: 10/13;grid-row: 1;   }
.art-screen--5 .gallery-item:nth-child(4) { grid-column: 1/4;  grid-row: 2;   }
.art-screen--5 .gallery-item:nth-child(5) { grid-column: 10/13;grid-row: 2;   }


/* ─── SLIDESHOW ───────────────────────────────────────────────────────────── */

.work-item-slideshow {
  position: absolute;
  inset: 0;
}

/* Especificidad alta para ganarle a .work-item img.img-loaded en home.css */
.gallery-item .work-item .work-item-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: none;
  transition: opacity 0.5s ease;
}

.gallery-item .work-item .work-item-slideshow img.is-active { opacity: 1; }

.gallery-item .work-item:hover .work-item-slideshow img { transform: none; }


/* ─── ITEM BASE ───────────────────────────────────────────────────────────── */

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item .work-item {
  position: absolute;
  inset: 0;
}

.gallery-item .work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Override home.css — imágenes visibles sin JS */
.gallery-item .work-item img { opacity: 1; }


/* ─── ENTRANCE ANIMATION ──────────────────────────────────────────────────── */

@keyframes galleryIn {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

.gallery-item { animation: galleryIn 0.7s var(--ease-out) both; }

.art-screen .gallery-item:nth-child(1) { animation-delay: 0.00s; }
.art-screen .gallery-item:nth-child(2) { animation-delay: 0.04s; }
.art-screen .gallery-item:nth-child(3) { animation-delay: 0.08s; }
.art-screen .gallery-item:nth-child(4) { animation-delay: 0.12s; }
.art-screen .gallery-item:nth-child(5) { animation-delay: 0.16s; }
.art-screen .gallery-item:nth-child(6) { animation-delay: 0.20s; }
.art-screen .gallery-item:nth-child(7) { animation-delay: 0.24s; }
.art-screen .gallery-item:nth-child(8) { animation-delay: 0.28s; }
.art-screen .gallery-item:nth-child(9) { animation-delay: 0.32s; }


/* ─── GALLERY ARROWS ──────────────────────────────────────────────────────── */

.gallery-arrow {
  position: fixed;
  top: calc(76px + (100vh - 76px) / 2);
  transform: translateY(-50%);
  z-index: 20;
  background: none;
  border: none;
  cursor: none;
  padding: 20px;
  color: rgba(255,255,255,0.28);
  transition: color 0.4s var(--ease-out), opacity 0.5s var(--ease-out);
  user-select: none;
  -webkit-user-select: none;
}

.gallery-arrow:hover { color: rgba(255,255,255,0.85); }

.gallery-arrow-left  { left: 16px; }
.gallery-arrow-right { right: 16px; }

.gallery-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ─── SCROLL PROGRESS ─────────────────────────────────────────────────────── */

.scroll-progress {
  position: fixed;
  bottom: 0; left: 0;
  height: 1px;
  width: 0%;
  background: rgba(255,255,255,0.3);
  z-index: 50;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ─── RESPONSIVE — MOBILE (≤ 767px) ──────────────────────────────────────── */

@media (max-width: 767px) {
  body { overflow-y: auto; overflow-x: hidden; }

  /* un solo grid 2 columnas — todos los items fluyen directo aquí */
  .gallery-wrap {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* sin filtros: header ya en flujo, no compensar */
  body:not(.has-gallery-filters) .gallery-wrap { padding-top: 0; }

  /* grupos y pantallas se disuelven → gallery-item es hijo directo del grid */
  .gallery-group.is-active { display: contents; }
  .art-screen              { display: contents; }

  .gallery-item { height: 50vw; }

  .art-screen .gallery-item:nth-child(n) {
    grid-column: unset !important;
    grid-row: unset !important;
    animation-delay: 0s !important;
  }

  .gallery-arrow   { display: none; }
  .scroll-progress { display: none; }

  /* mobile: skip fade-in JS — imágenes siempre visibles */
  .gallery-item .work-item img { opacity: 1; }
}