/* Pool fencing gallery block. Loaded only by blog/glass-pool-fencing-nz-regulations.html.
   Written 15 Sep 2026 so the block can be lifted onto services/pool-fencing.html
   without touching style.css. Every class is prefixed pg-. */

.pg-block{padding:56px 0 8px}
.pg-block[id],.pg-block [id]{scroll-margin-top:100px}
.pg-head{text-align:center;max-width:640px;margin:0 auto 32px}
.pg-head h2{margin-bottom:12px}
.pg-head p{color:var(--muted);font-size:17px;margin:0}

/* Three fears, answered. */
.pg-fears{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px}
.pg-fear{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow)}
.pg-fear-icon{width:46px;height:46px;border-radius:12px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pg-fear h3{font-size:1.0625rem;margin-bottom:8px;color:var(--text)}
.pg-fear p{font-size:15px;color:var(--body);margin:0;line-height:1.65}

/* Filter chips */
.pg-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}
.pg-chip{padding:9px 16px;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text);transition:border-color .15s,background .15s,color .15s}
.pg-chip:hover{border-color:var(--blue);color:var(--blue)}
.pg-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* Photo grid. The first tile spans two columns so the page opens on one big shot. */
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pg-tile{position:relative;display:block;width:100%;padding:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--blue-light);box-shadow:var(--shadow);text-align:left;cursor:zoom-in}
.pg-tile img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.pg-tile:hover img{transform:scale(1.04)}
.pg-tile:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.pg-tile.pg-wide{grid-column:span 2}
.pg-tile.pg-wide img{aspect-ratio:8/3}
.pg-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 14px;color:#fff;font-size:14px;font-weight:600;background:linear-gradient(180deg,rgba(7,15,38,0) 0%,rgba(7,15,38,.72) 100%);pointer-events:none}
.pg-tile[hidden]{display:none}

/* Options and styles */
.pg-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.pg-option{display:flex;gap:16px;align-items:flex-start;background:#f1f5f9;border:1px solid transparent;border-radius:var(--radius-lg);padding:22px 22px}
.pg-option-icon{flex:0 0 42px;width:42px;height:42px;border-radius:10px;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.pg-option h3{font-size:1rem;margin-bottom:5px;color:var(--text)}
.pg-option p{font-size:14.5px;color:var(--body);margin:0;line-height:1.6}
.pg-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}

/* Lightbox */
.pg-lightbox{border:0;border-radius:var(--radius-lg);padding:0;width:min(1040px,94vw);max-height:94vh;margin:auto;background:#0c121c;color:#fff;overflow:hidden}
.pg-lightbox::backdrop{background:rgba(4,15,35,.86)}
.pg-lightbox img{display:block;width:100%;max-height:76vh;object-fit:contain;background:#0c121c}
.pg-lb-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap}
.pg-lb-caption{flex:1;min-width:200px;font-size:15px;color:rgba(255,255,255,.9);margin:0}
.pg-lb-btn{padding:9px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);color:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;transition:background .15s}
.pg-lb-btn:hover{background:rgba(255,255,255,.14)}
.pg-lb-btn.pg-lb-quote{background:var(--blue);border-color:var(--blue)}
.pg-lb-btn.pg-lb-quote:hover{background:var(--blue-dark)}
.pg-lb-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;background:rgba(7,15,38,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.pg-lb-close:hover{background:rgba(7,15,38,.9)}
.pg-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(7,15,38,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.pg-lb-nav:hover{background:rgba(7,15,38,.9)}
.pg-lb-prev{left:10px}
.pg-lb-next{right:10px}

@media(max-width:900px){
  .pg-fears{grid-template-columns:1fr}
  .pg-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pg-tile.pg-wide img{aspect-ratio:2/1}
}
@media(max-width:560px){
  .pg-block{padding:40px 0 0}
  .pg-options{grid-template-columns:1fr}
  .pg-grid{grid-template-columns:1fr}
  .pg-tile.pg-wide{grid-column:span 1}
  .pg-tile img,.pg-tile.pg-wide img{aspect-ratio:4/3}
  .pg-cta .btn{width:100%;justify-content:center}
  .pg-lightbox{width:100vw;max-height:100vh;border-radius:0}
}
@media(prefers-reduced-motion:reduce){.pg-tile img{transition:none}}

/* Keep the complete source frame visible in the shower gallery. */
.pg-grid-full{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.pg-grid-full .pg-tile img{display:block;height:auto;aspect-ratio:auto;object-fit:contain;transform:none}
@media(max-width:560px){.pg-grid-full{grid-template-columns:1fr}}