/* ============================================================
   Cochrane Realty · Listing pages — shared styles
   New brand: deep teal + terracotta · Playfair Display + Hanken Grotesk
   ============================================================ */

:root{
  --ink:#2B4A55;        /* deep teal — headings */
  --ink-deep:#1C2E34;   /* near-black teal — dark sections */
  --terra:#B85C3B;      /* terracotta — accent */
  --terra-deep:#a64f30; /* terracotta hover */
  --terra-soft:#E8B79F; /* terracotta tint — on dark */
  --cream:#F7F3EC;      /* page paper */
  --cream-alt:#FBF8F1;  /* slightly lighter panel */
  --stone:#d9d1c2;      /* hairlines */
  --taupe:#a99a84;      /* muted labels */
  --body:#5a544c;       /* body copy */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --wrap:1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--terra); color:#fff; }

.wrap{ max-width:var(--wrap); margin-left:auto; margin-right:auto; }

/* shared eyebrow label */
.label{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  font-weight:700; color:var(--terra);
}
.italic{ font-style:italic; }

/* ── Masthead ─────────────────────────────────────────────── */
.masthead{
  max-width:var(--wrap); margin:0 auto;
  padding:34px 48px 26px; text-align:center;
}
.masthead .status{ color:var(--terra); margin-bottom:18px; }
.masthead .rule{
  border:0; height:1px; background:var(--stone);
  max-width:520px; margin:16px auto;
}
.masthead .logo{
  height:88px; width:auto; margin:4px auto 4px;
}
.masthead .contact{
  font-size:12px; letter-spacing:1.4px; color:var(--taupe); font-weight:600;
}
.masthead .contact a{ text-decoration:none; color:var(--ink); }
.masthead .contact a:hover{ color:var(--terra); }

/* ── Hero (full-bleed) ────────────────────────────────────── */
.hero{
  position:relative; width:100%; height:min(760px, 86vh);
  min-height:520px; overflow:hidden; background:#cfc7b8;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(20,32,37,0.90) 0%, rgba(20,32,37,0.30) 42%,
    rgba(20,32,37,0.05) 70%, rgba(20,32,37,0.18) 100%);
}
.hero-badge{
  position:absolute; top:26px; right:30px; z-index:2;
  background:var(--terra); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  padding:9px 16px; border-radius:100px;
}
/* Live status tints (set by shared/status.js). Active & Coming Soon keep the
   default terracotta; Pending and Sold read as quieter, non-promotional. */
.hero-badge.is-pending{ background:#9A6A2E; }
.hero-badge.is-sold{ background:var(--ink-deep); }
.hero-inner{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 48px 54px;
}
.hero-inner > div{ max-width:var(--wrap); margin:0 auto; color:var(--cream); }
.hero-place{
  font-size:11px; letter-spacing:3.2px; text-transform:uppercase;
  font-weight:600; color:var(--terra-soft); margin-bottom:16px;
}
.hero-bottom{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; flex-wrap:wrap;
}
.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(46px, 6.4vw, 84px); line-height:0.94; letter-spacing:-1.5px;
}
.hero h1 .italic{
  display:block; font-weight:500; font-size:0.42em; color:var(--terra-soft);
  margin-top:10px; letter-spacing:-0.5px;
}
.hero-sub{
  font-size:12.5px; letter-spacing:2.6px; text-transform:uppercase;
  color:rgba(247,243,236,0.86); margin-top:20px; font-weight:500;
}
.hero-note{
  font-size:11px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--terra-soft); font-weight:700; margin-top:14px;
}
.hero-right{ text-align:right; }
.hero-offered{
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(247,243,236,0.7); font-weight:600;
}
.hero-price{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(40px, 4.6vw, 60px); line-height:1; letter-spacing:-1px; margin-top:6px;
}

/* ── Stats strip ──────────────────────────────────────────── */
.stats{
  padding:52px 48px;
  border-top:1px solid var(--stone); border-bottom:1px solid var(--stone);
  background:var(--cream-alt);
}
.stats .inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center;
}
.stats .stat{ border-right:1px solid var(--stone); }
.stats .stat:last-child{ border-right:0; }
.stats .val{
  font-family:var(--serif); font-size:clamp(38px,4.4vw,56px);
  line-height:1; letter-spacing:-1px; color:var(--ink);
}
.stats .k{
  margin-top:12px; font-size:11px; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--taupe); font-weight:600;
}

/* ── Generic section ──────────────────────────────────────── */
.section{ padding:92px 48px; }
.section-title{ text-align:center; margin-bottom:52px; }
.section-title .label{ margin-bottom:16px; }
.section-title h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(36px,4.4vw,50px); line-height:1.05; letter-spacing:-1px; color:var(--ink);
}
.section-title h2 .italic{ color:var(--terra); }
.section-title .dek{
  max-width:620px; margin:16px auto 0; color:var(--body);
  font-size:17px; line-height:1.55; text-wrap:pretty;
}

/* ── Story ────────────────────────────────────────────────── */
.story{ max-width:820px; }
.story .lead{
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,27px);
  line-height:1.4; color:#3d525b; margin-bottom:26px; text-wrap:pretty;
}
.story p{
  font-size:17px; line-height:1.7; color:var(--body); margin-bottom:18px; text-wrap:pretty;
}
.story .features{
  display:grid; grid-template-columns:1fr 1fr; gap:11px 40px;
  margin-top:48px; padding-top:38px; border-top:1px solid var(--stone);
  list-style:none;
}
.story .features li{
  position:relative; padding-left:19px;
  font-size:16px; color:var(--body); line-height:1.55;
}
.story .features li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:6px; height:6px; border-radius:50%; background:var(--terra);
}

/* ── Buttons (modern rounded pills) ───────────────────────── */
.learn-more-wrap{ text-align:center; margin-top:48px; }
.learn-more-cta, .book-cta, .services-cta{
  display:inline-block; text-decoration:none;
  font-size:12px; letter-spacing:1.2px; font-weight:600;
  padding:16px 38px; border-radius:100px;
  background:var(--terra); color:#fff;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.learn-more-cta:hover, .book-cta:hover, .services-cta:hover{
  background:var(--terra-deep); transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(184,92,59,0.32);
}

/* ── Gallery ──────────────────────────────────────────────── */
.gallery{ background:var(--cream-alt); border-top:1px solid var(--stone); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.gallery-grid .cell{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  background:#cfc7b8; cursor:pointer;
}
.gallery-grid .cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.gallery-grid .cell:hover img{ transform:scale(1.05); }

/* ── Neighborhood / map ───────────────────────────────────── */
.map-row{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.map{
  aspect-ratio:4/3; border:1px solid var(--stone); overflow:hidden; background:#cfc7b8;
}
.map iframe{ width:100%; height:100%; border:0; }
.neighborhood h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3vw,34px); line-height:1.1; letter-spacing:-0.8px; color:var(--ink);
}
.neighborhood h3 .italic{ color:var(--terra); }
.neighborhood p{
  color:var(--body); font-size:16.5px; line-height:1.65; margin-top:16px; text-wrap:pretty;
}
.nearby{ margin-top:24px; padding-top:22px; border-top:1px solid var(--stone); }
.nearby .row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:9px 0; border-bottom:1px dotted var(--stone);
}
.nearby .name{ font-size:16px; color:var(--ink); }
.nearby .dist{ font-size:13px; letter-spacing:1px; color:var(--taupe); font-weight:600; }

/* ── Showings band (dark) ─────────────────────────────────── */
.showing{ background:var(--ink-deep); color:var(--cream); }
.showing .inner{
  max-width:var(--wrap); margin:0 auto;
  padding:92px 48px; display:grid; grid-template-columns:1fr 1fr; gap:72px;
}
.showing .label{ color:var(--terra-soft); margin-bottom:16px; }
.showing h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(34px,3.6vw,46px); line-height:1.05; letter-spacing:-1px; color:var(--cream);
}
.showing h2 .italic{ color:var(--terra-soft); }
.showing p{
  color:#cdc4b6; font-size:17px; line-height:1.6; margin-top:18px; max-width:460px; text-wrap:pretty;
}
.showing .side:last-child{ border-left:1px solid rgba(217,209,194,0.18); padding-left:56px; }
.showing .book-cta{ margin-top:24px; }
.showing .ask-note{ font-size:14px; margin-top:24px; color:#cdc4b6; }
.showing .ask-note a{ color:var(--cream); }

/* ── Agent ────────────────────────────────────────────────── */
.agent{ padding:80px 48px; text-align:center; background:var(--cream); }
.agent .photo{
  width:144px; height:144px; border-radius:50%; margin:0 auto 24px;
  overflow:hidden; box-shadow:0 0 0 1px var(--stone);
}
.agent .photo img{ width:100%; height:100%; object-fit:cover; }
.agent .label{ color:var(--terra); margin-bottom:12px; }
.agent h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px,3.2vw,38px); line-height:1.1; letter-spacing:-0.8px; color:var(--ink);
}
.agent h3 .italic{ display:block; color:var(--terra); }
.agent .bio{
  max-width:600px; margin:16px auto 28px;
  color:var(--body); font-size:16.5px; line-height:1.65;
}
.agent .services-cta{ background:var(--ink); margin-bottom:30px; }
.agent .services-cta:hover{ background:var(--terra); }
.contact-links{
  display:flex; gap:30px; justify-content:center; flex-wrap:wrap;
  font-size:13px; letter-spacing:0.5px;
}
.contact-links a{
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--stone); padding-bottom:2px;
}
.contact-links a:hover{ border-color:var(--terra); }

/* ── Footer ───────────────────────────────────────────────── */
footer{
  max-width:var(--wrap); margin:0 auto;
  padding:28px 48px; border-top:1px solid var(--stone);
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--taupe); font-weight:600;
}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:40px;
  background:rgba(20,32,37,0.95);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:90vh; object-fit:contain; }
.lightbox .close{
  position:absolute; top:24px; right:32px; background:none; border:0;
  color:var(--cream); font-size:34px; cursor:pointer;
  font-family:var(--serif); line-height:1;
}
.lightbox .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--cream);
  font-size:52px; cursor:pointer; font-family:var(--serif); font-style:italic;
  padding:20px; line-height:1; opacity:0.75;
}
.lightbox .nav:hover{ opacity:1; }
.lightbox .prev{ left:24px; }
.lightbox .next{ right:24px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:880px){
  .masthead{ padding:26px 22px 20px; }
  .hero-inner{ padding:0 22px 34px; }
  .hero-bottom{ gap:20px; }
  .hero-right{ text-align:left; }
  .stats, .section, .agent{ padding-left:22px; padding-right:22px; }
  .stats .inner{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .stats .stat:nth-child(2){ border-right:0; }
  .story .features{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .map-row{ grid-template-columns:1fr; gap:32px; }
  .showing .inner{ grid-template-columns:1fr; gap:44px; padding:64px 22px; }
  .showing .side:last-child{ border-left:0; padding-left:0;
    border-top:1px solid rgba(217,209,194,0.18); padding-top:44px; }
  footer{ flex-direction:column; gap:10px; padding:24px 22px; }
}
@media (max-width:520px){
  .gallery-grid{ grid-template-columns:1fr 1fr; gap:6px; }
}