/* functional components */
/* $Id: 02_components.css 96 2019-07-26 13:52:16Z fuchsm $ */

/** header **/

body > header {
    display: flex;
    align-content: center;
    justify-items: flex-end;
    padding: 8px 0;
    background: var(--dark);
    color: var(--light);

}
body > header > p {
    color: var(--light);
    padding: 3px 0;
}
body > header > p > a:hover {
    text-decoration: underline;
}

body > header > * {
    grid-column: 2/-2;
}

/** nav **/

body > nav {
    grid-template-areas: ". logo logo nav nav nav nav nav nav nav nav nav nav .";
    align-items: center;
}

body > nav h1 {
    grid-area: logo;
    margin-left:6em;
    display:block; 
}
body > nav img {
    grid-area: logo;
    width: 56px;
    height: 56px;
    padding: 16px 0;
}

body > nav > ul {
    justify-self: end;
    grid-area: nav;
    display: grid;
    align-items: center;
    justify-items: flex-end;
}
body > nav > ul > li > a {
    display: block;
    padding: 16px 0 16px var(--nav-horizontal-padding);
}


body > nav > ul > li > a {
    color: var(--gray);
}
body > nav > ul > li > a.active {
    color: var(--dark);
}
body > nav > ul > li > a:hover {
    color: var(--dark);
}


@media (min-width: 480px) {
    body > nav > ul {
        grid: ". . ." auto 
              ". . ." auto
              / auto;
    }
    body > nav > ul > li:nth-of-type(3n+1) > a {
        padding: 16px var(--nav-horizontal-padding);
    }
    body > nav > ul > li:nth-of-type(3n+2) > a {
        padding: 16px var(--nav-horizontal-padding);
    }
}

@media (min-width: 768px) {
    body > nav > ul {
        grid: ". . . . . ." auto
        / auto;
    }
    body > nav > ul > li:nth-of-type(3) > a {
        padding: 16px var(--nav-horizontal-padding);
    }
    body > nav > ul > li:last-of-type> a {
        padding-right: 0;
    }
}

/** banner **/

section.banner {
    background: var(--dark);
    color: var(--light);    
    padding: 24px 0;
    background-size: cover;
    align-items: end;
    grid-template-rows: 1fr auto;
}
section.banner > * {
    grid-column: 2/-2;
}
section.banner > h1 {
    text-align: left;
    border: none;
}

@media (min-height: 512px) {
    section.banner {
        min-height: 384px;
    }
}

/* joint styling for sections */

body > main > section {
    position: relative;
    padding: var(--default-section-vertical-padding) 0 0 0;
}

body > main {
    margin-bottom: var(--default-section-vertical-padding);
}

body > main > section > h1 {
    padding-bottom: 8px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--light);
    padding-right: 72px; /* width of the more-link */
}

body > main > section a.more-link {
    position: absolute;
    top: var(--default-section-vertical-padding); 
    right: 0;
    background: var(--light);
    color: var(--dark);
    border-radius: var(--default-border-radius);
    padding: 4px 8px;
    width: 64px; /*check with padding*/
}

/* joint styling for articles */


body > main > section article h1,
body > main > section.card-text-list ul.games-list h1 {
    grid-area: h1;
}

body > main > section article h2,
body > main > section.card-text-list ul.games-list h2 {
    grid-area: h2;
}

body > main > section article img,
body > main > section.card-text-list ul.games-list img {
    grid-area: img;
    object-fit: cover;
    margin-bottom: 4px;
}

/* card-list */

body > main > section.card-list ul {
    display: grid;
    grid-gap: var(--inner-grid-vertical-gap) var(--inner-grid-horizontal-gap);
    gap: var(--inner-grid-vertical-gap) var(--inner-grid-horizontal-gap);
}

body > main > section.card-list article {
    display: grid;
    grid: "img" auto
          "h2" auto
          "h1" auto
          / auto;
}


body > main > section.card-list article > img,
body > main > section.card-text-list > ul > li article.card > img,
body > main > section.card-text-list > ul > li  ul  img  
{
    border-radius: var(--default-border-radius);
    height: 128px;
}

@media (min-width: 480px) {
    body > main > section.card-list ul{
        grid: ". ." auto
             / 1fr 1fr; 
    }
}
@media (min-width: 768px) {
    body > main > section.card-list ul{
        grid: ". . . "
            / 1fr 1fr 1fr; 
    }
}
@media (min-width: 1024px) {
    body > main > section.card-list ul{
        grid: ". . . ." auto
             / 1fr 1fr 1fr 1fr; 
    }
}

/* card-list person cards */


body > main > section.card-list.person-cards article {
    background: var(--dark);
    color: var(--light);
    border-radius: var(--default-border-radius);

}
body > main > section.card-list.person-cards article > img {
    height: 192px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
body > main > section.card-list.person-cards article > *:not(img) {
    margin: 8px;
}
/* 
@media (min-width: 1024px) {
    body > main > section.card-list.person-cards > ul{
        grid: ". . . . . ." 
             / 1fr 1fr 1fr 1fr 1fr 1fr; 
    }
} */

/* card-list featured */


body > main > section.card-list.featured ul {
    display: grid;
    grid: "featured" auto
           "." auto
          / 1fr;
    gap: var(--inner-grid-horizontal-gap) var(--inner-grid-horizontal-gap);
    grid-gap: var(--inner-grid-horizontal-gap) var(--inner-grid-horizontal-gap);
    justify-items: flex-start;
    align-items: flex-start;
}

body > main > section.card-list.featured ul li:first-of-type {
    grid-area: featured;
}

body > main > section.card-list.featured ul li:first-of-type article,
body > main > section.card-text-list > ul > li > article.card {
    background-color: var(--dark);
    color: var(--light);
    border-radius: var(--default-border-radius);
    height: 100%;
    justify-self: stretch;
    display: grid;
    grid: "img" 1fr
          "h2" auto
          "h1" auto
          "." auto
          / auto;
}

body > main > section.card-list.featured ul li:first-of-type article > img,
body > main > section.card-text-list > ul > li > article.card > img {
    background-color: var(--dark);
    color: var(--light);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

body > main > section.card-list.featured ul li:first-of-type article > img {
    height: 100%;
}

body > main > section.card-text-list > ul > li > article.card > img {
    height: 192px;
}

body > main > section.card-list.featured ul li:first-of-type article > *:not(img),
body > main > section.card-text-list > ul > li > article.card > *:not(img) {
    margin-left: 16px;
    margin-right: 16px;
}
body > main > section.card-list.featured ul li:first-of-type article > *:not(img):last-child,
body > main > section.card-text-list > ul > li > article.card > *:not(img):last-child {
    margin-bottom: 16px;
}

body > main > section.card-text-list > ul > li {
    padding-top: var(--default-grid-column-gap);
}
body > main > section.card-text-list > ul > li > ul.games-list > li {
    padding-top: var(--inner-grid-horizontal-gap);
}

body > main > section.card-list.featured ul li:nth-of-type(1n+2) article,
body > main > section.card-text-list > ul > li > ul.games-list > li article {
    display: grid;
    grid: "img h2" auto
          "img h1" 1fr
          / 88px 1fr;
}
body > main > section.card-list.featured ul li:nth-of-type(1n+2) article > img,
body > main > section.card-text-list > ul > li > ul.games-list > li article > img {
    width: 72px;
    height: 72px;
}
body > main > section.card-list.featured ul li:nth-of-type(1n+2) article > h2,
body > main > section.card-text-list > ul > li > ul.games-list > li article > h2 {
    margin-top: 0;
}
 body > main > section.card-list.featured ul li:nth-of-type(1n+2) article > h1,
 body > main > section.card-text-list > ul > li > ul.games-list > li article > h1 {
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 4px;
 }

 body > main > section.card-list.featured ul li:nth-of-type(1n+2) article p {
     display: none;
 }
 body > main > section.card-text-list > ul > li > ul.games-list > li article > p {
    grid-column: 2/-1;
 } 
@media (min-width: 480px) {
    body > main > section.card-list.featured ul{
        grid: "featured ." auto
              "featured ." auto
              "featured ." auto
              "featured ." auto
              / 1fr 1fr;
    }
}

/* card-text-list 
 * note: some elements (e.g. the card) are styled above in order to keep the styling
 * consistent
 */

 section.card-text-list > ul {
    display: grid;
    grid: "." auto
        / auto;
    grid-gap: var(--default-grid-column-gap);
    gap: var(--default-grid-column-gap);
    
}
section.card-text-list > ul > li {
    display: grid;
    grid: "card" auto
          "text" auto
          "games-list" auto
          / auto;
    grid-column-gap: var(--inner-grid-horizontal-gap);
}
section.card-text-list > ul > li > article.card {
    grid-area: card;
}
section.card-text-list > ul > li > article.card > dl {
    display: grid;
    grid: "." auto
        / auto 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 8px;
    column-gap: 24px;
    row-gap: 8px;
}
section.card-text-list > ul > li > article.card > dl > dt {
    grid-column: 1/2;
    font-weight: 600;
}
section.card-text-list > ul > li > article.card > dl > dd {
    grid-column: 1/2;
    padding-left: 4ex;
}

section.card-text-list > ul > li > article.text {
    grid-area: text;
}
section.card-text-list > ul > li > article.text p {
    margin-bottom: 0.5em;
}
section.card-text-list > ul > li > ul.games-list {
    grid-area: games-list;
    display: grid;
    grid: "."
        / 1fr;
    grid-gap: var(--inner-grid-horizontal-gap) var(--inner-grid-horizontal-gap);
    gap:      var(--inner-grid-horizontal-gap) var(--inner-grid-horizontal-gap);
}

@media (min-width: 480px) {
    section.card-text-list > ul > li > article.card > dl {
        display: grid;
        grid: ". ." auto
            / auto 1fr;
        grid-column-gap: 24px;
        grid-row-gap: 16px;
    }

    section.card-text-list > ul > li > article.card > dl > dd {
        grid-column: 2/3;
        padding-left: inherit;
    }

}

@media (min-width: 768px) {
    section.card-text-list > ul > li {
        display: grid;
        grid: "card   text"        1fr
              "card   games-list" auto
              / 320px 1fr;
    }
}

@media (min-width: 1024px) {
    section.card-text-list > ul > li > ul.games-list {
        grid: ". . ." auto
            / 1fr 1fr 1fr;
    }
}

/*would be nice to arrange very wide research into 2-column grid:

 hovever, interacts badly with lower-hierarchy grid entries and becomes too wide.

/* @media (min-width: 1920px) {    
    section.card-text-list > ul {
        display: grid;
        grid: ". ." auto
            / 1fr 1fr;
    }    
    section.card-text-list > ul > li > ul.games-list {
        grid: ". . ."
            / 1fr 1fr;
    }
} */

/* calendar-list */

body > main > section.calendar-list > ul {
    display: grid;
    grid-gap: 8px;
    gap: 8px;    
}

body > main > section.calendar-list li a {
    display: grid;
    grid: "time-box ." auto
          / auto 1fr;
    grid-gap: var(--inner-grid-vertical-gap) var(--inner-grid-horizontal-gap);
    gap: var(--inner-grid-vertical-gap) var(--inner-grid-horizontal-gap);
    align-items: center;
}

body > main > section.calendar-list li a:hover {
    background-color: var(--light);
    border-radius: var(--default-border-radius);
}


body > main > section.calendar-list li a time {
    grid-area: time-box;
    background-color: var(--light);
    border-radius: var(--default-border-radius);
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    padding: 8px;
}

/* text list */

body > main > section.text li {
    list-style-type: circle;
    margin: 1ex 0 0 1ex;
}

/* footer */

body > footer {
    color: var(--light);
    background: var(--dark);
    grid: ". logo        logo logo   logo   logo   logo   filler filler filler filler . . ." auto
            ". footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line . " auto
            / repeat(14, auto);
    align-items: flex-start;
    padding-bottom: 16px;
}

body > footer > img {
    grid-area: logo;
    width: 96px;
    height: 96px;
    padding-top: 16px;
}

body > footer > .footer-filler {
    grid-area: filler;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
body > footer > .footer-filler > section {
    padding: 8px;
}
body > footer > .footer-filler > section > h1 {
    text-transform: uppercase;
}

body > footer > .footer-line {
    grid-area: footer-line;
}

body > footer > .footer-line > ul {
    justify-self: end;
    grid-area: nav;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
body > footer > .footer-line > ul > li {
    padding: 4px 8px;
}

body > footer > .footer-filler p {
    white-space: pre-line;
}

@media (min-width: 480px) {
    body > footer {
        grid-template-areas: ". logo logo filler filler filler filler filler filler filler filler filler filler ."
        ". footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line . ";

    }

}

@media (min-width: 768px) {
    body > footer {
        grid-template-areas: ". logo logo filler filler filler filler filler filler filler filler . . ."
        ". footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line footer-line . ";

    }
    body > footer > .footer-filler {
        flex-direction: row;
    }
    body > footer > .footer-line > ul {
        flex-direction: row;
        }
    body > footer > .footer-line > ul > li:first-of-type {
        padding-left: 0;
    }
    body > footer > .footer-line > ul > li:last-of-type {
        flex-grow: 1;
        text-align: right;
    }
}

.overlayboxes {
    max-width: 15em;
    display: block;
    right: 0;
    top: 2em;
}
.overlayboxes a{
    color: white;
 }
.redboxoverlay {
    text-align: center;
    background: #e51433;
    margin-bottom: 1em;
    padding: 1em;

}
.redboxoverlay h1 {
    font-weight: 600;
}
@media (min-width: 480px) {
    .overlayboxes {
        position: absolute;
    }
}