/* Global */

.wp-block-sowmedia-visual {
    pointer-events: none;
}

.wp-block-sowmedia-visual .visual,
.wp-block-sowmedia-visual svg {
    width: 100%;
    height: 100%;
}

.wp-block-sowmedia-visual .visual-desktop {
    display: none;
    @media screen and (min-width: 781px) {
        display: block;
    }
}

.wp-block-sowmedia-visual .visual-mobile {
    display: block;
    @media screen and (min-width: 781px) {
        display: none;
    }
}

.wp-block-group,
.wp-block-column,
.wp-block-cover__inner-container,
.wp-block-media-text__content {
    & > :first-child.wp-block-sowmedia-visual + * {
        margin-top: 0;
    }
    & > :has(+ :last-child.wp-block-sowmedia-visual) {
        margin-bottom: 0;
    }
}

/* Lines vertical visual */

.wp-block-group > .wp-block-sowmedia-visual:has(.visual--lines-vertical),
.wp-block-cover__inner-container > .wp-block-sowmedia-visual:has(.visual--lines-vertical){
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    display: none;
}

.wp-block-group:has(.visual--lines-vertical) .visual--lines-vertical ,
.wp-block-cover__inner-container:has(.visual--lines-vertical) .visual--lines-vertical {
    transform: scale(2) translateX(25px);
    transform-origin: right;
}

.wp-block-cover__inner-container:has(.visual--lines-vertical) .visual--lines-vertical  {
    --wp--custom--color--visual: var(--wp--preset--color--accent);
    transform: scale(6.5) translateX(30%);
}

@media screen and (min-width: 1100px) {
    .wp-block-group > .wp-block-sowmedia-visual:has(.visual--lines-vertical),
    .wp-block-cover__inner-container > .wp-block-sowmedia-visual:has(.visual--lines-vertical) {
        display: block;
    }
    footer .wp-block-group:has(> .wp-block-sowmedia-visual .visual--lines-vertical) > *:not(.wp-block-sowmedia-visual) {
        padding-right: 200px !important;
    }
}

/* Visuals in group blocks */

.wp-block-group:has(.visual--tr),
.wp-block-group:has(.visual--lines-vertical),
.wp-block-group:has(.visual--lines-horizontal),
.wp-block-group[class*="is-style-section"]:has(.wp-block-sowmedia-visual .visual--route-2) {
    overflow: hidden;
    z-index: 0;
}

.wp-block-group > .wp-block-sowmedia-visual:has(.visual--lines-horizontal) {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    height: auto;
    z-index: -1;
    width: 200%;
    bottom: 20%;
    @media screen and (min-width: 781px) {
        width: 1500px;
    }
    @media screen and (min-width: 1000px) {
        bottom: 10%;
        width: 2000px;
    }
    @media screen and (min-width: 1300px) {
        bottom: 0;
        width: 3000px;
    }
}

/* Visuals in column blocks */

.wp-block-column:has(> .wp-block-sowmedia-visual .visual--tr) {
    position: relative;
    z-index: 0;
}

.wp-block-column > .wp-block-sowmedia-visual:has(.visual--tr) {
    position: absolute;
    top: calc(-1 * var(--wp--custom--spacing--padding--section));
    right: 0;
    width: auto;
    height: calc(100% + 2 * var(--wp--custom--spacing--padding--section));
}

.wp-block-column .wp-block-sowmedia-visual:has(.visual--tr) {
    z-index: -1;
    opacity: .2;
}

.wp-block-column .wp-block-sowmedia-visual .visual--tr {
    transform: scale(1.5);
    @media screen and (min-width: 781px) {
     transform: scale(2) translateX(-115px);
    }
}

/* Visuals in cover blocks */

.wp-block-cover:has(.wp-block-column .visual--route-1) {
    padding-bottom: calc(var(--wp--custom--spacing--padding--section) * 2);
    .wp-block-column {
        position: relative;
    }
    .wp-block-sowmedia-visual {
        position: absolute;
        left: calc(-2 * var(--wp--preset--spacing--80));
        bottom: calc(50% - 460px);
        height: 900px;
        width: 700px;
        @media screen and (max-width: 781px) {
            bottom: -150px;
            left: -250px;
        }
    }
}

/* Visuals in media & text blocks */
.wp-block-media-text:has(.visual--tr) {
    position: relative;
}

.wp-block-media-text__content > .wp-block-sowmedia-visual:has(.visual--tr) {
    position: absolute;
    left: 0;
    bottom: 10%;
    transform: scale(2);
    z-index: -1;
    opacity: .2;
    height: auto;
    width: 100%;
    aspect-ratio: 1;
    @media screen and (min-width: 781px) {
        transform: scale(2.65);
    }
}

.has-media-on-the-right .wp-block-media-text__content > .wp-block-sowmedia-visual:has(.visual--tr) {
    left: auto;
    right: 0;
}

@media screen and (min-width: 768px) {
    .wp-block-media-text__content > .wp-block-sowmedia-visual:has(.visual--tr) {
        height: 100%;
        width: 50%;
        aspect-ratio: inherit;
    }
}

/* Exceptions for visuals used in section styles */

.is-style-section-base,
.is-style-section-primary {
    --wp--custom--color--visual: var(--wp--preset--color--secondary);
}

.is-style-section-secondary {
    --wp--custom--color--visual: var(--wp--preset--color--primary);
    &:has(.visual--lines-vertical) {
        --wp--custom--color--visual: var(--wp--preset--color--accent);
    }
}

.is-style-section-base + *:has(.wp-block-sowmedia-visual [class*="visual--route"]) {
    --wp--custom--color--visual: var(--wp--preset--color--base);
}
.is-style-section-primary + *:has(.wp-block-sowmedia-visual [class*="visual--route"]),
.has-base-to-primary-linear-half-gradient-background + *:has(.wp-block-sowmedia-visual [class*="visual--route"]) {
    --wp--custom--color--visual: var(--wp--preset--color--primary);
}
.is-style-section-primary-alt + *:has(.wp-block-sowmedia-visual [class*="visual--route"]) {
    --wp--custom--color--visual: color-mix(in srgb, var(--wp--preset--color--primary), var(--wp--preset--color--base) 20%);
}
.is-style-section-secondary + *:has(.wp-block-sowmedia-visual [class*="visual--route"]) {
    --wp--custom--color--visual: var(--wp--preset--color--secondary);
}

*:has( + .is-style-section-base) {
    --wp--custom--color--visual-alt: var(--wp--preset--color--base);
}
*:has( + .is-style-section-primary) {
    --wp--custom--color--visual-alt: var(--wp--preset--color--primary);
}
*:has( + .is-style-section-secondary) {
    --wp--custom--color--visual-alt: var(--wp--preset--color--secondary);
}   
*:has( + .is-style-section-contrast) {
    --wp--custom--color--visual-alt: var(--wp--preset--color--contrast);
}
*:has( + .is-style-section-accent) {
    --wp--custom--color--visual-alt: var(--wp--preset--color--accent);
}