/* Index page styles */

body {
    margin: 0;
    display: grid;
    grid-template-areas: 
    "header"
    "main"
    "footer";
}

header {
    grid-area: header;
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0rem 6rem;
    display: flex;
    background-color: #FFF;
    border-bottom: 1px solid #cccccc;
    z-index: 10;
    height: 3rem;

    div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;

        #interpares-logotype {
            font-family: 'Times', sans-serif;
            font-weight: 400;
            font-size: 1.125rem;
            color: #111;
            /* padding: 1.75rem 0; */
        }
    }
}

main {
    grid-area: main;
    background-color: #FFF;

    section {
        padding: 4rem 6rem;
    }
    
    #title-section {
        height: 60vh;
        /* background-attachment: fixed; */
        background-position: center center;
        background-size: cover;
        /* background-image: url('/static/assets/images/pawel-czerwinski-aMPfitH2tT0-unsplash.jpg'); */
        background-image: linear-gradient(to right, white 10%, transparent), url('/assets/pawel-czerwinski-aMPfitH2tT0-unsplash.jpg');
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
    
        #headline {

            display: flex;
            flex-direction: column;
            gap: 1rem;

            #title {
                font-family: 'Times';
                font-size: 3rem;
                font-weight: 300;
                letter-spacing: -0.022em;
                margin: 0;
            }

            .page-subheading {
                margin: 0;
            }

        }

        .image-attribution {
            font-size: 0.75rem;
            position: absolute;
            bottom: 1rem;
            right: 1rem;
            color: white;
            text-shadow: 0px 0px 10px #777;
            text-decoration: none;
            a {
                color: inherit;
            }
        }
    }
}

footer {
    grid-area: footer;
    background-color: rgba(245, 245, 245);
    padding: 3rem 6rem;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */

    #legal {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .footer-links {
            display: flex;
            gap: 1rem;
        }
    }
    
    p, a {
        font-size: 0.875rem;
        font-weight: 400;
        letter-spacing: -0.006em;
        line-height: 1.7;
    }


}


/* Main */

.page-subheading {
    font-family: 'Times';
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: -0.022em;
    color: #777;
}

.page-section {

    &:not(.text-with-image) {
        border-bottom: 1px solid lightgray;
    }

    &.text-with-image {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding-bottom: 1.5rem;
        gap: 4rem;

        .page-section-text {
            display: block;

            .section-heading {

                font-size: 2.25rem;
                font-weight: 400;
                letter-spacing: -0.022em;
            
            }
            
            .section-description {
            
                font-size: 1.5rem;
                font-weight: 300;
                letter-spacing: -0.019em;
            }
        }
    
        .page-section-image-container {

            grid-column-start: span 2;
            position: relative;
            z-index: 0;

            .page-section-image {
                width: 100%;
                aspect-ratio: 3 / 2;
                object-fit: cover;
                
            }
            .image-attribution {
                font-size: 0.75rem;
                position: absolute;
                bottom: 1rem;
                right: 1rem;
                color: white;
                text-shadow: 0px 0px 10px #777;
                text-decoration: none;
                a {
                    color: inherit;
                }
            }
        }
    }

    &.text-only {

        p {
            font-size: 1.75rem;
            font-weight: 300;
            letter-spacing: -0.021em;
        }

    }

    &.section-features {
        padding-top: 1.5rem;
    }

    &#platform-introduction-section {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4rem;
        border-bottom: 1px solid lightgray;

        /* padding: 6rem 6rem; */

        p {
            font-size: 1.5rem;
            font-weight: 300;
            letter-spacing: -0.019em;
            grid-column-start: span 2;
            line-height: 1.5;
            /* color: #444; */

            /* columns: 2; */
        }

    }

    &#contact-section {
        
        p {
            text-align: right;
            font-size: 1.5rem;
            font-weight: 300;
            letter-spacing: -0.019em;
            grid-column-start: span 2;
            line-height: 1.5;
        }

        button, a {
            margin-left: auto;
        }

    }

}


.feature-subtitle {
    margin: 0; 
    font-family: 'Inter';
    font-size: 2.4rem; 
    font-weight: 400;
    display: flex;
    color: #777;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6rem;
    width: max-content;
}


#preview {
    border-radius: 10px;
    box-shadow: 0px 5px 10px #cccccc;
    width: 75%;
}


.features {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;

    .feature {

        padding: 2rem 0rem;

        .feature-header {
    
            .feature-title {
    
                font-size: 1rem;
                font-weight: 400;
                letter-spacing: -0.011em;
    
            }
    
        }

        .feature-body {

            .feature-description {

                font-size: 1rem;
                font-weight: 300;
                letter-spacing: -0.011em;

            }

        }
    
    }    

}