/* Winston Dane — neighborhood just-sold campaign pages.
   Loaded ONLY by /sell/<town>/<slug>.html pages running in campaign mode.
   Everything here builds on tokens.css + base.css; no overrides of shared rules. */

/* ---------- The proof block: the sale that earns the email ---------- */
.sold {
  background: var(--wd-navy);
  color: #fff;
  border-top: 3px solid var(--wd-gold);
}
.sold__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--wd-gutter);
  max-width: var(--wd-maxw);
  margin: 0 auto;
}
.sold__addr {
  font-family: var(--wd-serif);
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
  line-height: 1.15;
  margin: 0.5rem 0 0.4rem;
}
.sold__sub { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; margin: 0; }
.sold__note {
  margin: 1.4rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
}
.sold__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.6rem 1.2rem;
}
.sold__num {
  font-family: var(--wd-serif);
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
  color: var(--wd-gold);
  line-height: 1;
}
.sold__label {
  font-family: var(--wd-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.55rem;
}
@media (max-width: 760px) {
  .sold__inner { grid-template-columns: 1fr; }
}

/* ---------- How it sold: the named moves, in order ---------- */
.moves { counter-reset: move; display: grid; gap: 1.5rem; margin-top: 2rem; }
.move {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--wd-rule);
}
.move:last-child { border-bottom: 0; padding-bottom: 0; }
.move::before {
  counter-increment: move;
  content: counter(move, decimal-leading-zero);
  font-family: var(--wd-serif);
  font-size: 1.5rem;
  color: var(--wd-gold);
  line-height: 1;
  padding-top: 0.15rem;
}
.move h3 { margin: 0 0 0.4rem; font-size: 1.12rem; }
.move p { margin: 0; color: var(--wd-muted); }

/* ---------- The binge rail: Tier 1 / Tier 2 video ---------- */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-top: 2.2rem;
}
.rail__item {
  background: #fff;
  border: 1px solid var(--wd-rule);
  border-radius: var(--wd-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rail__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--wd-slate-, #e9e6e0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail__media img,
.rail__media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.rail__play {
  position: absolute;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}
.rail__play::after {
  content: "";
  border-left: 15px solid var(--wd-navy);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.rail__pending {
  font-family: var(--wd-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wd-muted);
}
.rail__body { padding: 1.2rem 1.3rem 1.4rem; }
.rail__body h3 { margin: 0.5rem 0 0.5rem; font-size: 1.08rem; line-height: 1.25; }
.rail__body p { margin: 0; font-size: 0.9rem; color: var(--wd-muted); }

/* ---------- Direct CTA: reply or call, nothing else ---------- */
.direct { background: #faf7f2; border-top: 1px solid var(--wd-rule); }
.direct__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.6rem, 5vw, 4rem) var(--wd-gutter);
  text-align: center;
}
.direct__who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.direct__who img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
}
.direct__who span {
  font-family: var(--wd-sans);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wd-muted);
  text-align: left;
}
.direct__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.8rem;
}
.direct__phone {
  font-family: var(--wd-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  color: var(--wd-navy);
  text-decoration: none;
  display: block;
  margin-top: 1.4rem;
}
.direct__phone:hover { color: var(--wd-gold-deep); }
.direct__fine { font-size: 0.82rem; color: var(--wd-muted); margin-top: 1.5rem; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--wd-maxw-text); margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--wd-rule);
  padding: 1.15rem 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--wd-sans);
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--wd-gold); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0.85rem 0 0; color: var(--wd-muted); }

/* The retargeting pixel frame — see DECISIONS.md WD-105. Never display:none;
   some browsers skip loading hidden frames. */
.px-frame {
  position: absolute;
  width: 1px; height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
}

/* Property hero — these pages lead with a real photo of the home we're selling,
   so the overlay has to stay light enough that the house actually reads. Text sits
   in the left third, which keeps the heavier end of the gradient behind the copy. */
.luxe--property .luxe__bg::after {
  background: linear-gradient(90deg,
    rgba(8,17,38,0.78) 0%,
    rgba(8,17,38,0.52) 38%,
    rgba(8,17,38,0.14) 72%,
    rgba(8,17,38,0.05) 100%);
}

/* The house sits in the lower half of a 3:2 listing photo, so a short wide hero
   crops to sky and roofline by default. Bias the framing down to the front elevation. */
.luxe--property .luxe__bg img { object-position: center 72%; }