/* Styles to be injected into the articles */

@scope (.design-block) {
    :scope {
        margin: 1.5em auto;
        padding: 1em 0;
        line-height: 1.4em;
        position: relative;
    }

    h3 {
        font-size: 1.4em;
    }

    ul li {
        margin-bottom: .5em
    }

    &.text-highlight {
        text-align: center;
        padding: 1em;
        font-size: 1.2em;
        font-weight: 300;
        line-height: 1.6em;
        max-width: 60% !important;
    }

    @media (max-width: 990px) {
        &.text-highlight {
            max-width: 80% !important;
        }
    }

    &.area-highlight {
        text-align: left;
        max-width: 60% !important;
    }

        &.area-highlight p {
            margin-top: 0;
        }

    @media (max-width: 990px) {
        &.area-highlight {
            max-width: 80% !important;
        }
    }

    &.text-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

        &.text-flex h3 {
            text-align: center;
            width: 100% !important;
            text-transform: capitalize;
        }

        &.text-flex p {
            width: 48% !important;
        }

    @media (max-width: 768px) {
        &.text-flex p {
            width: 80% !important;
            margin-left: 10%;
        }
    }

    &.image-flex-highlight {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

        &.image-flex-highlight > * {
            width: 49% !important;
        }

        &.image-flex-highlight h3 {
            text-transform: capitalize;
        }

        &.image-flex-highlight img, &.image-flex-highlight .fr-img-caption {
            max-height: 100%;
        }

    @media (max-width: 990px) {
        &.image-flex-highlight {
            flex-wrap: wrap;
        }

            &.image-flex-highlight > * {
                width: 100% !important;
            }
    }

    &.icon-text-flex {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
    }

        &.icon-text-flex > * {
            width: 48% !important;
        }

        &.icon-text-flex h3 {
            margin: 1em auto 0;
        }


    &.image-behind-text-block {
        overflow: hidden;
    }

        &.image-behind-text-block .text-block {
            position: relative;
            padding: 1.25em;
            background: white;
            box-shadow: -2px 2px 5px rgba(0,0,0,.2);
            width: 40% !important;
            margin-left: 10%;
            z-index: 2;
            text-align: center;
        }

            &.image-behind-text-block .text-block h3 {
                margin-top: 0;
            }

        &.image-behind-text-block img, &.image-behind-text-block .fr-img-caption {
            position: absolute !important;
            top: 0;
            left: 40%;
            height: 100%;
            z-index: 1;
        }

        &.image-behind-text-block.image-left .text-block {
            margin-left: 37%;
        }

        &.image-behind-text-block.image-left img, &.image-behind-text-block.image-left .fr-img-caption {
            right: 49%;
            left: auto;
        }

        &.image-behind-text-block .fr-img-caption img {
            position: relative !important;
            left: auto;
            right: auto;
        }

    @media (max-width: 990px) {

        &.image-behind-text-block .text-block {
            width: 70% !important;
            margin-right: 5%;
        }

        &.image-behind-text-block img, &.image-behind-text-block .fr-img-caption {
            position: relative !important;
            margin: -10% auto auto 20%;
            width: 80% !important;
            left: auto;
        }

        &.image-behind-text-block.image-left .text-block {
            width: 70% !important;
            margin-right: 0;
            margin-left: 22%;
        }

        &.image-behind-text-block.image-left img, &.image-behind-text-block.image-left .fr-img-caption {
            position: relative !important;
            width: 80% !important;
            right: auto;
            margin: -10% 20% auto auto;
        }
    }

    &.image-featured-title {
        width: 40% !important;
        text-align: center;
    }

    @media (max-width: 990px) {
        &.image-featured-title {
            width: 65% !important;
        }
    }

    &.image-featured-title h3 {
        text-transform: capitalize;
    }

    &.image-featured-title img, &.image-featured-title .fr-img-caption {
        border-radius: 10px;
        max-width: 100% !important;
    }

    &.two-panels {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        box-shadow: -2px 2px 5px rgba(0,0,0,.2);
        border: 1px solid rgba(0,0,0,.2);
        padding: 0;
    }

        &.two-panels .text-panel {
            width: 50% !important;
            padding: 0 5%;
            text-align: center;
        }

            &.two-panels .text-panel p {
                font-weight: 300;
                line-height: 1.6em;
            }

            &.two-panels .text-panel button {
                margin-bottom: 1em;
            }

        &.two-panels .image-panel {
            width: 50% !important;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            &.two-panels .image-panel img, &.two-panels .image-panel .fr-img-caption {
                width: 100% !important;
                height: auto;
            }

    @media (max-device-width: 768px) {
        &.two-panels {
            flex-direction: column;
            gap: 10px;
        }

            &.two-panels .image-panel {
                width: 100% !important;
                order: 1;
            }


            &.two-panels .text-panel {
                width: 100% !important;
                order: 2;
            }

                &.two-panels .text-panel p {
                    width: 70% !important;
                    margin: 0 auto 1em;
                }
    }


    &.collage-panels {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        &.collage-panels .text-panel {
            width: 40% !important;
            padding: 0 5%;
            text-align: center;
        }

        &.collage-panels .image-panel {
            width: 50% !important;
            display: grid;
            grid-template-columns: 1fr 3fr 3fr 1fr;
            grid-template-rows: 1fr 2fr 2fr 1fr;
            gap: 10px;
            overflow: hidden;
        }

            &.collage-panels .image-panel img {
                max-width: 100% !important;
            }

                &.collage-panels .image-panel img.collage-main {
                    grid-column-start: 2;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
                    height: calc(200% + 10px);
                }

                &.collage-panels .image-panel img.collage-second {
                    grid-column-start: 3;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 2;
                    height: 100%;
                }

                &.collage-panels .image-panel img.collage-third {
                    grid-column-start: 3;
                    grid-column-end: 3;
                    grid-row-start: 3;
                    grid-row-end: 3;
                    height: 100%;
                }

    @media (max-width: 990px) {
        &.collage-panels {
            flex-wrap: wrap;
        }

            &.collage-panels .image-panel {
                width: 100% !important;
                grid-template-columns: 1fr 5fr 5fr 1fr;
                grid-template-rows: 1fr 4fr 4fr 1fr;
            }

            &.collage-panels .text-panel {
                width: 60% !important;
            }
    }

    &.flex-three {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

        &.flex-three img, &.flex-three .fr-img-caption {
            width: 24% !important;
        }

        &.flex-three div {
            width: 49% !important;
        }

    @media (max-width: 990px) {
        &.flex-three {
            flex-wrap: wrap;
        }

            &.flex-three img, &.flex-three .fr-img-caption {
                width: 48% !important;
            }

            &.flex-three div {
                width: 100% !important;
                margin-top: 1.5em;
            }
    }

    &.dual-image-feature {
        text-align: center;
    }

        &.dual-image-feature h3 {
            font-size: 1.6em;
            margin-bottom: .5em;
        }

        &.dual-image-feature h4 {
            font-size: 1.15em;
            margin: 0;
        }

        &.dual-image-feature .feature-flex {
            display: grid;
            margin-top: 2em;
            grid-auto-rows: 1fr;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }

            &.dual-image-feature .feature-flex div {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                width: auto;
                height: 100%;
                align-self: stretch;
                margin: 0 .5em;
            }

            &.dual-image-feature .feature-flex img, &.dual-image-feature .feature-flex .fr-img-caption {
                border-radius: 20px;
                max-width: 100% !important;
                height: auto;
            }

            &.dual-image-feature .feature-flex p {
                font-size: 1.2em;
                font-weight: 300;
                line-height: 1.4em;
            }

    &.editorial-layout {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        &.editorial-layout > img, &.editorial-layout .fr-img-caption {
            width: 48% !important;
            height: auto;
        }

        &.editorial-layout h3 {
            font-size: 1.6em;
            margin-bottom: 0;
        }

        &.editorial-layout .editorial-text {
            width: 48% !important;
        }

            &.editorial-layout .editorial-text p {
                font-size: 1.2em;
                font-weight: 300;
                line-height: 1.6em;
            }

        &.editorial-layout .editorial-flex {
            display: flex;
            justify-content: space-between;
            margin-top: 2em;
        }

            &.editorial-layout .editorial-flex div {
                width: 48% !important;
            }

                &.editorial-layout .editorial-flex div h4, &.editorial-layout .editorial-flex div p {
                    margin: 0;
                }

    @media (max-width: 990px) {
        &.editorial-layout {
            flex-wrap: wrap;
        }

            &.editorial-layout > img, &.editorial-layout .editorial-text, &.editorial-layout .fr-img-caption {
                width: 100% !important;
            }
    }

    @media (max-width: 768px) {
        &.editorial-layout .editorial-flex {
            flex-wrap: wrap;
        }

            &.editorial-layout .editorial-flex div {
                width: 100% !important;
                margin-bottom: 1em;
            }
    }



    &.list-with-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        padding: 0;
        margin-left: 17px;
    }

    @media (max-width: 990px) {
        &.list-with-columns {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .btn {
        border-radius: 24px;
        border-width: 1px !important;
        color: #3200BE;
        font-size: 18px;
        padding: 8px 20px;
    }

    .btn-secondary {
        border-color: #F5D2FA;
        background-color: #F5D2FA;
        height: 44px;
    }

        .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
            background: transparent;
            border-color: #FF96FF;
            cursor: pointer;
        }
}

/* Replicate with froala attribute because sometimes class names get skipped */
@scope ([fr-original-class~="design-block"]) {
    :scope {
        margin: 1.5em auto;
        padding: 1em 0;
        line-height: 1.4em;
        position: relative;
    }

    h3 {
        font-size: 1.4em;
    }

    ul li {
        margin-bottom: .5em
    }

    &[fr-original-class~="text-highlight"] {
        text-align: center;
        padding: 1em;
        font-size: 1.2em;
        font-weight: 300;
        line-height: 1.6em;
        max-width: 60% !important;
    }

    @media (max-width: 990px) {
        &[fr-original-class~="text-highlight"] {
            max-width: 80% !important;
        }
    }

    &[fr-original-class~="area-highlight"] {
        text-align: left;
        max-width: 60% !important;
    }

        &[fr-original-class~="area-highlight"] p {
            margin-top: 0;
        }

    @media (max-width: 990px) {
        &[fr-original-class~="area-highlight"] {
            max-width: 80% !important;
        }
    }

    &[fr-original-class~="text-flex"] {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

        &[fr-original-class~="text-flex"] h3 {
            text-align: center;
            width: 100% !important;
            text-transform: capitalize;
        }

        &[fr-original-class~="text-flex"] p {
            width: 48% !important;
        }

    @media (max-width: 768px) {
        &[fr-original-class~="text-flex"] p {
            width: 80% !important;
            margin-left: 10%;
        }
    }

    &[fr-original-class~="image-flex-highlight"] {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

        &[fr-original-class~="image-flex-highlight"] > * {
            width: 49% !important;
        }

        &[fr-original-class~="image-flex-highlight"] h3 {
            text-transform: capitalize;
        }

        &[fr-original-class~="image-flex-highlight"] img, &[fr-original-class~="image-flex-highlight"] .fr-image-caption {
            max-height: 100%;
        }

    @media (max-width: 990px) {
        &[fr-original-class~="image-flex-highlight"] {
            flex-wrap: wrap;
        }

            &[fr-original-class~="image-flex-highlight"] > * {
                width: 100% !important;
            }
    }

    &[fr-original-class~="icon-text-flex"] {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
    }

        &[fr-original-class~="icon-text-flex"] > * {
            width: 48% !important;
        }

        &[fr-original-class~="icon-text-flex"] h3 {
            margin: 1em auto 0;
        }


    &[fr-original-class~="image-behind-text-block"] {
        overflow: hidden;
    }

        &[fr-original-class~="image-behind-text-block"] [fr-original-class~="text-block"] {
            position: relative;
            padding: 1.25em;
            background: white;
            box-shadow: -2px 2px 5px rgba(0,0,0,.2);
            width: 40% !important;
            margin-left: 10%;
            z-index: 2;
            text-align: center;
        }

            &[fr-original-class~="image-behind-text-block"] [fr-original-class~="text-block"] h3 {
                margin-top: 0;
            }

        &[fr-original-class~="image-behind-text-block"] img, &[fr-original-class~="image-behind-text-block"] .fr-image-caption {
            position: absolute !important;
            top: 0;
            left: 40%;
            height: 100%;
            z-index: 1;
        }

        &[fr-original-class~="image-behind-text-block"] [fr-original-class~="image-left"] [fr-original-class~="text-block"] {
            margin-left: 37%;
        }

        &[fr-original-class~="image-behind-text-block"] [fr-original-class~="image-left"] img, &[fr-original-class~="image-behind-text-block"] [fr-original-class~="image-left"] .fr-image-caption {
            right: 49%;
            left: auto;
        }

        &[fr-original-class~="image-behind-text-block"] .fr-image-caption img {
            position: relative !important;
            left: auto;
            right: auto;
        }

    @media (max-width: 990px) {

        &[fr-original-class~="image-behind-text-block"] [fr-original-class~="text-block"] {
            width: 70% !important;
            margin-right: 5%;
        }

        &[fr-original-class~="image-behind-text-block"] img, &[fr-original-class~="image-behind-text-block"] .fr-image-caption {
            position: relative !important;
            margin: -10% auto auto 20%;
            width: 80% !important;
            left: auto;
        }

        &[fr-original-class~="image-behind-text-block"] [fr-original-class~="image-left"] [fr-original-class~="text-block"] {
            width: 70% !important;
            margin-right: 0;
            margin-left: 22%;
        }

        &[fr-original-class~="image-behind-text-block"] [fr-original-class~="image-left"] img, &[fr-original-class~="image-behind-text-block"] [fr-original-class~="image-left"] .fr-image-caption {
            position: relative !important;
            width: 80% !important;
            right: auto;
            margin: -10% 20% auto auto;
        }
    }

    &[fr-original-class~="image-featured-title"] {
        width: 40% !important;
        text-align: center;
    }

    @media (max-width: 990px) {
        &[fr-original-class~="image-featured-title"] {
            width: 65% !important;
        }
    }

    &[fr-original-class~="image-featured-title"] h3 {
        text-transform: capitalize;
    }

    &[fr-original-class~="image-featured-title"] img, &[fr-original-class~="image-featured-title"] .fr-image-caption {
        border-radius: 10px;
        max-width: 100% !important;
    }

    &[fr-original-class~="two-panels"] {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        box-shadow: -2px 2px 5px rgba(0,0,0,.2);
        border: 1px solid rgba(0,0,0,.2);
        padding: 0;
    }

        &[fr-original-class~="two-panels"] [fr-original-class~="text-panel"] {
            width: 50% !important;
            padding: 0 5%;
            text-align: center;
        }

            &[fr-original-class~="two-panels"] [fr-original-class~="text-panel"] p {
                font-weight: 300;
                line-height: 1.6em;
            }

            &[fr-original-class~="two-panels"] [fr-original-class~="text-panel"] button {
                margin-bottom: 1em;
            }

        &[fr-original-class~="two-panels"] [fr-original-class~="image-panel"] {
            width: 50% !important;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            &[fr-original-class~="two-panels"] [fr-original-class~="image-panel"] img, &[fr-original-class~="two-panels"] [fr-original-class~="image-panel"] .fr-image-caption {
                width: 100% !important;
                height: auto;
            }

    @media (max-device-width: 768px) {
        &[fr-original-class~="two-panels"] {
            flex-direction: column;
            gap: 10px;
        }

            &[fr-original-class~="two-panels"] [fr-original-class~="image-panel"] {
                width: 100% !important;
                order: 1;
            }


            &[fr-original-class~="two-panels"] [fr-original-class~="text-panel"] {
                width: 100% !important;
                order: 2;
            }

                &[fr-original-class~="two-panels"] [fr-original-class~="text-panel"] p {
                    width: 70% !important;
                    margin: 0 auto 1em;
                }
    }


    &[fr-original-class~="collage-panels"] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        &[fr-original-class~="collage-panels"] [fr-original-class~="text-panel"] {
            width: 40% !important;
            padding: 0 5%;
            text-align: center;
        }

        &[fr-original-class~="collage-panels"] [fr-original-class~="image-panel"] {
            width: 50% !important;
            display: grid;
            grid-template-columns: 1fr 3fr 3fr 1fr;
            grid-template-rows: 1fr 2fr 2fr 1fr;
            gap: 10px;
            overflow: hidden;
        }

            &[fr-original-class~="collage-panels"] [fr-original-class~="image-panel"] img {
                max-width: 100% !important;
            }

                &[fr-original-class~="collage-panels"] [fr-original-class~="image-panel"] img[fr-original-class~="collage-main"] {
                    grid-column-start: 2;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
                    height: calc(200% + 10px);
                }

                &[fr-original-class~="collage-panels"] [fr-original-class~="image-panel"] img[fr-original-class~="collage-second"] {
                    grid-column-start: 3;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 2;
                    height: 100%;
                }

                &[fr-original-class~="collage-panels"] [fr-original-class~="image-panel"] img[fr-original-class~="collage-third"] {
                    grid-column-start: 3;
                    grid-column-end: 3;
                    grid-row-start: 3;
                    grid-row-end: 3;
                    height: 100%;
                }

    @media (max-width: 990px) {
        &[fr-original-class~="collage-panels"] {
            flex-wrap: wrap;
        }

            &[fr-original-class~="collage-panels"] [fr-original-class~="image-panel"] {
                width: 100% !important;
                grid-template-columns: 1fr 5fr 5fr 1fr;
                grid-template-rows: 1fr 4fr 4fr 1fr;
            }

            &[fr-original-class~="collage-panels"] [fr-original-class~="text-panel"] {
                width: 60% !important;
            }
    }

    &[fr-original-class~="flex-three"] {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

        &[fr-original-class~="flex-three"] img, &[fr-original-class~="flex-three"] .fr-image-caption {
            width: 24% !important;
        }

        &[fr-original-class~="flex-three"] div {
            width: 49% !important;
        }

    @media (max-width: 990px) {
        &[fr-original-class~="flex-three"] {
            flex-wrap: wrap;
        }

            &[fr-original-class~="flex-three"] img, &[fr-original-class~="flex-three"] .fr-image-caption {
                width: 48% !important;
            }

            &[fr-original-class~="flex-three"] div {
                width: 100% !important;
                margin-top: 1.5em;
            }
    }

    &[fr-original-class~="dual-image-feature"] {
        text-align: center;
    }

        &[fr-original-class~="dual-image-feature"] h3 {
            font-size: 1.6em;
            margin-bottom: .5em;
        }

        &[fr-original-class~="dual-image-feature"] h4 {
            font-size: 1.15em;
            margin: 0;
        }

        &[fr-original-class~="dual-image-feature"] [fr-original-class~="feature-flex"] {
            display: grid;
            margin-top: 2em;
            grid-auto-rows: 1fr;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }

            &[fr-original-class~="dual-image-feature"] [fr-original-class~="feature-flex"] div {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                width: auto;
                height: 100%;
                align-self: stretch;
                margin: 0 .5em;
            }

            &[fr-original-class~="dual-image-feature"] [fr-original-class~="feature-flex"] img, &[fr-original-class~="dual-image-feature"] [fr-original-class~="feature-flex"] .fr-image-caption {
                border-radius: 20px;
                max-width: 100% !important;
                height: auto;
            }

            &[fr-original-class~="dual-image-feature"] [fr-original-class~="feature-flex"] p {
                font-size: 1.2em;
                font-weight: 300;
                line-height: 1.4em;
            }


    &[fr-original-class~="editorial-layout"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        &[fr-original-class~="editorial-layout"] > img, &[fr-original-class~="editorial-layout"] .fr-image-caption {
            width: 48% !important;
            height: auto;
        }

        &[fr-original-class~="editorial-layout"] h3 {
            font-size: 1.6em;
            margin-bottom: 0;
        }

        &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-text"] {
            width: 48% !important;
        }

            &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-text"] p {
                font-size: 1.2em;
                font-weight: 300;
                line-height: 1.6em;
            }

        &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-flex"] {
            display: flex;
            justify-content: space-between;
            margin-top: 2em;
        }

            &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-flex"] div {
                width: 48% !important;
            }

                &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-flex"] div h4, &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-flex"] div p {
                    margin: 0;
                }

    @media (max-width: 990px) {
        &[fr-original-class~="editorial-layout"] {
            flex-wrap: wrap;
        }

            &[fr-original-class~="editorial-layout"] > img, &[fr-original-class~="editorial-layout"] .editorial-text, &[fr-original-class~="editorial-layout"] .fr-image-caption {
                width: 100% !important;
            }
    }

    @media (max-width: 768px) {
        &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-flex"] {
            flex-wrap: wrap;
        }

            &[fr-original-class~="editorial-layout"] [fr-original-class~="editorial-flex"] div {
                width: 100% !important;
                margin-bottom: 1em;
            }
    }



    &[fr-original-class~="list-with-columns"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        padding: 0;
        margin-left: 17px;
    }

    @media (max-width: 990px) {
        &[fr-original-class~="list-with-columns"] {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}