/* PropertyInsider.sg — project Gallery + Site Map
   Scoped to .pmg-* so nothing here can reach into nl.css or tower-view.css.
   Companion to new-launches/assets/media-gallery.js. */

/* ---------- shared grid ---------- */
.pmg{margin-top:var(--s2)}
.pmg-lead{display:block;width:100%;margin:0 0 var(--s3)}
.pmg-lead img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--grey-bg)}
.pmg-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(4,1fr)}
.pmg-grid.sm{grid-template-columns:repeat(2,1fr)}

/* Every tile is a button: the image is the control, and the control is
   reachable by keyboard because it is a real <button>, not a div with a
   click handler. */
.pmg-t{display:block;position:relative;padding:0;border:1px solid var(--border);border-radius:10px;
  overflow:hidden;background:var(--grey-bg);cursor:zoom-in;line-height:0;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pmg-t:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--text-muted)}
.pmg-t:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px}
.pmg-t img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--grey-bg)}
/* A site plan is a drawing, not a photograph: cropping it to a tidy ratio
   throws away the legend. Contain it and let the white show. */
.pmg-grid.sm .pmg-t{cursor:zoom-in;background:var(--white)}
.pmg-grid.sm .pmg-t img{aspect-ratio:auto;object-fit:contain;max-height:420px}

.pmg-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 7px;
  font-family:var(--font-mono);font-size:11px;line-height:1.35;color:#fff;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0))}
.pmg-grid.sm .pmg-cap{position:static;background:none;color:var(--text-muted);padding:8px 10px 10px}

/* Collapse past the first row-and-a-bit; the rest of the markup is present
   for crawlers and for anyone who presses the button. */
.pmg-grid > .pmg-t:nth-child(n+9){display:none}
.pmg-grid.is-open > .pmg-t:nth-child(n+9){display:block}
.pmg-more{margin-top:var(--s3);display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--border);border-radius:999px;
  padding:8px 16px;font-family:var(--font-mono);font-size:12px;color:var(--text);cursor:pointer}
.pmg-more:hover{border-color:var(--text-muted);background:var(--grey-light)}

/* ---------- lightbox ---------- */
/* .nav is sticky at z-index 1000, so the overlay sits decisively above it. */
.pmg-lb{position:fixed;inset:0;z-index:5000;display:none;background:rgba(14,17,20,.94);
  align-items:center;justify-content:center;padding:56px 16px 72px}
.pmg-lb.open{display:flex}
.pmg-lb-fig{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px}
.pmg-lb-fig img{max-width:100%;max-height:calc(100vh - 156px);width:auto;height:auto;
  object-fit:contain;border-radius:8px;background:#fff}
.pmg-lb-cap{font-family:var(--font-mono);font-size:12px;line-height:1.5;color:rgba(255,255,255,.78);
  text-align:center;max-width:760px}
.pmg-lb-btn{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:999px;width:44px;height:44px;font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.pmg-lb-btn:hover{background:rgba(255,255,255,.2)}
.pmg-lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pmg-lb-x{top:12px;right:12px}
.pmg-lb-p{left:12px;top:50%;transform:translateY(-50%)}
.pmg-lb-n{right:12px;top:50%;transform:translateY(-50%)}
.pmg-lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.6)}
body.pmg-lock{overflow:hidden}

@media(max-width:900px){
  .pmg-grid{grid-template-columns:repeat(3,1fr)}
  .pmg-grid > .pmg-t:nth-child(n+7){display:none}
  .pmg-grid.is-open > .pmg-t:nth-child(n+7){display:block}
}
@media(max-width:640px){
  .pmg-grid{grid-template-columns:repeat(2,1fr)}
  .pmg-grid.sm{grid-template-columns:1fr}
  .pmg-grid.sm .pmg-t img{max-height:300px}
  .pmg-lb{padding:52px 8px 64px}
  .pmg-lb-btn{width:40px;height:40px}
  .pmg-lb-p{left:6px}.pmg-lb-n{right:6px}
}