/* ==========================================================================
   District Estate — "any condition" photo gallery
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS SEPARATELY
   Site pages are not uniform: sell.html and the Dayton-metro city pages load
   /css/styles.css, while richmond.html, norfolk.html and several others are
   self-contained with their own inline <style>. A rule added to styles.css
   would therefore style the gallery on some pages and leave it unstyled on
   others. Everything here is declared outright, with var() fallbacks, so the
   block looks identical wherever it is inserted and inherits nothing it
   cannot do without.

   WHY NO INTRINSIC IMAGE SIZES PER PHOTO
   These are remote images this build cannot fetch, so their true aspect
   ratios are unknown. Rather than guess (and guarantee layout shift), every
   request pins w AND h on the CDN so the bytes that arrive are exactly the
   declared 640x426, and the tile holds a 3:2 box regardless. Cumulative
   layout shift is therefore zero whether the images load, load late, or fail.
   ========================================================================== */

.de-cond-section{
  background:var(--de-panel,#111);
  border-top:1px solid var(--de-line,#222);
  border-bottom:1px solid var(--de-line,#222);
  padding:56px 20px;
  color:var(--de-text,#fff);
  font-family:'Helvetica Neue',Arial,sans-serif;
  line-height:1.6;
}

.de-cond-wrap{ max-width:1080px; margin:0 auto; }

.de-cond-section h2{
  font-size:clamp(1.45rem,3.4vw,2rem);
  line-height:1.25;
  margin:0 0 14px;
  color:var(--de-text,#fff);
  text-align:center;
}

.de-cond-intro{
  max-width:640px;
  margin:0 auto 32px;
  text-align:center;
  color:var(--de-text-muted,#bbb);
  font-size:1rem;
}

/* ---- the grid ---------------------------------------------------------- */
.de-cond-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.de-cond-grid--compact{ grid-template-columns:repeat(3,1fr); }

.de-cond-item{
  margin:0;
  background:var(--de-black,#000);
  border:1px solid var(--de-line,#222);
  border-radius:var(--de-radius,6px);
  overflow:hidden;
}

/* The 3:2 box is held by the wrapper, so a slow or failed image never
   reflows the page around it. */
.de-cond-shot{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  background:#1a1a1a;
  overflow:hidden;
}

.de-cond-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
}

.de-cond-label{
  display:block;
  padding:13px 15px 15px;
  font-size:.95rem;
  font-weight:600;
  color:var(--de-text,#fff);
  border-top:1px solid var(--de-line,#222);
}

.de-cond-label small{
  display:block;
  margin-top:4px;
  font-weight:400;
  font-size:.85rem;
  color:var(--de-text-muted,#bbb);
}

/* ---- the honesty note -------------------------------------------------- */
/* Deliberately not small-print grey-on-grey. An earlier version of this site
   captioned stock photography as "Homes We've Helped With", which was removed
   because it was not true. This note is what keeps that from recurring, so it
   has to be legible. */
.de-cond-note{
  max-width:680px;
  margin:28px auto 0;
  padding:12px 16px;
  text-align:center;
  font-size:.86rem;
  color:var(--de-text-muted,#bbb);
  background:rgba(255,255,255,.03);
  border:1px solid var(--de-line,#222);
  border-radius:var(--de-radius,6px);
}

.de-cond-cta{
  margin:26px 0 0;
  text-align:center;
  font-size:1.02rem;
}

.de-cond-cta a{
  display:inline-block;
  padding:13px 26px;
  background:var(--de-gold,#f5c518);
  color:var(--de-gold-ink,#000);
  font-weight:700;
  text-decoration:none;
  border-radius:var(--de-radius,6px);
}

.de-cond-cta a:hover,
.de-cond-cta a:focus{ background:var(--de-gold-strong,#f2c200); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width:880px){
  .de-cond-grid,
  .de-cond-grid--compact{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px){
  .de-cond-section{ padding:40px 16px; }
  .de-cond-grid,
  .de-cond-grid--compact{ grid-template-columns:1fr; gap:14px; }
}

/* Honour a reader's reduced-motion and contrast preferences. */
@media (prefers-reduced-motion:reduce){
  .de-cond-cta a{ transition:none; }
}