/* WOLFRAMSCIENCE HOMEPAGE STYLES

   developer:   rmiske
   requires:    /common/framework/css/framework.css
                /common/css/css2003/www.wolframscience.com/NKS.css
   ========================================================================== */

/* ==========================================================================
   SETUP
   ========================================================================== */
   :root {
    --box-set-offset: 28px;
    --box-set-w: 15.4375rem; /*247px*/
    --box-set-h: 10.625rem; /*170px*/
}



/* ==========================================================================
   TOP SECTION
   ========================================================================== */
#cover, #pages img, #contents { box-shadow: -3px 3px 7px 0px rgba(0,0,0,0.2); }


/*top left*/
#book { 
    background: #ffcc70; 
    padding: 40px 0 calc(2 * var(--box-set-offset));
}
#book .inner { 
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 277px 348px 275px;
}
#cover { 
    font-size: 0;
    position: relative;
}
img#book-cover { height: auto; max-width: 100%; }
#cover #badge {
    position: absolute;
    top: 20px;
    left: -28px;
}


/*top center*/
#pages { 
    display: grid;
    grid-gap: 15px 12px;
    grid-template-columns: 60px 60px 60px 60px 60px;
}
#pages a { display: inline-flex; }
#pages img { height: 74px; max-width: 100%; width: 60px; background: #fff; }


/*top right*/
#contents { background: #fff; }
#contents { 
    background: #fff; 
    font-family: 'PT Serif', Georgia, serif;
    font-size: 0.66rem;
    line-height: 1.195;
    position: relative;
}
#contents > div { 
    display: table; 
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
}
#contents > div > * { display: table-row; }
#contents > div > * > * { display: table-cell; }

#contents a { color: #b00f00; }
#contents a:active, #contents a:hover { color: #ff002f; }

#contents a > span:nth-of-type(1) {
    color: #656565;
    padding: .25rem 0;
    text-align: right;
    white-space: nowrap;
    width: 1.75rem; 
}
#contents a:not(:first-child):not(:last-child):not(:nth-child(14)) > span:nth-of-type(1):after {
    color: #b9b9b9;
    content: '|';
    display: inline-block;
    margin: 0 .1875rem;
}
#contents a > span:nth-of-type(2) { padding: .2rem 0; }
#contents .arrow-after:after { content: '›'; margin-left: 0.25rem; }


/*20th anniversary*/
#box-set { background: #feb55a; }
#all-encompassing #box-set .inner { max-width: 880px; }
#box-set .inner > a {
    align-items: center;
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr 25rem;
}
#box-set .inner > a div.img { 
    font-size: 0;
    height: calc(var(--box-set-h) - var(--box-set-offset));
    position: relative;
    bottom: 28px;
    text-align: center;
}
#box-set h3 { color: #404040; font-size: 1rem; }
#box-set p { color: #535252; font-size: 0.875rem; margin: 0.5rem 0 0; }
#box-set img { height: auto; max-width: 100%; }



/* ==========================================================================
   MIDDLE SECTION
   ========================================================================== */
#featured .inner div {
    align-items: center;
    display: grid;
    font-size: 0;
}
#featured .inner div.main-grid {
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
}
#featured .inner div.sub-grid { grid-template-columns: 1fr 1fr; }
.sub-grid a + a { margin-left: 20px; }

#featured .inner > div a { position: relative; font-size: 0; }
#featured .inner > div a span {
    bottom: 0.25rem;
    color: #fff;
    font-size: 1rem;
    left: 0;
    padding-left: 0.635rem;
    position: absolute;
    width: 100%;
}



/* ==========================================================================
   BOTTOM SECTION
   ========================================================================== */
#writings-streams { 
    background: #eaf2f2; 
    padding: 2rem 0;
}
#writings-streams h1 {
    color: #f16518;
    letter-spacing: 0;
}

#writings-nav {
    margin: 20px 0 30px;
    display: flex;
    justify-content: center;
}
#writings-nav a { 
    border: 1px solid #6cabab;
    border-radius: 3px;
    color: #6cabab;
    font-size: 0.875rem;
    line-height: 1;
    margin-right: 10px;
    padding: 3px 6px;
}
#writings-nav a:hover {
    background: #6cabab;
    color: #eaf2f2;;
}
#writings-nav a.current {
    border-color: #f16518;
    color: #f16518;
}
#writings-nav a.current:hover {
    background: #f16518;
    color: #eaf2f2;
}
#writings-nav a:last-child { margin-right: 0; }

#writings-streams .feeds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.25rem; 
}
.feeds .mini-t { margin-top: 27px; } 
.feeds .img { font-size: 0; width: 80px; }
.feeds img { border: 1px solid #ddd; margin-top: 3px; background: #fff}
.feeds .txt { line-height: 1.25; }
.feeds strong { color: #555; display: block; }
.feeds a:hover strong { color: #c74000; } 
.feeds .meta { color: #888; font-size: 0.875rem; }

#writings-streams #see-all { margin-top: 40px; text-align: center; }
#see-all a { color: #6cabab; }
#see-all a:first-child { margin-right: 3.75rem; }
#see-all a:hover { color: #c74400; }




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

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

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



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (max-width: 1200px) {
    /*setup*/
    :root {
        --box-set-offset: 12px;
        --box-set-w: 222px; /*247px*/
        --box-set-h: 153px; /*170px*/
    }
    #homepage section .inner { max-width: 844px; }


    /*top section*/
    #book { padding-bottom: calc(4 * var(--box-set-offset)); }
    #book .inner { grid-gap: 17px; grid-template-columns: 250px 310px 250px; }
    #cover #badge { height: 69px; left: -18px; width: 60px; }
    #pages { grid-gap: 12px 10px; grid-template-columns: 54px 54px 54px 54px 54px; }
    #pages img { height: 66.6px; max-width: 100%; width: 54px; background: #fff; }
    #all-encompassing #box-set .inner { max-width: 800px; }
    #box-set .inner > a { grid-template-columns: 1fr 20rem; }


    /*middle section*/
    #featured .inner div.main-grid { grid-gap: 16px; }
    #featured a#physics { grid-column: 1 / span 2; width: 414px !important; }
    #featured a#metamath { width: 270px !important; margin-right: 2px; }
    #featured a#combinators { width: 126px !important; }
    .sub-grid.bottom a { height: 117px; width: 198px; }
    .sub-grid a + a { margin-left: 16px; }
    #featured img { height: auto; max-width: 100%; }
}


@media (max-width: 900px) {
    /*setup*/
    :root {
        --box-set-offset: 28px;
    }


    /*top section*/
    #book { padding-bottom: var(--box-set-offset); }
    #book .inner { grid-gap: 20px; grid-template-columns: 277px 277px; margin: 0 auto; max-width: 574px !important; }
    #box-set .inner > a { grid-template-columns: 1fr calc(var(--box-set-w) + var(--box-set-offset)); }
    #box-set .inner > a div.img { bottom: 0; height: auto; padding-top: 6px; }
    #box-set h3, #box-set p { font-size: 0.9rem; padding-right: 2rem; }


    /*middle section*/
    #featured .inner div.main-grid { 
        grid-template-columns: 1fr; 
        grid-gap: 20px;
        margin: 0 auto;
        width: 460px;
    }
    #featured a#physics { grid-column: 1; width: 460px !important; }
    #featured a#metamath { width: 300px !important; margin-right: 4px; }
    #featured a#combinators { width: 140px !important; }
    .sub-grid.bottom a { height: 130px; width: 220px; }


    /*bottom section*/
    #writings-streams .inner { max-width: 80% !important; }
    #writings-streams .feeds { grid-template-columns: 1fr; }
}


@media (max-width: 600px) {
    /*setup*/
    :root {
        --box-set-w: 140px; 
        --box-set-h: 96px; 
    }


    /*top section*/
    #book .inner { grid-template-columns: 277px; max-width: 277px !important; }
    #all-encompassing #box-set .inner { max-width: 300px; }
    #box-set .inner > a { grid-template-columns: 1fr 12rem; padding-top: 0; }
    #box-set h3 { margin-top: -3px; }


    /*middle section*/
    #featured .inner div.main-grid { 
        grid-gap: 15px;
        width: 300px;
    }
    #featured a#physics { width: 300px !important; }
    #featured a#metamath { width: 195px !important; margin: 0; }
    #featured a#combinators { width: 91px !important; }
    .sub-grid a + a { margin-left: 14px; }
    .sub-grid.bottom a { height: 85px; width: 143px; }

    #featured .inner > div a span { font-size: 12px; letter-spacing: -0.04rem }


    /*bottom section*/
    #writings-streams .inner { max-width: none !important; }
    .feeds .meta { font-size: 1rem; }
    #see-all a:first-child { margin-right: 2rem; }
}


@media (max-width: 320px) {
    /*middle section*/
    #featured .inner div.main-grid { 
        grid-gap: 15px;
        width: 280px;
    }
    #featured a#physics { width: 280px !important; }
    #featured a#metamath { width: 183px !important; margin: 0; }
    #featured a#combinators { width: 85.5px !important; }
    .sub-grid a + a { margin-left: 11px; }
    .sub-grid.bottom a { height: 79px; width: 134px; }
    #featured .inner > div a span { line-height: 1.15; padding-right: 10px; }


    /*bottom section*/
    #writings-nav { display: block; text-align: center; margin-left: auto; margin-right: auto; max-width: 200px; width: 100%; }
    #writings-nav a { display: inline-block; font-size: 1rem; margin-bottom: 5px; margin-right: 5px; }
    #writings-nav a:nth-child(3) { margin-right: 0; }
    #writings-nav a:nth-child(3):after { content: '\A'; white-space: pre; }
    #writings-streams #see-all a { display: block; margin: 0; }
}