/* ============================================================================
   pd2-gallery.css — Property Detail v2, W1 (gallery mosaic + lightbox)
   OWNER: W1. Only W1 may edit this file and
          resources/views/front/property/detailPartials/v2/gallery.blade.php

   CSS PREFIX: every selector starts with .pd2-g-  (plan section 0, rule 2).
   Design source of truth: website html/index/property-detail-v3.html
     .gallery/.g-*  ->  .pd2-g-mosaic / .pd2-g-*
     .lb/.lb-*      ->  .pd2-g-lb / .pd2-g-lb-*
   Colours, radii and shadows come from pd2-tokens.css via var(--pd2-*).
   The only hardcoded colours are the ones the prototype hardcodes too and
   which have no token: the opaque #141110 lightbox backdrop and the
   white-alpha chrome painted on top of it.
   ========================================================================== */

/* ============================================================
   MOSAIC — replaces the one-at-a-time slideshow
   ============================================================ */
.pd2-g-mosaic{
  position:relative; display:grid; gap:8px;
  border-radius:var(--pd2-r-lg); overflow:hidden;
  grid-template-columns:2fr 1fr 1fr; grid-template-rows:172px 172px;
  background:var(--pd2-bg-sunk); margin-top:8px;
}
.pd2-g-mosaic .pd2-g-cell{position:relative; overflow:hidden; background:var(--pd2-bg-sunk); cursor:pointer}
.pd2-g-mosaic .pd2-g-cell img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.pd2-g-mosaic .pd2-g-cell:hover img{transform:scale(1.045)}
.pd2-g-mosaic .pd2-g-main{grid-row:1 / span 2}

/* keyboard affordance only — invisible to a mouse user, so no pixel diff */
.pd2-g-mosaic .pd2-g-cell:focus-visible{outline:3px solid var(--pd2-accent); outline-offset:-3px}

/* ---- adaptive layouts by photo count -------------------------------
   Most owners upload 1-4 photos, not 12. The mosaic must never leave a
   hole, and must never stretch two photos across a five-slot grid. --- */
.pd2-g-mosaic.pd2-g-count-0{grid-template-columns:1fr; grid-template-rows:300px}
.pd2-g-mosaic.pd2-g-count-1{grid-template-columns:1fr; grid-template-rows:400px}
.pd2-g-mosaic.pd2-g-count-2{grid-template-columns:1fr 1fr; grid-template-rows:340px}
.pd2-g-mosaic.pd2-g-count-3{grid-template-columns:2fr 1fr; grid-template-rows:172px 172px}
.pd2-g-mosaic.pd2-g-count-4{grid-template-columns:1fr 1fr; grid-template-rows:172px 172px}
.pd2-g-mosaic.pd2-g-count-5{grid-template-columns:2fr 1fr 1fr; grid-template-rows:172px 172px}

.pd2-g-count-1 .pd2-g-main,
.pd2-g-count-2 .pd2-g-main,
.pd2-g-count-4 .pd2-g-main{grid-row:auto}
.pd2-g-count-3 .pd2-g-main,
.pd2-g-count-5 .pd2-g-main{grid-row:1 / span 2}

/* Belt-and-braces: the Blade partial only prints the tiles a listing
   actually has, so these are normally no-ops. They stay so the layout can
   never break if a tile is ever printed unconditionally. */
.pd2-g-count-0 .pd2-g-main,
.pd2-g-count-0 .pd2-g-t1,
.pd2-g-count-0 .pd2-g-t2,
.pd2-g-count-0 .pd2-g-t3,
.pd2-g-count-0 .pd2-g-t4{display:none}
.pd2-g-count-1 .pd2-g-t1,
.pd2-g-count-1 .pd2-g-t2,
.pd2-g-count-1 .pd2-g-t3,
.pd2-g-count-1 .pd2-g-t4{display:none}
.pd2-g-count-2 .pd2-g-t2,
.pd2-g-count-2 .pd2-g-t3,
.pd2-g-count-2 .pd2-g-t4{display:none}
.pd2-g-count-3 .pd2-g-t3,
.pd2-g-count-3 .pd2-g-t4{display:none}
.pd2-g-count-4 .pd2-g-t4{display:none}

/* "+N photos" tile only makes sense past the 5th slot */
.pd2-g-mosaic:not(.pd2-g-count-5) .pd2-g-more{display:none}
/* one photo (or none) has nothing to expand into a lightbox.
   Three classes deep so it still outranks the .pd2-g-mosaic .pd2-g-viewall
   base rule below, which the tokens button reset forced up to (0,2,0). */
.pd2-g-mosaic.pd2-g-count-0 .pd2-g-viewall,
.pd2-g-mosaic.pd2-g-count-1 .pd2-g-viewall{display:none}

/* zero photos — an honest empty state instead of a broken grid */
.pd2-g-empty{
  display:none; place-items:center; text-align:center; gap:10px;
  color:var(--pd2-ink-3); background:var(--pd2-bg-soft);
}
.pd2-g-count-0 .pd2-g-empty{display:grid}
.pd2-g-empty i{font-size:38px; color:var(--pd2-line-strong)}
.pd2-g-empty .pd2-g-empty-t{font-weight:600; font-size:15px; color:var(--pd2-ink-2)}
.pd2-g-empty .pd2-g-empty-s{font-size:13px; max-width:38ch}

/* ---- overlay badges ------------------------------------------------ */
.pd2-g-badges{position:absolute; top:14px; left:14px; display:flex; gap:7px; flex-wrap:wrap; z-index:3}
.pd2-g-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:6px 10px;border-radius:999px;background:rgba(26,22,20,.72);color:#fff;
  backdrop-filter:blur(6px);
}
.pd2-g-chip.pd2-g-chip-verified{background:rgba(11,122,92,.92)}
.pd2-g-chip.pd2-g-chip-video{background:rgba(255,84,3,.94)}

/* NOTE on specificity, and why these button rules are two classes deep.
   pd2-tokens.css resets buttons with `.pd2-root button{font:inherit;
   background:none}` — (0,1,1), which outranks a single-class rule. The
   prototype's equivalent is a bare `button{}` at (0,0,1), which does not.
   Every button in this file therefore carries a scoping class so it lands
   at (0,2,0) and reproduces the prototype's cascade rather than inheriting
   the reset's font and transparent background. */
.pd2-g-mosaic .pd2-g-viewall{
  position:absolute; right:14px; bottom:14px; z-index:3;
  background:#fff; color:var(--pd2-ink); font-weight:600; font-size:13px;
  padding:9px 15px; border-radius:10px; box-shadow:var(--pd2-shadow-md);
  display:inline-flex; align-items:center; gap:8px;
  line-height:1.55; font-family:var(--pd2-font-body);
}
.pd2-g-mosaic .pd2-g-viewall:hover{background:var(--pd2-bg-soft)}
.pd2-g-more{
  position:absolute;inset:0;background:rgba(26,22,20,.5);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:15px;
}

/* Video tile. The prototype's mosaic is photos-only (a video is announced
   by the "Video tour" chip), so this only ever renders in the one case the
   prototype has no answer for: a listing with a video and no photos at all,
   where an empty state would hide the single piece of media there is. */
.pd2-g-play{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:46px;text-shadow:0 2px 10px rgba(26,22,20,.45);
  pointer-events:none;
}

/* ============================================================
   LIGHTBOX — grid contact-sheet mode + full-screen slider mode
   fully opaque: a photo viewer shouldn't show the page bleeding through
   ============================================================ */
.pd2-g-lb{position:fixed;inset:0;background:#141110;z-index:200;display:none;flex-direction:column}
.pd2-g-lb.pd2-g-lb-on{display:flex}
/* applied to <body> — stops the page scrolling behind the viewer */
.pd2-g-lb-open{overflow:hidden}

.pd2-g-lb-top{display:flex;align-items:center;gap:14px;padding:14px 20px;color:#fff;flex:none}
.pd2-g-lb-title{flex:1;font-weight:600;font-size:14.5px}
.pd2-g-lb .pd2-g-lb-btn{
  color:#fff;padding:8px 13px;border-radius:9px;background:rgba(255,255,255,.12);
  font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;
  line-height:1.55;font-family:var(--pd2-font-body);
}
.pd2-g-lb .pd2-g-lb-btn:hover{background:rgba(255,255,255,.22)}
.pd2-g-lb .pd2-g-lb-x{
  color:#fff;font-size:21px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:none;line-height:1.55;
}
.pd2-g-lb .pd2-g-lb-x:hover{background:rgba(255,255,255,.14)}

.pd2-g-lb-body{flex:1;min-height:0;overflow:auto;padding:0 20px 20px;display:flex;justify-content:center;align-items:flex-start}
.pd2-g-lb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:1080px;width:100%}
.pd2-g-lb-grid img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%;cursor:zoom-in;transition:opacity .15s}
.pd2-g-lb-grid img:hover{opacity:.82}
.pd2-g-lb-gcell{position:relative;display:block;width:100%;cursor:zoom-in}
.pd2-g-lb-grid .pd2-g-play{font-size:34px}

/* slider mode */
.pd2-g-lb-slider{display:none;flex-direction:column;width:100%;height:100%;min-height:0}
.pd2-g-lb.pd2-g-lb-mode-slider .pd2-g-lb-grid{display:none}
.pd2-g-lb.pd2-g-lb-mode-slider .pd2-g-lb-slider{display:flex}
.pd2-g-lb.pd2-g-lb-mode-slider .pd2-g-lb-body{overflow:hidden;align-items:stretch;padding:0 20px 16px}
.pd2-g-lb-stage{flex:1;min-height:0;display:grid;place-items:center;position:relative}
.pd2-g-lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;user-select:none}
.pd2-g-lb-video{width:100%;max-width:1100px;aspect-ratio:16/9;max-height:100%;border-radius:10px;overflow:hidden;background:#000}
.pd2-g-lb-video iframe{width:100%;height:100%;border:0;display:block}
.pd2-g-lb-stage .pd2-g-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;
  font-size:24px;line-height:1.55;display:grid;place-items:center;backdrop-filter:blur(8px);z-index:2;
}
.pd2-g-lb-stage .pd2-g-lb-nav:hover{background:rgba(255,255,255,.3)}
.pd2-g-lb-stage .pd2-g-lb-prev{left:6px}
.pd2-g-lb-stage .pd2-g-lb-next{right:6px}
.pd2-g-lb-thumbs{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 2px;flex:none;scrollbar-width:none;justify-content:center}
.pd2-g-lb-thumbs::-webkit-scrollbar{display:none}
.pd2-g-lb-thumbs img{
  width:80px;height:58px;object-fit:cover;border-radius:7px;flex:none;cursor:pointer;
  opacity:.4;border:2px solid transparent;transition:all .15s;
}
.pd2-g-lb-thumbs img:hover{opacity:.75}
.pd2-g-lb-thumbs img.pd2-g-lb-thumb-on{opacity:1;border-color:#fff}

/* ============================================================
   RESPONSIVE — mobile is the primary traffic source
   ============================================================ */
@media (max-width:720px){
  /* One hero + a "view all" chip on mobile, whatever the photo count.
     The doubled class matches the .pd2-g-count-* rules on specificity
     (0,2,0) and comes later in the sheet, so it actually wins here. */
  .pd2-g-mosaic.pd2-g-mosaic{grid-template-columns:1fr; grid-template-rows:250px; gap:0; border-radius:0; margin:0 -16px}
  .pd2-g-mosaic.pd2-g-mosaic.pd2-g-count-0{grid-template-rows:210px}
  .pd2-g-mosaic .pd2-g-cell:not(.pd2-g-main){display:none}
  .pd2-g-mosaic .pd2-g-main{grid-row:auto}
  .pd2-g-mosaic .pd2-g-viewall{right:12px; bottom:12px; padding:8px 13px; font-size:12.5px}
  .pd2-g-badges{top:12px; left:12px; gap:6px}
  .pd2-g-chip{font-size:10.5px; padding:5px 9px}
  .pd2-g-lb-grid{grid-template-columns:repeat(2,1fr)}
}