/* IQ hub visuals sync – 2026-11-01 */
.sites-hub-page .iq-sync-visual-host,
.promotion-page .iq-sync-visual-host {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  overflow:hidden !important;
  padding:18px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,#f7fbff 0%,#eef4fb 100%) !important;
  border:1px solid rgba(93,126,172,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.sites-hub-page .iq-sync-visual-host { min-height: min(34vw, 360px) !important; }
.promotion-page .iq-sync-visual-host { min-height: min(28vw, 300px) !important; }

.iq-sync-thumb {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.iq-sync-thumb > * {
  width:100%;
  margin:0 !important;
}
.iq-sync-thumb svg,
.iq-sync-thumb img,
.iq-sync-thumb object {
  display:block;
  width:100%;
  height:auto;
}
.iq-sync-thumb .iqdm-art,
.iq-sync-thumb .iqdh-art,
.iq-sync-thumb .corporate-hero-visual,
.iq-sync-thumb .landing-hero-visual,
.iq-sync-thumb .ecommerce-hero-visual,
.iq-sync-thumb .portals-demo,
.iq-sync-thumb .pd-demo {
  margin:0 auto !important;
}
.iq-sync-thumb .corporate-hero-visual,
.iq-sync-thumb .landing-hero-visual,
.iq-sync-thumb .ecommerce-hero-visual,
.iq-sync-thumb .portals-demo,
.iq-sync-thumb .pd-demo,
.iq-sync-thumb .iqdm-art,
.iq-sync-thumb .iqdh-art {
  max-width:none !important;
}
.iq-sync-thumb .iq-corporate-scene,
.iq-sync-thumb .iq-landing-scene,
.iq-sync-thumb .iq-ecommerce-scene,
.iq-sync-thumb .iq-portals-scene,
.iq-sync-thumb .iq-seo-scene,
.iq-sync-thumb .iq-programmatic-scene,
.iq-sync-thumb .iqdm-stage,
.iq-sync-thumb .iqdh-stage {
  width:100%;
  max-width:none;
}
.iq-sync-thumb .iqdm-picture,
.iq-sync-thumb .iqdm-svg,
.iq-sync-thumb .iqdh-stage svg {
  width:100%;
  height:auto;
}
.sites-hub-page .iq-sync-visual-host--infra .iq-sync-thumb { max-width: 360px; }
.sites-hub-page .iq-sync-visual-host--corporate .iq-sync-thumb,
.sites-hub-page .iq-sync-visual-host--landing .iq-sync-thumb,
.sites-hub-page .iq-sync-visual-host--ecommerce .iq-sync-thumb,
.sites-hub-page .iq-sync-visual-host--portals .iq-sync-thumb { max-width: 390px; }

.promotion-page .iq-sync-visual-host--seo .iq-sync-thumb,
.promotion-page .iq-sync-visual-host--programmatic .iq-sync-thumb,
.promotion-page .iq-sync-visual-host--direct .iq-sync-thumb { max-width: 360px; }

/* Some page-specific wrappers define grid/column layout. Reset that on synced hosts. */
.sites-hub-page .iq-sync-visual-host--infra,
.sites-hub-page .iq-sync-visual-host--portals,
.sites-hub-page .iq-sync-visual-host--ecommerce,
.sites-hub-page .iq-sync-visual-host--landing,
.sites-hub-page .iq-sync-visual-host--corporate,
.promotion-page .iq-sync-visual-host--seo,
.promotion-page .iq-sync-visual-host--direct,
.promotion-page .iq-sync-visual-host--programmatic {
  grid-template-columns:none !important;
  gap:0 !important;
}

@media (max-width: 1100px) {
  .sites-hub-page .iq-sync-visual-host,
  .promotion-page .iq-sync-visual-host {
    min-height: 260px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }
  .sites-hub-page .iq-sync-visual-host .iq-sync-thumb,
  .promotion-page .iq-sync-visual-host .iq-sync-thumb {
    max-width: 100% !important;
  }
}
@media (max-width: 720px) {
  .sites-hub-page .iq-sync-visual-host,
  .promotion-page .iq-sync-visual-host {
    min-height: 220px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }
}