@use '../variables/mixins' as *;

.featured {
    .featured-primary-wrapper {
        @include box-shadow(0px 4px 27px 0px #00000021);
        @include border-radius(25px);
        border: 1px solid var(--bs-black);
        background: var(--color-bg-secondary);

        .featured-secondary-wrapper {
            @include box-shadow(0px 4px 13px 0px #00000040);
            @include border-radius(25px);
            margin-bottom: -60px;
            margin-top: 30px !important;
        }

        h2 {
            padding-bottom: 15px;
        }
    }

    .featured-full-description {
        @media (min-width: 1400px) {
            max-width: 1060px !important;
        }

        @include media-breakpoint-down(lg) {
            max-width: 600px;
        }

        .media--type-image {
            @include media-breakpoint-down(md) {
                text-align: center;
            }
        }
    }

    video {
        width: 100%;
        max-width: 100%;

        @include media-breakpoint-down(md) {
            height: auto;
        }
    }

    .two-equal-width-cards,
    .paragraph-1-4-image-3-4-text {
        padding: 0 !important;
    }    
}

.featured-secondary-wrapper {
    #mc_embed_signup {

        &,
        * {
            font-family: var(--ff-lato);
        }

        &,
        h2,
        h2+p {
            width: 100%;
        }

        h2 {
            --color-black: var(--color-indigo);
        }

        #mc_embed_signup_scroll {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .mc-field-group {
                padding-bottom: 15px;

                @include media-breakpoint-up(md) {
                    width: 49%;
                }

                label {
                    font-size: var(--fs-lg);

                    @include media-breakpoint-down(sm) {
                        font-size: var(--fs-sm);
                    }
                }

                input,
                textarea {
                    --bs-border-color: #8d9199;
                    @include border-radius(3px);
                    @include box-shadow(0 0 3px #8a8e97);
                }
            }
        }

        .button {
            @include button-red;
            height: auto;
            padding: 10px 25px !important;
        }
    }

    form {
        margin: 20px 0 !important;
        padding: 15px 0 !important;
    }
}

// home page featured block
#paragraph-28 {
    .featured-secondary-wrapper {
        padding: 20px !important;

        .col-12 {
            padding: 0 !important;

            .column-image {

                @media screen and (min-width:576px) {
                    width: 33.666667%;
                }

                img {
                    max-width: 156px !important;
                }
            }

            .column-text {
                @include media-breakpoint-up(lg) {
                    max-width: 48% !important;
                }
            }
        }
    }
}

// your-art-career-reflection page featured block
#paragraph-181 {
    .featured-secondary-wrapper {
        .col-12 {
            .column-image {
                @media screen and (min-width:576px) {
                    width: 33.666667%;
                }
                img {
                    max-width: 200px !important;
                }
            }
            .column-text {
                @include media-breakpoint-up(lg) {
                    width: 66% !important;
                }
            }
        }
    }
}