/* Vista Lead Generation — image spacing / larger media boxes
   No source graphics are altered. This layer adds breathing room around images
   and slightly enlarges primary media columns while keeping all artwork uncropped. */
:root{
  --vlg-media-pad-lg:24px;
  --vlg-media-pad-md:18px;
  --vlg-media-pad-sm:12px;
  --vlg-media-radius:15px;
}

/* Primary page/hero media gets a little more room in the grid. */
@media (min-width:1101px){
  .hero-grid,
  .inner-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(430px,.92fr)!important;
    gap:56px!important;
  }
  .hero-art.visual-frame,
  .inner-visual.visual-frame{
    min-width:0!important;
  }
}

/* Create a real margin between artwork and its outer card. */
.visual-frame .visual-composite{
  width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
  max-width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
  height:auto!important;
  margin:var(--vlg-media-pad-lg) auto!important;
  border-radius:var(--vlg-media-radius)!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}

/* Larger, cleaner outer boxes. */
.hero-art.visual-frame,
.inner-visual.visual-frame,
.switch-visual.visual-frame,
.contact-shell aside.visual-frame,
.green-impact.visual-frame,
.scenic-strip.visual-frame{
  border-radius:24px!important;
  box-shadow:0 18px 46px rgba(25,39,74,.10)!important;
}

/* Smaller cards still get breathing room without shrinking the artwork too much. */
.step-visual.visual-frame .visual-composite,
.resource-art.visual-frame .visual-composite,
.portrait-art.visual-frame .visual-composite{
  width:calc(100% - (var(--vlg-media-pad-sm) * 2))!important;
  max-width:calc(100% - (var(--vlg-media-pad-sm) * 2))!important;
  margin:var(--vlg-media-pad-sm) auto!important;
  border-radius:12px!important;
}

/* Keep live copy/detail blocks aligned with the wider visual card. */
.hero-art.visual-frame .quote-bubble,
.hero-art.visual-frame .visual-caption,
.switch-visual.visual-frame .pane-card,
.inner-visual.visual-frame .metric-hero,
.inner-visual.visual-frame .vertical-board,
.inner-visual.visual-frame .about-logo-card,
.contact-shell aside.visual-frame .contact-stat{
  width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
  max-width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keep resource/testimonial cards visually balanced. */
.resource-art.visual-frame{margin-bottom:18px!important}
.portrait-art.visual-frame{padding-bottom:0!important}

@media (max-width:1100px){
  :root{--vlg-media-pad-lg:20px;--vlg-media-pad-md:16px;--vlg-media-pad-sm:11px}
  .hero-art.visual-frame,
  .inner-visual.visual-frame,
  .switch-visual.visual-frame{width:min(100%,820px)!important;margin-inline:auto!important}
}

@media (max-width:720px){
  :root{--vlg-media-pad-lg:14px;--vlg-media-pad-md:12px;--vlg-media-pad-sm:9px;--vlg-media-radius:12px}
  .visual-frame .visual-composite{
    width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
    max-width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
    margin:var(--vlg-media-pad-lg) auto!important;
  }
  .step-visual.visual-frame .visual-composite,
  .resource-art.visual-frame .visual-composite,
  .portrait-art.visual-frame .visual-composite{
    width:calc(100% - (var(--vlg-media-pad-sm) * 2))!important;
    max-width:calc(100% - (var(--vlg-media-pad-sm) * 2))!important;
    margin:var(--vlg-media-pad-sm) auto!important;
  }
  .hero-art.visual-frame .quote-bubble,
  .hero-art.visual-frame .visual-caption,
  .switch-visual.visual-frame .pane-card,
  .inner-visual.visual-frame .metric-hero,
  .inner-visual.visual-frame .vertical-board,
  .inner-visual.visual-frame .about-logo-card,
  .contact-shell aside.visual-frame .contact-stat{
    width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
    max-width:calc(100% - (var(--vlg-media-pad-lg) * 2))!important;
  }
}

@media (max-width:420px){
  :root{--vlg-media-pad-lg:11px;--vlg-media-pad-sm:7px}
}