/**
 * Section Dividers System
 *
 * Decorative SVG shape dividers overlaying section edges.
 * Absolutely positioned at top/bottom of the section, full viewport width.
 * Default mode: SVG fill = own section's bg, wrapper bg = adjacent section's bg.
 * The filled shape faces the section it belongs to.
 *
 * All transforms (rotation, flip) are computed in PHP and applied via
 * inline style="transform: ..." to avoid CSS specificity conflicts.
 */

/* ==========================================================================
   Section Positioning Fallback
   ========================================================================== */

section:has(.section-divider) {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Base Divider
   ========================================================================== */

.section-divider {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 6;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
    background-color: currentColor;
}

.section-divider--top {
    top: 0;
}

.section-divider--bottom {
    bottom: 0;
}

.section-divider svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 100%;
    fill: currentColor;
}

/* ==========================================================================
   Height Presets
   ========================================================================== */

.section-divider--sm { height: 40px; }
.section-divider--md { height: 80px; }
.section-divider--lg { height: 120px; }
.section-divider--xl { height: 160px; }

@media (max-width: 767px) {
    .section-divider--sm { height: 24px; }
    .section-divider--md { height: 48px; }
    .section-divider--lg { height: 72px; }
    .section-divider--xl { height: 96px; }
}

/* ==========================================================================
   Gradient Fill (CSS mask technique)
   ========================================================================== */

.section-divider--gradient {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


.section-divider--gradient svg {
    display: none;
}

/* ==========================================================================
   Invert (negative space)
   ========================================================================== */

.section-divider--invert {
    background-color: transparent;
}

/* ==========================================================================
   Print — hide dividers
   ========================================================================== */

@media print {
    .section-divider {
        display: none;
    }
}