/* ========================================
   Section Block Styles
   Prefix: bkbg-section
   ======================================== */

/* CSS Custom Properties */
.bkbg-section {
    --bkbg-section-max-width: 1200px;
    --bkbg-section-padding-none: 0;
    --bkbg-section-padding-xs: 8px;
    --bkbg-section-padding-s: 16px;
    --bkbg-section-padding-m: 32px;
    --bkbg-section-padding-l: 48px;
    --bkbg-section-padding-xl: 64px;
    --bkbg-section-bg-light: #f8fafc;
    --bkbg-section-bg-dark: #1e293b;
    --bkbg-section-bg-accent: #3b82f6;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Content Width */
.bkbg-section--width-full .bkbg-section__inner {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.bkbg-section--width-boxed .bkbg-section__inner {
    width: 100%;
    max-width: var(--bkbg-section-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Vertical Padding */
.bkbg-section--padding-none {
    padding-top: var(--bkbg-section-padding-none);
    padding-bottom: var(--bkbg-section-padding-none);
}

.bkbg-section--padding-xs {
    padding-top: var(--bkbg-section-padding-xs);
    padding-bottom: var(--bkbg-section-padding-xs);
}

.bkbg-section--padding-s {
    padding-top: var(--bkbg-section-padding-s);
    padding-bottom: var(--bkbg-section-padding-s);
}

.bkbg-section--padding-m {
    padding-top: var(--bkbg-section-padding-m);
    padding-bottom: var(--bkbg-section-padding-m);
}

.bkbg-section--padding-l {
    padding-top: var(--bkbg-section-padding-l);
    padding-bottom: var(--bkbg-section-padding-l);
}

.bkbg-section--padding-xl {
    padding-top: var(--bkbg-section-padding-xl);
    padding-bottom: var(--bkbg-section-padding-xl);
}

/* Background Presets */
.bkbg-section--bg-none {
    background-color: transparent;
}

.bkbg-section--bg-light {
    background-color: var(--bkbg-section-bg-light);
}

.bkbg-section--bg-dark {
    background-color: var(--bkbg-section-bg-dark);
    color: #ffffff;
}

.bkbg-section--bg-accent {
    background-color: var(--bkbg-section-bg-accent);
    color: #ffffff;
}

.bkbg-section--bg-custom {
    background-color: var(--bkbg-section-custom-bg, transparent);
}

/* Inner wrapper */
.bkbg-section__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Editor-specific styles */
.editor-styles-wrapper .bkbg-section {
    min-height: 60px;
    border: 1px dashed transparent;
    border-radius: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-styles-wrapper .bkbg-section:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

.editor-styles-wrapper .bkbg-section.is-selected,
.editor-styles-wrapper .bkbg-section:focus-within {
    border-color: rgba(59, 130, 246, 0.5);
}

/* Drag and drop state */
.editor-styles-wrapper .bkbg-section.is-dragging-over,
.editor-styles-wrapper [data-type="blockenberg/section"].is-dragging-over > .bkbg-section {
    border-color: rgba(59, 130, 246, 0.6) !important;
    background-color: rgba(59, 130, 246, 0.03) !important;
}

/* Ensure InnerBlocks placeholder shows correctly - direct children only */
.editor-styles-wrapper .bkbg-section > .bkbg-section__inner > .block-editor-inner-blocks {
    width: 100%;
}

.editor-styles-wrapper .bkbg-section > .bkbg-section__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Section label in editor */
.editor-styles-wrapper .bkbg-section::before {
    content: 'Section';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.editor-styles-wrapper .bkbg-section:hover::before,
.editor-styles-wrapper .bkbg-section.is-selected::before {
    opacity: 1;
}

/* Full width alignment - break out of container - only for top-level sections */
.bkbg-section.alignfull:not(.bkbg-column .bkbg-section) {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.bkbg-section.alignwide:not(.bkbg-column .bkbg-section) {
    width: calc(100% + 80px);
    max-width: calc(100vw - 40px);
    margin-left: -40px;
    margin-right: -40px;
}

/* Nested sections inside columns should be full width of column */
.bkbg-column .bkbg-section,
.bkbg-column .bkbg-section.alignfull,
.bkbg-column .bkbg-section.alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Editor full width support */
.editor-styles-wrapper .bkbg-section.alignfull,
.editor-styles-wrapper [data-type="blockenberg/section"][data-align="full"] > .bkbg-section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 782px) {
    .bkbg-section--width-boxed .bkbg-section__inner,
    .bkbg-section--width-full .bkbg-section__inner {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .bkbg-section--padding-l {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    
    .bkbg-section--padding-xl {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}