/* Homepage Styles */
    
#top-news-content{
    background-color: var(--grey-bg-clr);
}

@media (max-width: 670px){
    #top-news-content{
        padding-left: 0;
        padding-right: 0;
    }
}



    

/* Hero Section Styles */
    
.hero-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.hero-featured{
    grid-column: 1/3;
    border: 1px solid #E6E6E6;
    overflow: hidden;
    width: 100%;
    align-self: stretch;
    position: relative;
}

.hero-featured .thumb-image, .hero-secondary-card .thumb-image{
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.hero-featured .thumb-image img{
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 3;
}

.hero-featured .card-copy, .hero-secondary-card .card-copy{
    position: absolute;
    bottom: 0;
    padding: 6.5rem 1rem 1rem 1rem;
    width: 100%;
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.81) 23%, rgba(0,0,0,0.7) 36%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%)
}

.hero-featured-copy-side{
    margin-bottom: 1.5rem;
    border: 1px solid #E6E6E6;
    height: 500px;
}

article.text-top-card.hero-featured-copy-side .card-copy{
    height: 100%;
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.81) 23%, rgba(0,0,0,0.7) 36%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%);
    width: 650px;
    padding: 0 20rem 0 1rem;
    align-content: center;
    display: grid;
    top: 0;
    bottom: 0;
}

.hero-right{
    display: grid;
    grid-column: 3/4;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1.5rem;
}

.hero-secondary-card{
    border: 1px solid #E6E6E6;
    overflow: hidden;
    width: 100%;
    height: 245px;
    position: relative;
}

.hero-secondary-card img{
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

.hero-grid article .card-copy h2 a{
    color: white;
}

.hero-grid article .card-copy h2 a:hover {
    color: white;
    opacity: .7;
}

.hero-grid article .card-copy h3 a{
    color: white;
}

.hero-grid article .card-copy h3 a:hover {
    color: white;
    opacity: .7;
}

.hero-grid article .card-copy h4 a{
    color: white;
}

.hero-grid article .card-copy h4 a:hover {
    color: white;
    opacity: .7;
}

.hero-grid article .card-copy p{
    color: #B2B2B2;
}

.hero-bottom{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:1.5rem;
    margin-bottom: 1.5rem;
}

.hero-bottom-card{
    width: 100%;
    background-color: white;
    border: 1px solid #E6E6E6;
}

.hero-bottom-card .thumb-image{
    width: 100%;
    overflow: hidden;
}

.hero-bottom-card .thumb-image img{
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
}

.hero-bottom-card .card-copy{
    padding: 1rem;
}

.grid-content-sidebar .container-fluid{
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1100px){
    #top-news-content .sticky-top{
        position: relative;
    }
}

@media (max-width: 900px){
    .hero-featured{
        grid-column: 1/4;
        height: 520px;
    }
    
    .hero-right{
        display: grid;
        grid-column: 1/4;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    .hero-secondary-card{ 
        height: 250px;
    }
    
    .hero-bottom{
        grid-template-columns: 1fr;
        margin-bottom: 3rem;
    }
    
    .hero-bottom-card{
        display: grid;
        grid-template-columns: auto 1fr;
    }
    
    .hero-bottom-card .thumb-image {
      width: 280px;
    }
    
    .hero-bottom-card .thumb-image img {
      aspect-ratio: 5 / 3;
    }
}

@media (max-width: 670px){
    #top-news-content .grid-content-sidebar{
        padding-top: 0 !important;
    }
    
    .hero-featured{
        border: none;
    }
    
    .hero-right, .hero-bottom, .trending-list, .sidebar-container, .recent-news-list{
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left: var(--bs-gutter-x,.75rem);
    }
    
    .hero-featured-copy-side{
        margin-bottom: 1.5rem;
        border: none;
    }
    
    article.text-top-card.hero-featured-copy-side .card-copy{
        padding: 6.5rem 1rem 1rem 1rem;
        width: 100%;
        background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.81) 23%, rgba(0,0,0,0.7) 36%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%);
        height: auto;
        top: auto;
    }
}

@media (max-width: 550px){
    .hero-secondary-card{ 
        grid-column: 1/3;
        height: 350px;
    }
    
    .hero-bottom-card{
        display: grid;
        grid-template-columns: 1fr;
    }  
    
    .hero-bottom-card .thumb-image {
        width: 100%;
        height: 225px;
    }
}





/* Trending Section Styles */

.trending-list h1{
    padding: .5rem 0;
    border-top: 3px solid #CCCCCC;
/*    border-bottom: 1px solid #B3B3B3;*/
    margin-bottom: 1rem;
}

.trending-list-items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1.5rem;
}

.trending-list-items article{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: .5rem;
    padding: 0 0 1rem 0;
    margin: 0 0 1rem 0;
    border-bottom: 1px solid #B3B3B3;
}

.trending-list-items article h2{
    font-size: 2.75rem;
    line-height: 0.75;
    color: var(--pv-clr);
}

.trending-list-items article a{
    text-decoration: none;
    color: var(--dark);
}

@media (max-width: 900px){
    .trending-list-items{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px){
    .trending-list-items{
        grid-template-columns: 1fr;
    }
    
    .trending-list-items article:last-child{
        margin: 0 0 0 0;
    }
}







#sponsored-content, #feat-supp-section{
    background-color: #1A1A1A;
    padding: 3rem 0;
}

#sponsored-content h1{
    border-top: 3px solid #4D4D4D;
/*    border-bottom: 1px solid #B3B3B3;*/
}

.sponsored-items-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5rem;
}

.text-top-card.sponsored-item{
    border: 1px solid #333333;
    overflow: hidden;
    width: 100%;
    align-self: stretch;
    position: relative;
    min-height: 250px;
}

.sponsored-item .thumb-image{
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.sponsored-item .thumb-image img{
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 3;
}

.sponsored-item .card-copy{
    position: absolute;
    bottom: 0;
    padding: 6.5rem 1rem 1rem 1rem;
    width: 100%;
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.81) 23%, rgba(0,0,0,0.7) 36%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%)
}

.sponsored-item .card-copy h3{
    margin-bottom: 0;
}



@media (max-width: 900px){
    .sponsored-items-container{
        grid-template-columns: 1fr 1fr;
    }
    
    .sponsored-item:nth-last-child(1):nth-child(2n+1){
        grid-column: 1 / span 1;
    }
}

@media (max-width: 650px){
    .sponsored-items-container{
        grid-template-columns: 1fr;
    }
}







/* Current Issue Styles */


#current-issues{
    padding: 3rem 0 0 0;
}

.body-cover-carousel-item .cover-img-container {
  padding: 0.25rem 1rem 0.25rem 1rem;
}

.selected-issue-section{
    background-color: var(--dark);
    margin-top: 4.5rem;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    padding-bottom: .5rem;
}

.cover-img-container.selected-cover > div{
    padding-bottom: 10px;
    border-bottom: 3px solid var(--pv-clr);
}

#current-issues .current-issue-card {
    max-width: 900px;
    margin: 0 auto;
    background-color: white;
    position: relative;
    top: -2.55rem;
    padding: 0rem 2rem 2rem 2rem;
}

#current-issues .current-issue-card h2, #current-issues .current-issue-card p, #current-issues .current-issue-card h3, #current-issues .current-issue-card h3 a, #current-issues .current-issue-card .toc-btn {
    color: var(--dark);
}










/* Featured Videos Section Styles */

#featured-videos{
    margin: 3rem 0;
}

#featured-videos .card-copy h2, #featured-videos .card-copy h3{
    margin-bottom: 0;
}

.featVid-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5rem;
}

.featVid-left{
    grid-column: 1/9;
}

/*.featVid-left .card-copy{*/
/*    display: grid;*/
/*    grid-template-columns: 60px 1fr;*/
/*    grid-gap: 1rem;*/
/*    align-items: center;*/
/*}*/

.featVid-left .card-copy{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    align-items: center;
}

.featVid-left.text-top-card .card-copy {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 0;
    width: auto;
    background: transparent;
}

.featVid-left.text-top-card .card__image-link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.81) 23%, rgba(0,0,0,0.7) 36%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%);
  transition: .2s ease-in-out;
  opacity: 1;
}

.featVid-left .card-icon svg{
    width: 100%;
}

.featVid-right-grid{
    display: grid;
    grid-column: 9/13;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1.5rem;
}

.featVid-right:nth-child(1){
    grid-row: 1/2;
}

.featVid-right:nth-child(2){
    grid-row: 2/3;
}


.featVid-left .thumb-image img {
    aspect-ratio: 16 / 9;
}


.featVid-right .thumb-image img {
    aspect-ratio: 16/9;
}

@media (max-width: 900px) {
    .featVid-left{
        grid-column: 1/13;
    }
    
    .featVid-right-grid{
        grid-column: 1/13;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:1fr;
    }
    
    .featVid-right:nth-child(1){
        grid-row: 1/2;
        grid-column: 1/2
    }

    .featVid-right:nth-child(2){
        grid-row: 1/2;
        grid-column: 2/3
    }
}

@media (max-width: 650px) {
    .featVid-right-grid{
        grid-column: 1/13;
        grid-template-columns: 1fr;
    }
    
    .featVid-left .thumb-image img {
        aspect-ratio: 10 / 9;
    }

    .featVid-right:nth-child(1){
        grid-row: 1/2;
        grid-column: 1/2;
    }

    .featVid-right:nth-child(2){
        grid-row: 2/3;
        grid-column: 1/2;
    }
}






#featured-podcasts-audio{
    padding: 3rem 0;
}

.pod-text-grid{
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 1.5rem;
    align-items: flex-start;
    padding: 0 0 1.5rem 0;
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid #B3B3B3;
}

.pod-text-grid:last-child{
    margin: 0 0 0 0;
}

.pod-text-grid .thumb-image img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 800px) {
    .pod-text-grid{
        grid-template-columns: 150px 1fr;
    }
}







#featured-events{
    padding: 3rem 0;
}

.thumb-text-grid{
    display: grid;
    grid-template-columns: 325px 1fr;
    grid-gap: 1.5rem;
    align-items: flex-start;
    padding: 0 0 1.5rem 0;
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid #B3B3B3;
}

.thumb-text-grid:last-child{
    margin: 0 0 0 0;
}

.thumb-text-grid .thumb-image img{
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 800px) {
    .thumb-text-grid{
        grid-template-columns: 1fr 2fr;
        
    }
}

@media (max-width: 550px) {
    .thumb-text-grid{
        grid-template-columns: 1fr;
    }
}






/* Web Exclusives Section */

#web-exclusives-section{
    padding: 3rem 0;
}

.web-exclusive-container{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 1.5rem;
}

.web-exclusive-container .text-top-card .thumb-image {
    aspect-ratio: 16/9;
}

.web-exclusive-container .white-card .thumb-image img {
    aspect-ratio: 12/9;
}


@media (max-width: 800px) {
    .web-exclusive-container{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .web-exclusive-container .text-top-card{
        grid-column: 1/3;
    }
    
    .web-exclusive-container .white-card:nth-of-type(2){
        grid-column: 1/2;
    }
    .web-exclusive-container .white-card:nth-of-type(3){
        grid-column: 2/3;
    }
}

@media (max-width: 550px) {
    .web-exclusive-container .white-card:nth-of-type(2){
        grid-column: 1/3;
    }
    .web-exclusive-container .white-card:nth-of-type(3){
        grid-column: 1/3;
    }
}





/* Featured Products Section */

#featured-prod-section{
    padding: 3rem 0;
}

#featured-prod-section > .container-fluid{
    position: relative;
}

.featured-prod-container{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5rem;
}

.featProd-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.5rem;
}

.featProd-left{
    grid-column: 1/9;
}

.featProd-left .card-copy{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.featProd-left .card-icon svg{
    width: 100%;
}

.featProd-right-grid{
    display: grid;
    grid-column: 9/13;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1.5rem;
}

.featProd-right:nth-child(1){
    grid-row: 1/2;
}

.featProd-right:nth-child(2){
    grid-row: 2/3;
}


.featProd-left .thumb-image img {
    aspect-ratio: 16 / 9;
}


.featProd-right .thumb-image img {
    aspect-ratio: 16/9;
}

.featured-prod-container .text-top-card h2, .featured-prod-container .text-top-card h3{
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .featProd-left{
        grid-column: 1/13;
    }
    
    .featProd-right-grid{
        grid-column: 1/13;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:1fr;
    }
    
    .featProd-right:nth-child(1){
        grid-row: 1/2;
        grid-column: 1/2
    }

    .featProd-right:nth-child(2){
        grid-row: 1/2;
        grid-column: 2/3
    }
}

@media (max-width: 650px) {
    .featProd-right-grid{
        grid-column: 1/13;
        grid-template-columns: 1fr;
    }
    
    .featProd-left .thumb-image img {
        aspect-ratio: 10 / 9;
    }

    .featProd-right:nth-child(1){
        grid-row: 1/2;
        grid-column: 1/2;
    }

    .featProd-right:nth-child(2){
        grid-row: 2/3;
        grid-column: 1/2;
    }
}





/* Homepage Socials Styles */

.socials-sidebar-widget{
    background-color: white;
    border: 1px solid #E6E6E6;
    padding: 1.5rem 2rem;
    text-align: center;
}

.socials-sidebar-widget h3{
    margin-bottom: 1rem;
}

.home-socials-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.home-socials-container svg{
    width: 35px;
}

.home-socials-container svg path{
    transition: .2s ease-in-out;
}

.pv-page .home-socials-container svg:hover path, .pv-page .home-socials-container svg:hover polygon{
    fill: var(--pv-clr);
    transition: .2s ease-in-out;
}






/* Recent News Styles */

.recent-news-list{
    margin: 3rem 0;
}

.recent-news-list-items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1.5rem;
}

.recent-news-list-items article {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .5rem;
  padding: 0 0 1rem 0;
  margin: 0 0 1rem 0;
  border-bottom: 1px solid #B3B3B3;
}

@media (max-width: 900px) {
    .recent-news-list-items {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 670px) {
    .recent-news-list-items {
        grid-template-columns: 1fr;
    }
}



/* Featured Supplements Section */

#feat-supp-section{
    border-top: .5px solid var(--grey-bg-clr);
    border-bottom: .5px solid var(--grey-bg-clr);
}

.feat-supp-container{
    display: grid;
    grid-template-columns: min-content auto;
    justify-content: center;
    grid-column-gap: 4rem;
    align-items: center;
    width: max-content;
    margin: 0 auto;
}

.feat-supp-container h1{
    border-top: 3px solid #4D4D4D;
}

.feat-supp-container .cover-text-grid{
    max-width: 600px;
    margin: 0 auto;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0; 
    align-items: center;
}

.feat-supp-container .cover-text-grid p{
    color: #B2B2B2;
}

@media (max-width: 845px) {
    .feat-supp-container{
        grid-template-columns: 1fr;
        justify-content: flex-start;
        width: 100%;
    }

    .feat-supp-container .cover-text-grid{
        margin: 0;
    }
}