/* ============================================================
   photos.css — real, license-clear imagery for the buyer portal.
   Loaded AFTER buyer.css so these rules win the cascade and turn the
   gradient placeholders into real photographs.

   Every URL below was independently verified (curl HEAD -> 200 image/jpeg)
   from the agent's sourced manifest. Hosts are allow-listed in the
   firebase.json CSP img-src:
     images.pexels.com      — Pexels License (free commercial use, no attribution required)
     upload.wikimedia.org   — open image sources (real places; CC0 + CC BY-SA 3.0)

   Honesty rules kept intact:
   - Sample-home photos stay behind the "Sample home" flag in the markup.
   - Neighborhood scenics are the REAL place (Bellevue / Duvall / Kent).
   - NO human face is presented as Erin (her headshot stays a labeled "E").
   - The lifestyle photo is decorative only, never captioned as a person.
   - Attribution for the CC BY-SA scenics lives in the footer credit line.
   ============================================================ */

/* Hero — Seattle skyline (Pexels, Chait Goli), darkened so the headline stays legible. */
.hero-photo {
  background-image:
    linear-gradient(180deg, rgba(8,32,30,0.34), rgba(8,32,30,0.58)),
    url("https://images.pexels.com/photos/1796730/pexels-photo-1796730.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1600&h=900");
  background-size: cover;
  background-position: center;
}

/* Sample-home listing photos (Pexels). A soft scrim keeps the "Sample home" flag readable. */
.lp-1, .lp-2, .lp-3 { background-size: cover; background-position: center; }
.lp-1 {
  background-image:
    linear-gradient(180deg, rgba(8,32,30,0.05), rgba(8,32,30,0.22)),
    url("https://images.pexels.com/photos/7587880/pexels-photo-7587880.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800");
}
.lp-2 {
  background-image:
    linear-gradient(180deg, rgba(8,32,30,0.05), rgba(8,32,30,0.22)),
    url("https://images.pexels.com/photos/10628468/pexels-photo-10628468.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800");
}
.lp-3 {
  background-image:
    linear-gradient(180deg, rgba(8,32,30,0.05), rgba(8,32,30,0.22)),
    url("https://images.pexels.com/photos/10486073/pexels-photo-10486073.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800");
}

/* Neighborhood scenic banners — one real photo of each area (Wikimedia
   Commons, 1280px thumbnails), at the top of each ZIP panel. */
.zip-photo {
  height: 170px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  margin: 0 0 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.zip-photo .zip-photo-cap {
  position: absolute; left: 12px; bottom: 10px;
  color: #fff; font-size: 12px; letter-spacing: 0.3px;
  background: rgba(8,20,18,0.46);
  padding: 4px 10px; border-radius: 7px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.zip-photo-98005 { background-image: linear-gradient(180deg, rgba(8,32,30,0.04), rgba(8,32,30,0.30)), url("data:,"); }
.zip-photo-98019 { background-image: linear-gradient(180deg, rgba(8,32,30,0.04), rgba(8,32,30,0.30)), url("data:,"); }
.zip-photo-98030 { background-image: linear-gradient(180deg, rgba(8,32,30,0.04), rgba(8,32,30,0.30)), url("data:,"); }

/* Decorative lifestyle photo (keys handover, Pexels) for the community band.
   A person here is decoration only and is never named. */
.life-photo {
  background-image: url("https://images.pexels.com/photos/7579206/pexels-photo-7579206.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1200&h=800");
  background-size: cover; background-position: center;
  min-height: 240px; border-radius: 14px; border: 1px solid var(--border);
  margin-bottom: 26px;
}

@media (max-width: 640px) {
  .zip-photo { height: 130px; }
  .life-photo { min-height: 180px; }
}

/* ---- layout for the wired chart hosts (the charts themselves are styled
   by charts.css; these rules only place them in the buyer page) ---- */
.ti-chart-host { margin: 14px 0 4px; }
.ti-chart-stub { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 10px 0; }

/* Journey ring sits centered under the journey intro. */
.journey-ring-wrap { display: flex; justify-content: center; margin: 8px 0 26px; }

/* Neighborhood visuals: market bars + area locator, side by side. */
.nbhd-visuals {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px;
  margin: 8px 0 26px;
}
.nbhd-visual-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 18px 14px;
}
.nbhd-visual-title {
  font-size: 15px; font-weight: 650; color: var(--text);
  margin: 0 0 10px; letter-spacing: -0.01em;
}
.nbhd-visual-card .fact-src { margin-top: 10px; }

/* Payment donut sits beside the estimator totals. */
.ti-donut-host { display: flex; justify-content: center; margin-top: 16px; }

/* Affordability: income field + gauge. */
.afford-wrap { margin: 18px 0 6px; }
.afford-wrap .bp-field { max-width: 280px; margin-bottom: 12px; }

@media (max-width: 720px) {
  .nbhd-visuals { grid-template-columns: 1fr; }
}