/* ==========================================================================
   KSS Background Container Block (Frontend & Editor)
   ========================================================================== */

.kss-background-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Overlay Layer */
.kss-bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Content Wrapper */
.kss-bg-content {
    position: relative;
    z-index: 1;
}

/* Container Breite */
.kss-bg-content.kss-container {
    width: 100%;
    padding-left: var(--kss-layout-system-container-padding-left, 1.5rem);
    padding-right: var(--kss-layout-system-container-padding-right, 1.5rem);
}

/* Parallax Support - wird via JavaScript enhanced */
.kss-background-container[data-parallax-speed] {
    background-attachment: fixed;
}

/* Mobile: Parallax deaktivieren für Performance */
@media (max-width: 768px) {
    .kss-background-container[data-parallax-speed] {
        background-attachment: scroll !important;
    }
}

/* Editor Styles */
.kss-background-container-editor {
    position: relative;
    width: 100%;
    min-height: 200px;
    border: 2px dashed #ccc;
}

.kss-background-container-editor .kss-container {
    position: relative;
    z-index: 1;
}

/* AOS Animation Support */
.kss-background-container[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

.kss-background-container[data-aos].aos-animate {
    opacity: 1;
}

/* Responsive Padding Adjustments */
@media (max-width: 768px) {
    .kss-background-container {
        padding-left: var(--kss-layout-system-container-padding-left, 1rem) !important;
        padding-right: var(--kss-layout-system-container-padding-right, 1rem) !important;
    }
}

/* Full Width Support */
.alignfull.kss-background-container {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.alignwide.kss-background-container {
    max-width: var(--wp--custom--wide-size, 1200px);
    width: 100%;
}