/* ========================================
   CA Spaces
   Responsive spacer / separator module
======================================== */

.ca-spaces {
    position: relative;
    display: block;
    width: auto;
    box-sizing: content-box;
    min-height: var(--ca-space-h-d, 60px);

    padding-top: var(--ca-space-pt-d, 0px);
    padding-right: var(--ca-space-pr-d, 0px);
    padding-bottom: var(--ca-space-pb-d, 0px);
    padding-left: var(--ca-space-pl-d, 0px);

    margin-top: var(--ca-space-mt-d, 0px);
    margin-right: var(--ca-space-mr-d, 0px);
    margin-bottom: var(--ca-space-mb-d, 0px);
    margin-left: var(--ca-space-ml-d, 0px);

    background: var(--ca-space-bg, transparent);
    border-style: var(--ca-space-border-style, solid);
    border-color: var(--ca-space-border-color, #e5e7eb);
    border-top-width: var(--ca-space-border-top, 0px);
    border-right-width: var(--ca-space-border-right, 0px);
    border-bottom-width: var(--ca-space-border-bottom, 0px);
    border-left-width: var(--ca-space-border-left, 0px);
    border-radius: var(--ca-space-radius, 0px);
}

.ca-spaces__line-wrap {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    display: flex;
    pointer-events: none;
}

.ca-spaces--line-top .ca-spaces__line-wrap {
    top: 0;
}

.ca-spaces--line-center .ca-spaces__line-wrap {
    top: 50%;
    transform: translateY(-50%);
}

.ca-spaces--line-bottom .ca-spaces__line-wrap {
    bottom: 0;
}

.ca-spaces--line-align-left .ca-spaces__line-wrap {
    justify-content: flex-start;
}

.ca-spaces--line-align-center .ca-spaces__line-wrap {
    justify-content: center;
}

.ca-spaces--line-align-right .ca-spaces__line-wrap {
    justify-content: flex-end;
}

.ca-spaces__line {
    display: block;
    width: var(--ca-space-line-width, 100%);
    max-width: var(--ca-space-line-max, 1240px);
    height: 0;
    border: 0;
    border-top-width: var(--ca-space-line-thickness, 1px);
    border-top-style: var(--ca-space-line-style, solid);
    border-top-color: var(--ca-space-line-color, #e5e7eb);
    box-sizing: border-box;
}

.ca-spaces[style*="--ca-space-line-max:0px"] .ca-spaces__line {
    max-width: none;
}

/* Tablet: 768px–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .ca-spaces {
        min-height: var(--ca-space-h-t, 45px);

        padding-top: var(--ca-space-pt-t, 0px);
        padding-right: var(--ca-space-pr-t, 0px);
        padding-bottom: var(--ca-space-pb-t, 0px);
        padding-left: var(--ca-space-pl-t, 0px);

        margin-top: var(--ca-space-mt-t, 0px);
        margin-right: var(--ca-space-mr-t, 0px);
        margin-bottom: var(--ca-space-mb-t, 0px);
        margin-left: var(--ca-space-ml-t, 0px);
    }

    .ca-spaces--hide-tablet {
        display: none !important;
    }
}

/* Mobile: <= 767px */
@media (max-width: 767px) {
    .ca-spaces {
        min-height: var(--ca-space-h-m, 32px);

        padding-top: var(--ca-space-pt-m, 0px);
        padding-right: var(--ca-space-pr-m, 0px);
        padding-bottom: var(--ca-space-pb-m, 0px);
        padding-left: var(--ca-space-pl-m, 0px);

        margin-top: var(--ca-space-mt-m, 0px);
        margin-right: var(--ca-space-mr-m, 0px);
        margin-bottom: var(--ca-space-mb-m, 0px);
        margin-left: var(--ca-space-ml-m, 0px);
    }

    .ca-spaces--hide-mobile {
        display: none !important;
    }
}

/* Desktop: > 1024px */
@media (min-width: 1025px) {
    .ca-spaces--hide-desktop {
        display: none !important;
    }
}