/* Mobile-only homepage layout hardening. Keeps hero content in normal flow and prevents rounded-corner backdrop bleed. */
@media (max-width: 720px) {
  body[data-page="home"] .dashboard-hero--cinematic {
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
  }

  body[data-page="home"] .hero-copy--cinematic {
    width: 100% !important;
    max-width: none;
    padding-bottom: 0;
    flex: 0 0 auto;
  }

  /* The old absolute positioning could cover the CTA/subtitle on short phone viewports. */
  body[data-page="home"] .server-card--hero-float {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none;
    margin: 24px 0 0;
    flex: 0 0 auto;
  }

  /* Site Studio slideshow/split/showcase features must reserve space on mobile too. */
  body[data-page="home"] .hero-feature {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 210px !important;
    margin: 24px 0 0;
    flex: 0 0 auto;
  }

  :root[data-bb-hero-feature="slideshow"] body[data-page="home"] .dashboard-hero--cinematic,
  :root[data-bb-hero-layout="split"] body[data-page="home"] .dashboard-hero--cinematic,
  :root[data-bb-hero-layout="showcase"] body[data-page="home"] .dashboard-hero--cinematic {
    min-height: 0 !important;
  }

  /* Give each composited backdrop layer the same clipping radius as the hero. */
  body[data-page="home"] .hero-nether-backdrop,
  body[data-page="home"] .hero-nether-scrim {
    border-radius: inherit;
  }
}

@media (max-width: 620px) {
  body[data-page="home"] .dashboard-hero--cinematic {
    margin-inline: 0;
    border-radius: 20px;
  }

  body[data-page="home"] .hero-nether-backdrop {
    /* Extra hard clip for transformed/animated images on mobile Safari/Chrome. */
    -webkit-clip-path: inset(0 round 20px);
    clip-path: inset(0 round 20px);
  }

  body[data-page="home"] .server-card--hero-float,
  body[data-page="home"] .hero-feature {
    margin-top: 22px;
  }
}