/* ── Wall Mode · Horizontal Masonry Scroll ───────────────── */
[data-mode="wall"],
[data-mode="wall"] *:focus { outline: none; }

[data-mode="wall"] * {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.gallery-wall-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ffffff url('wall.jpg') repeat;
  background-size: 10p;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-height: 79vh;
  outline: none;
}

/* ── Top / bottom white fade ─────────────────────────────── */
.gallery-wall-container::before,
.gallery-wall-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 1;
  pointer-events: none;
}
.gallery-wall-container::before {
  top: 0;
  background: linear-gradient(to bottom, #ffffff, transparent);
}
.gallery-wall-container::after {
  bottom: 0;
  background: linear-gradient(to top, #ffffff, transparent);
}

/* ── Scroll wrapper ──────────────────────────────────────── */
.gwall-scroll {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gwall-scroll::-webkit-scrollbar { display: none; }

/* ── Layout strip (sized by JS) ──────────────────────────── */
.gwall-grid {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Items (absolute positioned by JS) ───────────────────── */
.gwall-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Picture frame (wooden) ──────────────────────────────── */
.gwall-frame {
  --frame-w: 14px;
  width: 100%;
  height: 100%;
  padding: var(--frame-w);
  background: url('assets/wood-frame-1.jpg') center / cover;
 /* border: 2px solid #5a3a18;*/
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  /*box-shadow:*/
  /*  0 4px 16px rgba(0, 0, 0, 0.45),*/
  /*  0 1px 4px rgba(0, 0, 0, 0.25),*/
  /*  !* inner bevel highlight *!*/
  /*  inset 2px 2px 3px rgba(210, 170, 100, 0.5),*/
  /*  !* inner bevel shadow *!*/
  /*  inset -2px -2px 3px rgba(40, 20, 5, 0.4);*/
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* gold liner around image */
.gwall-frame::before {
  content: '';
  position: absolute;
  inset: calc(var(--frame-w) - 3px);
  border: 2px solid #c9a84c;
  box-shadow:
    inset 1px 1px 2px rgba(0,0,0,0.25),
    0 0 1px rgba(201,168,76,0.4);
  pointer-events: none;
  z-index: 1;
}
.gwall-item:hover .gwall-frame {
  transform: scale(1.015);
  box-shadow:
    0 8px 24px rgba(85, 85, 85, 0.55),
    0 2px 6px rgba(113, 19, 19, 0.35),
    inset 2px 2px 3px rgba(210, 170, 100, 0.5),
    inset -2px -2px 3px rgba(40, 20, 5, 0.4);
}

.gwall-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ── Caption overlay ─────────────────────────────────────── */
.gwall-caption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gwall-item:hover .gwall-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ── Navigation arrows ───────────────────────────────────── */
.gwall-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, background 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.gallery-wall-container:hover .gwall-nav { opacity: 1; }
.gwall-nav:hover { background: rgba(0, 0, 0, 0.8); }
.gwall-prev { left: 16px; }
.gwall-next { right: 16px; }

/* ── Counter badge ───────────────────────────────────────── */
.gwall-counter {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  padding: 4px 14px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 13px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-wall-container:hover .gwall-counter { opacity: 1; }

/* hide label (captions are per-item instead) */
.gwall-label { display: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .gwall-frame { --frame-w: 10px; padding: var(--frame-w); }
  .gwall-nav { width: 38px; height: 38px; font-size: 22px; }
}

@media (max-width: 540px) {
  .gwall-frame { --frame-w: 7px; padding: var(--frame-w); border-width: 1px; }
  .gwall-caption { font-size: 12px; bottom: 7px; left: 7px; right: 7px; }
  .gwall-prev { left: 8px; }
  .gwall-next { right: 8px; }
}

/* ── Zoom-to-item ────────────────────────────────────────── */
.gwall-grid {
  will-change: transform;
}
.gwall-item {
  will-change: filter, opacity;
}