/* CSS RESET */

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
  margin: 0;
}
/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}
/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
    8. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

/* REGULAR CSS */


body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  list-style: none;
  /* grayed out for some reason */
  scrollbar-gutter: none;
  overflow-y: auto;
  margin: 0 0 6rem 0;

  .desktop-show {
    display: none;
  }

  button {
    border-radius: 30px;
    padding: 0.2rem 2rem;
    cursor: pointer;
  }

  input {
    border-radius: 15px;
    height: 2.5rem;
    text-align: center;
    width: 100%;
  }

  header {
    padding: 1rem 1rem 1rem 1rem;

    
    /* HAMBURGER MENU */
    li {
      display: flex;
      justify-content: space-between;
      font-size: 30px;

      #logo {
      width: 10%;
      }
    }
  }

  main {
    display: grid;
    grid-template-columns: 1fr 2fr 0.5fr 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      ". hero hero hero ."
      "greeting greeting greeting greeting greeting"
      "locateMe locateMe centerLine inputSearch inputSearch"
      "filter filter filter filter filter"
      "section section section section section";
    row-gap: 1.5rem;
    column-gap: 1rem;
    justify-items: center;
    align-items: center;

    #hero-image {
      grid-area: hero;
    }

    #greeting {
      grid-area: greeting;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    #locate-me {
      grid-area: locateMe;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      row-gap: 1rem;
      img {
        width: 3rem;
      }
    }

    .center-line {
      grid-area: centerLine;
      align-items: center;
      width: 3px;
      height: 5rem;
      background-color: black;
      margin: 0 auto;
    }

    #input-search {
      grid-area: inputSearch;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding-right: 1rem;
      width: 100%;
      font-size: .8rem;
    }

    #filter-section {
      grid-area: filter;
      display: flex;
      align-items: center;
      justify-self: right;
      padding-right: 1rem;

      i {
        font-size: 2rem;
      }

      span {
        font-size: 20px;
      }
    }

    #deals-section {
      grid-area: section;
    }

    article {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "imgContainer imgContainer imgContainer imgContainer"
        "detailsLeft detailsLeft detailsLeft detailsRight";
      background-color: rgb(230, 227, 227);
      margin: 1rem;
      border-radius: 20px;
      padding-bottom: 20px;

      .deal-image-container {
        grid-area: imgContainer;
    
        .deal-cards-image {
        width: 100%;
        border-radius: 20px 20px 0 0;
      }
      }

      .deal-card-details {
        grid-area: detailsLeft;
        padding: 5px 20px;
      }

      .deal-card-details-right {
        grid-area: detailsRight;

        .deal-card-rating {
          justify-self: end;
        }

        .deal-card-info-button {
          align-self: end;
          justify-self: end;
          width: 80%;
          height: 2rem;
          font-size: .7rem;
          padding: 0;
        }
      }
    }

  }

  nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: rgb(217, 218, 219);
    padding: 5px 0;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 9px;

      .bi {
        font-size: 1.3rem;
      }
    }
  }
}

/* /////////////////////////////////////////////////////////////////////// */

@media (min-width: 768px) {

  .desktop-hide {
    display: none;
  }

  body {

    header {
      grid-area: header;
      height: 100%;
      
    }
  
    main {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr .5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "nav nav header header header header header header header header header header"
        "nav nav greeting greeting greeting greeting greeting hero hero hero hero ."
        "nav nav locateMe locateMe centerLine inputSearch inputSearch hero hero hero hero ."
        "nav nav filter filter filter filter filter filter filter filter filter filter"
        "nav nav section section section section section section section section section section"
      ;
    
      row-gap: 1.5rem;
      column-gap: 1rem;
      justify-items: center;
      align-items: center;
  
      #hero-image {
        grid-area: hero;
      }
  
      #greeting {
        grid-area: greeting;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* gap: 1rem; */
      }
  
      #locate-me {
        grid-area: locateMe;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
       
        margin-bottom: 10rem;
        img {
          width: 3rem;
        }
      }

      #input-search {
        grid-area: inputSearch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        row-gap: 1rem;
        font-size: .7rem;
        margin-bottom: 10rem;
      }
  
      .center-line {
        grid-area: centerLine;
        height: 80%;

      }
  
    
  
      #filter-section {
        grid-area: filter;
        display: flex;
        align-items: center;
        justify-self: right;
        padding-right: 1rem;
  
        i {
          font-size: 2rem;
        }
  
        span {
          font-size: 20px;
        }
      }
  
      #deals-section {
        grid-area: section;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "card card card"
        ;
        background-color: lightblue;
        border: solid 1px black;
        border-radius: 30px;
      }
  
      article {
        grid-area: card;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "imgContainer imgContainer imgContainer imgContainer"
          "detailsLeft detailsLeft detailsLeft detailsRight";
        margin: 1rem;
        padding-bottom: 20px;
  
        .deal-image-container {
          grid-area: imgContainer;
      
          .deal-cards-image {
          width: 100%;
          border-radius: 20px 20px 0 0;
          }
        }
  
        .deal-card-details {
          grid-area: detailsLeft;
          padding: 5px 20px;
        }
  
        .deal-card-details-right {
          grid-area: detailsRight;
  
          .deal-card-rating {
            justify-self: end;
          }
  
          .deal-card-info-button {
            align-self: end;
            justify-self: end;
            width: 80%;
            height: 2rem;
            font-size: .7rem;
            padding: 0;
          }
        }
      }

      .nav {
        grid-area: nav;
        background-color: red;
        height: 100%;
        width: 100%;
      }
    }

  }
}