/**
 * MultiPress Enterprise Single Article
 * BBC / Reuters / CNN Style
 */

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.article-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:40px;
    align-items:start;
    margin:40px auto;
}

.article-main{
    min-width:0;
    overflow:hidden;
}

.article-sidebar{
    width:340px;
    min-width:340px;
}

.article-sidebar .sticky{
    position:sticky;
    top:100px;
}

/* ==========================================================================
   HERO IMAGE
   ========================================================================== */

.article-hero{
    margin:25px 0;
    overflow:hidden;
    border-radius:14px;
}

.article-hero img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}

/* ==========================================================================
   ARTICLE CONTENT
   ========================================================================== */

.article-content{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.article-content p{
    margin:0 0 1.6rem;
    line-height:1.9;
}

.article-content img,
.article-content figure img,
.article-content .wp-caption img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:35px auto;
    border-radius:12px;
}

.article-content figure,
.article-content .wp-caption{
    display:block;
    width:100% !important;
    max-width:100%;
    margin:35px 0;
}

.article-content iframe,
.article-content video,
.article-content embed,
.article-content object{
    max-width:100%;
}

.article-content table{
    display:block;
    overflow-x:auto;
    max-width:100%;
}

.article-content pre{
    overflow:auto;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.article-sidebar img{
    max-width:100%;
    height:auto;
    display:block;
}

.article-sidebar .widget{
    background:#fff;
    padding:20px;
    margin-bottom:25px;
    border-radius:12px;
}

.article-sidebar .widget-title{
    margin-bottom:15px;
    font-size:1.1rem;
    font-weight:700;
}

/* ==========================================================================
   RELATED
   ========================================================================== */

.related-posts{
    margin:70px 0;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:1200px){

    .article-layout{
        grid-template-columns:1fr;
    }

    .article-sidebar{
        width:100%;
        min-width:0;
    }

    .article-sidebar .sticky{
        position:static;
    }

    .related-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .article-layout{
        gap:30px;
    }

    .related-grid{
        grid-template-columns:1fr;
    }

    .article-title{
        font-size:2rem;
    }
}