@import "variables";
@import "mixins";
@import "@assets/css/wpbs-search.scss";

.archive-banner {
  .banner-content {
    padding: (2rem * 1.6);
    background-color: $col-prm;
    margin: $space-lg 0;
    h1 {
      color: $white;
    }
  }
}

.banner-search {
  @include wpbs-search;
}

.card {
  .image {
    padding-bottom: 75%;
    position: relative;
    .label {
      position: absolute;
      top: (1rem * 1.6);
      left: (1rem * 1.6);
      padding: 0.5em 1em;
      background-color: $col-prm;
      color: $white;
    }
  }
  .content {
    position: relative;
    background: #f5f5f5;
    padding: (2rem * 1.6) (3rem * 1.6) 10rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .button {
      border-radius: 0;
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}

$gaps: (2rem * 1.6);
.archive-content {
  margin: $space-md 0 $space-lg;
  .masonry-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense;
    column-gap: $gaps;
    @include bp("md") {
      grid-template-columns: 1fr;
    }
    .masonry-item {
      margin: 0;
      display: grid;
      grid-template-rows: 1fr auto;
      margin-bottom: $gaps;
      break-inside: avoid;
      grid-row-end: span 3;
      order: 3;
      a {
        text-decoration: none;
        &:hover {
          // color: unset;
        }
      }
      @include bp("md") {
        margin-bottom: (2rem * 1.6);
      }
      .card {
        display: flex;
        flex-flow: column nowrap;
        height: 100%;
        .image {
          position: relative;
          .not-avaliable,
          .max-capacity-message {
            display: none;

            box-sizing: border-box;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            // width: 30%;

            padding: (1rem * 1.6);
            background-color: white;
            border-radius: 3px;
            text-align: center;
          }
          img {
            width: 100%;
          }
        }

        .content {
          flex-grow: 1;
          .info-couple {
            display: flex;
            flex-direction: row;
            align-items: flex-start;

            b {
              display: inline-block;
              min-width: 15rem;
              margin-bottom: 0.5rem;
            }
            @include bp("md") {
              display: flex;
              margin-top: (1rem * 1.6);
              flex-direction: column;
            }
          }
          .facilities-wrap {
            display: flex;
            flex-wrap: wrap;
            .facility-item {
              display: flex;
              align-items: center;
              margin-right: 1rem;
              margin-bottom: 1rem;
              img {
                margin-right: 1rem;
                width: 2rem;
                height: 2rem;
              }
            }
          }
          .content-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            width: 100%;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: space-between;
            @include bp("sm") {
              flex-direction: column;
            }
            .button {
              flex: 1 0 50%;
              max-width: 50%;
              float: none;
              position: relative;
              padding: $btn-pd-mobile;
              @include bp("sm") {
                flex: 1 0 100%;
                max-width: 100%;
                width: 100%;
              }
            }
            .default-price {
              flex: 1 0 50%;
              max-width: 50%;
              background: $black;
              padding: $btn-pd-mobile;
              border: 2px solid $black;
              text-align: center;
              @include bp("sm") {
                flex: 1 0 100%;
                max-width: 100%;
                width: 100%;
              }
            }
          }
        }
      }
      &.content-item {
        order: 1;
        grid-row-end: span 1;
        padding: $gaps $gaps 0 $gaps;
        @include bp("md") {
          padding: 0;
        }
        p {
          white-space: break-spaces;
        }
      }
      &.booking-avaliable {
        order: 2;
      }
      &.booking-not-avaliable,
      &.booking-exceeded-capacity {
        filter: grayscale(1);
        opacity: 0.6;
        .button {
          @include button-outline;
          border-radius: 0;
        }
      }
      &.booking-not-avaliable {
        .not-avaliable {
          display: block !important;
        }
      }
      &.booking-exceeded-capacity {
        .max-capacity-message {
          display: block !important;
        }
      }
    }
  }
}
