/* Layouts */
.c-mp-blog__title { align-items: center; display: flex; gap: 1.5rem; justify-content: space-between; margin-block-end: 2rem; }
.c-mp-blog__title [data-js="toggle-blog-sidebar"] { color: #323232; font-size: 1.75rem; font-weight: 800; }
.blog__title { color: #323232; font-size: 1.75rem; font-weight: 800; }


.l-blog { display: grid; gap: 2rem; }
.l-blog.two-columns-left { grid-template-columns: minmax(300px, 20%) auto; }
.l-blog.two-columns-right { grid-template-columns: auto minmax(300px, 20%); }
.c-mp-blog__posts { margin-block-end: 2rem; }

.mp-pager > div { align-items: center; display: flex; justify-content: space-between; }
.mp-pager .navi { font-size: 1rem; font-weight: 700; }
.mp-pager .navi a { align-items: center; display: flex; gap: .25rem; }

@media ( width <= 991px ) {
    .l-blog { display: block; }
}


/* List */

.c-mp-blog--list .c-mp-post { border: 1px solid #ececec; border-radius: .25rem; display: flex; gap: 1.5rem; padding: 1rem; }
.c-mp-blog--list .c-mp-post__thumbnail { flex: 0 0 200px; }
.c-mp-blog--list .c-mp-post__thumbnail .thumbnail { border-radius: .25rem; height: 100%; object-fit: cover; width: 100%; }
.c-mp-blog--list .c-mp-post__header h2 { font-size: 1.5rem; font-weight: 800; }
.c-mp-blog--list .c-mp-post__header a { color: #323232; }
.c-mp-blog--list .c-mp-post__wrapper { display: flex; flex-direction: column; }
.c-mp-blog--list .c-mp-post__content p { color: #666; font-size: 1rem; line-height: 1.5; }
.c-mp-blog--list .fix-me { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-top: auto;}
.c-mp-blog--list .c-mp-post__read-more { font-size: 1rem; font-weight: 600; text-decoration: underline; }
.c-mp-blog--list .c-mp-post__icons { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.c-mp-blog--list .c-mp-post + .c-mp-post { margin-block-start: 1.5rem; }

@media ( width <= 1199px ) {
    .c-mp-blog--list .c-mp-post { flex-wrap: wrap; }
    .c-mp-blog--list .c-mp-post__thumbnail { flex: 1; }
}

/* Grid */

.c-mp-blog--grid .c-mp-blog__posts { display: grid; gap: 2rem 1.5rem; grid-auto-flow: row dense; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.c-mp-blog--grid .c-mp-post { display: flex; flex-direction: column; }
.c-mp-blog--grid .c-mp-post__thumbnail { height: 220px; }
.c-mp-blog--grid .c-mp-post__thumbnail .thumbnail { border-radius: .25rem; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.c-mp-blog--grid .c-mp-post__wrapper { display: flex; flex: 1; flex-direction: column; margin-block-start: 1rem; }
.c-mp-blog--grid .c-mp-post__header h2 { font-size: 1.25rem; font-weight: 800; }
.c-mp-blog--grid .mp-tags a { color: #888; }
.c-mp-blog--grid .categories { display: none; }
.c-mp-blog--grid .c-mp-post__content { margin-block-start: .5rem; }
.c-mp-blog--grid .c-mp-post__content p { -webkit-box-orient: vertical; display: -webkit-box;  font-size: 1rem; -webkit-line-clamp: 3; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.c-mp-blog--grid .mp-details { align-items: center; display: flex; justify-content: space-between; margin-top: auto; }
.c-mp-blog--grid .c-mp-post__icons > *:not(.c-mp-post__date) { display: none; }
.c-mp-blog--grid .c-mp-post__read-more { font-size: 1rem; font-weight: 600; text-decoration: underline; }

/* Carousel */ 

.mp-blog-carousel .owl-stage { display: flex; }
.mp-blog-carousel__item { display: flex; flex-direction: column; height: 100%; }
.mp-blog-carousel__item .thumbnail-container { height: 220px; }
.mp-blog-carousel__item .thumbnail-container .thumbnail { border-radius: .25rem; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.mp-blog-carousel__item .mp-blog-item__title { font-size: 1.25rem; font-weight: 800; margin-block-end: .5rem; margin-block-start: 1rem; }
.mp-blog-carousel__item .mp-blog-item__title a { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.mp-blog-carousel__item .mp-blog-item__content p { -webkit-box-orient: vertical; display: -webkit-box;  font-size: 1rem; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis;  }
.mp-blog-carousel__item .mp-blog-item__footer { align-items: center; display: flex; justify-content: space-between; margin-top: auto; }
.mp-blog-carousel__item .mp-blog-item__footer > *:not(.c-mp-post__date, .mp-blog-item__read-more) { display: none; }
.mp-blog-carousel__item .mp-blog-item__footer .mp-blog-item__read-more { font-size: 1rem; font-weight: 700; text-decoration: underline; }



@media ( width >= 1300px ) {
    .c-mp-blog--grid .c-mp-post--w3 { grid-column: span 3; }
    .c-mp-blog--grid .c-mp-post--w3 .c-mp-post__thumbnail { height: 280px; }
    .c-mp-blog--grid .c-mp-post--w2 { grid-column: span 2; }
}

/* Sidebar  */
.block-title:has(.mpblog__title) { margin-block: 1rem; }
.mpblog__title { font-size: 1.15rem; font-weight: 600;  }

@media (width > 991px ) {
    [data-js="toggle-blog-sidebar"] { display: none; }
}

@media (width <= 991px) {
    .l-blog aside.right {  background: #fff; border-left: 1px solid #ececec; height: 100vh; padding: 1rem; position: fixed; right: -100%; top: 0; transition: right .4s cubic-bezier(0.075, 0.82, 0.165, 1); width: min(300px, 70vw); z-index: 99999; }
    .l-blog aside .close { display: block; float: none; margin-block-end: 1rem; text-align: right; width: 100%; }
    .l-blog aside.right.open { right: 0; }
    .l-blog aside.right > div:not(.close) { max-height: 95vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    .l-blog aside.right > div::-webkit-scrollbar { display: none; }
}

/* Recent posts */

.mbplog-recent-posts { display: flex; flex-direction: column; gap: .5rem;  }
.mpblog-recent-post { align-items: center; display: flex; gap: .5rem; }
.mpblog-recent-post .thumbnail { flex-basis: 70px; flex-shrink: 0; }
.mpblog-recent-post img { border-radius: .25rem; }
.mp-recent-post-title { -webkit-box-orient: vertical; color: #323232; display: -webkit-box; font-size: 1rem; font-weight: bold; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.mp-recent-post-date { color: #888; }

/* Archives */

.mpblog-archives-item, .mpblog-category { display: block; font-size: 1rem; margin-block: .5rem; }
.mpblog-archives-item::first-letter { text-transform: uppercase; }
.mpblog-archives-item, .mpblog-category { text-decoration: underline; }

/* Search */ 
.mpblog__search { display: flex; gap: .5rem; }
.mpblog__search input { border: 1px solid #ececec; border-radius: .25rem; box-shadow: none; font-size: 1rem; height: auto; line-height: 1.5; }
.mpblog__search .button { border-radius: .25rem; font-size: 1rem; }

/* Comments */

.mpblog-recent-comment-post-title { color: #323232; font-size: 1rem; font-weight: bold; }
.mpblog-recent-comment .mp-comment-thesis { color: #888; padding-left: .5rem; }


/* Posts */ 

.mpblog-post .post-thumbnail .thumbnail { border-radius: .25rem; margin-block-end: 1rem; width: 100%;  }
.mpblog-post__title { color: #323232; font-size: 1.5rem; font-weight: 800; margin-block-end: .5rem;  }

.mpblog-post .mp-header { color: #666; display: flex; flex-direction: row-reverse; font-size: 1rem; justify-content: space-between; margin-block-end: 1rem; }
.mpblog-post :is(.c-mp-post__views, .c-mp-post__comments) { display: none; }

.mpblog-post .mp-content > * { font-size: 1rem; line-height: 1.5; }
.mpblog-post .mp-tags { display: none; }
.mpblog-post .comments-action { align-items: center; display: flex; justify-content: space-between; } 
.mpblog-post .leave-a-comment { font-size: 1rem; text-decoration: underline; }
.mpblog-post .leave-a-comment a { font-weight: 600; }

.mpblog-post .customer-action-bar { align-items: center; display: flex; justify-content: space-between; margin-block: 1rem; }
.mpblog-post .mpblog-social-container ul { align-items: center; display: flex; gap: .5rem; }
.mpblog-post .mpblog-social-container ul i { font-size: 1.75rem; }

.mpblog-social-container .fa-twitter { color: #1DA1F2; }
.mpblog-social-container .fa-facebook { color: #1877F2; }
.mpblog-social-container .fa-reddit { color: #FF4500; }
.mpblog-social-container .fa-pinterest { color: #E60023; }
.mpblog-social-container .fa-linkedin { color: #0077B5; }


/* Comments */

.comments__title { display: block; font-size: 1.25rem; font-weight: 700; margin-block: 1.5rem 1rem; }

.comments-form-title { font-size: 1.25rem; font-weight: 800; margin-block-end: 1rem; }
.mp-comment-form fieldset { display: flex; flex-direction: column; gap: 1rem; }
.mp-comment-form :is(input, textarea) { border: 1px solid #ececec; box-shadow: none; font-size: 1rem; height: auto; line-height: 1.5; min-height: 44px; }
.mp-comment-form label[for="subscribe_to_replies"] { color: #323232; font-size: 1rem; font-weight: 400; }
.mp-comment-form .form-actions .button { border-radius: .25rem; font-size: 1rem; margin-block-start: 1rem; }

.mp-comment-content { border: 1px solid #ececec; border-radius: .25rem; font-size: 1rem;  }
.mp-comment-content .mp-comment-header { align-items: center; background: #f7f7f7; display: flex; flex-wrap: wrap; font-size: 1rem; gap: 0 .5rem; justify-content: space-between; margin-block-end: .5rem; padding: .5rem 1rem;  }
.mp-comment-content .mp-comment-header .mp-comment-date { color: #888; font-size: .875rem; }
.mp-comment-content .mp-comment-header .mp-comment-willapprove { color: #888; font-size: .875rem; width: 100%; }
.mp-comment-content .mp-comment-text { padding-inline: 1rem; }
.mp-comment-content .form-actions { margin-block-start: .5rem; padding: .5rem 1rem; text-align: right; }
.mp-comment-content .mp-comment-reply-btn { font-weight: bold; text-decoration: underline; }
.mp-replies { margin-block-start: 1.5rem; }
.mp-replies .mpblog-comment:has(.is-reply) { padding-left: 1rem; }