/* =========================================================
   Banner component
   - .sb-banner: runtime (keep minimal)
   - .pb-banner: builder/canvas (make it look like an editor block)
   ========================================================= */

.sb-banner,
.pb-banner {
    width: 100%;
    box-sizing: border-box;
}

/* Runtime: don't force styling here unless you really want it */
.sb-banner {
    /* intentionally minimal */
}

/* Builder/canvas styling */
.pb-banner {
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-2);
    color: var(--sb-text);
    border-radius: 14px;
    padding: 1rem;
    min-height: 72px;

    /* If your banner is basically just a container, this keeps it from collapsing */
    display: block;
}

/* If the banner is empty while configuring, show a tasteful placeholder */
.pb-banner:empty::before {
    content: "Banner";
    display: inline-block;
    color: var(--sb-text-muted);
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Common banner content hygiene */
.sb-banner img,
.pb-banner img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sb-banner a,
.pb-banner a {
    color: var(--sb-link);
}