/* =================================================================
   perf-cls.css — CLS fix: reserve space for runtime-injected partials
   -----------------------------------------------------------------
   include-partials.js fetches + injects the header/footer after
   DOMContentLoaded. Until they land the [data-include] container has
   zero height, so hero content jumps down when the partial injects
   (layout shift). Reserving the known height up front removes the jump.

   Opt-in: add class="vr-include-reserve" to the [data-include] container
   AND link this stylesheet. Inert otherwise, so no page is affected
   until both are present. Once the real header/footer inject, they
   replace the reserved box, so the min-height is harmless afterwards.

   Header height = .vr-header-inner min-height (52px desktop / 48px
   mobile) + .vr-breadcrumb-strip (~24px). Footer ~64px.
   ================================================================= */

/* Header container: reserve ~76px desktop */
.vr-include-reserve[data-reserve="header"] {
  display: block;
  min-height: 76px;
}

/* Footer container: reserve ~64px */
.vr-include-reserve[data-reserve="footer"] {
  display: block;
  min-height: 64px;
}

/* Mobile: header inner shrinks to 48px (+24px strip) = ~72px */
@media (max-width: 768px) {
  .vr-include-reserve[data-reserve="header"] {
    min-height: 72px;
  }
}

/* Once injected, the real header/footer set their own height; the
   reservation only matters pre-injection, so no override is needed. */