/*** Projects Page Styling ***/

/* Tentative Global */
a {
  &.standard-button {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000;
    background: rgba(255, 212, 28, 1);
    padding: 7px 25px;
    border-radius: 10px;
    font-size: 16px;
    height: 45px;
    transition: 0.5s ease;

    &:hover {
      filter: brightness(0.5);
    }
  }
}

/* Tentative Global - End */

/* Big Banner */
section.bigBanner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom-right-radius: 80px;

  .big-banner-contents {
    display: flex;
    flex-direction: column;
    align-items: center;

    .pseudo-title {
      margin-bottom: 15px;

      img {
        @media (max-width: 767px) {
          width: 80.3vw;
        }
      }
    }

    .sub-title {
      width: 100%;
      max-width: 780px;

      p {
        color: #fff;
        font-size: 19px;
        font-weight: 400;
        line-height: 26px;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: center;
        margin-bottom: 0;
      }
    }
  }
}

/* Big Banner -End */

/* Property Cards */
section.propertyCards {
  &.void-top {
    padding-top: 0;
  }

  &.void-bottom {
    padding-bottom: 0;
  }

  &.void-y {
    padding-top: 0;
    padding-bottom: 0;
  }

  .property-card-contents {
    .header-text {
      margin-bottom: 40px;

      .header-text-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        a {
            color: #23868B;
            text-decoration: none;
        }

        a:hover {
            color: #144f6f;
        }
      }

      h1 {
        color: #142a3c;
        font-family: "Inria Sans", sans-serif;
        font-size: 48px;
        line-height: 68px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 24px;

        @media (max-width: 767px) {
          line-height: 50px;
        }
      }

      h2 {
        color: #142a3c;
        font-family: "Inria Sans", sans-serif;
        font-size: 48px;
        line-height: 58px;
        font-weight: 400;
        text-align: center;
        margin-bottom: 24px;

        @media (max-width: 767px) {
          line-height: 50px;
        }
      }

      p {
        color: #676767;
        font-family: "Inria Sans", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        text-align: center;
        width: 100%;
        /* max-width: 726px; */
        max-width: 811px;
        position: relative;
        margin: 0 auto;
        margin-bottom: 0;
      }
    }

    .property-grid {
      &.three-col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;

        @media (max-width: 991px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 767px) {
          grid-template-columns: 1fr;
        }
      }

      .property-card {
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        width: 100%;
        height: 100vh;
        max-height: 520px;
        position: relative;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            to top,
            rgba(20, 79, 111, 0.6) 0%,
            rgba(20, 79, 111, 0.5) 10%,
            rgba(20, 79, 111, 0.2) 20%,
            rgba(20, 79, 111, 0.1) 27%,
            rgba(20, 79, 111, 0) 30%
          );
          border-radius: 10px;
          z-index: 1;
        }

        &.available {
          .sold-out-tag {
            visibility: hidden;
          }
        }

        &.sold-out {
          .sold-out-tag {
            position: relative;
            left: -24px;
            padding: 18px;
            background: #ffd41c;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            width: 100px;

            span {
              font-family: "Inria Sans", sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400;
            }
          }
        }

        .overlay {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: linear-gradient(
            180deg,
            rgba(20, 79, 111, 0) 0,
            rgba(20, 79, 111, 0.9) 100%
          );
          width: 100%;
          height: 100%;
          z-index: 2;
          bottom: -360px;
          transition: 0.5s ease;

          img {
            width: 100%;
            max-width: 250px;
            margin-bottom: 50px;
          }

          p {
            font-family: "Inria Sans", sans-serif;
            color: #fff;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            margin-bottom: 50px;
          }
        }

        &:hover {
          .overlay {
            bottom: 0;
            z-index: 3;
          }
        }

        .inside {
          padding: 30px 24px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          z-index: 2;

          .details {
            h3 {
              color: #fff;
              font-family: "Inria Sans", sans-serif;
              font-weight: 400;
              font-size: 28px;
              line-height: 28px;
              margin-bottom: 0;
            }

            p {
              color: #fff;
              font-family: "Inria Sans", sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400;
              margin-bottom: 0;

              &.property-subtitle {
                font-style: italic;
              }
            }
          }
        }
      }

      &.four-col {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;

        @media (max-width: 991px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 767px) {
          grid-template-columns: 1fr;
        }

        .property-card {
          max-height: 380px;
        }
      }
    }
  }
}

/* Property Cards - End */


/* For Sale - subtitle removal */
  section.propertyCards {
    &.void-null {
      .property-card-contents {
        .property-grid {
          .property-card:first-child {
            .inside {
              .details {
                p {
                  &.property-subtitle {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
/* For Sale - subtitle removal - end */

/*** Projects Page Styling - End ***/