/* /communities/verdancia — Diamond's coming-soon community page (crawl-pages edge function,
   pages.js verdanciaPage, 2026-10-15). Loaded after style.css, home.css, pages.css and
   seo-pages.css, and uses their tokens (--ink, --gold, --burgundy-deep…) and .btn/.form-light. */

.cp [id]{scroll-margin-top:6.5rem}

/* hero: a finished Diamond exterior, full width, the name over a soft gradient */
.page-hero.vd-hero{padding:0;min-height:clamp(440px,68vh,680px);display:flex;flex-direction:column;justify-content:flex-end;background:#2E2A25;isolation:isolate}
.vd-hero>.vd-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:0}
/* the loop over the still (js/hero-video.js adds .on once it plays, and the Play/Pause button) */
.vd-hero>.vd-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:0;opacity:0;transition:opacity .8s ease}
.vd-hero>.vd-hero-video.on{opacity:1}
@media (prefers-reduced-motion:reduce){.vd-hero>.vd-hero-video{transition:none}}
/* a soft pool behind the headline (as on /communities): the renderings are bright (white clubhouse, court lines) */
.vd-hero::after{background:radial-gradient(58% 46% at 50% 66%,rgba(35,31,27,.46),rgba(35,31,27,0) 76%),linear-gradient(180deg,rgba(35,31,27,.5) 0%,rgba(35,31,27,.1) 30%,rgba(35,31,27,.16) 52%,rgba(35,31,27,.74) 100%);opacity:1;z-index:0}
.vd-hero-text{padding:7rem 1.5rem 3.2rem}
.vd-hero h1{color:#fff;font-size:clamp(2.8rem,7vw,5.2rem);font-weight:400;letter-spacing:.14em;text-shadow:0 2px 24px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.3)}
.vd-hero .sub{color:#F4EFE6;font-size:1.08rem;max-width:620px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.vd-hero .hero-script{text-shadow:0 2px 14px rgba(0,0,0,.45)}
.vd-hero-cta{margin:1.6rem 0 0}
.vd-hero-cta .btn{text-decoration:none;margin:0}
.vd-hero>.vd-hero-cap{position:absolute;right:1rem;bottom:.6rem;margin:0;font-size:.66rem;letter-spacing:.08em;color:rgba(251,249,244,.72)}

/* the four quick facts under the lead */
.vd-facts{list-style:none;margin:2rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(46,42,37,.14);border-bottom:1px solid rgba(46,42,37,.14)}
.vd-facts li{padding:1.1rem 1rem;border-left:1px solid rgba(46,42,37,.1)}
.vd-facts li:first-child{border-left:0;padding-left:0}
.vd-facts b{display:block;font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.15;color:var(--burgundy-deep)}
.vd-facts span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#7a7068}

/* Why Verdancia */
.cp .vd-why{margin-top:2.6rem}
.vd-tiles{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.vd-tiles li{background:var(--cream);border:1px solid rgba(46,42,37,.1);border-top:3px solid var(--gold);padding:1.3rem 1.3rem 1.1rem}
.vd-tiles p{margin:0;font-size:.92rem;line-height:1.65}

/* illustrative renderings: the park under the tiles, the pool and courts inside The Veranda band */
.vd-render{margin:1.4rem 0 0}
.vd-render img,.vd-renders img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sand)}
.vd-render figcaption{font-size:.74rem;line-height:1.5;color:#7a7068;margin-top:.5rem}
.vd-renders{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.8rem;margin:1.8rem 0 0;position:relative;z-index:1}
.vd-renders figure{margin:0;min-height:0}
.vd-renders figure:nth-child(2) img{aspect-ratio:auto;height:100%}
.vd-veranda .vd-render-cap{font-size:.72rem;color:rgba(233,227,216,.68);margin:.6rem 0 0}

/* Diamond in Verdancia */
.vd-status{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;background:var(--cream);border:1px solid rgba(192,160,98,.45);padding:.85rem 1.1rem;max-width:52rem}
.vd-pill{display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--cream);background:var(--burgundy-deep);padding:.32rem .75rem;border-radius:999px;white-space:nowrap}
.vd-plans{list-style:none;margin:1.6rem 0 .6rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.vd-plans a{display:flex;flex-direction:column;height:100%;background:var(--cream);border:1px solid rgba(46,42,37,.1);text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.vd-plans a:hover{border-color:var(--gold);box-shadow:0 10px 30px rgba(46,42,37,.08)}
.vd-plans img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--sand)}
.vd-plan-name{font-family:var(--serif);font-size:1.45rem;letter-spacing:.04em;padding:.9rem 1rem 0;color:var(--burgundy-deep)}
.vd-plan-meta{font-size:.8rem;color:#7a7068;padding:.15rem 1rem 0}
.vd-plan-go{margin-top:auto;padding:.8rem 1rem 1rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.vd-plan-note{font-size:.8rem}
/* new elevations, "may be coming soon": first on the page, two across (Juan 2026-10-15) */
.cp .vd-elev-top{margin:0 0 2.6rem}
.vd-elev-head p{max-width:46rem}
.vd-elevs{list-style:none;margin:1.2rem 0 .6rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.vd-elevs figure{margin:0;position:relative;height:100%;background:var(--cream);border:1px solid rgba(46,42,37,.1)}
.vd-elevs img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sand)}
.vd-soon{position:absolute;left:.85rem;top:.85rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--burgundy-deep);background:rgba(251,249,244,.93);border:1px solid var(--gold);padding:.42rem .8rem;border-radius:999px;white-space:nowrap}
.vd-elevs figcaption{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:.05em;color:var(--burgundy-deep);padding:.85rem 1.2rem 1rem}
.vd-two{margin:1.6rem 0 0}
.vd-two .cp-box p{margin:0}

/* The Veranda */
.vd-veranda{background:var(--burgundy-deep);color:var(--cream);padding:2.6rem 2.2rem;position:relative;overflow:hidden}
.vd-veranda::after{content:"\25C6";position:absolute;right:-3.2rem;bottom:-6.4rem;font-size:15rem;line-height:1;color:rgba(217,188,127,.07);pointer-events:none}
.vd-veranda h2{color:var(--cream);font-size:clamp(1.8rem,3.4vw,2.6rem)}
.vd-veranda p{color:#E9E3D8;max-width:44rem;position:relative}
.vd-kicker{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright)!important;margin:0 0 .5rem!important}
.vd-checks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.55rem 1.4rem;position:relative}
.vd-checks li{position:relative;padding-left:1.4rem;font-size:.95rem}
.vd-checks li::before{content:"\25C6";position:absolute;left:0;top:.08rem;color:var(--gold-bright);font-size:.72rem}

/* What's nearby: the map full width, the numbered list under it in two columns */
.vd-near{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
.vd-map{margin:0;border:1px solid rgba(46,42,37,.12);background:#F4F1EB}
.vd-map img{display:block;width:100%;height:auto}
.vd-map figcaption{font-size:.74rem;line-height:1.5;color:#7a7068;padding:.6rem .8rem;border-top:1px solid rgba(46,42,37,.1);background:var(--cream)}
.vd-swipe{display:none}
.vd-near-list{list-style:none;margin:0;padding:0;columns:2;column-gap:2.6rem}
.vd-near-list li{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.7rem;align-items:start;padding:.62rem 0;border-bottom:1px solid rgba(46,42,37,.1);font-size:.9rem;line-height:1.45;break-inside:avoid}
.vd-badges{display:flex;flex-wrap:wrap;gap:.2rem}
.vd-n{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:50%;background:#434341;color:#fff;font-size:.64rem;font-weight:600;line-height:1}
.vd-n-off{background:var(--burgundy);font-size:.78rem}
.vd-min{white-space:nowrap;color:var(--burgundy-deep);font-weight:400}

/* What's coming, HOA/schools/utilities */
.vd-table td{white-space:normal}
.vd-table td:last-child{min-width:12rem}
.vd-dl>div{padding-right:1.2rem}
.vd-dl dd{line-height:1.6}

/* interest list */
.vd-interest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.4rem;align-items:start;background:var(--sand);border:1px solid var(--sand-deep);padding:2.4rem}
/* a <select> is as wide as its longest option; without these the form widened the page on phones */
.vd-interest>*,.vd-interest .form-row>*{min-width:0}
.vd-interest select,.vd-interest input,.vd-interest textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.vd-int-copy .cp-people{flex-direction:column;gap:.9rem;margin-top:1.4rem}
.vd-int-copy .cp-k{color:#7a7068}
.vd-int-copy .cp-people a{color:var(--burgundy-deep)}
/* a Text button next to each agent's number: opens Messages with the Verdancia note written */
.vd-reach{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem}
.vd-int-copy .cp-people a.vd-sms{display:inline-block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--burgundy-deep);border:1px solid var(--gold-deep);padding:.42rem .9rem;border-radius:999px;text-decoration:none;line-height:1}
.vd-int-copy .cp-people a.vd-sms:hover{background:var(--gold);border-color:var(--gold)}

/* fine print with the Equal Housing Opportunity logo */
.vd-fine{display:flex;gap:1.2rem;align-items:center;margin-top:2.4rem;border-top:1px solid rgba(46,42,37,.12);padding-top:1.4rem}
.vd-fine img{flex:none;width:96px;height:auto}
.vd-fine .cp-fine{margin:0}

@media (max-width:1000px){
  .vd-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .vd-elevs{grid-template-columns:1fr}
}
@media (max-width:900px){
  .vd-near-list{columns:1}
}
@media (max-width:820px){
  .vd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-facts li:nth-child(3){border-left:0;padding-left:0}
  .vd-facts li:nth-child(n+3){border-top:1px solid rgba(46,42,37,.1)}
  .vd-interest{grid-template-columns:minmax(0,1fr);padding:1.6rem 1.1rem}
  .vd-interest .form-light{padding:1.4rem 1.1rem}
  .vd-table th{white-space:normal}
  .vd-table td:first-child{min-width:0}
  .vd-table td:last-child{min-width:8.5rem}
  .vd-veranda{padding:2rem 1.3rem}
}
@media (max-width:700px){
  /* the map at a readable size, panned sideways; rtl starts it scrolled to the Verdancia end */
  .vd-map-pan{overflow-x:auto;-webkit-overflow-scrolling:touch;direction:rtl}
  .vd-map-pan img{direction:ltr;width:760px;max-width:none}
  .vd-renders{grid-template-columns:minmax(0,1fr)}
  .vd-renders figure:nth-child(2) img{aspect-ratio:16/9;height:auto}
  .vd-swipe{display:inline}
  .page-hero.vd-hero{min-height:420px}
  .vd-hero-text{padding:6rem 16px 2.6rem}
  .vd-hero>.vd-hero-cap{font-size:.58rem;right:.6rem;bottom:.4rem}
}
@media (max-width:520px){
  .vd-plans{grid-template-columns:1fr}
  .vd-facts b{font-size:1.3rem}
  .vd-fine{flex-direction:column;align-items:flex-start}
}