/* =============================================================
   AJK Welfare — Project impact pages
   A full-screen gallery-style photo canvas with one Donate button.
   Without JS the tiles fall back to masonry.
   ============================================================= */

.project-page{background:#fff}

/* -------------------------------------------------------------
   Back button (the only chrome on the page)
   ------------------------------------------------------------- */
.pjd-back{
  position:fixed;
  top:24px;
  left:24px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px 11px 15px;
  border:1px solid rgba(10,31,51,.12);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  color:var(--ink);
  font-size:14px;
  line-height:20px;
  font-weight:500;
  letter-spacing:-.01em;
  box-shadow:0 6px 22px rgba(10,31,51,.14);
  transition:background .2s,box-shadow .2s,transform .2s;
}
.pjd-back:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(10,31,51,.2);
}
.pjd-back svg{width:16px;height:16px;flex:none}

/* -------------------------------------------------------------
   Donate button — the only call to action on the photo canvas
   ------------------------------------------------------------- */
.pjd-donate{
  position:fixed;
  top:24px;
  right:24px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border:1px solid var(--brand);
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:14px;
  line-height:20px;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  box-shadow:0 6px 22px rgba(0,113,227,.28);
  transition:background .2s,box-shadow .2s,transform .2s;
}
.pjd-donate:hover{
  background:#0062c4;
  border-color:#0062c4;
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,113,227,.34);
}
.pjd-donate:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.pjd-donate svg{width:16px;height:16px;flex:none}


/* -------------------------------------------------------------
   Canvas mode: the photographs fill the whole screen and are the
   page. Only the back and donate buttons sit on top.
   ------------------------------------------------------------- */
html.js .project-page{height:100vh;height:100dvh;overflow:hidden}

html.js .pjd-stage{
  position:relative;
  inset:auto;
  height:100vh;
  height:100dvh;
  min-height:420px;
  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;
  z-index:1;
}
html.js .pjd-stage.is-dragging{cursor:grabbing}
html.js .pjd-stage:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}

/* The top fade is shorter here — there is no navigation, only the
   floating back button, so the photographs can run almost to the edge. */
html.js .gal-fade-top{height:96px}

/* Hint and reset use the gallery styles; nudge them for this page */
html.js .pjd-stage .gal-hint{bottom:22px}
html.js .pjd-stage .gal-reset{right:24px;bottom:16px}

@media (max-width:560px){
  .pjd-back{
    top:16px;
    left:16px;
    padding:10px 17px 10px 13px;
    font-size:13px;
  }
  .pjd-donate{top:16px;right:16px;padding:10px 18px;font-size:13px}
  html.js .gal-fade-top{height:78px}
  html.js .pjd-stage .gal-reset{right:16px;bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  .pjd-back{transition:none}
}