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

* {
  box-sizing: border-box;
}
.content {
  position: relative;
  margin-bottom: 60px;

  &--background {
    background: var(--tide-booking-content-background);
    padding: 60px 0px;
  }

  &__container {
    position: relative;
    @include mixins.container-wide();

    &--medium {
      @include mixins.container-medium();
    }

    &--small {
      @include mixins.container-small();
    }
  }

  &__qsm {
    margin-top: -216px;
    margin-bottom: 60px;
  }

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

    &__row {
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: var(--tide-booking-content-title-text-align);
      margin-bottom: 30px;
    }
  }

  &__colums {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;

    &--2 {
      @include mixins.media-sm {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &--3 {
      @include mixins.media-sm {
        grid-template-columns: repeat(2, 1fr);
      }

      @include mixins.media-lg {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    &--2-1 {
      @include mixins.media-sm {
        grid-template-columns: 1.5fr 1fr;
      }
    }

    &--4 {
      @include mixins.media-sm {
        grid-template-columns: repeat(2, 1fr);
      }

      @include mixins.media-lg {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }
}

.text-in-image {
  background: var(--tide-booking-text-in-image-background-color);
  border-radius: var(--tide-booking-text-in-image-border-radius);
  border: var(--tide-booking-text-in-image-border);
  box-shadow: var(--tide-booking-text-in-image-box-shadow);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 20px;

  &:hover {
    .text-in-image__image {
      transform: scale(1.05);
    }
  }

  &::before {
    content: ' ';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--tide-booking-text-in-image-overlay-background);
    z-index: 2;
  }

  &__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;

    &__wrapper {
      position: absolute;
    }
  }

  &__content {
    position: relative;
    background: transparent;
    border-radius: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
  }

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

  &__description {
    color: var(--tide-booking-text-in-image-description-color);
    font-family: var(--tide-booking-text-in-image-description-font-family);
    font-weight: var(--tide-booking-text-in-image-description-font-weight);
    line-height: var(--tide-booking-text-in-image-description-line-height);
    text-align: var(--tide-booking-text-in-image-description-text-align);
    margin: 0;
    margin-top: 10px;
  }

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

    @include mixins.media-sm {
      min-width: 200px;
      max-width: 200px;
    }
  }
}

.image-card {
  background: var(--tide-booking-image-card-background);
  border: var(--tide-booking-image-card-border);
  border-radius: var(--tide-booking-image-card-border-radius);
  box-shadow: var(--tide-booking-image-card-box-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-in-out;

  &:hover {
    transform: translateY(-5px);
  }

  &__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  &__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    flex-grow: 1;
  }

  &__top {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

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

  &__options {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 15px;
  }

  &__option {
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;

    span {
      color: #333;
      font-weight: 300;
    }
  }

  &__description {
    color: var(--tide-booking-image-card-description-color);
    font-family: var(--tide-booking-image-card-description-font-family);
    font-weight: var(--tide-booking-image-card-description-font-weight);
    line-height: var(--tide-booking-image-card-description-line-height);
    margin: 0;
  }

  &__bottom {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;
  }

  &__price {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    color: #666;

    &--amount {
      font-size: 18px;
      font-weight: 700;
      color: #333;
      margin: 0px;
    }
  }
}

.newsletter {
  background: var(--tide-booking-newsletter-background);
  border: var(--tide-booking-newsletter-border);
  border-radius: var(--tide-booking-newsletter-border-radius);
  box-shadow: var(--tide-booking-newsletter-box-shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;

  @include mixins.media-sm {
    padding: 60px;
  }

  &__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  &__title {
    color: var(--tide-booking-newsletter-title-color);
    font-family: var(--tide-booking-newsletter-title-font-family);
    font-weight: var(--tide-booking-newsletter-title-font-weight);
    line-height: var(--tide-booking-newsletter-title-line-height);
    margin-bottom: 20px;
  }

  &__description {
    color: var(--tide-booking-newsletter-description-color);
    font-family: var(--tide-booking-newsletter-description-font-family);
    font-weight: var(--tide-booking-newsletter-description-font-weight);
    line-height: var(--tide-booking-newsletter-description-line-height);
    margin: 0;
    margin-bottom: 30px;
  }

  &__form {
    width: 100%;

    &__group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;

      @include mixins.media-sm {
        flex-direction: row;
      }

      .cta {
        width: 100%;

        @include mixins.media-sm {
          min-width: 200px;
          max-width: 200px;
        }
      }
    }
  }

  &__input {
    width: 100%;
  }
}