/* homepage styles

   developer:   rmiske
   requires:    /common/framework/css/framework.css
                /common/templates/www.wolframphysics.org/css/global.css
   ========================================================================== */


/* ==========================================================================
   SETUP
   ========================================================================== */
/*global.css overrides*/
#home { }
#home .inner { max-width: 68.25rem; /*add padding*/ }


/*decoration*/
#home a { transition: color 0.05s ease-in-out; }
#home a:hover { color: #ecbf17; }

#home main { 
    font-size: 0.90625rem; /*14.5*/
    position: relative; 
}
#home main:after {
    background: rgb(61,10,74);
    background: linear-gradient(187deg, rgb(86, 16, 104) 0%, rgba(33,4,53,1) 100%);
    content: '';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
}


/*text*/
#home h2 {
    border-top: 1px solid;
    font-size: 0.875rem;
    /*font-weight: 500;*/
    letter-spacing: 0.5px;
    padding: 0.9375rem 0 0.6875rem;
    text-transform: uppercase;
}
.paren { color: #bfa7ef; font-weight: 300; }


/*main grid layout*/
#home .inner {
    position: relative;
    z-index: 10;
    
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto; 
    height: 100vh;
    align-items: center;
}
.solarsystem {
    align-content: center;
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding: 2.5rem;
}


/*sub layout*/
#home li { 
    padding: 5px 0;
}
#home li a {
    display: grid;
    grid-gap: 0.625rem;
    align-items: center;
}
#home li img {
    vertical-align: middle;
}

.thumbs-sm li a { grid-template-columns: auto 1fr; }
#main-header .thumbs-sm li a { grid-template-columns: 26px 1fr; }
.thumbs-sm li .img {
    height: 24px;
    text-align: center;
}

.thumbs-med li a { grid-template-columns: 40px 1fr; padding-bottom: 0.5rem; }
.thumbs-med li .img { align-self: start; }
.thumbs-med li img { 
    border: 1px solid #bebebe; 
    box-sizing: content-box; 
    margin-top: 1px;
}

.thumbs-lg li a { grid-template-columns: 97px 1fr; }





/* ==========================================================================
   HEADER
   ========================================================================== */
#main-header {
    background: #602686;
    color: #bfa7ef;
    display: grid;
    grid-gap: 2.5rem 0;
    grid-template-columns: 200px 1fr 1fr;
    padding: 3.75rem 3rem 3.125rem;
}

#main-header h2 { border-color: #9a6cb2; margin-top: 1rem; }
#main-header a { color: #fff; }

#anniversary {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: relative;
}
#anniversary img {
    position: absolute;
    right: -2rem;
}

h1#logo { 
    grid-column: 2 / span 2;
    grid-row: 1;
    text-align: center; 
}
#logo img { 
    height: auto;
    max-width: 100%; 
}
#left-side { 
    justify-self: end; 
    padding-right: 2.5rem;
}
#right-side {
    padding-left: 2.5rem;
}

#left-side > div, #right-side > div {
    max-width: 18rem;
}

#project-overview ul {
    display: grid;
    grid-gap: 2.25rem 4rem;
    grid-template-columns: repeat(2, auto);
}
#project-overview li { padding: 0 !important; }

#project-overview a {
    align-items: end !important;
    grid-gap: 0.625rem !important;
    grid-template-columns: 100px;
    grid-template-rows: 61px auto; /*tallest img height*/
    line-height: 1.1;
}
#project-overview a + a {
    color: #c2a6e2;
    display: block;
    font-size: 0.78125rem;
    font-style: italic;
    margin-top: 0.5rem;
    text-align: center;
}
#project-overview .chevron-after:after { margin-left: 0; }
#project-overview a > span { text-align: center; }
#project-overview .img { font-size: 0; }

#start-here h2 { border-top: 0; padding-top: 0; }



/* ==========================================================================
   CONTENT
   ========================================================================== */
#main-content {
    background: #fff;
    color: #666;
    padding: 3.125rem 8.125rem 2.5rem;
}
#main-content h2 { 
    border-color: #d0c5d6; 
    margin-top: 1.9375rem; 
}
#main-content a { color: #610097; }
#main-content a:hover { color: #c60261; }
#main-content li:not(#recent-articles *) { display: inline-block; }
#main-content li:not(#recent-articles *):not(:last-child) { margin-right: 2rem; }


#related h2 { border-top: 0; margin-top: 0; padding-top: 0; }


#recent-articles ul {
    column-count: 2;
    column-gap: 2rem;
}
#recent-articles li { 
    break-inside: avoid; 
    font-size: 0.8125rem;
    font-weight: 300;
    padding-left: 0.75rem; 
    position: relative;
}
#recent-articles li:before { 
    color: #610097;
    content: "\00BB";
    font-weight: 400;
    position: absolute;
    margin-left: -0.75rem;
}
#recent-articles a {
    color: #333;
}
#recent-articles .see-more { 
    font-style: italic; 
    font-weight: 400;
}
#recent-articles .see-more:before { content: none; }
#recent-articles .see-more a { 
    color: #610097;
    padding-bottom: 0; 
}



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (max-width: 1200px) {
    /*SETUP > main grid layout*/
    #home .inner { 
        display: block; 
    }
    #main-header {
    }
    #anniversary img {
        height: auto;
        right: 0;
        width: 431px;
    }
    #main-content {
    }


    /*header*/
}


@media (max-width: 900px) {
    /*SETUP > main grid layout*/
    #main-header {
       grid-gap: 2.5rem 3rem;
        grid-template-columns: 1fr 1fr;
    }
    h1#logo {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    #anniversary { display: none; }
    #main-content {
        padding: 2.5rem;
    }

    /*header*/
    #project-overview ul {
        grid-gap: 2rem;
    }


    /*content*/
    #left-side { 
        padding-right: 0;
    }
    #right-side {
        padding-left: 0;
    }
}


@media (max-width: 600px) {
    /*SETUP > decoration*/
    main:after {
        background: transparent url('/img/home-background-sm.jpg') no-repeat center;
        background-size: cover;
    }


    /*main grid layout*/
    #home .inner { }
    #main-header { 
        grid-gap: 1rem;
        grid-template-columns: 1fr;
        padding: 2rem;
    }


    /*header*/
    h1#logo { grid-column-end: span 1; }
    #logo img  {
        max-width: 375px;
        width: 100%;
    }
    #left-side { display: grid; justify-self: stretch; }
    #left-side > div, #right-side > div {
        max-width: none;
    }
    #project-overview { margin: 0 auto; }
    #project-overview ul { grid-gap: 2.25rem 4rem; }
    #project-overview a { grid-template-columns: 100px; }


    /*content*/
    #main-header li, #main-content li { 
        display: block !important; 
        margin-right: 0 !important; 
    }
    #recent-articles ul { column-count: 1; }

    #right-side,
    #related, #resources,
    #recent-articles, #support {
        max-width: 270px;
        margin: auto;
        width: 100%;
    }

}


@media (max-width: 400px) {
    #project-overview ul {
        grid-gap: 1.5rem 2rem;
    }
}


@media (max-width: 320px) {
}


@media print {}