/*********************************************
 * Blog Detail
**********************************************/
/* menu */
body.blog-detail [data-menu*="sticky"] {
    box-shadow:0 8px 24px rgba(39, 28, 28, .12), 0 2px 4px rgba(39, 28, 28, .08);
}

/* header */
body.blog-detail .site-breadcrumbs {
    min-height:100px; padding:15px var(--br-gap-side);
    display:flex; align-items:center; margin-bottom:64px;
}
.site-banner-image {aspect-ratio:770/460; border-radius:2px; overflow:hidden;}
.site-content__header:before {
    content:"";
    width:76px; height:2px; background:var(--br-color-primary);
    position:absolute; left:0; bottom:-1px;
}

/* column */
.site-content__blog.has-sidebar {--width-sidebar:clamp(300px, 26vw, 370px);}
.site-content__wrapper {width:calc(100% - var(--width-sidebar)); padding-right:32px;}
.br-blog-sidebar {width:var(--width-sidebar);}

/* content */
.site-content__main {
    --br-spacing-default:var(--br-spacing-40);
}
.site-content__main p:has(> img) {margin-top:var(--br-spacing-40); --br-spacing-paragraph:var(--br-spacing-40);}
.site-content__main p + h2 {margin-top:32px;}
.site-content__main p img {
    border-radius:4px;
    box-shadow:0 8px 24px rgba(39, 28, 28, .12), 0 2px 4px rgba(39, 28, 28, .08);
}

/* share */
.site-content__share {padding-top:24px;}
.site-content__share:before {
    content:"";
    width:70px; height:1px; background:rgba(29, 29, 31, .08);
    position:absolute; left:0; top:0;
}

/* sidebar */
.br-blog-sidebar__inner {
    top:20px;
    padding:16px; border:1px solid rgba(29, 29, 31, .08); border-radius:4px;
}
.br-blog-sidebar__inner .wpb_content_element:last-child {margin-bottom:0;}
.br-blog-sidebar__inner .wpb_text_column p:last-child [class*="btn_primary"] {width:100%;}
body.scroll-up .br-blog-sidebar__inner {top:calc(20px + var(--br-header-height-sticky));}

/*********************************************
 * Blog Detail Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    body.blog-detail .site-breadcrumbs {margin-bottom:0;}
    .site-content__wrapper {padding-right:var(--br-gap-container)}
}
@media only screen and (max-width:767px) {
    .site-content__blog.has-sidebar {flex-direction:column; position:relative; padding-bottom:64px;}
    .site-content__wrapper {width:100%; padding-right:0;}
    .br-blog-sidebar {width:100%;}
    .site-content__share {
        position:absolute; bottom:0; left:0; right:0;
        padding-top:0;
    }
    .site-content__share:before {display:none;}
}