@use '../components/mixins' as mixins;

.header {
  background: var(--tide-booking-header-background);
  border: var(--tide-booking-header-border);
  border-radius: var(--tide-booking-header-border-radius);
  box-shadow: var(--tide-booking-header-box-shadow);
  padding: 224px 20px;
  padding-top: 60px;
  margin-bottom: 40px;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 400px;

  @include mixins.media-md {
    margin-bottom: 60px;
    min-height: 600px;
  }

  &--small {
    padding: 160px 20px;

    @include mixins.media-md {
      min-height: 400px;
    }
  }

  &::before {
    content: ' ';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tide-booking-header-overlay-background);
    z-index: 1;
  }

  &__image,
  &__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  &__container {
    @include mixins.container-wide();
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  &__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  &__title {
    color: var(--tide-booking-header-title-color);
    font-family: var(--tide-booking-header-title-font-family);
    font-weight: var(--tide-booking-header-title-font-weight);
    line-height: var(--tide-booking-header-title-line-height);
    text-align: var(--tide-booking-header-title-text-align);
    margin: 0;
  }

  &__description {
    color: var(--tide-booking-header-description-color);
    font-family: var(--tide-booking-header-description-font-family);
    font-weight: var(--tide-booking-header-description-font-weight);
    line-height: var(--tide-booking-header-description-line-height);
    text-align: var(--tide-booking-header-description-text-align);
    margin: 0;
    max-width: 600px;
  }

  &__btn {
    margin: 0 auto;
    margin-top: 20px;
    width: auto;
  }

  &__slider {
    .slider {
      &__viewport {
        position: absolute;
        left: 0px;
        top: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
      }

      &__container {
        padding: 0px;
        max-width: 100%;
        position: inherit;
      }
    }
  }
}