/* Budget the first fold for the hero, city heading and a visible card edge.
   Use the browser's usable viewport, independently of OS, panel size or DPI. */
.overview-stage {
  --home-top: 92px;
  --home-section-gap: 28px;
  --home-city-heading: calc(clamp(36px, 4vw, 58px) * 1.04);
  --home-city-gap: 26px;
  --home-followup-offset: 0px;
  --home-card-peek: clamp(48px, 6svh, 64px);
  gap: var(--home-section-gap);
}

.overview-stage .landing-hero {
  /* min-height leaves room for the content when zoom or a very short window
     makes the full composition impossible; never crop the title or CTA. */
  min-height: min(700px, max(0px, calc(100svh - var(--home-top) - var(--home-section-gap) - var(--home-followup-offset) - var(--home-city-heading) - var(--home-city-gap) - var(--home-card-peek))));
  padding-block: clamp(24px, 6svh, 72px);
  justify-content: center;
}

@media (max-width: 1320px) {
  .overview-stage { --home-section-gap: 24px; }
}

@media (min-width: 561px) and (max-width: 940px) {
  .overview-stage {
    /* The tablet header occupies two compact rows above the hero. */
    --home-top: 156px;
    padding-top: 132px;
  }
}

@media (max-width: 560px) {
  .overview-stage {
    --home-section-gap: 16px;
    /* Reserve both lines of the existing mobile city heading. */
    --home-city-heading: calc(clamp(30px, 9vw, 40px) * 2.16);
    --home-city-gap: 18px;
    --home-followup-offset: 30px;
  }
}