/* =========================================================
   Media: responsive images, gallery tiles, video, lightbox
   ========================================================= */

/* <picture> must not break the layouts that expect a bare <img> */
picture{display:contents}

/* intrinsic size prevents the page jumping as images arrive */
.card .media img,
.project-card .media img{width:100%; height:190px; object-fit:cover; display:block}
.project-card .media img{height:170px}
.row-card .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.locality-tile img{width:100%; height:150px; object-fit:cover; display:block}
.grid--4 .locality-tile img{height:180px}
.broker-card .avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* the LQIP fades out once the real file paints */
.card .media img,.row-card .media img,.project-card .media img,.locality-tile img{
  transition:background-image .2s;
}

/* ---------------------------------------------------------
   Gallery tiles
   --------------------------------------------------------- */
.gallery{
  display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,140px);
  gap:8px; margin-bottom:8px;
}
.gtile{
  position:relative; padding:0; border:0; border-radius:8px; overflow:hidden;
  cursor:zoom-in; background:var(--navy); display:block; width:100%; height:100%;
}
.gtile.g1{grid-row:1/3}
.gtile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gtile:hover img{transform:scale(1.04)}
.gtile .gcap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 12px 8px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; text-align:left;
  background:linear-gradient(180deg,transparent,rgba(8,18,28,.8));
}
.gtile--video{cursor:pointer}
.gtile--video img{filter:brightness(.72)}
.gtile .gplay{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.94); box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  display:block; transition:transform .2s;
}
.gtile .gplay::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:15px solid var(--navy); border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.gtile--video:hover .gplay{transform:scale(1.08)}

.gallery .slot{border-radius:8px; height:100%}

/* ---------------------------------------------------------
   Inline video
   --------------------------------------------------------- */
video{max-width:100%; display:block; border-radius:8px; background:#000}

/* ---------------------------------------------------------
   Lightbox
   --------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(8,12,16,.92);
  display:grid; place-items:center; padding:28px;
}
.lightbox[hidden]{display:none}
.lightbox-body{max-width:min(1400px,94vw); max-height:90vh; display:grid; place-items:center}
.lightbox-body img,.lightbox-body video{
  max-width:100%; max-height:90vh; width:auto; height:auto;
  border-radius:6px; box-shadow:0 40px 90px -30px #000; object-fit:contain;
}
.lightbox-close{
  position:fixed; top:18px; right:22px; z-index:301;
  width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92); color:#111; font-size:22px; line-height:1;
}
.lightbox-close:hover{background:#fff}

@media (max-width:860px){
  .gallery{grid-template-columns:1fr 1fr; grid-template-rows:180px 110px}
  .gtile.g1{grid-column:1/-1; grid-row:auto}
}