/* ==========================================================================
   page-hero.css - generic interior-page hero banner (about, our-story,
   buyers-and-sellers, your-next-move, contact, neighborhood pages)
   ========================================================================== */
/* Photo heroes (contact, our story). 360px against a ~1900px viewport is a 5:1
   letterbox, and `cover` then shows only the middle third of the photo's height
   -- which on a standing figure is the waist. Taller box, shallower crop. */
.vr-pagehero{
  position:relative; min-height:clamp(340px,30vw,470px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  background-color:var(--vr-teal); background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* Bias the remaining trim off the foreground rather than off the top of the
   frame. Set per page, since Our Story's group shot wants the opposite. */
.vr-pagehero--top{background-position:center 30%;}
.vr-pagehero__overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,42,46,.35),rgba(31,42,46,.58));}
.vr-pagehero__inner{position:relative; max-width:760px; padding:64px var(--vr-gutter); color:#fff;}
.vr-pagehero__title{
  font-weight:500; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.1;
  text-shadow:0 1px 24px rgba(0,0,0,.25);
}
.vr-pagehero__lede{
  font-size:clamp(1.05rem,2vw,1.2rem); max-width:600px; margin:1rem auto 0;
  color:rgba(255,255,255,.94);
}

/* Brand-color variant, no photo. Superseded by --bleed (neighborhoods) and
   --field (buyers/sellers/your-next-move); kept as a fallback, currently unused. */
.vr-pagehero--brand{
  min-height:440px; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 620px at 82% -12%, rgba(var(--vr-peacock-rgb),.30), transparent 55%),
    radial-gradient(ellipse 760px 520px at 6% 118%, rgba(243,237,226,.10), transparent 55%),
    linear-gradient(140deg, #2A363C 0%, #232F34 52%, var(--vr-ink) 100%);
}
.vr-pagehero--brand .vr-pagehero__overlay{display:none;}
/* fine diagonal texture so the flat gradient reads as an intentional surface */
.vr-pagehero--brand::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px);
}
/* elegant inset frame */
.vr-pagehero--brand .vr-pagehero__inner{
  padding-block:76px;
  border:1px solid rgba(255,255,255,.18); border-radius:3px;
}
.vr-pagehero--brand .vr-pagehero__inner::before,
.vr-pagehero--brand .vr-pagehero__inner::after{
  content:''; position:absolute; width:9px; height:9px; border:1px solid rgba(248,244,236,.7);
}
.vr-pagehero--brand .vr-pagehero__inner::before{top:-5px; left:-5px; border-right:0; border-bottom:0;}
.vr-pagehero--brand .vr-pagehero__inner::after{bottom:-5px; right:-5px; border-left:0; border-top:0;}
/* decorative divider between title and lede */
.vr-pagehero--brand .vr-pagehero__title::after{
  content:''; display:block; width:56px; height:2px; background:var(--vr-accent-inverse); margin:1.1rem auto .2rem;
}

/* ==========================================================================
   Full-bleed variant, the six neighborhood pages.
   The photograph runs edge to edge with the copy sitting low, and the stat bar
   below it reverses out on Ink so the hero can finish on a hard edge instead of
   being cut off at the knees by a cream band.
   ========================================================================== */
/* Doubled class: .vr-pagehero--bleed is one class, same weight as .vr-pagehero,
   so the base mobile min-height further down this file would otherwise win on
   file order and squash the hero to 280px. */
.vr-pagehero.vr-pagehero--bleed{
  min-height:clamp(360px,44vw,540px);
  align-items:flex-end; overflow:hidden; background:var(--vr-ink);
}
.vr-pagehero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* Three stops, not a flat wash: dark at the top so the sticky header's edge has
   something to sit against, clear through the middle where the house is, and
   heaviest at the bottom where the type actually lands. */
.vr-pagehero--bleed .vr-pagehero__overlay{
  background:linear-gradient(180deg,
    rgba(31,42,46,.50) 0%,
    rgba(31,42,46,.16) 38%,
    rgba(31,42,46,.74) 100%);
}
.vr-pagehero--bleed .vr-pagehero__inner{padding-block:0 clamp(30px,4.5vw,54px);}
.vr-pagehero--bleed .vr-pagehero__lede{margin-inline:auto;}

/* Shared by --bleed and --field */
.vr-pagehero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem;}
.vr-pagehero--bleed .vr-pagehero__cta{justify-content:center;}

@media (max-width:640px){
  .vr-pagehero.vr-pagehero--bleed{min-height:clamp(340px,72vw,440px);}
  .vr-pagehero--bleed .vr-pagehero__cta .vr-btn{width:100%; text-align:center;}
}

/* ==========================================================================
   Monogram field, the pages with no photograph of their own.
   One mark at one size tiled evenly; an oversized copy laid over the tiling
   read as two competing logos instead of a surface.
   ========================================================================== */
.vr-pagehero.vr-pagehero--field{
  min-height:420px; overflow:hidden; justify-content:flex-start;
  background:linear-gradient(150deg,#26333A 0%, var(--vr-ink) 60%, #1A2428 100%);
}
.vr-pagehero--field .vr-pagehero__overlay{display:none;}
/* Half-drop rather than a plain grid: two layers of the same mark, the second
   offset by half a tile on both axes. A straight grid at this scale read as a
   wall of repeated logos; staggering it lets the marks recede into a surface. */
.vr-pagehero--field::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url('../images/brand/vr-monogram-white.png'),
                   url('../images/brand/vr-monogram-white.png');
  background-repeat:repeat, repeat;
  background-size:230px auto, 230px auto;
  background-position:0 0, 115px 115px;
}
/* Full-width inner so the copy lines up with the 1200px grid the rest of the
   page sits on, rather than floating in the middle of the band. */
.vr-pagehero--field .vr-pagehero__inner{
  width:100%; max-width:var(--vr-maxw); margin:0 auto; text-align:left;
  padding-block:clamp(56px,7vw,84px);
}
.vr-pagehero--field .vr-pagehero__title::after{
  content:''; display:block; width:56px; height:2px; background:var(--vr-accent-inverse); margin:1.1rem 0 0;
}
.vr-pagehero--field .vr-pagehero__lede{margin:1.1rem 0 0; max-width:42ch;}

/* Stat bar, sits directly under the hero on the neighborhood pages */
.vr-statbar{background:var(--vr-cream); padding:40px var(--vr-gutter); text-align:center;}
.vr-statbar__grid{
  max-width:var(--vr-maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.vr-statbar__num{display:block; font-family:var(--vr-serif); font-weight:600; font-size:clamp(1.4rem,3vw,1.9rem); color:var(--vr-teal);}
.vr-statbar__label{display:block; font-family:var(--vr-ui); font-weight:400; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vr-stone); margin-top:.4rem;}

/* Reversed variant: rides directly on the bottom edge of the full-bleed hero. */
.vr-statbar--ink{background:var(--vr-ink); padding-block:30px;}
.vr-statbar--ink .vr-statbar__num{color:var(--vr-ivory);}
.vr-statbar--ink .vr-statbar__label{color:rgba(248,244,236,.62);}

@media (max-width:640px){
  .vr-pagehero{min-height:280px;}
  .vr-statbar__grid{grid-template-columns:1fr 1fr; gap:1.5rem 1rem;}
}