/* ==================================================================
   Sagestone Homes, Where We Build.
   Section layouts only. The global base owns the reset, palette,
   grounds, typography, buttons, nav, footer, modal, icons and reveals.
   Enqueued only on page-templates/where-we-build.php.
   ================================================================== */

/* 1. hub hero */
.hhero{min-height:56vh;display:flex;align-items:flex-end;overflow:hidden;padding:210px 0 120px}
.hhero .ph{position:absolute;inset:0}
.hhero:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,22,16,.9) 0%,rgba(14,29,21,.5) 60%,rgba(14,29,21,.55) 100%)}
.hhero .wrap{position:relative;z-index:2}
.hhero h1{font-size:clamp(36px,4.6vw,62px);max-width:16ch;margin:20px 0 20px;color:var(--limestone)}
.hhero p{max-width:54ch;color:var(--sandstone);font-size:19px}

/* 2. coverage statement */
.cov{padding:130px 0}
.cov .wrap{max-width:900px;text-align:center}
.cov h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px}
.cov p{margin:0 auto 20px;max-width:62ch;color:#4A4A44}
.cov .rule{margin:22px auto 28px}

/* 3b. communities, tall cards with a hover panel
   The name is always on screen. Only the description and the link are
   revealed, because hover does not exist on touch and is invisible to
   anyone who does not know to look for it. */
.com{padding:150px 0}
.com-head{max-width:820px;margin:0 auto 60px;text-align:center}
.com-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.com-head p{margin-top:6px;color:#4A4A44;max-width:56ch;margin-left:auto;margin-right:auto}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ccard{position:relative;display:block;overflow:hidden;aspect-ratio:3/4}
.ccard .ph{position:absolute;inset:0;transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
.ccard:hover .ph{transform:scale(1.06)}
.ccard .veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(10,22,16,.9) 0%,rgba(10,22,16,.35) 48%,rgba(10,22,16,.05) 100%);
  transition:background .5s ease}
.ccard:hover .veil{background:linear-gradient(to top,rgba(10,22,16,.94) 0%,rgba(10,22,16,.62) 60%,rgba(10,22,16,.3) 100%)}
.ccard .body{position:absolute;left:26px;right:26px;bottom:26px;z-index:3}
.ccard b{display:block;font-family:var(--font-display);font-weight:400;font-size:27px;color:var(--limestone)}
.ccard .more{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.ccard:hover .more,.ccard:focus-visible .more{max-height:190px;opacity:1}
.ccard .more p{font-size:15px;color:var(--sandstone);line-height:1.55;margin:12px 0 16px;max-width:34ch}
.ccard .more span{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;background:var(--limestone);color:var(--forest);padding:11px 20px}
/* touch has no hover, so the panel is open by default there */
@media (hover:none){
  .ccard .more{max-height:190px;opacity:1}
  .ccard .veil{background:linear-gradient(to top,rgba(10,22,16,.94) 0%,rgba(10,22,16,.6) 60%,rgba(10,22,16,.25) 100%)}
}

/* 4. map */
.map{padding:20px 0 150px}
.map-head{text-align:center;max-width:820px;margin:0 auto 56px}
.map-head h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px}
.mapwrap{position:relative;width:min(1440px,94vw);margin:0 auto;aspect-ratio:1440/631;overflow:hidden}
.mapwrap .mapimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mapwrap:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--forest);opacity:.07}
.pin{position:absolute;z-index:3;transform:translate(-50%,-50%);line-height:0}
.pin .dot{position:relative;border:0;padding:0;font-family:var(--font-body);width:22px;height:22px;
  border-radius:50%;background:var(--marker);box-shadow:0 2px 8px rgba(14,29,21,.45);
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;line-height:1;cursor:pointer}
.pin .dot:before,.pin .dot:after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--marker);animation:pulse 4.73s cubic-bezier(.2,.6,.4,1) infinite}
.pin .dot:after{animation-delay:2.37s}
@keyframes pulse{0%{transform:scale(1);opacity:.75}80%{transform:scale(3.1);opacity:0}100%{opacity:0}}
.pin label{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:11px;
  font-size:clamp(11px,1.05vw,16px);line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--forest);white-space:nowrap;cursor:pointer;
  text-shadow:0 1px 3px rgba(243,241,235,.65)}
.mapx{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:stretch;margin-top:110px}
/* the image fills the full height of the copy beside it */
.mapx-art{position:relative;min-height:420px}
.mapx-art .ph{position:absolute;inset:0}
.mapx-copy h2{font-size:clamp(28px,3.4vw,44px);max-width:56ch;margin:0;text-wrap:pretty}
.mapx-copy .rule{margin:26px 0 28px}
.mapx-copy p{margin-bottom:20px;max-width:56ch;color:#4A4A44}
.mapx-copy p:last-child{margin-bottom:0}

/* 5. finale */
.finale{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden}
.finale .ph{position:absolute;inset:0}
.finale:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,22,16,.9) 0%,rgba(10,22,16,.84) 38%,rgba(10,22,16,.5) 56%,rgba(10,22,16,.1) 76%,rgba(10,22,16,0) 100%)}
.finale .wrap{position:relative;z-index:2}
.finale h2{font-size:clamp(30px,3.8vw,50px);max-width:17ch;margin:20px 0 22px;color:var(--limestone)}
.finale p{max-width:50ch;color:var(--sandstone);margin-bottom:34px}

@media(max-width:1024px){
  .mapx{grid-template-columns:1fr;gap:40px;margin-top:80px}
  .mapx-art{min-height:0}
  .mapx-art .ph{position:relative;inset:auto;aspect-ratio:16/11}
  .cgrid{grid-template-columns:1fr 1fr;gap:20px}
}

@media(max-width:768px){
  .hhero{padding:170px 0 88px;min-height:48vh}
  .cov,.com{padding:92px 0}
  .map{padding-bottom:92px}
  .cgrid{grid-template-columns:1fr}
  .pin label{font-size:10px;margin-bottom:9px}
  .lmodal-body{padding:26px}
}

@media(prefers-reduced-motion:reduce){
  .pin .dot:before,.pin .dot:after{animation:none;opacity:0}
}