/* BLOG LIST */
.body-container.blog-listing__outer-wrapper {
  padding: 0 12px;
}

.blog-listing__intro {
  background: #FBFBFF;
}

.blog-list-with-tags-wrapper {
  max-width: 1440px;
  margin: 0 auto;
}

.blog-list-with-tags__header {
  display: flex;
  margin-bottom: 32px;
  justify-content: space-between;
  align-items: center;
}

.blog-list-with-tags__header .blog-tags {
  margin-bottom: 0;
}

.blog-listing__intro .content-wrapper {
  max-width: 1624px;
  margin: 0 auto;
  padding: 0 12px;
}

/* BLOG POST */
.blog-post-wrapper {
  background: #FBFBFF;
}

.blog-post__featured-image-wrapper {
  max-height: 650px;
  overflow: hidden;
  margin-bottom:1.4rem;
}

.blog-post__featured-image-wrapper__image {
  width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: var(--image-ratio-style-2);
  /**** panoramic, blog hero ****/
}


.blog-post__article {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 16px;
}

.blog-post__article__title {
  margin: 1.4rem 0 10px 0;
}

.blog-post__article__meta {
  display: flex;
  gap: 5px;
  font-size: 16px;
  align-items: center;
  margin-bottom: 1.4rem;
}

.blog-post__article__meta__read-time,
.blog-post__article__meta__timestamp {
  font-size: 16px;
}

.blog-post__article__meta__social-links {
  margin-left:auto;
} 

.blog-post__article__meta__social-links__list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 16px;
}
  
.blog-post__article__meta__social-links__list__item{
  display: flex;
}

.blog-post__article__meta__social-links__list__item svg {
  height: 20px;
}


.blog-post__article__meta__timestamp {
  display: block;
}

.blog-post__article__body {
  max-width: 850px;
  margin: 56px auto 0 auto;
}

.blog-post__article__body ul {
  margin-left: 32px;
}

.blog-post__article-hero {
  display: flex;
  gap: 28px;
}

.blog-post__article-hero-content {
  flex: 1;
}

.blog-post__article-hero-image {
  flex: 1;
}

.blog-post__article-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.blog-post__article__button {
  display: flex;
  justify-content: center;
  margin: 32px auto 80px;
}

@media screen and (max-width: 768px) {
  .blog-post__article__meta{
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-post__article__meta__author,
  .blog-post__article__meta__read-time,
  .blog-post__article__meta__timestamp{
    width:100%;
  }

  .blog-post__article__meta__social-links__list,
  .blog-post__article__meta__social-links{
    margin-left: 0;
  }
  .blog-post__article__meta__social-links{
    margin-top:1rem;
  }
  
}

/* COMMENTS */


#comments-listing .comment-reply-to {
  color: ;
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: ;
}

#comments-listing .comment-reply-to:active {
  color: ;
}

.blog-comments {
  margin: 0 auto;
  width: 100%;
  max-width: calc(96ch - 32px);
  padding: 0 16px;
}

.blog-comments .new-comments {
  margin-top: 32px;
}

.blog-comments .new-comments .comment.depth-0 {
  border-top: 1px solid var(--grey-200);
  padding-top: 32px;
  margin-top: 32px;
}

.blog-comments .new-comments .comment.depth-0:last-child {
  border-bottom: 1px solid #eee;
  padding-bottom: 32px;
  margin-bottom: 32px;
}

.blog-comments .new-comments .comment.depth-1 {
  background-color: var(--grey-100);
  margin-left:32px;
  padding: 32px;
  position:relative;
}

.blog-comments .new-comments .comment.depth-1:after {
  content: '';
  position: absolute;
  left:16px;
  top:38px;
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--grey-500);
}


.blog-comments .hs-submit {
  text-align: center;
}

.blog-comments .comment-reply-to {
  border: 0 none;
}

.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
  background-color: transparent;
  text-decoration: underline;
}

.blog-comments .replying {
  padding: 32px;
  background-color: #eee;
  margin-bottom: 32px;
}

.blog-comments .replying .replying-to {
  font-weight: bold;
  margin-bottom: 32px;
  display: block;
}

.blog-comments .replying .hs-form-field>label {
  padding-left: 0;
}


.blog-comments .comment-reply-to.hs-button.secondary {
  display: block;
}

.blog_card_group-item {
  display: flex;
  row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 60px;
  /* space for navigation */
}

.blog_card_group-item.swiper-slide{
  height:auto;
}


@media screen and (min-width: 480px) {
  .add_border.swiper-slide {
    height: auto;
  }
}

.link_style-bullet {
  text-decoration: dotted;
}

.swiper.card_swiper-slide,
.swiper.card_swiper-fade,
.swiper.card_swiper-zoom {
  padding: 0 0 40px;
}


.add_border .blog_card_group__image-wrapper {
  padding: 20px;
}


/* NEW BLOG STYLES */

 /* CARDS */
 .blog_list__article__description__body {
  color: var(--primary-1);
}

.blog_list__article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--grey-000);
  border-radius: 8px;
}

.blog_list__article.swiper-slide{
  opacity:1;
  height:auto;
}

.blog_list__article__image-wrapper {
  display: flex;
  width: 100%;
  position: relative;
  padding:16px 16px 0;
}
.blog_list__article__image-wrapper.no-padding {
  padding:0;
}
 
.blog_list__article__post-link{ /*-- add image?? */
  line-height: 0;
  overflow: hidden;
  display: block;
  width:100%;
  border-radius: 16px;
}

.blog_list__article__image-wrapper__image{
  object-fit: cover;
  transition: transform 1s ease-in-out;
  aspect-ratio: var(--image-ratio-style-2);
  height: 230px;
  border-radius: 16px;
}

.blog_list__article__post-link:hover .blog_list__article__image-wrapper__image{ 
  transform: scale(1.1);
}


.blog_list__article__body {
  padding: 16px 16px 13px;
}

.blog_list__article__body a{
  text-decoration: none;
  color: initial;
}

.blog_list__article__header{
  display: flex;
}

.blog_list {
  color: initial;
}

.blog_list.text-left .blog_list__article__header {
  justify-content: flex-start;
}

.blog_list.text-right .blog_list__article__header {
  justify-content: flex-end;
}

.blog_list.text-center .blog_list__article__header {
  justify-content: center;
}

.blog_list__article__header__title {
  margin-bottom: 16px;
  margin-top: 0;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.blog_list__article__header__title a {
  color: var(--primary-1);
}

.blog_list__article__post-date-author {
  font-size: 14px;
  display: flex;
  gap: 8px;
}

.blog_list .text-left .blog_list__article__post-date-author {
  justify-content: flex-start;
}

.blog_list .text-right .blog_list__article__post-date-author {
  justify-content: flex-end;
}

.blog_list .text-center .blog_list__article__post-date-author {
  justify-content: center;
}

.blog_list__article__post-date-author__author {

}

.blog_list__article__post-date-author__author__link {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}


.blog_list__article__read-time {
  font-size: 12px;
}

.blog_list__article__description {
  display: flex;
}

.text-left .blog_list__article__description {
  justify-content: flex-start;
}

.text-right .blog_list__article__description {
  justify-content: flex-end;
}

.blog_list.text-right .blog_list__article__post-date-author {
  justify-content: flex-end;
}

.blog_list.text-center .blog_list__article__post-date-author {
  justify-content: center;
}

.text-center .blog_list__article__description {
  justify-content: center;
}

/* TAGS  */

.blog-tags { /* wrapper */
 display: block;
 margin-bottom:32px;
}

.blog-tags__list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.blog_list.text-left .blog-tags__list{
  justify-content: flex-start;
}

.blog_list.text-right .blog-tags__list{
  justify-content: flex-end;
}

.blog_list.text-center .blog-tags__list{
  justify-content: center;
}

.blog-tags__list__item{
 display: block;
}

.blog-post__article-hero-content .blog-tags__list__item__link,
.blog-tags--card.blog-tags .blog-tags__list__item__link {
  border-radius: 90px;
  border: 1px solid var(--primary-1);
  padding: 5px 20px;
}

.blog-list-with-tags__header .blog-tags__list__item__link {
  font-weight: 700;
}

.blog-tags__list__item__link {
  color: var(--primary-1);
  text-decoration: none;
  display: flex;
  padding: 8px 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.blog-tags__list__item__link:hover{
  text-decoration: underline;
}

.blog-post__article-hero-content .blog-tags__list__item__link:hover,
.blog-tags--card .blog-tags__list__item__link:hover{
  background: var(--primary-1);
  color: var(--grey-000);
  text-decoration: none;
}

.blog-tags__list__item__link--active{
  background: none;
  border: none;
  text-decoration: underline;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22.4px;
}

.blog-tags--card.blog-tags {
  margin-top:auto;
  margin-bottom:0;
}

.blog-tags--card .blog-tags__list {
  gap: 16px;
  padding: 0 16px 20px 16px;
}

.blog-tags--card .blog-tags__list__item__link { */
  padding: 4px 20px;
}

.blog-author-social-links{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-bottom:32px;
  margin-top:-24px;
}

.blog-author-social-link {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  height:24px;
  width:24px;
}

.blog-author-social-link span {
  display: none;
}

.blog-author-social-link--facebook {
  background-image: var(--facebook-icon);
}

.blog-author-social-link--instagram {
  background-image: var(--instagram-icon);
}

.blog-author-social-link--twitter {
  background-image: var(--xtwitter-icon);
}

.blog-author-social-link--linkedin {
  background-image: var(--linkedin-icon);
}
/* PAGENATION */

.page-load-button,
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:32px;
}

.blog-pagination__center {
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-pagination__view-more {
  margin: auto;
}

.blog-pagination__link {
  text-decoration: none;
  color: var(--primary-1);
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  border: 1px solid var(--primary-1);
}

.blog-pagination__link:hover:not(.blog-pagination__link.ellipses) {
  background: var(--primary-1);
}

.blog-pagination__link:hover svg {
  filter: brightness(0) invert(1);
}

.blog-pagination__link.ellipses{
  border-color:transparent;
}

.blog-pagination__link--active {
  font-weight: bold;
  pointer-events: none;
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  background: var(--primary-1);
  color: var(--grey-000);
}

.blog-pagination__link:hover,
.blog-pagination__link:focus {
  text-decoration: none;
}

.blog-pagination__link--prev {
  margin-right: 8px;
}

.blog-pagination__link--next {
  margin-left: 8px;
}

.blog-pagination__link.blog-pagination__link--prev .left_previous-icon,
.blog-pagination__link.blog-pagination__link--next .right_next-icon {
  vertical-align:middle;
}

.blog-pagination__link.blog-pagination__link--disabled {
  color: var(--grey-300);
  cursor: default;
  pointer-events: none;
}

.blog-pagination__number-link:hover,
.blog-pagination__number-link:focus {
  padding: 8px 6px 6px;
  background: var(--primary-1);
  color: var(--grey-000);
}

/* LAYOUT  */

/****************Grid Layout **************/

.blog_list {
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px
}

.blog_list--grid-col-2 {
  grid-template-columns: 1fr 1fr;
}

.blog_list--grid-col-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.blog_list--grid-col-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.blog-post__article .blog_list-wrapper {
  max-width: 1440px;
  margin: 44px auto 50px;
}

.blog-pagination__left,
.blog-pagination__right {
  display: flex;
  gap: 8px;
}

@media screen and (max-width: 1199px){
  .blog_list--grid-col-4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 1024px) {
  .blog-list-with-tags__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 959px) {
  .blog_list--grid-col-4,
  .blog_list--grid-col-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 768px) {
  .blog-post__article-hero {
    flex-direction: column-reverse;
  }
  
  .blog-post__featured-image-wrapper {
    margin-bottom: 0;
  }
  
  .blog-post__article__title {
    margin: 0 0 10px 0;
  }
  
  .blog-post__article__body {
    margin: 0 auto;
  }

  .blog-post__article .blog_list-wrapper {
    margin: 50px auto 0;
  }
  
  .blog-post__article {
    padding: 24px 16px;
  }

  .blog-pagination__link--prev,
  .blog-pagination__link--next {
    margin: 0;
  }

}

@media screen and (max-width: 559px) {
  .blog_list--grid-col-4,
  .blog_list--grid-col-3,
  .blog_list--grid-col-2{
    grid-template-columns: 1fr;
  }
  
  .blog-pagination {
    flex-direction: column;
    align-items: center;
    gap:16px;
    margin-top: 16px;
  }

  .blog-tags__list {
    row-gap: 8px;
  }
  
  .blog-list-with-tags__header .blog-tags__list__item__link {
    font-weight: 700;
    padding-bottom: 0;
  }
}