/* blog styles */
.blog-heading-link{
    background-color: var(--dark);
    color:white;
    text-decoration: none;
    margin-bottom: 2rem;
}

.blog-heading-link:hover{
    background-color: var(--green);
}

.blog-heading-link-text{
    display: flex;
    flex:1;
    color:white;
    padding:0.5rem;
    align-items: center;
}

.blog-heading-link-icon{
    flex: 0 0 40px;
    width:40px;
    background-color: var(--gold);
    transition: var(--transition);
    padding:6px;
}

.blog-heading-link:hover .blog-heading-link-icon{
    background-color: var(--red);
    transition: var(--transition);
}


.bylines{
    padding:0.5rem 0;
}

.byline-item{
    display: flex;
    align-items: center;
    padding:0.25rem 0;
}

.byline-image{
    width:60px;
    height:60px;
}

.byline-image .person-card-image{
    width:44px;
    height:44px;
}

.byline-title{
    display: flex;
    align-items: center;
    padding:0 1rem;
    font-size: 1rem;
}


.blog-detail-sub-content{
    margin-top:1rem;
    padding:1rem 0;
    border-top:1px solid var(--dark);
    font-size:0.875rem;
}

@media (min-width: 576px) {
      
    .page-content{
        border-right:1px dotted var(--theme);
        padding-right:1rem;
    }
  
}

.blog-detail-date{
    display: inline-flex;
    background-color: var(--dark);
    color:white;
    font-weight: var(--strong);
    padding:2px 0.5rem;
    align-content: center;
}

.post-featured-image img{
    width:100%;
    max-width: 100%;
    height:auto;
    margin: 0 0 1rem 0;
}


.blogs-home{
    background:url(/site/assets/images/HomeblogBoxBG.jpg) center center no-repeat;
    background-size: cover;
    display: flex;
    margin-bottom:2rem;
}

.blogs-home-title {
	flex: 0 0 4rem;
	background-color: var(--dark);
	font-family: var(--font-block);
	font-size: 2.8rem;
	color: var(--blue);
	text-transform: uppercase;
	align-items: center;
	display: flex;
	padding-top: 1rem;
    margin-bottom: 2rem;
}


.card-grid{
    display: grid;
    grid-template-columns: 1fr;
}

.blogs-card-grid .blog-card:first-of-type{
    grid-column: 1 / -1;
  }

.blog-card {
    background-color: white;
    display:flex;
    flex:1;
    flex-direction: column;
    text-decoration: none;
    margin-bottom: 2rem;
    position: relative;
    border:1px solid #999;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.blog-card-label{
    position: absolute;
    top:0;
    left:0;
}

.card-featured .blog-card-label::after{
    display: inline-flex;
    content: 'Featured';
    color:white;
    padding: 0.2rem 1rem;
    background-color: var(--red);
    text-align: center;
    font-size:0.875rem;
    font-weight: var(--strong);
    text-transform: uppercase;
}

@media (min-width: 576px) {

    .card-grid{
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 2rem;
    }

}

@media (min-width: 776px) {

    .card-grid{
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 2rem;
    }

    .card-grid-tertiary{
        grid-template-columns: 1fr 1fr;
    }

    .card-featured{
        flex-direction: row;
    }
    

}

@media (min-width: 992px) {
    .card-grid{
        grid-column-gap: 6rem;
    }
}

.card-featured .blog-card-image{
    flex:1;
}

.card-featured .blog-card-meta{
    flex:1;
}

.card-featured picture{
    width:100%;
    height: 100%;
}

.blog-card-image img{
    width:100%;
    max-width: 100%;
    height:auto;
    object-fit: cover;
}

.card-featured .blog-card-image img{
    width:100%;
    max-width: 100%;
    height:100%;
    max-height: 100%;
    object-fit: cover;
}

.card-label {
	background-color: var(--dark);
	color: white;
	display: inline-flex;
	padding: 2px 16px;
	min-width: 100px;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
	font-weight: var(--strong);
    text-transform: uppercase;
}


.card-title{
    font-size: 1.25rem;
    font-weight: var(--strong);
    color:var(--dark);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.card-featured .card-title{
    font-size: 2rem;
}

.blog-card:hover .card-title{
    text-decoration: underline;
}

.card-summary{
    font-size: 1rem;
    color:var(--dark);
    line-height: 1.4;
}

.card-featured .card-summary{
    font-size: 1.125rem;
}

.card-tertiary .card-title{
    font-size: 1.25rem;
}

.card-tertiary .card-summary,
.card-tertiary .card-tags{
    display: none;
}


.tag {
    display:inline-block;
    text-transform:uppercase;
    background-color:var(--red);
    color:white;
    font-size: 0.875rem;
    font-weight: var(--strong);
    padding:.1rem 1rem .1rem 1rem;
    text-decoration:none;
    transition:var(--transition);
    margin:0 1rem 1rem 0;
   }

   .tag:hover{
       background-color: var(--green);
       color:white;
   }

   .card-tags{
       padding-top:1rem;
       margin-top:auto;
   }
   .tag-nolink{
       color:var(--dark);
       border:1px solid var(--dark);
       background-color: white;
   }

   .tag-nolink:hover{
    background-color: white;
    color:var(--dark);
}