/* Choose a Seizure Type - Interstitial Page */
.page-node-36 {
    article {
        display: grid;
        
        @media (min-width: 992px) {
            min-height: 867px;
        }
    }

    .seizure-types {
        padding: 109px 62px 156px 79px;
        grid-column: 1 / -1;
        grid-row: 1;
        opacity: 1;
        z-index: 1;
        position: relative;

        @media (max-width: 767px) {
            padding: 45px 24px 36px;
        }

        h2 {
            margin-bottom: 79px;
            font-size: 20px;
            line-height: 1.5;
            text-align: center;
            font-weight: 400;
            letter-spacing: 0;
            @media (max-width: 767px) {
                font-size: 14px;
                line-height: 1.4;
                margin-bottom: 55px;
            }
        }

        .seizure-types-list {
            display: flex;
            gap: 68px;

            ul {
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                position: relative;
                border-left: 1px dashed var(--navy-40);
                padding-left: 40px;
                height: max-content;

                @media (max-width: 767px) { 
                    padding-left: 27px;
                }
            }

            li {
                position: relative;
                margin-block: 13px;
                &:first-child {
                    margin-top: 0;
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }

            a {
                font-size: 20px;
                line-height: 1.25;
                letter-spacing: -0.03em;
                color: #173A61;
                text-decoration: none;
                font-weight: 500;
                text-transform: uppercase;
                padding-block: 0;
                display: block;
                transition: color 0.3s ease-in-out;

                &:hover {
                    @media (min-width: 768px) { 
                        color: #173A61;
                        font-weight: 600;

                        &:before {
                            content: '';
                            position: absolute;
                            width: 5px;
                            height: 100%;
                            left: -43px;
                            top: 0;
                            z-index: 4;
                            background: var(--gray-20);
                        }
                        &:after {
                            content: '';
                            position: absolute;
                            width: 20px;
                            height: 100%;
                            top: 0;
                            left: 100%;
                            z-index: 4;
                            background: url('/themes/custom/seeaseizure_bootstrap/images/icons/arrow-right-navy.svg') no-repeat center center;
                        }
                    }
                    @media (max-width: 767px) { 
                        color: var(--navy-60);
                    }
                }
            }

            .seizure-types-list--videos {
                position: relative;
                flex: 1 1 100%;
                width: 100%;
                padding-bottom: 55.81%;
                align-self: flex-start;

                @media (max-width: 767px) {
                    display: none;
                }
                
                .default-preview-image {
                    opacity: 1;
                    transition: opacity 0.3s ease-in-out;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: 1;

                    &.hidden {
                        opacity: 0;
                        z-index: 0;
                    }

                    > div {
                        width: 100%;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                
                .vimeo-wrapper,
                .native-video-wrapper {
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: 1;

                    &.active {
                        opacity: 1;
                        z-index: 4;
                    }

                    > div {
                        width: 100%;
                    }

                    iframe,
                    video {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
        [data-fade-in] {
            transition: none;
            animation: none;
            opacity: 1;
        }
    }
}