/* =============================================================
   AJK Welfare — Gallery
   Full-viewport, pannable 2D photo canvas (Figma "Desktop - 10")
   Without JS the same tiles fall back to a normal masonry page.
   ============================================================= */

:root{
  --gal-head:119px;
  --gal-radius:20px;
}
@media (max-width:1100px){:root{--gal-head:93px}}
@media (max-width:560px){:root{--gal-head:81px}}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* -------------------------------------------------------------
   Intro (visible only without JS)
   ------------------------------------------------------------- */
.gal-stage{
  position:relative;
  padding:0 0 88px;
}
.gal-world{
  columns:3;
  column-gap:20px;
  width:min(1308px,calc(100% - 48px));
  margin:0 auto;
}
.gal-tile{
  break-inside:avoid;
  margin:0 0 20px;
  border-radius:var(--gal-radius);
  overflow:hidden;
  background:#e9edf2;
}
.gal-tile img{
  display:block;
  width:100%;
  height:auto;
}
.gal-fade,
.gal-hint,
.gal-reset{display:none}

/* -------------------------------------------------------------
   Header sits over the photographs (design shows the collage
   running behind the navigation)
   ------------------------------------------------------------- */
html.js .gallery-page{height:100%;overflow:hidden}

html.js .site-header{
  position:fixed;
  left:0;right:0;top:0;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
  box-shadow:none;
}

/* -------------------------------------------------------------
   Canvas mode — the photographs fill the screen below the header.
   ------------------------------------------------------------- */
html.js .gallery-page{
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-top:var(--gal-head);
}

html.js .gallery-page #main{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

html.js .gal-stage{
  position:relative;
  inset:auto;
  flex:1 1 auto;
  min-height:220px;
  padding:0;
  overflow:hidden;
  background:#fff;
  touch-action:none;
  cursor:grab;
  outline:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
html.js .gal-stage.is-dragging{cursor:grabbing}
html.js .gal-stage:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}

html.js .gal-world{
  position:absolute;
  top:0;left:0;
  width:0;height:0;
  columns:auto;
  column-gap:0;
  margin:0;
  padding:0;
  transform-origin:0 0;
  will-change:transform;
}
html.js .gal-tile{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  margin:0;
  border-radius:var(--gal-radius);
  background:#e9edf2;
  overflow:hidden;
}
html.js .gal-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  -webkit-user-drag:none;
  user-select:none;
}

/* white fades: 127px under the navigation, 63px above the hint */
html.js .gal-fade{
  display:block;
  position:absolute;
  left:0;right:0;
  z-index:2;
  pointer-events:none;
}
html.js .gal-fade-top{
  top:0;
  height:127px;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%);
}
html.js .gal-fade-bottom{
  bottom:0;
  height:63px;
  background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%);
}

/* "Scroll to explore" (design places it 20px above the bottom edge) */
html.js .gal-hint{
  display:block;
  position:absolute;
  left:50%;
  bottom:20px;
  z-index:3;
  margin:0;
  transform:translateX(-50%);
  font-size:14px;
  font-weight:500;
  line-height:20px;
  letter-spacing:-.014px;
  color:var(--ink);
  white-space:nowrap;
  pointer-events:none;
  /* keeps the label legible when a photograph sits behind it */
  text-shadow:0 0 4px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.gal-stage.is-explored .gal-hint{
  opacity:0;
  transform:translateX(-50%) translateY(6px);
}

/* reset control — appears once the view has been moved */
html.js .gal-reset{
  display:grid;
  place-items:center;
  position:absolute;
  right:24px;
  bottom:16px;
  z-index:4;
  width:40px;height:40px;
  padding:0;
  border:1px solid rgba(10,31,51,.14);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  color:var(--ink);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.gal-stage.is-moved .gal-reset{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.gal-reset:hover{background:#fff;border-color:rgba(10,31,51,.3)}
.gal-reset:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.gal-reset svg{width:17px;height:17px}

/* no-JS masonry breakpoints */
@media (max-width:900px){
  .gal-world{columns:2}
}
@media (max-width:560px){
  .gal-world{
    columns:1;
    width:100%;
    padding:0 20px;
  }
  .gal-stage{padding-bottom:64px}
  html.js .gal-reset{right:16px;bottom:14px}
}