/**
 * Blog View
 */

* {
  scroll-behavior: unset;
}
.blog-view {
  overflow-x: hidden;
}

.blog-view__header {
  color: var(--color-neutral--1);
}

.blog-view h1,
.blog-view h2 {
  color : var(--color-brand--1);
}

.blog-view__breadcrumb {
  margin: 1.5rem 0;
}
.blog-view__header {
  margin: 0 0 2rem;
  text-align: center;
}
.blog-view__header-wrapper {
  display: flex;
  flex-direction: column-reverse;
}
.blog-view__attachment {

}
.blog-view__attachment .tns-outer button[data-action="start"]{
  display: none;
}
.blog-view__attachment .tns-outer button[data-action="stop"]{
  display: none;
}
.blog-view__filters {

}
.blog-view .article-teaser__text {
  color : var(--color-brand--1);
  font-family: var(--font-primary);
  font-weight: var(--fw-demi);
}
.blog-view .article-teaser__title {
  color : var(--color-neutral--1);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--content-size-xl);
}
.blog-view__sidebar {

}
@media all and (min-width: 1000px){
  .blog-view__header {
    max-width: 75%;
    margin: 0 0 3rem;
    text-align: left;
  }
  .blog-view__header-wrapper {
    flex-direction: column;
  }
}
@media all and (min-width: 1250px){
  .blog-view__header p {
    max-width: 641px;
  }
}

/**
 * Blog View Item
 */

.blog-view-item {

}
.blog-view-item__content {

}
.blog-view-item__title {
  font-size: 1.85rem;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  line-height: 130%;
  margin: 3rem 0 1.5rem;
}
.blog-view-item__see-more--desktop {
  display: none;
}
.blog-view-item__see-more--mobile {
  display: block;
}
@media all and (min-width: 550px){
  .blog-view-item__content {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 1rem));
    gap: 2rem;
  }
}
@media all and (min-width: 800px){
  .blog-view-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .blog-view-item__title {
    font-size: var(--heading-size-m);
    font-family: var(--font-primary);
    font-weight: var(--fw-medium);
    line-height: 130%;
    margin: 3rem 0;
    max-width: 78%;
  }
  .blog-view-item__see-more--mobile {
    display: none;
  }
  .blog-view-item__see-more--desktop {
    display: block;
  }
}


/**
 * Blog view highlight
 */

.blog-view-highlight {
  position: relative;
}
.blog-view-highlight__header {
  display: none;
}
.blog-view-highlight .tns-nav {
  position: absolute;
  bottom: 1rem;
  right: 50%;
  transform: translateX(50%);
  z-index: 1;
}
.blog-view-highlight .tns-nav button{
  margin-right: 3px;
  margin-left: 3px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .6s ease;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #fff;
  border: none;
  padding: 0;
}
.blog-view-highlight .tns-nav button.tns-nav-active {
  opacity: 1;
}
.blog-view-highlight__content {
  display: flex;
}
.blog-view-highlight .tns-liveregion,
.blog-view-highlight .tns-outer button[data-action="stop"] {
  display: none;
}
@media all and (min-width: 1000px){
  .blog-view-highlight__header {
    display: block;
    font-size: var(--heading-size-m);
    font-family: var(--font-primary);
    font-weight: var(--fw-medium);
    line-height: 130%;
    margin: 0 0 1.5rem 0;
  }
  .blog-view-highlight__content {
    display: grid;
    grid-template-areas:
    "a b"
    "a c"
    "a d";
    gap: 0.5rem 1rem;
  }
  .blog-view-highlight__content > a:nth-child(1){
    grid-area: a;
  }
  .blog-view-highlight__content > a:nth-child(2){
    grid-area: b;
  }
  .blog-view-highlight__content > a:nth-child(3){
    grid-area: c;
  }
  .blog-view-highlight__content > a:nth-child(4){
    grid-area: d;
  }
}


/**
 * Blog View Search
 */

.blog-view-search {
  margin: 1rem 0;
}
.blog-view-search .form--inline{
  display: flex;
  align-items: end;
  gap: 1rem;
}
.blog-view-search .form-item {
  margin: 0;
  float: none;
}
.blog-view-search label {
  color : var(--color-neutral--1);
}
.blog-view-search .form-item input {
  width: 100%;
  padding-right: 3rem;
  background-image: url(../../images/menu-icon/search--green.svg);
  background-position: 95% 50%;
  background-repeat: no-repeat;
  background-size: 20px 20px ;
  background-color: #F5F5F5;
  border-radius: 5px;
}
.blog-view-search .form-actions {
  margin: 0;
  clear: none;
}
.blog-view-search .form-submit {
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--font-primary);
  border-radius: 80px;
  transition: ease background-color 0.3s;
  text-decoration: none;
  width: initial;
  border: 1px solid;
  font-weight: var(--fw-medium);
  line-height: 120%;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background-color: var(--color-brand--2);
  color: var(--color-brand--4);
  border-color: var(--color-brand--2);
}
.blog-view-search .form-submit:hover {
  text-decoration: none;
  background-color: var(--color-brand--1);
  color: var(--color-brand--4);
  border-color: var(--color-brand--1);
}

/**
 * Blog View More
 */

.blog-view .more-link {
  text-align: center;
}
.blog-view .more-link a {
  position: relative;
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  color: #0A3A25;
  transition: all ease .15s;
  text-decoration: underline
}

.blog-view .more-link a::after {
  content: "";
  transition: all ease .15s;
}

.blog-view .more-link a:hover {
  color: var(--color-brand--2);
}

.blog-view .more-link a::after {
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-left: 0.5rem;
  background: url("../../images/icons/arrow--small--green.svg") center no-repeat;
  transform: translateY(2px);
}
.blog-view .more-link a:hover::after {
  margin-left: 1rem;
  background: url("../../images/icons/arrow--small--brand-2.svg") center no-repeat;

}
@media all and (min-width: 800px){
  .blog-view .more-link {
    text-align: right;
  }
}
@media all and (min-width: 1200px){
  .blog-view .more-link a {
    padding-bottom: 0.3rem;
    font-size: 1.1rem;
  }
}

/**
 * Aside Guide
 */

.blog-view-aside-guide .tns-outer {
  position: relative;
}
.blog-view-aside-guide .tns-liveregion,
.blog-view-aside-guide .tns-outer button[data-action="stop"],
.blog-view-aside-guide .tns-outer button[data-action="start"] {
  display: none;
}
.blog-view-aside-guide .tns-controls {
  text-align: right;
  margin: 1rem 0;
  position: absolute;
  top: -4rem;
  right: 0;
  z-index: 1;
}
.blog-view-aside-guide .tns-controls button{
  cursor: pointer;
}
.blog-view-aside-guide .tns-controls button:first-child,
.blog-view-aside-guide .tns-controls button:last-child {
  display: inline-block;
  width: 40px;
  height: 24px;
  text-indent: 50px;
  overflow: hidden;
  background: url(../../images/slider/arrow-next.svg) center no-repeat;
  background-size: contain;
  border: none;
  background-color: transparent;
}
.blog-view-aside-guide .tns-controls button:first-child {
  transform: rotateY(180deg);
}
.blog-view-aside-guide__header {
  font-size: var(--heading-size-l);
  font-family: var(--font-condensed);
  font-weight: var(--fw-demi);
  line-height: 130%;
  margin: 3rem 0 1.5rem;
}
.blog-view-aside-guide__content {
  display: flex;
}
@media all and (min-width: 800px){
  .blog-view-aside-guide__title {
    font-size: var(--heading-size-s);
    margin: 3rem 0;
  }
  .blog-view-aside-guide .tns-controls {
    top: -4.5rem;
  }
  .blog-view-aside-guide .more-link {
    text-align: center;
  }
}
@media all and (min-width: 1000px){
  .blog-view-aside-guide {
    background-color: var(--color-brand--5);
    padding: 2rem 1rem;
  }
  .blog-view-aside-guide__header {
    font-size: var(--heading-size-s);
    margin: 0 0 2rem;
  }
  .blog-view-aside-guide__content {
    display: block;
  }
  .blog-view-aside-guide .more-link a {
    font-size: 0.75rem;
  }
}
@media all and (min-width: 1200px){
  .blog-view-aside-guide .more-link a{
    font-size: 1.1rem;
  }
}
@media all and (min-width: 1300px){
  /* .blog-view-aside-guide__header {
    font-size: var(--heading-size-m);
  } */
}


/**
 * Blog view content
 */

.blog-view__content {
  margin: 2rem 0;
}
@media all and (min-width: 550px){
  .blog-view__content {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 1rem));
    gap: 2rem;
    height: fit-content;
  }
}

/**
 * Blog view empty
 */

.blog-view__empty {
  margin: 2rem 0;
}