/**
 * Blueprint Surface / Gradient / Divider System v1
 * CSS — Layer-Struktur, Presets, Dividers, Decor
 *
 * @package Blueprint
 * @version 1.0.0
 */

/* =============================================================================
   BASIS: Section als Surface-Container
   ========================================================================== */

.bp-surface {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bp-surface__bg,
.bp-surface__overlay,
.bp-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bp-surface__bg      { z-index: 0; }
.bp-surface__overlay { z-index: 1; }
.bp-decor            { z-index: 2; }

/* Section-Inner muss über allen dekorativen Layern liegen */
.bp-surface .section-inner { position: relative; z-index: 3; }

/* Decor kann optional vor Content gerendert werden */
.bp-surface.bp-decor-z--infront .bp-decor { z-index: 4; }

/* =============================================================================
   BG LAYER — Solid
   ========================================================================== */

.bp-surface--solid .bp-surface__bg {
    background: var(--bp-ctx-surface-bg, transparent);
}

/* =============================================================================
   BG LAYER — Gradient
   ========================================================================== */

.bp-surface--gradient .bp-surface__bg {
    background: var(--bp-ctx-surface-gradient, transparent);
    opacity: var(--bp-ctx-surface-opacity, 1);
}

/* =============================================================================
   BG LAYER — Image
   ========================================================================== */

.bp-surface--image .bp-surface__bg {
    background-image: var(--bp-ctx-surface-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: var(--bp-ctx-surface-blend, normal);
}

/* =============================================================================
   BG LAYER — Gradient + Image
   (Gradient liegt auf dem Bild, blend_mode greift auf beiden)
   ========================================================================== */

.bp-surface--gradient_image .bp-surface__bg {
    background-image: var(--bp-ctx-surface-gradient, none), var(--bp-ctx-surface-image, none);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: var(--bp-ctx-surface-blend, normal);
}

/* =============================================================================
   OVERLAY LAYER
   ========================================================================== */

.bp-surface__overlay {
    background-color: var(--bp-ctx-surface-overlay-color, transparent);
    opacity: var(--bp-ctx-surface-overlay-opacity, 0);
}

/* =============================================================================
   DECOR LAYER — Presets
   ========================================================================== */

.bp-decor {
    opacity: var(--bp-ctx-decor-opacity, 1);
    filter: blur(var(--bp-ctx-decor-blur, 0));
}

/* Scales — Glow-Grösse */
.bp-surface.bp-decor-scale--sm .bp-decor { --bp-ctx-decor-size: 30%; }
.bp-surface.bp-decor-scale--md .bp-decor { --bp-ctx-decor-size: 60%; }
.bp-surface.bp-decor-scale--lg .bp-decor { --bp-ctx-decor-size: 90%; }

/* Preset: Glow Soft Top Right */
.bp-decor--glow_soft_top_right {
    background: radial-gradient(
        circle at top right,
        var(--bp-surface-glow-color-1, rgba(52,174,228,0.5)) 0%,
        transparent 60%
    );
}

/* Preset: Glow Dual Edges */
.bp-decor--glow_dual_edges {
    background:
        radial-gradient(circle at top left,     var(--bp-surface-glow-color-1, rgba(52,174,228,0.3)) 0%, transparent 50%),
        radial-gradient(circle at bottom right, var(--bp-surface-glow-color-2, rgba(135,73,151,0.3)) 0%, transparent 50%);
}

/* Preset: Mesh Fade Center */
.bp-decor--mesh_fade_center {
    background:
        radial-gradient(circle at 30% 40%, var(--bp-surface-glow-color-1, rgba(52,174,228,0.2)) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, var(--bp-surface-glow-color-2, rgba(135,73,151,0.2)) 0%, transparent 40%);
}

/* Preset: Dots Soft Left */
.bp-decor--dots_soft_left {
    background-image: radial-gradient(
        circle,
        var(--bp-surface-glow-color-1, rgba(52,174,228,0.25)) 1px,
        transparent 1.5px
    );
    background-size: 24px 24px;
    background-position: top left;
    background-repeat: repeat;
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%);
}

/* =============================================================================
   DIVIDERS
   ========================================================================== */

.bp-divider {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    z-index: 5;
}

.bp-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bp-divider--top {
    top: 0;
    transform: translateY(-1px); /* Sub-Pixel-Lücke abdecken */
}

.bp-divider--bottom {
    bottom: 0;
    transform: translateY(1px);
}

/* Orientierung steckt IM Path (top_path / bottom_path in der Registry),
   nicht in einer pauschalen CSS-Spiegelung.
   Flip = rein horizontale Spiegelung (scaleX). */
.bp-divider.is-flipped svg { transform: scaleX(-1); }

/* Heights — kontrolliert per data-height */
.bp-divider[data-height="xs"] { height: 24px; }
.bp-divider[data-height="sm"] { height: 48px; }
.bp-divider[data-height="md"] { height: 80px; }
.bp-divider[data-height="lg"] { height: 120px; }
.bp-divider[data-height="xl"] { height: 180px; }

/* Fill — getrennt pro Position */
.bp-divider--top svg    { fill: var(--bp-ctx-divider-top-color, var(--color-bg, #fff)); }
.bp-divider--bottom svg { fill: var(--bp-ctx-divider-bottom-color, var(--color-bg, #fff)); }

/* =============================================================================
   RESPONSIVE — Divider-Höhe auf Mobile reduzieren
   ========================================================================== */

@media (max-width: 640px) {
    .bp-divider[data-height="lg"] { height: 80px; }
    .bp-divider[data-height="xl"] { height: 120px; }
}