/* homepage styles

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


/* ==========================================================================
   SETUP
   ========================================================================== */
/*global.css overrides*/
#home .inner { max-width: 104rem; }
#home { background: #49096a; }


/*decoration*/
main {
    color: rgba(255, 255, 255, 0.7);
    position: relative;
}
main:after {
    background: url('/img/home-background-lg.jpg') no-repeat scroll top right;
    background-size: cover;
    content: '';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
}
.planet .chevron-after:after { opacity: 0.5; }
.bottom-border, .bottom-border__900 { position: relative; }
.bottom-border:after, .bottom-border__900:after {
    border-bottom: 1px solid #fff;
    bottom: -0.75rem;
    content: '';
    height: 1px;
    left: 3rem;
    opacity: 0.25;
    position: absolute;
    width: calc(100% - 3rem);
}
.bottom-border { margin-bottom: 1.5rem; }
.bottom-border__900:after { display: none; }



/* ==========================================================================
   MAIN GRID SETUP
   ========================================================================== */
.solarsystem {
    align-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: 23.3rem auto;
    grid-template-rows: auto auto auto;
    grid-gap: 0rem 3rem;
    height: 100vh;
    justify-content: space-evenly;
    justify-items: center;
    padding: 0 3rem;
    position: relative;
    z-index: 10;
}
.solarsystem a {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.7);
    transition: color 0.15s ease-in-out;
}
.solarsystem a:hover { color: #ecbf17; }



/* ==========================================================================
   LEFT
   ========================================================================== */
/*shared*/
.solarsystem > .side { ;
    /*align-items: center;
    align-self: stretch;
    display: flex;*/
    font-size: 0.875rem;
    height: auto;
    width: 100%;
}
.solarsystem > .side a { color: #bda0fe; }
.solarsystem > .side a:hover span.sub { color: #ecbf17; }
.side .img { width: 1.5rem; }
.side .img img {
    height: auto;
    max-width: 100%;
}
.side .txt { padding-left: 0.65rem; }
.side .txt span { display: block; }
.side .txt span.head {
    color: #fff;
    text-transform: uppercase;
}
.side .txt span.sub {
    font-size: 0.8125rem;
    font-style: italic;
}
span.sub + span.head,
span.head + span.sub {
    padding-top: .125rem;
}
.side.bottom-border {
    margin-bottom: 3rem;
}
.side.bottom-border:after {
    bottom: -1.5rem;
    left: 2.25rem;
    opacity: 0.17;
    width: calc(100% - 2.25rem);
}


/*logo*/
.solarsystem > .home-logo {
    color: #bda0fe;
    font-size: 0.8125rem;
    font-style: italic;
    grid-row: 1 / span 1;
    margin-bottom: 2rem;
}
.home-logo img { max-width: 100%; }


/*
 * Temporary top pod. Referenced in index.php.en
 *
 * Add one to the grid-row number on .oort, .right-date, .moon 
 * if you add one more pod such as the summer school.
 * 
 * Subtract one to the grid-row number on .oort, .right-date, .moon 
 * if you remove one pod such as the summer school.
 */
.new-terra { grid-row: 2 / span 1; }
.new-terra span.sub { font-style: normal!important; }


/*twitter*/
.oort { grid-row: 2 / span 1; }


/*book*/
.ring-gate { grid-row: 3 / span 1; }


/*livestreams*/
.moon { grid-row: 4 / span 1; }
.moon .txt { padding: 0.25rem 0 0 0.65rem; }
.moon .stream-head span.sub {
    font-size: 0.6875rem;
    font-style: normal;
    padding-bottom: 0.875rem;
    text-transform: uppercase;
}
.moon .stream-head span.sub a:hover { color: #ecbf17; }
.moon .stream {
    display: block;
    font-style: italic;
    padding-bottom: 0.75rem;
}
.moon .stream:last-child { padding-bottom: 0; }



/* ==========================================================================
   RIGHT
   ========================================================================== */
/*setup*/
.planet {
    grid-column: 2;
    grid-row: 1 / span 4;
    justify-self: end;
    max-width: 48rem;
    width: 100%;
}
.planet .darkmatter {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /*margin-bottom: 1.5rem;*/
    /*top: 0.375rem;*/
}
.continent {
    align-items: center;
    display: flex;
    font-size: 0.875rem;
    padding: 1rem;
    position: relative;
}
.continent .img {
    font-size: 0;
    width: 1.5rem;
}
.continent .txt { padding-left: 0.5rem; }
.continent a img { transition: filter 0.15s ease-in-out; }
.continent a:hover { text-shadow: 0 0 1rem rgba(255, 255, 255, 0.3); }
.continent a:hover img { filter: brightness(1.25) saturate(125%); }


/*top*/
.sol .continent { padding-top: 1.25rem; }
.sol #announce {
    grid-column: 1 / span 3;
    font-size: 1rem;
}
.sol #bulletins { grid-column: 4 / span 3; }
.sol #backstory {
    font-size: 0.8125rem;
    font-style: italic;
    grid-column: 1 / span 3;
    grid-row: 2;
    margin-top: -1rem;
    padding: 0 1rem 1rem 3rem;
}
.sol #backstory a { color: #c2a6e2; }
.sol #backstory a:hover { color: #ffde7d; }
#backstory .chevron-after:after {
    margin: 0;
    /*snowflake to fix spacing after chevron*/
}
.sol #one-year-update {
    font-size: 0.8125rem;
    font-style: italic;
    grid-column: 4 / span 3;
    grid-row: 2;
    margin-top: -1rem;
    padding: 0 1rem 1rem 3rem;
}
.sol #one-year-update a { color: #c2a6e2; }
.sol #one-year-update a:hover { color: #ffde7d; }
#one-year-update .chevron-after:after {
    margin: 0;
    /*snowflake to fix spacing after chevron*/
}
.sol #explainer { grid-column: 7 / span 2; }
#explainer img { margin-left: -4px; }


/*middle*/
.inner-planets #introduction { grid-column: 1 / span 3; }
.inner-planets #techdocs { grid-column: 4 / span 3; }
.inner-planets #tools { grid-column: 7 / span 2; }
.inner-planets #livestreams {
    grid-column: 1 / span 3;
    grid-row: 2;
}
.inner-planets #qa {
    grid-column: 4 / span 3;
    grid-row: 2;
}
.inner-planets #people {
    grid-column: 7 / span 2;
    grid-row: 2;
}
#people img { margin-left: -6px; }


/*bottom*/
.darkmatter.outer-planets {
    font-size: 0.875rem;
    /*margin-bottom: 0.375rem; 
    padding-bottom: 0.25rem;*/
}
.outer-planets #registry {
    grid-column: 1 / span 3;
    grid-row: 1;
}
.outer-planets #gallery {
    grid-column: 1 / span 3;
    grid-row: 2;
}
.outer-planets #archives {
    grid-column: 1 / span 3;
}
.outer-planets #glossary {
    grid-column: 5 / span 3;
    grid-row: 1;
}
.outer-planets #educollab {
    grid-column: 5 / span 4;
    grid-row: 2;
}
.outer-planets #discuss {
    grid-column: 5 / span 3;
    grid-row: 3;
}
.outer-planets #membership {
    grid-column: 1 / span 3;
    grid-row: 4;
}
.outer-planets #how-you-can-help {
    grid-column: 5 / span 3;
    grid-row: 4;
}


/*very bottom*/
.belt { padding-top: 0.5rem; }
.belt .continent { padding: 0.5rem 1rem; }
.belt .img { text-align: right; }
.belt img { margin-right: 0.25rem; }
.belt .txt { font-weight: 300; }
.belt #contact {
    grid-column: 1 / span 3;
    grid-row: 5;
}
.belt #how-you-can-help {
    grid-column: 4 / span 3;
    grid-row: 5;
}
.belt #islands {
    grid-column: 7 / span 2;
    grid-row: 5;
}
#islands .txt {
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#islands img { margin-right: 0.5rem; }
.belt #shop {
    grid-column: 6 / span 0;
    grid-row: 5;
}
.belt #sign-up {
    grid-column: 3 / span 3;
    grid-row: 5;
}



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (max-width: 1200px) {
    /*SETUP > decoration*/
    main:after {
        left: -10%;
        width: 110%;
    }


    /*MAIN GRID SETUP*/
    .solarsystem {
        grid-template-columns: 20rem auto;
        grid-gap: 0 3rem;
    }
}


@media (max-width: 900px) {
    /*rebiggen*/
    html { font-size: 15px !important; }


    /*SETUP > decoration*/
    main:after {
        left: -25%;
        width: 125%;
    }
    .bottom-border__900 { margin-bottom: 2rem; }
    .bottom-border__900:after {
        bottom: -1.5rem;
        display: block;
    }


    /*MAIN GRID SETUP*/
    .solarsystem {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-gap: 1.5rem 1.5rem;
        height: auto;
        padding: 2rem 3rem;
    }
    .side.bottom-border {
        margin-bottom: 0rem;
        margin-top: 0rem;
    }


    /*LEFT > shared*/
    .side.bottom-border { margin-bottom: 2.5rem; }
    .side.bottom-border:after { bottom: -2rem; }


    /*LEFT > logo*/
    .side.home-logo {
        display: block;
        grid-column: 1 / span 2;
        justify-self: start;
        min-width: 14rem;
        margin-bottom: 0;
        margin-top: 0;
        max-width: 20rem;
        width: 30vw;
    }


    /*LEFT > temporary top pod*/ 
    .new-terra { 
        grid-column: 1 / span 4;
        grid-row: 3 / span 1; 
    }


    /*LEFT > twitter*/
    .oort {
        grid-column: 1 / span 4;
        grid-row: 4 / span 1;
    }


    /*LEFT > book*/
    .ring-gate {
        grid-column: 1 / span 4;
        grid-row: 5 / span 1;
    }
    .ring-gate:after { display: none; }


    /*LEFT/livestreams*/
    .moon {
        grid-column: 3 / span 2;
        grid-row: 1 / span 1;
        margin-bottom: auto;
        margin-top: 0;
        top: 0;
    }
    .moon .streams {
        grid-gap: 0.5rem;
        grid-template-columns: 1fr;
    }


    /*RIGHT > setup*/
    .planet {
        grid-column: 1 / span 4;
        grid-row: 2;
        max-width: 100%;
    }
    .planet .darkmatter { margin-left: -1rem; }


    /*RIGHT > very bottom*/
    .belt #contact {
        grid-column: 1 / span 4;
        grid-row: 1;
    }
    .belt #how-you-can-help {
        grid-column: 5 / span 4;
        grid-row: 1;
    }
    .belt #islands {
        grid-column: 5 / span 4;
        grid-row: 3;
    }
    .belt #shop {
        grid-column: 1 / span 4;
        grid-row: 3;
    }
    .belt #sign-up {
        grid-column: 5 / span 4;
        grid-row: 1;
    }
}


@media (max-width: 600px) {
    /*rebiggen*/
    html { font-size: 16px !important; }


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


    /*MAIN GRID SETUP*/
    .solarsystem {
        grid-gap: 1.5rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        margin: 0 auto;
        padding: 2rem 0;
        width: 90%;
    }


    /*LEFT > logo*/
    .side.home-logo {
        grid-column: 1 / span 1;
        min-width: 14rem;
        width: 50vw;
    }


    /*LEFT > temporary top pod*/ 
    .new-terra { 
        grid-column: 1;
        grid-row: 3; 
    }


    /*LEFT > twitter*/
    .oort {
        grid-column: 1;
        grid-row: 4;
    }


    /*LEFT > book*/
    .ring-gate {
        grid-column: 1;
        grid-row: 5;
    }
    .ring-gate:after { display: block; }


    /*LEFT > livestreams*/
    .moon {
        grid-column: 1;
        grid-row: 6;
        margin-top: 0rem;
        max-width: 100%;
    }


    /*RIGHT > setup*/
    .planet {
        grid-column: 1;
        grid-row: 2;
    }
    .planet .darkmatter { grid-template-columns: repeat(2, 1fr); }
    .continent,
    .sol .continent {
        grid-column: 1 / span 2 !important;
        padding: 1rem;
    }


    /*RIGHT > top*/
    .sol #announce {
        grid-row: 1;
        padding-bottom: 0;
    }
    .sol #backstory {
        grid-row: 2;
        margin-top: 0.25rem;
        padding: 0 1rem 0.25rem 3rem;
    }
    .sol #bulletins { grid-row: 3; }
    .sol #one-year-update {
        grid-row: 4;
        padding: .25rem 1rem 0.25rem 3rem;
    }
    .sol #explainer { grid-row: 5; }


    /*RIGHT > middle*/
    .inner-planets #techdocs { grid-row: 2; }
    .inner-planets #tools { grid-row: 3; }
    .inner-planets #livestreams { grid-row: 4; }
    .inner-planets #qa { grid-row: 5; }
    .inner-planets #people { grid-row: 6; }


    /*RIGHT > bottom*/
    .outer-planets #registry { grid-row: 1; }
    .outer-planets #gallery { grid-row: 2; }
    .outer-planets #archives { grid-row: 3; }
    .outer-planets #glossary { grid-row: 4; }
    .outer-planets #educollab { grid-row: 5; }
    .outer-planets #discuss { grid-row: 6; }
    .outer-planets #membership { grid-row: 7; }
    .outer-planets #how-you-can-help { grid-row: 8; }


    /*RIGHT > very bottom*/
    .belt #contact { grid-row: 7; }
    .belt #how-you-can-help { grid-row: 8; }
    .belt #islands { grid-row: 12; }
    .belt #shop { grid-row: 11; }
    .belt #sign-up { grid-row: 10; }


    /*RIGHT > borders*/
    .inner-planets #livestreams,
    .inner-planets #qa,
    .inner-planets #people,
    .outer-planets #contact,
    .outer-planets #book,
    .outer-planets #islands {
        border-top: none;
        margin-top: 0;
        padding-top: 1rem;
    }
}


@media (max-width: 320px) {
    /*LEFT > logo*/
    .home-logo { width: 80%; }
}


@media print {}