/* Diamond Homes photo gallery — grid + hover captions + full-screen viewer.
   Everything here is prefixed dg- so it can't collide with the older .gal-* rules
   still living in home.css / pages.css, or with the shared .lightbox used by
   /features and the home-page photo sets.
   Markup is generated by tools/build-pages.py; behaviour is js/gallery.js. */

/* ---------------------------------------------------------------- shell */
.dg{max-width:1560px;margin:0 auto;padding:0 clamp(1rem,3vw,2.5rem) 5rem}

/* ---------------------------------------------------------------- filter bar */
/* Sits directly under the fixed nav. 66px is #nav.solid at its normal height. */
.dg-bar{position:sticky;top:66px;z-index:30;margin:0 0 2.6rem;
  background:rgba(251,249,244,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(91,84,75,.16)}
.dg-bar-in{max-width:1560px;margin:0 auto;padding:.7rem clamp(1rem,3vw,2.5rem) .6rem}
/* Wraps on anything wide enough to show two lines of chips; below that it turns into one
   swipeable line, because wrapping 30 chips on a phone would bury the photos. */
.dg-row{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.dg-row+.dg-row{margin-top:.4rem}
.dg-lbl{flex:0 0 auto;align-self:center;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;padding-right:.4rem;white-space:nowrap}
.dg-chip{flex:0 0 auto;border:1px solid rgba(38,33,30,.22);background:transparent;
  padding:.34rem .8rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:#57504a;cursor:pointer;transition:border-color .2s,background .2s,color .2s;
  white-space:nowrap;border-radius:2px}
.dg-chip:hover{border-color:var(--gold-deep);color:var(--ink)}
.dg-chip b{font-weight:400;opacity:.5;margin-left:.45rem;font-size:.92em}
.dg-chip.on{background:var(--burgundy);border-color:var(--burgundy);color:var(--cream)}
.dg-chip.on b{opacity:.75}
.dg-chip:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.dg-feat .dg-chip{text-transform:none;letter-spacing:.03em;font-size:.73rem;border-radius:999px;padding:.32rem .85rem}
.dg-count{margin:.5rem 0 0;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8a8078}
@media (max-width:760px){
  .dg-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}
  .dg-row::-webkit-scrollbar{display:none}
}
.dg-count button{background:none;border:none;color:var(--burgundy);text-decoration:underline;
  cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0 0 0 .6rem}

/* ---------------------------------------------------------------- feature picker */
.dg-featbar{margin:0 0 3rem;padding:1.4rem 1.5rem 1.5rem;background:var(--sand);
  border:1px solid rgba(91,84,75,.12)}
.dg-featbar-h{margin:0 0 .9rem;font-family:var(--serif);font-size:1.3rem;color:var(--burgundy-deep);line-height:1.3}
.dg-featbar-h span{display:block;font-family:var(--sans);font-size:.8rem;color:#7a716a;font-weight:300;margin-top:.2rem}
.dg-featbar .dg-row{gap:.45rem}
.dg-featbar .dg-chip{background:#FFFDF8}
.dg-featbar .dg-chip.on{background:var(--burgundy)}
@media (max-width:760px){
  .dg-featbar{padding:1.1rem 1rem 1.1rem;margin-bottom:2.2rem}
  .dg-featbar .dg-row{flex-wrap:wrap;overflow:visible}   /* in the page, not pinned: let it wrap */
}

/* ---------------------------------------------------------------- sections */
.dg-sec{margin:0 0 3.4rem;scroll-margin-top:150px}
.dg-sec[hidden]{display:none}
.dg-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 1.2rem;
  padding-bottom:.7rem;border-bottom:1px solid rgba(91,84,75,.16)}
.dg-num{font-family:var(--serif);font-size:1.05rem;color:var(--gold-deep);letter-spacing:.1em}
.dg-head h2{font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:.07em;margin:0}
.dg-blurb{font-size:.88rem;color:#7a716a;font-weight:300;margin:0}
.dg-n{margin-left:auto;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#9a9089;white-space:nowrap}

/* ---------------------------------------------------------------- grid */
/* Masonry by CSS columns: every photo keeps its own shape, nothing is cropped. */
.dg-grid{columns:4;column-gap:14px}
@media (max-width:1240px){.dg-grid{columns:3}}
@media (max-width:820px){.dg-grid{columns:2}}
/* Phones keep two columns: at one column 135 photos is an endless scroll, and a tap opens
   any of them full screen anyway. */
@media (max-width:460px){.dg-grid{column-gap:8px}.dg-fig{margin-bottom:8px}}

.dg-fig{position:relative;break-inside:avoid;margin:0 0 14px;background:var(--sand-deep);
  overflow:hidden;line-height:0}
.dg-fig[hidden]{display:none}
.dg-fig img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.dg-fig:hover img,.dg-fig:focus-within img{transform:scale(1.045)}

/* The whole tile opens the viewer; the tag buttons sit on top of it. */
.dg-open{position:absolute;inset:0;z-index:1;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.dg-open:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-4px}

.dg-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:2.6rem .95rem .85rem;line-height:1.45;
  background:linear-gradient(180deg,rgba(24,21,18,0) 0%,rgba(24,21,18,.5) 45%,rgba(24,21,18,.88) 100%);
  opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease}
.dg-fig:hover .dg-cap,.dg-fig:focus-within .dg-cap{opacity:1;transform:none}
.dg-t{margin:0;color:var(--cream);font-family:var(--serif);font-size:1.06rem;font-weight:400;letter-spacing:.02em}
.dg-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.dg-tag{pointer-events:auto;border:1px solid rgba(251,249,244,.4);background:rgba(251,249,244,.1);
  color:var(--cream);font-family:var(--sans);font-size:.63rem;letter-spacing:.09em;
  padding:.24rem .6rem;cursor:pointer;border-radius:999px;line-height:1.5;
  backdrop-filter:blur(3px);transition:background .2s,border-color .2s,color .2s}
.dg-tag:hover{background:var(--gold);border-color:var(--gold);color:var(--burgundy-deep)}
.dg-tag:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}

/* Touch: there is no hover, so keep the title on screen and drop the chips. */
@media (hover:none){
  .dg-cap{opacity:1;transform:none;padding:1.8rem .7rem .55rem}
  .dg-t{font-size:.9rem;line-height:1.3}
  .dg-tags{display:none}
  .dg-fig:hover img{transform:none}
}
@media (hover:none) and (max-width:460px){
  .dg-cap{padding:1.4rem .5rem .4rem}
  .dg-t{font-size:.76rem}
}

/* ---------------------------------------------------------------- empty state */
.dg-none{text-align:center;padding:4rem 1rem;color:#7a716a}
.dg-none p{font-family:var(--serif);font-size:1.4rem;color:var(--burgundy);margin-bottom:1rem}

/* ---------------------------------------------------------------- closing CTA */
.dg-end{text-align:center;max-width:620px;margin:1rem auto 0;padding:3.2rem 1.5rem 0;
  border-top:1px solid rgba(91,84,75,.16)}
.dg-end .hero-script,.dg-end .dg-script{font-family:var(--script);font-size:1.9rem;color:var(--gold-deep);margin-bottom:.4rem}
.dg-end h2{margin-bottom:1rem}
.dg-end p{color:#6b6259;margin-bottom:1.8rem}
.dg-end .btn{margin:0 .35rem .6rem}

/* ---------------------------------------------------------------- viewer */
.dg-lb{position:fixed;inset:0;z-index:200;background:rgba(20,18,15,.985);
  display:none;flex-direction:column;align-items:center;justify-content:center;padding:1rem}
.dg-lb.open{display:flex}
.dg-lb-fig{display:flex;flex-direction:column;align-items:center;max-width:1300px;width:100%;gap:1rem}
.dg-lb img{max-width:min(94vw,1300px);max-height:70vh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 24px 80px rgba(0,0,0,.6);background:rgba(251,249,244,.06)}
.dg-lb-txt{text-align:center;max-width:720px;padding:0 1rem}
.dg-lb-t{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.75rem);color:var(--cream);
  letter-spacing:.04em;margin:0 0 .5rem;line-height:1.25}
.dg-lb-d{font-size:.95rem;font-weight:300;color:var(--sand-deep);margin:0;line-height:1.7}
.dg-lb-tags{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.9rem}
.dg-lb-tags .dg-tag{pointer-events:auto;font-size:.68rem}
.dg-lb-meta{margin-top:.9rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#9a9089}
.dg-lb-btn{position:absolute;background:none;border:none;color:var(--sand-deep);cursor:pointer;
  line-height:1;padding:.5rem 1rem;transition:color .2s}
.dg-lb-btn:hover{color:var(--gold-bright)}
.dg-lb-btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.dg-lb-close{top:1rem;right:1.2rem;font-size:2.1rem}
.dg-lb-prev,.dg-lb-next{top:50%;transform:translateY(-50%);font-size:2.8rem}
.dg-lb-prev{left:.5rem}
.dg-lb-next{right:.5rem}
@media (max-width:700px){
  .dg-lb img{max-height:56vh}
  .dg-lb-prev,.dg-lb-next{top:auto;bottom:.6rem;transform:none;font-size:2.4rem}
  .dg-lb-d{font-size:.88rem}
  .dg-lb-txt{padding-bottom:3rem}
}

/* ---------------------------------------------------------------- home-page strip */
.dg-strip{max-width:1400px;margin:0 auto;padding:0 clamp(1rem,3vw,2.5rem)}
.dg-strip .dg-grid{columns:4}
@media (max-width:1100px){.dg-strip .dg-grid{columns:3}}
@media (max-width:760px){.dg-strip .dg-grid{columns:2}}
.dg-strip-cta .btn{margin:0 .3rem .6rem}
.dg-strip-cta{text-align:center;margin-top:2.4rem}

@media (prefers-reduced-motion:reduce){
  .dg-fig img,.dg-cap{transition:none}
  .dg-fig:hover img,.dg-fig:focus-within img{transform:none}
}