/*------------------------------------------------------------
BLOCKS CMS
====================================*/

// Section
.block-section {
  margin-bottom: 5rem;
  .block-section {
    margin: 0;
  }
}

// Banner
.block-banner {
  text-align: center;
  .img-wrapper {
    margin-bottom: 1.5rem;
  }
  .text-wrapper {
    font-size: 1.6rem;
    p {
      margin-bottom: 0;
    }
  }
  .title-wrapper {
    @extend .display-1;
  }
  .subtitle-wrapper {
    @extend .h3;
  }
  .btn {
    margin-top: 1.5rem;
  }
}

// Media + text
.block-media-text {
  & > .row {
    width: 100%;
  }
  .img-wrapper {
    margin-bottom: 2.5rem;
  }
  .title-wrapper {
    margin-bottom: 1.5rem;
  }
  .subtitle-wrapper {
    margin-top: -1rem;
    margin-bottom: 3.5rem;
  }
  p {
    margin-bottom: 0;
  }
  .btn {
    margin-top: 1.5rem;
  }
}

// Icon + text
.block-icon-text-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1.5rem;
}
.block-icon-text {
  @extend .h6;
  display: flex;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
  align-items: center;
  text-decoration: none;

  .text-wrapper {
    margin-left: 3rem;
    p {
      margin-bottom: 0;
    }
  }
}
a.block-icon-text:hover {
  color: $secondary;
}

// Text
.block-text {
  .title-wrapper, .subtitle-wrapper {
    margin-bottom: 1.5rem;
  }
  p:last-of-type {
    margin-bottom: 0;
  }
  .btn {
    margin-top: 1.5rem;
  }
}

// Title
.block-title {
  margin: 0;
  .title-wrapper {
    margin-bottom: 1.5rem;
  }
}

// Blockquote
.block-blockquote {
  .blockquote {
    padding: 1rem 0 1rem 2rem;
    border-left: 0.5rem solid $dark;
  }
  &.text-center {
    .blockquote {
      padding: 1rem 2rem 1rem 2rem;
      border-left: 0;
      border-bottom: 0.5rem solid $dark;
    }
  }
  &.text-right {
    .blockquote {
      padding: 1rem 2rem 1rem 0;
      border-left: 0;
      border-right: 0.5rem solid $dark;
    }
  }
}

// Button
.block-text-default + .block-button {
  margin-top: -3rem;
}

// Image
.block-img {
  .img-wrapper {
    display: block;
  }
}

// Video
.block-video-wrapper {
  position: relative;
  .icon-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .fa {
      font-size: 6rem;
      color: $white;
      text-shadow: 0 .3rem 1rem rgba($dark, .5);
    }
    svg {
      path {
        fill: $white;
        --webkit-filter: drop-shadow(0 .3rem 1rem rgba($dark, .5));
        filter: drop-shadow(0 .3rem 1rem rgba($dark, .5));
      }
    }
  }
}

// Product
.block-product-collection {
  .title-wrapper, .subtitle-wrapper {
    text-align: center;
    margin-bottom: 1rem;
    & > * {
      margin-bottom: 0;
    }
  }

  .btn-wrapper {
    margin-top: 10px;
    text-align: center;
    .btn {
      width: 100%;
    }
  }

  .block-product {
    margin-bottom: 0;
    height: 100%;
  }

  .block-button {
    margin-top: 2rem;
    text-align: center;
  }
}

// Block collection
.block-blocks-collection {
  .slick-dots {
    position: static;
  }

  .block-video-wrapper .icon-content {
    display: flex !important;
  }

  @include media-breakpoint-down(sm) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .slick-list {
      margin-bottom: 1.5rem;
    }

    .slick-arrow {
      position: static;
      order: 1;
      margin: 0;
    }
    .slick-prev {
      order: 1;
    }
    .slick-next {
      order: 3;
    }

    .slick-dots {
      order: 2;
      flex: 1;
    }
  }
  @include media-breakpoint-up(md) {
    .block-text, .block-blockquote {
      padding-inline: calc(#{$slider-arrow-width} + 1.5rem);
    }
  }
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-down(sm) {
  // Icon + text
  .block-icon-text {
    br {
      display: none;
    }
  }
}
@include media-breakpoint-only(md) {
  // Banners
  .col-md-6 .block-banner {
    .text-wrapper {
      padding: 0 1.5rem;
    }
    .title-wrapper {
      font-size: 3rem;
    }
  }
}
@include media-breakpoint-up(md) {
  // Banner
  .block-banner {
    position: relative;
    .img-wrapper {
      margin-bottom: 0;
    }
    .text-wrapper {
      position: absolute;
      bottom: 3rem;
      width: 100%;
      padding: 0 10%;
      z-index: 1;
      font-weight: $font-weight-light;
    }
    .btn {
      margin-top: 2rem;
    }

    &.light {
      .text-wrapper, .title-wrapper {
        color: $white;
      }
      .btn {
        color: $secondary;
        background: $white;
        border-color: $white;
        &.disabled, &:disabled {
          color: $secondary;
          background: $white;
        }
        &:hover {
          color: $secondary;
          background: $white;
          border-color: $light;
        }
      }
    }
  }

  // Media + text
  .block-media-text {
    display: flex;
    & > .row {
      align-items: center;
    }

    .img-wrapper {
      margin-bottom: 0;
    }

    .title-wrapper {
      margin-bottom: 2.5rem;
    }
    .subtitle-wrapper {
      margin-top: -1.5rem;
      margin-bottom: 3.5rem;
    }

    &.right {
      & > .row {
        flex-direction: row-reverse;
      }
    }
  }

  // Icon + text
  .block-icon-text {
    flex: 0 0 50%;
    margin-bottom: 2rem;
  }

  // Text
  .block-text {
    .btn {
      margin-top: 2rem;
    }
  }

  // Product
  .block-product-collection {
    .title-wrapper, .subtitle-wrapper {
      margin-bottom: 2rem;
    }
    .btn-wrapper {
      text-align: center;
      .btn {
        width: auto;
      }
    }

    .slick-arrow-btn {
      .slick-arrow {
        width: 5rem;
        height: 5rem;
        margin-top: -2.5rem;
      }
    }
  }
}
@include media-breakpoint-up(lg) {
  // Section
  .block-section {
    margin-bottom: 8rem;
  }

  // Banner
  .block-banner {
    .text-wrapper {
      padding: 0 15%;
      font-size: 2rem;
      line-height: 2.6rem;
    }
  }

  // Media + text
  .block-media-text {
    margin-bottom: 9rem;
    .text-wrapper {
      padding: 0 15%;
    }
  }

  // Icon + text
  .block-icon-text-row {
    justify-content: center;
  }
  .block-icon-text {
    flex-direction: column;
    flex: 1;
    max-width: 25%;
    margin-bottom: 0;
    text-align: center;
    .icon-pattern-wrapper {
      margin-right: 0;
      margin-bottom: 1rem;
      margin-left: 2rem;
    }
  }

  // Text
  .block-text {
    margin-bottom: 9rem;
  }

  // Title
  .block-title {
    margin: 0;
  }

  // Button
  .block-text-default + .block-button {
    margin-top: -6rem;
  }
}
