/* ==========================================================================
   Terrain — product gallery: desktop mosaic, mobile swipe strip, lightbox.
   Loaded after journal.css.
   ========================================================================== */

/* Slots are buttons so they are keyboard-reachable; strip the button chrome. */
.t-gal__slot {
  appearance: none; border: 0; padding: 0; margin: 0; background: var(--ink-alt);
  cursor: zoom-in; display: block; position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.t-gal__slot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.t-gal__slot:hover img { transform: scale(1.025); }
.t-gal__slot:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* mobile controls are hidden on the desktop mosaic */
.t-gal__ctl { display: none; }

/* ---------- mobile: one photo at a time, swipe to advance ---------- */
@media (max-width: 767px) {
  .t-gallery,
  .t-gallery--solo,
  .t-gallery:has(.t-gallery__sq:nth-child(2):last-child),
  .t-gallery:has(.t-gallery__sq:nth-child(3):last-child) {
    display: flex; grid-template-columns: none; grid-template-rows: none;
    overflow-x: auto; overflow-y: hidden; gap: 0;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-radius: 16px; position: relative;
    scroll-behavior: smooth;
  }
  .t-gallery::-webkit-scrollbar { display: none; }
  .t-gallery .t-gal__slot,
  .t-gallery .t-gallery__hero,
  .t-gallery .t-gallery__sq {
    flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; grid-row: auto;
    scroll-snap-align: start; scroll-snap-stop: always; border-radius: 0;
  }
  .t-gallery--none .t-gallery__hero { aspect-ratio: 4 / 3; }

  /* controls float over the strip; sticky so they ride along while scrolling */
  .t-gal__ctl {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: absolute; left: 0; right: 0; bottom: 12px; padding: 0 12px;
    pointer-events: none;
  }
  .t-gal__btn, .t-gal__count { pointer-events: auto; }
  .t-gal__btn {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--b-16);
    background: rgba(10, 11, 10, .72); color: var(--sand); font-size: 26px; line-height: 1;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .t-gal__btn:active { background: var(--lime); color: #000; }
  .t-gal__count {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    background: rgba(10, 11, 10, .72); border: 1px solid var(--b-12);
    padding: 8px 12px; border-radius: 8px; backdrop-filter: blur(10px);
  }
}

/* a strip with controls needs to be the positioning context */
.t-gallery[data-gallery] { position: relative; }

/* ---------- lightbox ---------- */
.t-lb {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10, 11, 10, .96);
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  animation: tLbIn .2s var(--ease) both;
}
.t-lb[hidden] { display: none; }
@keyframes tLbIn { from { opacity: 0; } to { opacity: 1; } }
.t-lb__img {
  max-width: min(96vw, 1400px); max-height: 86vh; width: auto; height: auto;
  object-fit: contain; border-radius: 10px; user-select: none; -webkit-user-drag: none;
  touch-action: pan-y;
}
.t-lb__x, .t-lb__prev, .t-lb__next {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--b-16); background: rgba(18, 20, 18, .8); color: var(--sand);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 26px; line-height: 1; transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.t-lb__x:hover, .t-lb__prev:hover, .t-lb__next:hover { background: var(--lime); color: #000; }
.t-lb__x { top: max(14px, env(safe-area-inset-top)); right: 14px; font-size: 22px; }
.t-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.t-lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
.t-lb__prev[disabled], .t-lb__next[disabled] { opacity: .25; cursor: default; }
.t-lb__cap {
  position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom));
  text-align: center; pointer-events: none; padding: 0 70px;
}
.t-lb__count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--lime); display: block; }
.t-lb__alt { font-size: 13px; color: var(--t-72); display: block; margin-top: 6px; }
body.t-lb-open { overflow: hidden; }

@media (max-width: 767px) {
  .t-lb__prev, .t-lb__next { top: auto; bottom: max(60px, calc(env(safe-area-inset-bottom) + 46px)); transform: none; }
  .t-lb__img { max-height: 72vh; }
  .t-lb__cap { bottom: max(14px, env(safe-area-inset-bottom)); padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-lb { animation: none; }
  .t-gal__slot img, .t-gal__slot:hover img { transition: none; transform: none; }
  .t-gallery { scroll-behavior: auto; }
}