/* Shared background behaviour only; typography, spacing and content remain with the host. */
.ql-background-host { position: relative; isolation: isolate; }
.ql-background { display: none; }
.ql-background-host > .ql-background {
    display: block; position: absolute; inset: 0; z-index: -1;
    overflow: hidden; border-radius: inherit; pointer-events: none; background: #111827;
}
.ql-background-media { position: absolute; inset: 0; transform: translateY(var(--ql-background-shift, 0px)); }
.ql-background-media > img,
.ql-background-media > video {
    position: absolute; width: 100%; height: 100%; inset: 0;
    max-width: none; object-fit: cover; object-position: center;
}
.ql-background-media > iframe {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    border: 0; max-width: none; pointer-events: none;
}
.ql-background-media > video,
.ql-background-media > iframe { visibility: hidden; }
.ql-background-media > .is-ready { visibility: visible; }
.ql-background::after {
    content: ''; position: absolute; inset: 0;
    background: var(--ql-background-overlay, #000); opacity: var(--ql-background-opacity, 0);
}
.ql-background-toggle {
    position: absolute; right: 16px; bottom: 16px; z-index: 2;
    font: inherit; font-size: .75rem; line-height: 1.4;
    padding: 8px 12px; border: 1px solid #fff; border-radius: 50px;
    background: #111827; color: #fff; cursor: pointer;
}
.ql-background-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ql-background-toggle[hidden] { display: none; }
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .ql-background[data-parallax="yes"] > .ql-background-media { inset-block: -80px; }
}
@media (prefers-reduced-motion: reduce) {
    .ql-background-media { transform: none; }
}