/* ==================================================================
   Sagestone Homes, Santa Clara.
   Section layouts only. The global base owns the reset, palette,
   grounds, typography, buttons, nav, footer, icons and reveals.
   Enqueued only on page-templates/santa-clara.php.
   ================================================================== */

/* 1. split hero, matching Hurricane and Ivins */
.shero{display:grid;grid-template-columns:1fr 1fr;min-height:88vh;background:var(--forest)}
.shero-copy{display:flex;flex-direction:column;justify-content:center;padding:210px clamp(28px,5vw,80px) 110px;
  padding-left:var(--gutter)}
.shero h1{font-size:clamp(36px,4.4vw,60px);max-width:14ch;margin:20px 0 24px;color:var(--limestone)}
.shero p{max-width:44ch;color:var(--sandstone);font-size:18.5px;margin-bottom:32px}
.shero-art{position:relative;min-height:60vh}
.shero-art .ph{position:absolute;inset:0}

/* 2. facts */
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(14,29,21,.16)}
.fact{padding:44px 34px 40px;border-right:1px solid rgba(14,29,21,.16)}
.fact:first-child{padding-left:0}
.fact:last-child{border-right:0;padding-right:0}
.fact b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.2vw,28px);margin-bottom:8px}
.fact span{font-size:14.5px;color:#4A4A44;line-height:1.5;display:block}

/* 3. intro, matching the other city pages */
.abt{padding:150px 0}
.abt .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.abt h2{font-size:clamp(30px,3.6vw,46px);margin:20px 0 24px;max-width:17ch}
.abt p{margin-bottom:20px;max-width:52ch;color:#4A4A44}
.abt .rule{margin-bottom:26px}
.abt-art{position:relative}
.abt-art .backer{position:absolute;right:-40px;top:42px;bottom:42px;left:64px;background:#E4DFD2;z-index:0}
.abt-art .ph{position:relative;z-index:1;aspect-ratio:4/5}

/* 4. heritage timeline, only this city has one worth drawing */
.tl{padding:150px 0}
.tl-head{max-width:820px;margin:0 auto 66px;text-align:center}
.tl-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.tl-head p{margin-top:18px;color:#4A4A44;max-width:60ch;margin-left:auto;margin-right:auto}
.tlrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tlitem{padding:0 34px 0 0;position:relative}
.tlitem:last-child{padding-right:0}
.tlitem:before{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:rgba(169,133,83,.4)}
.tlitem:first-child:before{left:8px}
.tlitem:last-child:before{right:calc(100% - 8px)}
.tldot{position:relative;z-index:1;display:block;width:16px;height:16px;border-radius:50%;
  background:var(--brand-accent);margin-bottom:28px}
.tlitem b{display:block;font-family:var(--font-display);font-size:30px;margin-bottom:10px}
.tlitem span{font-size:15.5px;color:#4A4A44;line-height:1.55;display:block;max-width:30ch}

/* 5. living */
.liv{padding:150px 0}
.liv-head{max-width:820px;margin:0 auto 58px;text-align:center}
.liv-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 40px}
.lcard svg{width:42px;height:42px;display:block;margin-bottom:20px}
.lcard h3{font-size:20px;margin-bottom:10px}
.lcard p{font-size:15.5px;color:#4A4A44;line-height:1.55}

/* 6. why sagestone, dark, two routes side by side */
.why{background:var(--forest);color:var(--limestone);padding:150px 0}
.why h2,.why h3{color:var(--limestone)}
.why .eyebrow{color:var(--sandstone)}
.why-head{max-width:880px;margin:0 auto 62px;text-align:center}
.why-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.why-head p{margin-top:18px;color:var(--sandstone);max-width:62ch;margin-left:auto;margin-right:auto}
.rgrid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(169,133,83,.3)}
.ritem{padding:44px 52px 44px 0;border-bottom:1px solid rgba(169,133,83,.3)}
.ritem:nth-child(even){padding:44px 0 44px 52px;border-left:1px solid rgba(169,133,83,.3)}
.rnum{display:block;font-family:var(--font-display);font-size:15px;letter-spacing:.08em;color:var(--brand-accent);margin-bottom:14px}
.ritem h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:12px;color:var(--limestone)}
.ritem p{font-size:16px;color:var(--sandstone);max-width:46ch}
.why-foot{margin-top:0;padding-top:44px;border-top:0;
  display:flex;gap:34px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.why-foot p{max-width:56ch;color:var(--sandstone);font-size:16.5px}

/* 7. permits */
.per{padding:150px 0}
.per-head{max-width:760px;margin:0 auto 52px;text-align:center}
.per-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:18px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pcard{border:1px solid rgba(14,29,21,.16);padding:40px 38px;background:var(--limestone)}
.pcard b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-accent);font-weight:700;margin-bottom:14px}
.pcard h3{font-size:24px;margin-bottom:12px}
.pcard p{font-size:16px;color:#4A4A44;line-height:1.6}
.per-note{margin-top:34px;text-align:center;font-size:14.5px;color:#4A4A44}

/* 8. neighbourhoods */
.nbh{padding:150px 0}
.nbh-head{max-width:820px;margin:0 auto 56px;text-align:center}
.nbh-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.nbh-head p{margin-top:18px;color:#4A4A44;max-width:60ch;margin-left:auto;margin-right:auto}
.ngrid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.nitem{padding:26px 0;border-bottom:1px solid rgba(14,29,21,.16)}
.nitem b{display:block;font-family:var(--font-display);font-weight:400;font-size:22px;margin-bottom:6px}
.nitem span{font-size:15.5px;color:#4A4A44;line-height:1.55;display:block}

/* 9. faq */
.faq{padding:150px 0;overflow:hidden}
.faq-ghost{position:absolute;top:56px;left:50%;transform:translateX(-50%);font-family:var(--font-display);
  font-size:clamp(120px,19vw,260px);line-height:.8;color:var(--forest);opacity:.045;pointer-events:none;
  white-space:nowrap;user-select:none}
.faq-head{position:relative;z-index:1;max-width:760px;margin:0 auto 52px;text-align:center}
.faq-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.faq-head p{margin-top:18px;color:#4A4A44}
.fgrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:20px}
details{background:var(--limestone);border:1px solid rgba(14,29,21,.14)}
summary{list-style:none;cursor:pointer;padding:24px 52px 24px 26px;position:relative;
  font-family:var(--font-display);font-size:clamp(18px,1.5vw,21px);line-height:1.35}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:22px;top:24px;color:var(--brand-accent);font-family:var(--font-body);font-size:20px;font-weight:300}
details[open] summary:after{content:"–"}
details p{padding:0 26px 26px;color:#4A4A44;font-size:16px}

/* 10. finale */
.finale{position:relative;min-height:62vh;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){
  .shero{grid-template-columns:1fr}
  .shero-copy{padding:170px var(--gutter) 80px}
  .shero-art{min-height:52vh;order:-1}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact{padding:32px 24px;border-bottom:1px solid rgba(14,29,21,.16)}
  .fact:nth-child(even){border-right:0;padding-right:0}
  .fact:nth-child(odd){padding-left:0}
  .abt .wrap{grid-template-columns:1fr;gap:48px}
  .tlrow{grid-template-columns:1fr 1fr;gap:44px 0}
  .tlitem:before{display:none}
  .lgrid{grid-template-columns:1fr 1fr;gap:40px 34px}
  .rgrid{grid-template-columns:1fr}
  .ritem,.ritem:nth-child(even){padding:34px 0;border-left:0}
  .pgrid{grid-template-columns:1fr}
  .ngrid{grid-template-columns:1fr;gap:0}
  .fgrid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .shero-copy{padding:150px var(--gutter) 64px}
  .abt,.tl,.liv,.why,.per,.nbh,.faq{padding:92px 0}
  .abt-art .backer{display:none}
  .tlrow,.lgrid{grid-template-columns:1fr;gap:34px}
  .why-foot{justify-content:flex-start}
}