/* ==================================================================
   Sagestone Homes, Parade Homes.
   Section layouts only. The global base owns the reset, palette,
   grounds, typography, buttons, nav, footer, labels and reveals.
   Enqueued only on page-templates/parade-homes.php.
   ================================================================== */

/* 1. split hero */
.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:46ch;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. statement */
.stm{padding:120px 0}
.stm .wrap{max-width:940px;text-align:center}
.stm p.big{font-family:var(--font-display);font-size:clamp(24px,2.9vw,38px);line-height:1.35;color:var(--forest)}
.stm .rule{margin:30px auto 0}

/* 3. portfolio, one home per row, image side alternating */
.port{padding:40px 0 110px}
.prow{display:grid;grid-template-columns:1.35fr .9fr;gap:70px;align-items:center;padding:80px 0;border-top:1px solid rgba(14,29,21,.14)}
.prow:first-child{border-top:0}
.prow:nth-child(even){grid-template-columns:.9fr 1.35fr}
.prow:nth-child(even) .pmedia{order:2}
.pmedia .main{aspect-ratio:3/2}
.pthumbs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.pthumbs .ph{aspect-ratio:3/2}
.pyr{display:block;font-family:var(--font-display);font-size:clamp(54px,6vw,86px);line-height:.9;color:var(--brand-accent);opacity:.9;margin-bottom:10px}
.pno{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:18px}
.pinfo h2{font-size:clamp(28px,3vw,40px);margin-bottom:8px}
.pinfo .where{font-size:15px;color:#4A4A44;margin-bottom:24px}
.pspec{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 24px;border-top:1px solid rgba(14,29,21,.14)}
.pspec div{padding:13px 0;border-bottom:1px solid rgba(14,29,21,.14)}
.pspec div:nth-child(even){padding-left:20px}
.pspec dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:4px}
.pspec dd{margin:0;font-family:var(--font-display);font-size:19px}
.pinfo p{font-size:16px;color:#4A4A44;line-height:1.6;max-width:46ch}

/* 4. earlier homes */
.earl{padding:120px 0}
.earl-head{max-width:760px;margin:0 auto 44px;text-align:center}
.earl-head h2{font-size:clamp(28px,3.2vw,40px);margin-top:18px}
.earl-head p{margin-top:16px;color:#4A4A44}
.elist{list-style:none;padding:0;margin:0 auto;max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.elist li{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(14,29,21,.16)}
.elist b{font-family:var(--font-display);font-weight:400;font-size:19px;color:var(--brand-accent)}
.elist span{font-size:16px;color:#4A4A44}

/* 5. about the parade, the one dark section */
.abp{background:var(--forest);color:var(--limestone);padding:130px 0}
.abp h2,.abp h3{color:var(--limestone)}
.abp .eyebrow{color:var(--sandstone)}
.abp .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.abp h2{font-size:clamp(26px,3vw,38px);margin-top:18px;max-width:16ch}
.abp .rule{margin-top:24px}
.abp p{color:var(--sandstone);margin-bottom:20px;max-width:56ch}
.abp a.ext{color:var(--limestone);border-bottom:1px solid var(--brand-accent);padding-bottom:1px}
.abnums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px;border-top:1px solid rgba(169,133,83,.3)}
.abnums div{padding:22px 20px 0 0}
.abnums div+div{padding-left:20px;border-left:1px solid rgba(169,133,83,.3)}
.abnums b{display:block;font-family:var(--font-display);font-weight:400;font-size:30px;color:var(--limestone);margin-bottom:4px}
.abnums span{font-size:14px;color:var(--sandstone);opacity:.85;line-height:1.45;display:block}

/* 6. 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}
  .prow{grid-template-columns:1fr;gap:40px;padding:60px 0}
  .prow:nth-child(even){grid-template-columns:1fr}
  .prow:nth-child(even) .pmedia{order:0}
  .abp .wrap{grid-template-columns:1fr;gap:44px}
  .elist{grid-template-columns:1fr}
}

@media(max-width:768px){
  .shero-copy{padding:150px var(--gutter) 64px}
  .stm,.earl,.abp{padding:88px 0}
  .abnums{grid-template-columns:1fr}
  .abnums div+div{padding-left:0;border-left:0}
}

/* detail frames are small, so their labels are too */
.pthumbs .ph span{padding:12px 16px;font-size:11px}
.pthumbs .ph span b{font-size:24px}