/*****************************************
* Blog detail
*****************************************/
/* Article meta */
.br-article-meta__inner {display:flex; align-items:center; gap:8px; font-weight:600;}
.br-article-meta__inner time {padding-right:8px; border-right:3px solid #ffc714;}
.br-article-meta__info {display:flex; align-items:center; gap:4px;}
.br-article-meta__image {display:block; width:20px; aspect-ratio:1; background:#ffc714;}

/* sticky */
.website-wrapper {overflow:visible !important;}
@media only screen and (min-height:680px) {
    .br-blog-sidebar__list {position:sticky; top:60px;}
}

/* Side bar */
.article-sidebar {
    --width-sidebar:340px;
    display:flex;
}
.br-main-content__wrapper {width:calc(100% - var(--width-sidebar)); padding-right:40px;}
.br-blog-sidebar {width:var(--width-sidebar);}

/* center title */
.post-single-page .br-article-meta--center .post-title {text-align:center;}
.br-article-meta--center .br-article-meta {max-width:800px; margin-left:auto; margin-right:auto;}
.br-article-meta--center .br-article-meta__inner {justify-content:center;}

/* align left center */
.post-single-page .article-body-container:not(.br-article-meta--center) {max-width:100%; margin-left:0;}

/* List */
.br-blog-sidebar__items {margin-bottom:20px;}
.br-blog-sidebar__list {padding:30px 20px 20px; border:1px solid #000; border-radius:15px;}
.br-blog-sidebar__heading {
    --wd-tags-mb:15px;
    width:fit-content; margin-left:auto; margin-right:auto;
}
.br-blog-sidebar__heading:before {width:30px; top:-10px; left:-12px;}
.br-blog-sidebar .br-blog-item:not(:last-child) {margin-bottom:25px;}
.br-blog-sidebar .br-blog-item__thumbnail {overflow:hidden; border-radius:5px; --br-spacing-25:10px;}
.br-blog-sidebar .br-blog-item__thumbnail-bg {transition:transform .3s ease; aspect-ratio:16/10;}
.br-blog-sidebar .br-blog-item__thumbnail-bg:before {
    opacity:0; pointer-events:none; background:#000; z-index:1;
    transition:opacity .3s ease;
}
.br-blog-item__title {
    --wd-tags-mb:0px;
    font-size:16px; text-align:left;
}

.br-blog-sidebar .br-blog-item a:hover .br-blog-item__thumbnail-bg {transform:scale(1.05);}
.br-blog-sidebar .br-blog-item a:hover .br-blog-item__thumbnail-bg:before {opacity:.3;}

/* Image */
.br-blog-sidebar__image {
    display:block; overflow:hidden; margin-top:25px;
    aspect-ratio:3/4;
}
.br-blog-sidebar__image:before {background:#000; opacity:0; z-index:1; transition:opacity .3s ease;}
.br-blog-sidebar__image img {transition:transform .3s ease;}
.br-blog-sidebar__image:hover:before {opacity:.3;}
.br-blog-sidebar__image:hover img {transform:scale(1.05);}

/* button */
.br-blog-sidebar__button {
    padding:8px 20px 10px; margin:auto;
    display:block; width:fit-content;
    font-size:16px; font-weight:600;
}
.br-blog-sidebar__button:hover {background:#000 !important; color:#fff !important;}

/* No sidebar */
.article-sidebar.no-sidebar .br-main-content__wrapper {width:100%; padding-right:0;}

/* Button in popup */
.pswp__scroll-wrap a.btn_primary {
    position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:20;
    padding:10px 20px; font-weight:600; font-size:18px; white-space:nowrap;
}
.pswp__scroll-wrap a.btn_primary:hover, .pswp__container a.btn_primary:focus {--wd-primary-color:#fff; color:#000 !important;}


/*****************************************
* Blog detail - Responsive
*****************************************/
@media only screen and (max-width:1400px) {
    .br-main-content__wrapper {padding-right:15px;}
}
@media only screen and (max-width:1024px) {
    .article-sidebar {
        --width-sidebar:300px;
        display:flex;
    }
    .br-blog-sidebar__list {top:70px;}
}
@media only screen and (max-width:768px) {
    .article-sidebar {flex-direction:column;}
    .br-main-content__wrapper {width:100%; padding-right:0; margin-bottom:40px;}
    .br-blog-sidebar {width:100%; display:flex; align-items:flex-start; gap:25px 15px; margin-bottom:40px;}
    .br-blog-sidebar__list {width:100%;}
    .br-blog-sidebar__image {margin-top:0;}
}