/* Mobile composition for the five local-city pages.
 * The first section stays substantial, but its space is shared between
 * readable copy rhythm, the next-section transition and Mini Ayoub. */

@media (max-width: 640px) {
  body.site-page.page-local-city-clone.magic-scroll-active .local-beyonds-hero {
    box-sizing: border-box !important;
    min-height: clamp(620px, 78svh, 760px) !important;
    padding: calc(var(--header-height, 76px) + 2rem) 1rem clamp(4rem, 9svh, 5rem) !important;
  }

  body.site-page.page-local-city-clone.magic-scroll-active .local-beyonds-hero__copy {
    gap: clamp(21px, 5.8vw, 24px) !important;
  }

  body.site-page.page-local-city-clone.magic-scroll-active .local-beyonds-actions {
    gap: clamp(12px, 3.6vw, 14px) !important;
  }

  body.site-page.page-local-city-clone.magic-scroll-active .local-beyonds-section--intro {
    padding-top: clamp(10.75rem, 22svh, 12.75rem) !important;
  }
}

/* Homepage final CTA: the heading and its parent share the same center line.
 * The heading previously outgrew a 760px parent and overflowed to the right. */
html body.site-page.page-home .magic-home-v3 .magic-final__copy,
html body.site-page.page-home.magic-scroll-active .magic-home-v3 .magic-final__copy {
  justify-items: center !important;
  margin-inline: auto !important;
  max-width: min(100%, 980px) !important;
  text-align: center !important;
  width: 100% !important;
}

html body.site-page.page-home .magic-home-v3 .magic-final__copy h2#final-title,
html body.site-page.page-home.magic-scroll-active .magic-home-v3 .magic-final__copy h2#final-title {
  justify-self: stretch !important;
  margin-inline: auto !important;
  max-width: 980px !important;
  text-align: center !important;
  width: 100% !important;
}