/* Headline alignment and spacing */
.frame {
    h1, .h1 {
        margin: 3rem 0;
    }
}

.ce-headline-center {
    text-align: center;
}

.ce-headline-right {
    text-align: right;
}

.ce-bodytext {
    a:not(.btn) {
        color: var(--darker-gray);
        text-decoration: underline;
        text-underline-offset: 4px;

        &:hover {
            color: var(--dark-gray);
        }
    }
}


/* Gallery general stylings */
.ce-gallery {
    max-width: 100%;
    width: fit-content;

    .ce-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        & + .ce-row {
            margin-top: 20px;
        }
    }

    figure.image {
        display: table;
        margin: 0;

        figcaption {
            display: table-caption;
            caption-side: bottom;
        }
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

/* Styling for gallery and bodytext (both exists) */
.frame:has(.ce-bodytext) {

    .ce-textpic:not(.ce-intext) {
        display: flex;
        flex-wrap: wrap;
    }

    /* Textbereich */
    .ce-textpic .ce-bodytext {
        flex: 1 1 100%;
    }


    /* Positioning of gallery (enclude ce-nowrap class) */
    &:not(:has(.ce-nowrap)) {
        .ce-left .ce-gallery {
            float: left;
            margin-right: 1.5rem;
            max-width: 50%;
        }

        .ce-right .ce-gallery {
            float: right;
            margin-left: 1.5rem;
            max-width: 50%;
        }

        .ce-center .ce-gallery {
            margin-left: auto;
            margin-right: auto;
            display: block;
            text-align: center;
            float: none;
        }

        .ce-above .ce-gallery {
            order: -1; /* Gallery above the text */
            width: 100%;
            margin-bottom: 1.5rem;
        }

        .ce-below .ce-gallery {
            order: 1;  /* Gallery under the text */
            width: 100%;
            margin-top: 1.5rem;
        }
    }

    /* Positioning of gallery and bodytext when ce-nowrap is setted */
    .ce-nowrap {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .ce-gallery,
        .ce-bodytext {
            flex: 0 1 100%;
            width: 100%;
        }

        .ce-gallery {
            img {
                width: 100%;
            }
        }
    }
}

@media screen and (min-width: 576px) {
    .ce-gallery {
        .ce-row {
            flex-wrap: nowrap;
        }
    }
}

/* Stylings for text in two columns */
@media screen and (min-width: 992px) {
    .ce-bodytext {

        &:has(.two-columns) {
            column-count: 2;
            column-gap: 3rem;

            p:not(:first-of-type) {
                padding-top: 1rem;
            }

            p.two-columns {
                display: contents;
                break-inside: avoid; /* Optional - prevents unsightly paragraph separations */
            }

            *:not(.two-columns) {
                column-span: all;
            }
        }
    }

    .frame:has(.ce-bodytext) {
        .ce-nowrap {
            flex-direction: row;
            gap: 2rem;

            .ce-gallery,
            .ce-bodytext {
                flex: 0 1 50%;
                width: auto;
            }

            &.ce-right {
                .ce-gallery {
                    order: 2;
                }
            }
        }
    }

    .frame:has(.ce-bodytext):not(:has(.ce-gallery)) {
        .ce-nowrap {
            &.ce-left {
                .ce-bodytext {
                    margin-left: auto;
                    padding-left: 1rem;
                }
            }

            &.ce-right {
                .ce-bodytext {
                    padding-right: 1rem;
                }
            }
        }
    }
}

@media screen and (min-width: 1400px) {
    .ce-nowrap {
        gap: 3rem;
    }
}