/* go_gallery.css
   Clean, commented version + pinch-to-zoom essentials.
*/

/* ============ CSS variables ============ */
:root{
  --pf-gap: 12px;
  --pf-radius: 8px;
  --pf-icon: 18px;

  /* modern nav */
  --pf-nav-size: 56px;         /* base size of round buttons */
  --pf-arrow-size: 22px;       /* arrow glyph size */
  --pf-ctrl-gap: 12px;         /* gap between top-right controls */

  --pf-nav-bg: rgba(255,255,255,.10);
  --pf-nav-bg-hover: rgba(255,255,255,.16);
  --pf-nav-bg-active: rgba(255,255,255,.22);
  --pf-nav-border: rgba(255,255,255,.25);
  --pf-nav-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* So that the disappearance/appearance of the scrollbar does not trigger resize */
html { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* Smaller buttons on very narrow screens */
@media (max-width: 480px){
  :root{ --pf-nav-size: 48px; --pf-arrow-size: 20px; }
}

/* Disable smooth scrolling while restoring scroll position on close */
html.pf-no-smooth{ scroll-behavior: auto !important; }

/* Lock page scroll while lightbox is open */
body.pf-no-scroll{
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

/* ============ NOT Masonry grid ============ */
.pf-grid:not(.pf-masonry){ column-gap: var(--pf-gap); column-count: 4; }
@media (max-width: 1400px){ .pf-grid:not(.pf-masonry){ column-count: 3; } }
@media (max-width: 992px) { .pf-grid:not(.pf-masonry){ column-count: 2; } }
@media (max-width: 576px) { .pf-grid:not(.pf-masonry){ column-count: 2; } }

/* ============ NEW Masonry grid (JS controls the columns) ============ */
.pf-grid.pf-masonry{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pf-gap);
  overflow-anchor: none;
}
.pf-grid.pf-masonry .pf-col{
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  flex: 1 1 0;
  min-width: 0;
}
/* in masonry, indents are set by gap, the bottom margin on the card is not needed */
.pf-grid.pf-masonry .pf-card{ margin: 0; display: block }

/* sentinel as a "row" full width, so as not to "spoil" the column */
.pf-grid.pf-masonry .pf-sentinel{
  flex-basis: 100%;
  width: 100%;
  height: 1px;
}

/* ============ Card ============ */
.pf-card{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 4px 0;
  display: inline-block;
  width: 100%;
  border-radius: var(--pf-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  background: #111;
  position: relative;
  cursor: zoom-in;
}
.pf-card img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease, filter .25s ease;
}
.pf-card:hover img{
  transform: scale(1.015);
  filter: brightness(1.05);
}

/* ============ Card download button ============ */
.pf-dl-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 system-ui, sans-serif;
  opacity: 0;
  transition: opacity .2s ease;
  cursor: pointer;
  z-index: 2;
}
.pf-card:hover .pf-dl-btn{ opacity: 1; }
.pf-dl-btn:active{ transform: scale(.97); }

/* ============ Quality dropdown ============ */
.pf-menu{
  position: fixed;
  z-index: 10002;
  min-width: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: #1f1f1f;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  display: none;
  font: 500 16px/1.35 system-ui, sans-serif;
}
.pf-menu.open{ display: block; }
.pf-menu button{
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  font: inherit;
}
.pf-menu button:hover{ background: #2a2a2a; }

/* ============ Lightbox ============ */
.pf-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  touch-action: pan-y;
}
.pf-lightbox.open{
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;
}

/* Legacy single <img> fallback under .pf-lightbox (kept) */
.pf-lightbox > img{
  max-width: min(94vw, 1600px);
  max-height: 80vh;
  border-radius: var(--pf-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  margin-bottom: var(--pf-gap);
  touch-action: pan-y;
  -webkit-touch-callout: default;
  transform-origin: 50% 50%;
}

/* ============ Stage ============ */
/* Stage (fixed size set from JS), contains two layers (A/B) */
.pf-stage{
  position: relative;
  overflow: hidden;
  display: block;
  /* width/height set inline from JS: fit.displayW/H */
  background: #000;
  border-radius: var(--pf-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  margin-bottom: var(--pf-gap);
  /* Allow custom pinch/pan handling (disable browser pinch-zoom/scroll) */
  touch-action: none;
  pointer-events: auto;
  will-change: transform;
}

/* A/B layers (only one visible). We transform active image via JS. */
.pf-stage .pf-img{
  position: absolute; inset: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .12s ease;
  will-change: opacity, transform;
  /* Important for our math (translate+scale from top-left) */
  transform-origin: 0 0;
}
.pf-stage .pf-img.is-active{ opacity: 1; }

/* Slide layers: absolute, on top of each other */
.pf-layer{
  position: absolute;
  inset: 0;
  transform: translate3d(0,0,0);
  will-change: transform;
  transition: transform .28s cubic-bezier(.22,.61,.36,1); /* smooth/modern */
}

/* During animation, show both images (otherwise your fade will hide one) */
.pf-stage.animating .pf-img{ opacity: 1 !important; }

/* Spinner (while loading fast/full) */
.pf-lightbox.loading::after{
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: pfSpin 1s linear infinite;
  pointer-events: none;
}
@keyframes pfSpin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

/* ============ Modern nav buttons ============ */
.pf-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: var(--pf-nav-size);
  height: var(--pf-nav-size);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.12)) border-box;
  border: 1px solid var(--pf-nav-border);
  box-shadow: var(--pf-nav-shadow);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  z-index: 10001;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.pf-nav:active{ background: var(--pf-nav-bg-active); }
.pf-nav.is-pressed{ background: var(--pf-nav-bg-active); }

/* scale only the glyph, not the button position */
.pf-nav:hover::before{  transform: scale(1.08); }
.pf-nav.is-pressed::before{ transform: scale(.96); }

.pf-nav:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.pf-nav::before{
  content:"";
  display:block;
  width: var(--pf-arrow-size);
  height: var(--pf-arrow-size);
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  transition: transform .15s ease;
}
.pf-prev{ left: 16px; }
.pf-next{ right: 16px; }

.pf-arrow-left::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.pf-arrow-right::before{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
}

/* On mobile: place nav under the photo, centered */
@media (max-width: 768px){
  .pf-nav{
    top: auto;
    bottom: 16px;
    transform: none; /* stable position; no jump on :hover/:active */
  }
  .pf-prev{ left: 50%; right: auto; transform: translateX(calc(-50% - (var(--pf-nav-size) + 12px))); }
  .pf-next{ left: 50%; right: auto; transform: translateX(calc(-50% + (var(--pf-nav-size) + 12px))); }
}

/* ============ Top-right controls ============ */
.pf-close{
  position: fixed;
  top: 16px;
  right: 16px;
  transform: none;
  width: var(--pf-nav-size);
  height: var(--pf-nav-size);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 18px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  z-index: 10001;
  pointer-events: auto;
}
.pf-download{
  position: fixed;
  top: 16px;
  right: calc(16px + var(--pf-nav-size) + var(--pf-ctrl-gap));
  transform: none;
  width: var(--pf-nav-size);
  height: var(--pf-nav-size);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 18px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  z-index: 10001;
  pointer-events: auto;
}
/* iPhone/Safari UX: no "Download", only "Save" */
.pf-ios .pf-download{ display:none !important; }
.pf-ios .pf-dl-btn{ display:none !important; }

/* Save button (iOS only, shown by JS via .pf-ios on <html>) */
.pf-save{
  position: fixed;
  top: 16px;
  right: calc(16px + 2*(var(--pf-nav-size) + var(--pf-ctrl-gap)));
  width: var(--pf-nav-size);
  height: var(--pf-nav-size);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: none;                  /* default hidden */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
}
/* position Save next to Close when Download is hidden */
.pf-ios .pf-save{
  display:flex !important;
  right: calc(16px + var(--pf-nav-size) + var(--pf-ctrl-gap));
}

/* ============ Skeletons ============ */
.pf-skel{
  height: 180px;
  border-radius: var(--pf-radius);
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: pfShine 1.2s linear infinite;
  margin: 0 0 var(--pf-gap) 0;
}
@keyframes pfShine{ to{ background-position: -200% 0; } }
.pf-empty{ padding: 24px; opacity: .7; }

/* Infinite scroll sentinel */
.pf-sentinel{ height:0; line-height:0; }

/* ============ Download icon (CSS mask) ============ */
.pf-icon-download::before{
  content: "";
  display: block;
  width: var(--pf-icon);
  height: var(--pf-icon);
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a 2 2 0 0 1-2 2H5a 2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a 2 2 0 0 1-2 2H5a 2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Apply icon class */
.pf-dl-btn{ display: flex; align-items: center; justify-content: center; }
.pf-dl-btn::before{ content: ""; }
.pf-dl-btn.pf-icon-download::before{ content: ""; }

.pf-download{ font-size: 0; line-height: 0; }
.pf-download::before{ content: ""; }
.pf-download.pf-icon-download::before{ content: ""; }

/* Reduced motion: keep things steady */
@media (prefers-reduced-motion: reduce){
  .pf-nav{ transition: none; }
}