/* =========================================================================
   iDeal — "All photos" grid sheet for the property page.
   Deliberately a separate stylesheet: assets/style.css is edited elsewhere,
   so everything the photo grid needs lives here and is only loaded by the
   three property.html pages.
   ========================================================================= */

/* ---- "All photos" button under the collage ---------------------------- */
.pd-all-photos{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 16px;padding:11px 18px;
  background:#fff;border:1.5px solid var(--line,#e6e6e6);
  font-family:inherit;font-size:12.5px;font-weight:800;line-height:1;
  color:var(--ink-2,#3a4552);cursor:pointer;
  transition:border-color .2s,color .2s;
}
.pd-all-photos:hover{border-color:var(--gold,#af955a);color:var(--gold-dark,#8d7640);}
.pd-all-photos:focus-visible{outline:2px solid var(--gold,#af955a);outline-offset:2px;}
.pd-all-photos svg{width:16px;height:16px;flex:none;}
.pd-all-photos .pd-all-n{font-weight:700;opacity:.62;}

/* the "+N" badge on the last collage thumb is a real click target now */
.pd-gallery-grid .g-thumb.more{cursor:pointer;}
.pd-gallery-grid .g-thumb.more::after{cursor:pointer;}

/* ---- the grid sheet --------------------------------------------------- */
.gsheet{
  position:fixed;inset:0;z-index:2900;           /* lightbox is 3000, sits above */
  background:#fff;
  display:none;flex-direction:column;
}
.gsheet.open{display:flex;}

.gsheet-head{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:12px 16px;background:#fff;
  border-bottom:1px solid var(--line,#e6e6e6);
}
.gsheet-titles{min-width:0;}
.gsheet-titles h3{
  margin:0;font-size:15px;font-weight:800;color:var(--ink,#132d47);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gsheet-count{margin-top:3px;font-size:11.5px;font-weight:700;color:var(--muted,#8a8f98);}
.gsheet-close{
  margin-inline-start:auto;flex:none;
  width:44px;height:44px;border:0;border-radius:50%;
  background:var(--gray-50,#f4f5f6);color:var(--ink,#132d47);
  font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.gsheet-close:hover{background:#e7e9ec;}
.gsheet-close:focus-visible{outline:2px solid var(--gold,#af955a);outline-offset:2px;}

.gsheet-body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:14px 16px calc(34px + env(safe-area-inset-bottom,0px));
}
.gsheet-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));   /* phone */
  max-width:1200px;margin:0 auto;
}
.gsheet-cell{
  position:relative;display:block;padding:0;border:0;
  background:var(--gray-50,#f4f5f6);cursor:pointer;overflow:hidden;
}
.gsheet-cell img{
  display:block;width:100%;height:100%;
  aspect-ratio:1/1;object-fit:cover;
  transition:transform .35s ease,filter .25s;
}
.gsheet-cell:hover img{transform:scale(1.04);filter:brightness(.93);}
.gsheet-cell:focus-visible{outline:3px solid var(--gold,#af955a);outline-offset:2px;}
.gsheet-cell.is-active::after{
  content:'';position:absolute;inset:0;
  border:3px solid var(--gold,#af955a);
}
.gsheet-cell .gsheet-n{
  position:absolute;inset-block-end:6px;inset-inline-start:6px;
  padding:2px 7px;border-radius:2px;
  background:rgba(19,45,71,.72);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.3px;
  opacity:0;transition:opacity .2s;
}
.gsheet-cell:hover .gsheet-n,.gsheet-cell:focus-visible .gsheet-n{opacity:1;}

/* aspect-ratio fallback for older engines */
@supports not (aspect-ratio:1/1){
  .gsheet-cell{padding-top:100%;}
  .gsheet-cell img{position:absolute;inset:0;height:100%;}
}

@media(min-width:700px){
  .gsheet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .gsheet-head{padding:14px 26px;}
  .gsheet-titles h3{font-size:17px;}
  .gsheet-body{padding:20px 26px 40px;}
}
@media(min-width:1150px){
  .gsheet-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ---- lightbox: keep it usable on top of the sheet --------------------- */
.lightbox-overlay.open{z-index:3000;}
/* the stylesheet pins prev/next for RTL; flip them on the English page */
html[dir="ltr"] .lightbox-nav.prev{left:24px;right:auto;}
html[dir="ltr"] .lightbox-nav.next{right:24px;left:auto;}
html[dir="ltr"] .lightbox-close{right:24px;left:auto;}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(max-width:480px){
  .lightbox-close{top:14px;width:40px;height:40px;}
  .lightbox-nav{width:44px;height:44px;}
  .lightbox-nav.prev{right:10px;}
  .lightbox-nav.next{left:10px;}
  html[dir="ltr"] .lightbox-nav.prev{left:10px;right:auto;}
  html[dir="ltr"] .lightbox-nav.next{right:10px;left:auto;}
  html[dir="ltr"] .lightbox-close{right:14px;left:auto;}
}