/* first experience homepage styles

   developer:   rmiske
   requires:    /common/framework/css/framework.es.css
                /start/css/global.css.es
   ========================================================================== */


/* ==========================================================================
   general/overrides
   ========================================================================== */
#home h2 {
    color: #fff;
    font-size: 2.25rem;
    font-weight: 300;
    padding-bottom: 2.5rem;
    text-align: center; 
}


/*cards*/
.card-wrap {
    display: grid;
    grid-gap: 1.875rem;
}
a.card {
    background: #024b75;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 0.625rem 0 rgba(51,51,51,0.3);
    display: grid;
    padding: 1.25rem;
    grid-template-columns: 1fr;
    grid-template-rows: 3.5rem 1fr;
    text-align: center;
}

.card h3 { 
    color: #fff;
    font-size: 1.125rem; 
    font-weight: 600;
    padding-bottom: 1.25rem;
}
.card img { margin: 0 auto; }
.card p { 
    color: var(--grey-33);
    display: none; 
    font-size: 0.9375rem; 
}

.card.full { 
    font-size: 1.1875rem; 
    grid-template-rows: 1fr; 
}

a.card:hover { background: var(--gold); }
a.card:hover img { display: block; }
a.card:hover h3 { color: var(--grey-33); }
a.card:hover p { display: none; }



/* ==========================================================================
   intro
   ========================================================================== */
#intro {
    padding-bottom: 0;
    padding-top: 1.875rem;
}
#intro .inner {
    align-items: center;
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr 26.875rem /*430px*/;
}

#intro .intro-img { font-size: 0; }
.intro-img img { height: auto; max-width: 100%; }
#intro .intro-text {  }


#intro h1 {
    color: #0079c1;
    font-size: 3.125rem;
    font-weight: 600;
    padding-bottom: 2rem;
}

#intro p { 
    font-size: 1.625rem; 
    font-weight: 300;
}



/* ==========================================================================
   by featured topic
   ========================================================================== */
#featured-topic { background: #0079c1; }
#featured-topic .card-wrap { grid-template-columns: 1fr 1fr 1fr; }

#featured-topic .card p { height: 16.8125rem; /*269px*/ }
#featured-topic .card img {
    height: 16.8125rem; /*269px*/
    width: 17.0625rem; /*269px*/
}




/* ========================================================================== 
   responsive breakpoint styles 
   ========================================================================== */
@media (max-width: 1200px) {}


@media (max-width: 900px) { 
    section:not(#intro) .inner { max-width: calc(600px + 1.875rem); }


    #intro .inner { grid-template-columns: 1fr 300px; }

    #intro h1 { font-size: 36px; padding-bottom: 1.5rem; }
    #intro p { font-size: 22px; }


    .card-wrap { grid-template-columns: 1fr 1fr !important; }
}


@media (max-width: 767px) {
    #intro .inner { grid-template-columns: 1fr; }
    #intro .intro-img { display: none; }
    #intro p { padding-bottom: 1.875rem; }
}


@media (max-width: 600px) { 
    #home h2 { font-size: 22px; padding-bottom: 20px; }



    #intro { padding-top: 24px; }
    #intro .inner { 
        grid-gap: 20px; 
        grid-template-columns: 1fr; 
        text-align: center;
    }

    #intro .intro-img { display: block; justify-self: center; }
    .intro-img img { max-width: 300px; width: 80%; }

    #intro h1 { 
        font-size: 28px; 
        margin: 0 auto;
        max-width: 500px; 
        padding-bottom: 20px; 
    }
    #intro p { font-size: 22px; padding-bottom: 0;}

   
    .card-wrap { grid-gap: 20px; grid-template-columns: 1fr !important; }
    a.card {
        
        grid-template-rows: 1fr;
        text-align: left;
    }
    #featured-topic a.card { grid-template-columns: 50px 1fr; }

    .card img {
        height: 50px !important; 
        order: 1; 
        width: auto !important; 
    }
    .card h3 {
        align-self: center; 
        font-size: 16px; 
        order: 2; 
        padding-bottom: 0; 
        padding-left: 10px; 
    }
    #featured-topic .card h3 { padding-left: 26px; }
    .card p { order: 3; }

    a.card:hover img { display: block; }
    a.card:hover p { display: none; }
}


@media (max-width: 320px) {
    #intro h1 { font-size: 24px; padding-bottom: 16px; }
    #intro p { font-size: 18px; }
}