/* ══════════════════════════════════════════════════════
   CHLOM Article I — Global Section Spacing (Rhythm Lock)
   ══════════════════════════════════════════════════════
   SECTION_PAD_Y: 80px (desktop) / 50px (mobile <= 768px)
   SECTION_PAD_X: 0
   SECTION_GAP:   0

   Loaded AFTER all theme CSS.
   Specificity 0-2-1 beats all theme rules.
   ────────────────────────────────────────────────────── */

body.bpage .section_space {
    padding: 80px 0;
    margin: 0;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    body.bpage .section_space {
        padding: 50px 0;
    }
}

/* ══════════════════════════════════════════════════════
   CHLOM Article IV — Connector Layer
   ══════════════════════════════════════════════════════
   Zero-height divs injected between sections by
   bpage_render_helper.php. Invisible by default;
   themes opt-in via variant classes.
   ────────────────────────────────────────────────────── */

.chlom-connector {
    position: relative;
    z-index: 1;
    height: 0;
    overflow: visible;
    pointer-events: none;
    line-height: 0;
}

/* Default pseudo-elements (hidden unless variant class added) */
.chlom-connector::before,
.chlom-connector::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    pointer-events: none;
}

/* Variant: thin rule divider */
body.bpage .chlom-connector--rule::after {
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--bpage-border, rgba(15,23,42,0.12));
}

/* Variant: center dot */
body.bpage .chlom-connector--dot::after {
    left: 50%;
    right: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--bpage-accent, #f97316);
}

/* Variant: gradient line */
body.bpage .chlom-connector--gradient::after {
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bpage-accent, #f97316), transparent);
}

@media (max-width: 768px) {
    .chlom-connector--hide-mobile {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════
   CHLOM Article IV-B — Section-Level Connector Layer
   ══════════════════════════════════════════════════════
   Decorative bottom-edge treatment on section wrappers.
   Driven by data-connector attribute set per variant.
   Colors consume --cv-* / --section-* tokens.
   ────────────────────────────────────────────────────── */

body.bpage .section_space[data-connector] {
    position: relative;
}

body.bpage .section_space[data-connector]::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
}

/* Connector: thin rule divider */
body.bpage .section_space[data-connector="rule"]::after {
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--cv-border, var(--section-border, rgba(15,23,42,0.12)));
}

/* Connector: repeating dots with glow */
body.bpage .section_space[data-connector="dots"]::after {
    left: 30%;
    right: 30%;
    height: 4px;
    background: radial-gradient(circle, var(--cv-accent, var(--section-accent, #f97316)) 1.5px, transparent 1.5px);
    background-size: 12px 4px;
    filter: drop-shadow(0 0 4px var(--cv-accent-glow, var(--cv-accent, var(--section-accent, #f97316))));
}

/* Connector: gradient bar */
body.bpage .section_space[data-connector="gradient"]::after {
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--cv-accent, var(--section-accent, #f97316)),
        transparent
    );
}

/* Connector: none — explicit off */
body.bpage .section_space[data-connector="none"]::after {
    display: none;
}

/* Reduced motion: disable any connector animation */
@media (prefers-reduced-motion: reduce) {
    body.bpage .section_space[data-connector]::after {
        transition: none;
        animation: none;
        filter: none;
    }
}