/* ========================================================================== 
   Homepage Builder — actual public homepage live preview
========================================================================== */

.homepage-preview-frame.is-live-homepage-preview {
  position: relative;

  display: block;
  height: clamp(720px, 78vh, 920px);
  min-height: 720px;

  isolation: isolate;
  background: #ffffff;
}

.homepage-live-preview__iframe {
  display: block;

  width: 100%;
  height: 100%;
  min-height: inherit;

  border: 0;
  background: #ffffff;
}

.homepage-live-preview__status {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 24px;

  color: #344054;
  font: 700 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;

  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}

.homepage-live-preview__status[hidden] {
  display: none;
}

.homepage-preview-frame[data-live-preview-state="error"]
  .homepage-live-preview__status {
  color: #9b1c1c;
  background: #fff7f7;
}

.homepage-preview-frame[data-preview-device="mobile"].is-live-homepage-preview {
  height: min(820px, 82vh);
  min-height: 680px;
}

/* The embedded document keeps the public CSS untouched. Only browser-level
   motion is neutralized while builder updates are being applied. */
html[data-vg-builder-preview="true"] {
  scroll-behavior: auto;
}

html[data-vg-builder-preview="true"] body {
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .homepage-preview-frame.is-live-homepage-preview {
    height: 720px;
    min-height: 640px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-live-preview__status {
    backdrop-filter: none;
  }
}