@import "../styles";

.m-welcome.c-modal.--cover {
    background: var(--modalBackgroundColor);

    .--modal-container {
        padding: 50px 0;
    }

    .wrapper {
        overflow-y: scroll;
        max-height: 100%;
        width: 100%;
        @apply flex items-start justify-center;
    }
    .--modal-content {
        padding: 0;
        max-height: none;

        @apply mt-20 mb-40;
        @apply py-40 px-48 bg-backgroundColorA;
        @apply shadow-lgZ1 rounded-16;
        @apply flex items-stretch;
        width: 100%;
        /* Developer: max-width: 1180px; */
        /* Start: max-width: 590px; */
        /* Beginners */
        max-width: 1100px;

        .view-changer-btn {
            @apply cursor-pointer text-18 font-semibold rounded-8 border-1 border-borderColor1 px-12 py-8 h-[56px] pointer-events-auto;
        }
    }

    .lhs {
        @apply flex-grow;

        header {
            @apply mb-16 flex flex-col;

            h1 {
                @apply text-32 font-bold text-textColor1;
                line-height: 1.25;

                @apply md:text-34 lg:text-[36px];
                @apply mb-12;
            }
            p {
                @apply text-18 leading-huge;

                strong {
                    @apply font-medium;
                }
            }
        }
        h2 {
            @apply text-h3 mb-6;
        }
        p {
            @apply text-16 leading-huge;
        }
        .improvements {
            @apply mt-24 mb-32;

            .improvement {
                @apply flex items-start;

                + .improvement {
                    @apply mt-24;
                }
                .c-icon {
                    height: 64px;
                    width: 64px;
                    @apply flex-shrink-0 mr-24;
                }
                h3 {
                    @apply text-h5 mb-4;
                }
                p {
                    @apply text-textColor3;
                }
            }
        }
    }

    .rhs {
        @apply flex-shrink-0 ml-48;
        width: 460px;

        .video {
            @apply mb-40;
            @apply relative rounded-8 overflow-hidden;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;

            iframe,
            object,
            embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        .thank-you {
            @apply bg-backgroundColorD;
            @apply rounded-8 py-24 px-32;

            h3 {
                @apply text-h4 mb-8;
            }
            p {
                @apply text-16 leading-paragraph;
            }
        }
    }
    .bubbles {
        @apply mb-20;
        @apply flex flex-row items-center justify-center gap-6 flex-wrap;
        .bubble {
            @apply text-14 font-medium;
            @apply border-1;
            border-color: rgba(96, 79, 205, 0.8);
            box-shadow: 0 0 10px rgba(96, 79, 205, 0.2);
            @apply bg-white text-purple py-6 px-12 rounded-[12px];
            @apply flex flex-row items-center gap-6;

            img {
                @apply w-[16px] h-[16px] inline;
            }

            strong {
                @apply font-semibold;
            }
        }
    }
    .quote {
        @apply bg-white relative pb-32 mb-40;
        break-inside: avoid;
        display: inline-block;
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
        @apply rounded-[12px] px-16 py-12;

        .words {
            @apply text-18 leading-140 font-normal;
            @apply mb-16;
            @apply flex flex-row gap-12;
            p {
                @apply inline;
                strong {
                    @apply font-semibold;
                }
            }
            .mark {
                height: 12px;
                width: 16px;
                @apply grayscale opacity-[0.7];
            }
            .left-mark {
                @apply self-start;
                @apply mt-8;
            }
            .right-mark {
                transform: scaleX(-1);
                @apply inline ml-6;
            }
        }
        .stars {
            @apply h-[21px] w-[110px] mb-8;
            background-image: url("bootcamp/stars.svg");
            @apply bg-center bg-no-repeat;
            background-size: 100px;
            @apply ml-auto;

            @apply bg-white rounded-[20px] left-[16px];
        }
        .person {
            @apply flex flex-col;
            @apply absolute;
            @apply bg-white rounded-[20px] px-20 py-12 right-[16px];
            filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));

            img {
                @apply w-[40px] h-[40px] rounded-circle;
            }
            .text {
                @apply flex flex-col items-end;
            }
            .name {
                @apply md:text-[16px] text-16 leading-[100%] font-semibold mb-4;
            }
            .description {
                @apply md:text-[16px] text-14 leading-[100%] font-normal;
            }
        }
    }
}
