/*
    Table of Contents
    1-. Hero Banner
    2-. Workshops
    3-. Services
*/

/* === 1-. Hero Banner === */

.wp-block-columns.section-hero-banner > .wp-block-group {
    z-index: 2;
}

.wp-block-columns.section-hero-banner {
    position: relative;
}

@media screen and (min-width: 783px) {
    .wp-block-columns.section-hero-banner::before {
        background-image: url(/wp-content/themes/flytronics/assets/images/hero-corner.webp);
        background-position: top right;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 50vw;
        z-index: -1;
    }
}

/* === 2-. Workshops === */

.wp-block-columns.section-workshops > .wp-block-group {
    z-index: 2;
}

.wp-block-columns.section-workshops {
    position: relative;
}

.wp-block-columns.section-workshops > .wp-block-column {
    position: relative;
    z-index: 2;
}

.wp-block-columns.section-workshops::before {
    background-image: url(/wp-content/themes/flytronics/assets/images/workshop-bottom.webp);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

@media only screen and (min-width: 782px) {
    .wp-block-columns.section-workshops::after {
        background-image: url(/wp-content/themes/flytronics/assets/images/workshop-top.webp);
        background-position: top right;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 50%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .wp-block-columns.section-workshops::before {
        background-size: contain;
    }
}

/* === 3-. Services === */

.wp-block-columns.section-services {
    position: relative;
}

.wp-block-columns.section-services > .wp-block-column {
    z-index: 2;
}

.wp-block-columns.section-services::before {
    background-color: var(--wp--preset--color--accent-2);
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    bottom: 0;
    content: "";
    display: block;
    height: 50%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    z-index: 1;
}

@media only screen and (min-width: 782px) {
    .wp-block-columns.section-services::before {
        border-bottom-right-radius: 100%;
        border-top-left-radius: 0;
        border-top-right-radius: 100%;
        height: 100%;
        width: 50vw;
    }
}

@media only screen and (max-width: 782px) {
    :where(.ghost) {
        min-height: 70vh;
        width: 100%;
    }
}