@layer theme {
    .cases-expanded {
        position: relative;
        .button.close {
            position: absolute;
            right: var(--padding);
            top: var(--padding);
            z-index: 9;
            @media (max-width: 56em) {
                right: calc(var(--padding) / 2);
                top: calc(var(--padding) / 2);
            }
            @media (--max-fablet) {
                right: calc(var(--padding) / 2);
                top: calc(var(--padding) / 2);
            }
        }
    }

    .cases-block {
        grid-column: span 12;
        width: 100%;
        position: relative;
        overflow: hidden;
        .container {
            padding: 0;
            border-radius: 0;
            background-color: transparent;
        }

        .cases-header {
            .inner {
                grid-column: 3 / span 8;
                align-items: center;
                text-align: center;
                .content {
                    font-size: var(--s-fontsize);
                    line-height: var(--s-lineheight);
                    @media (min-width: 56em) {
                        margin-top: calc(var(--padding) * 2);
                    }
                    @media (--min-fablet) {
                        margin-top: calc(var(--padding) * 2);
                    }
                }
                @media (max-width: 56em) {
                    grid-column: span 12;
                }
                @media (--max-fablet) {
                    grid-column: span 12;
                }
            }
        }
        
        .description, .explanation {
            margin-top: calc(var(--section) / 2);
            @media (max-width: 56em) {
                margin-top: var(--padding);
            }
            @media (--max-fablet) {
                margin-top: var(--padding);
            }
        }

        /* Screen 1: Intro + options */
        .description {
            .case-intro {
                .label {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    font-weight: 600;
                    font-size: var(--m-fontsize);

                    &::before {
                        content: "";
                        display: inline-block;
                        width: 0.625rem;
                        height: 0.625rem;
                        border-radius: 50%;
                        background-color: var(--color-primary, currentColor);
                    }
                }

                .title {
                    margin-top: 0.5rem;
                }

                .intro {
                    margin-top: 0.5rem;
                    color: var(--color-text-muted, inherit);
                }
            }


            .inner {
                align-items: flex-start;
                &.contentRight {
                    @media (min-width: 56em) {
                        grid-column: 8 / span 4;
                        margin-left: var(--gutter);
                    }
                    @media (--min-fablet) {
                        grid-column: 8 / span 4;
                        margin-left: var(--gutter);
                    }
                    .options {
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--padding) / 2);
                        .button {        
                            border: 2px solid var(--color-light);
                            &.selected {
                                border-color: var(--color-dark);
                                background-color: var(--color-dark);
                                color: var(--color-light);
                            }
                            &:hover {
                                @media (hover: hover) {
                                    border-color: var(--color-dark);
                                }
                            }
                        }
                    }
                    .options,
                    .buttons {
                        width: 100%;
                        .button {
                            width: 100%;
                            padding: var(--button-padding);
                            font-size: var(--xs-fontsize);
                            line-height: var(--xs-lineheight);
                        }
                    }
                }
                &.contentLeft {
                    @media (min-width: 56em) {
                        grid-column: span 7;
                    }
                    @media (--min-fablet) {
                        grid-column: span 7;
                    }
                    height: -webkit-fill-available;
                    height: -moz-available;
                    height: stretch;
                }
                &.contentLeft, &.contentRight {
                    .title {
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                        font-weight: 400;
                    }
                }
            }

        }

        /* Screen 2: Expert thought */
        .explanation {
            display: flex;
            flex-direction: column;
            gap: calc(var(--padding) * 1.5);

            .block {
                background-color: var(--color3);
                padding: calc(var(--padding) * 2);
                display: flex;
                gap: calc(var(--padding) * 2);
                align-items: center;
                border-radius: var(--large-border-radius);

                @media (min-width: 56em) {
                    flex-direction: row;
                    .media {
                        width: 325px;
                        height: 325px;
                        min-width: 325px;
                        min-height: 325px;
                    }
                }

                @media (--min-fablet) {
                    flex-direction: row;
                    .media {
                        width: 325px;
                        height: 325px;
                        min-width: 325px;
                        min-height: 325px;
                    }
                }
                .inner {
                    padding: 0;
                    .title, .content {
                        color: var(--color-light);
                    }
                    .title {
                        font-size: var(--xs-fontsize);
                        font-weight: 600;
                    }
                    .content {
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                        flex-grow: unset;
                    }
                }

                @media (max-width: 56em) {
                    border-radius: var(--border-radius);
                    padding: var(--padding) calc(var(--padding) / 2);
                    gap: var(--gutter);
                    flex-direction: column;
                    .inner {
                        width: 100%;
                        text-align: center;
                        .content {
                            font-size: var(--s-fontsize);
                        }
                    }
                }

                @media (--max-fablet) {
                    border-radius: var(--border-radius);
                    padding: var(--padding) calc(var(--padding) / 2);
                    gap: var(--gutter);
                    flex-direction: column;
                    .inner {
                        width: 100%;
                        text-align: center;
                        .content {
                            font-size: var(--s-fontsize);
                        }
                    }
                }
            }
        }

        /* Screen 3: Thank you */
        .endscreen {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: var(--gutter);
            margin: 0 auto;
            @media (min-width: 56em) {
                width: calc(100% / 12 * 8);
                padding: calc(var(--padding) * 2) 0;
                gap: calc(var(--padding) * 1.5);
            }
            @media (--min-fablet) {
                width: calc(100% / 12 * 8);
                padding: calc(var(--padding) * 2) 0;
                gap: calc(var(--padding) * 1.5);
            }

            .buttons {
                display: flex;
                gap: var(--gutter);
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    }

    /* Leaving screen: slides out to the left */
    .cases-screen.is-leaving {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        pointer-events: none;
        animation: screenSlideOut 1s ease-in-out both;
    }

    /* Entering screen: slides in from the right, only during a transition */
    .cases-block.is-transitioning .cases-screen:not(.is-leaving) {
        animation: screenSlideIn 1s ease-in-out both;
    }

    @keyframes screenSlideIn {
        from { transform: translateX(100%); opacity: 0; }
        to   { transform: translateX(0);    opacity: 1; }
    }

    @keyframes screenSlideOut {
        from { transform: translateX(0);     opacity: 1; }
        to   { transform: translateX(-100%); opacity: 0; }
    }
}