/* Knowledge-Centre block editor (F2 portal) — GLOBAL styles, because the F2 portal does NOT bundle the
   FalconTwo.Web.Frontend RCL's scoped (.razor.css) styles into FalconTwo.Portal.styles.css. Scoped here by
   the .web-content-editor root class so it only affects the building-block editor. */

/* Click-target fix: the active tab panel's content is a MudGrid whose negative gutter margins (Spacing=6)
   extend up over the tab header strip and intercept pointer events, so only the middle of a tab was
   clickable (notably the Preview tab). Stack the toolbar above the panels. */
.web-content-editor .mud-tabs-tabbar { position: relative; z-index: 3; background: #fff; }
.web-content-editor .mud-tabs-panels { position: relative; z-index: 1; }

/* The editor preview pane loads kc-blocks.css but NOT the site's grid utility classes (css-grid / grid-N-col),
   so product/gallery blocks would collapse to one stacked column. Give them a responsive grid fallback. */
.web-content-editor .dynamic-container .css-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

/* Site utility-class fallbacks (values mirrored from the website's compiled.css) so the live preview renders
   like the real site — the portal doesn't load compiled.css. Scoped to the editor so the admin UI is untouched. */
.web-content-editor .dynamic-container .hot-grey-text { color: var(--hot-grey, #706f6f); }
.web-content-editor .dynamic-container .lnk.primary-lnk,
.web-content-editor .dynamic-container .primary-lnk { color: var(--hot-blue, #1368aa); text-decoration: underline; }
.web-content-editor .dynamic-container .font-12px { font-size: 12px; }
.web-content-editor .dynamic-container .font-18px { font-size: 18px; }
.web-content-editor .dynamic-container .font-family-montserrat { font-family: Montserrat, Roboto, Helvetica, Arial, sans-serif; }
.web-content-editor .dynamic-container .content-center { display: flex; align-items: center; justify-content: center; }
.web-content-editor .dynamic-container .text-line-through { text-decoration: line-through; }
.web-content-editor .dynamic-container .two-line-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.web-content-editor .dynamic-container .sx-1 > * + * { margin-left: 4px; }
.web-content-editor .dynamic-container .sx-3 > * + * { margin-left: 12px; }
.web-content-editor .dynamic-container .sx-8 > * + * { margin-left: 32px; }
.web-content-editor .dynamic-container .sy-1 > * + * { margin-top: 4px; }
.web-content-editor .dynamic-container .sy-3 > * + * { margin-top: 12px; }
.web-content-editor .dynamic-container .sy-4 > * + * { margin-top: 16px; }