/* ==========================================================================
   neighborhoods.css, neighborhood card grid (SEO section)
   ========================================================================== */
.vr-hoods{padding-block:var(--vr-section-y); background:var(--vr-cream); text-align:center;}
.vr-hoods__head{font-weight:500; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--vr-teal); line-height:1.15; margin-bottom:.6rem;}
.vr-hoods__sub{font-size:1.1rem; max-width:52ch; margin:0 auto 3rem; color:var(--vr-charcoal);}
.vr-hoods__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
.vr-hood{
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; text-decoration:none;
  background:#fff; border:1px solid var(--vr-line); border-radius:8px;
  padding:1.6rem 1.5rem; transition:transform .25s, box-shadow .25s, border-color .25s;
}
.vr-hood:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(31,42,46,.12); border-color:var(--vr-blush);}
.vr-hood__name{font-family:var(--vr-serif); font-weight:600; font-size:1.5rem; color:var(--vr-teal);}
.vr-hood__arrow{font-family:var(--vr-ui); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vr-blush);}

@media (max-width:820px){
  .vr-hoods__grid{grid-template-columns:1fr 1fr; gap:1rem;}
}
@media (max-width:520px){
  .vr-hoods__grid{grid-template-columns:1fr;}
}