@use "sass:math";

.text-page {
  @apply py-5;
  padding-bottom: 0 !important;
  padding-top: 0px;

  .section__header {
    @apply mb-5;
    padding-top: 0px;
  }

  .section__text {
    @apply text-lg leading-7 mb-5 sm:mb-10;
  }

  &__image {
    @apply block w-full h-48 sm:h-96 object-center my-10 rounded-lg;
    border-radius: 10px;
    margin-bottom: 40px;
    margin-top: 30px;
  }

  &__blocks {
    margin-bottom: 80px;
  }

  .text-block {
    @apply bg-white h-full shadow-lg overflow-hidden;
    border-radius: 15px;
    &__header {
      @apply flex justify-center items-center bg-secondary text-white p-spacer font-medium text-base leading-5;

      &.start {
        @apply justify-start;
      }

      .icon {
        margin-right: 10px;
        width: 28px;
        height: 28px;
      }

      .title {
        @apply truncate;
        padding: 5px 0;
        padding-left: 10px;
      }
    }

    &__body {
      @apply p-5 text-sm text-grayDark leading-loose;
    }
  }

  &__contacts {
    .contact {
      @apply text-lg leading-7 text-grayDark;

      &__header {
        @apply flex items-center text-black leading-5 font-medium mb-spacer;

        .icon {
          @apply w-5 h-5;
          margin-right: 15px;
        }
      }

      &__body {
        a {
          @apply text-grayDark hover:text-black;
        }

        .schedule {
          li {
            @apply flex items-center whitespace-nowrap;
          }

          &__start {
            @apply flex-1 sm:flex-none sm:w-20;
          }

          &__end {
            @apply flex-none sm:flex-1 pl-1;
          }
        }

        .social {
          @apply flex items-center;

          li {
            @apply pr-spacer;
            padding-right: 15px;

            .icon {
              @apply block w-5 h-5;
            }
          }
        }
      }
    }

    @screen sm {
      columns: 2;
      column-fill: auto;
      column-gap: 20px;
      column-span: all;

      .contact {
        page-break-inside: avoid;
        break-inside: avoid;
      }
    }

    @screen md {
      columns: unset;
    }
  }

  &__map {
    @apply relative w-full overflow-hidden mb-5;
    border-radius: 10px;
    padding-bottom: math.div(9, 16) * 100%;
    padding-top: 168px;
    margin-bottom: 60px;

    @screen md {
      padding-bottom: math.div(9, 12) * 100%;
    }

    @screen lg {
      padding-bottom: math.div(580, 1200) * 100%;
    }

    #contact-map {
      @apply absolute inset-0 w-full h-full;

      div.gmnoprint,
      div.gmnoscreen, img[src*="https://maps.gstatic.com/mapfiles/api-3/images/"]
      {
        @apply hidden;
      }
    }
  }
}

.btn.btn--outline.send-legal {
  @apply border-2 border-primary;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-top: 35px;
}
.home-about .text-wraper {
  padding-left: 20px;
}
.text-wraper {
  position: relative;
  top: 0px;
}

.page__blocks {
  @apply gap-y-5;
  .col {
    @apply pr-2.5;
    &:not(:first-child) {
      @apply pl-2.5;
    }
  }

}

.contact-section-first {
  margin-bottom: 10px;
}

.contact-section-second{
  margin-bottom: 10px;
}

.col-dmenu-text{
  padding-left: 90px;
}
.simple_bar_wrapper {
  @apply max-h-96 overscroll-contain;
}

.social-block{
  padding-top: 15px;
}
.text-page__map{
  margin-top: 20px;
}
.contact-address{
  padding-top: 20px;
  padding-bottom: 20px;
}


.contact-time{
  padding-bottom: 15px;
}

.contact-address-item{
  padding-bottom: 15px;
}

.contact-tel,
.contact-hour{
  padding-bottom: 10px;
  margin-top: 20px;
}

.text-content{
  max-height: 450px;
}

.contact-phone,
.contact-mail,
.contact-adres{
  padding-bottom: 5px;
}

.text-block__body.last-contact{
  padding-bottom: 0px;
}

a.btn.btn--outline.active.product-heart{
  padding: 12px;
}

img.text-page__image{
  width: 100%;
  max-height: 450px;
  object-fit: cover;
}

.btn-container{
  display: flex;
  justify-content: start;
}