.pgal-container{margin-bottom:2rem}
.pgal{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;border-radius:12px;overflow:hidden;align-items:stretch}
@media(min-width:768px){
  /* Locking the block's overall shape (width:height ~ 2.5:1) makes the grid's
     column width - and therefore its square cell size - equal to the block's
     height by construction, regardless of what shape the main photo is. This
     is what guarantees no gaps and always-equal, near-square thumbnails. */
  .pgal{aspect-ratio:2.5/1}
}
.pgal-main{position:relative;cursor:pointer;overflow:hidden;height:100%}

/* Desktop: track just shows the first slide (static); grid covers the rest */
.pgal-track{display:flex;width:100%;height:100%;overflow:hidden}
.pgal-slide{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden}
.pgal-slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}

.pgal-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px;height:100%}
.pgal-cell{position:relative;cursor:pointer;overflow:hidden;aspect-ratio:1/1}
.pgal-cell img{width:100%;height:100%;object-fit:cover;display:block}

.pgal-more{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;pointer-events:none}
.pgal-more-mobile{display:none}

.pgal-seeall{position:absolute;left:16px;bottom:16px;background:#fff;border:0;border-radius:999px;padding:.55rem 1.1rem;font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:2}
.pgal-count{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.6);color:#fff;font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;z-index:2;pointer-events:none}
.pgal-swipe-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:.8rem;font-weight:600;padding:.5rem 1rem;border-radius:999px;display:none;white-space:nowrap;pointer-events:none;animation:pgalHintFade 3.5s ease forwards;z-index:2}
@keyframes pgalHintFade{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}

/* Mobile: real native swipe - the browser/OS drives the drag, momentum and
   "swipe back", we just snap-scroll a flex strip. No custom touch physics. */
@media(max-width:767px){
  .pgal{grid-template-columns:1fr}
  .pgal-grid{display:none}
  .pgal-track{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .pgal-track::-webkit-scrollbar{display:none}
  .pgal-slide{scroll-snap-align:center;min-height:240px;max-height:300px;height:60vw}
  .pgal-more-mobile{display:flex}
  .pgal-count{display:block !important}
  .pgal-swipe-hint{display:block}
}
@media(min-width:768px){
  .pgal-count,.pgal-swipe-hint{display:none !important}
}

.pgal-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(10,10,10,.96);display:none;overflow:hidden;touch-action:pan-y}
.pgal-lightbox.open{display:flex}
.pgal-lb-img-wrap{
  width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.pgal-lb-img-wrap::-webkit-scrollbar{display:none}
.pgal-lb-track{display:flex;width:100%;height:100%}
.pgal-lb-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:center}
.pgal-lb-slide img{max-width:92vw;max-height:86vh;object-fit:contain;user-select:none;-webkit-user-drag:none}
.pgal-lb-close,.pgal-lb-prev,.pgal-lb-next{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.pgal-lb-close:hover,.pgal-lb-prev:hover,.pgal-lb-next:hover{background:rgba(255,255,255,.25)}
.pgal-lb-close{top:18px;right:18px}
.pgal-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.pgal-lb-next{right:18px;top:50%;transform:translateY(-50%)}
.pgal-lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:.85rem;background:rgba(255,255,255,.12);padding:.35rem .9rem;border-radius:999px;z-index:2;pointer-events:none}
@media(max-width:767px){.pgal-lb-prev,.pgal-lb-next{display:none}}