@import "./components/HeroSection.css";

#recommendations-navbar-selection {
  color: #ff8960;
}

.Recommendations-Section-Headers {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding: 0 83px;
}

.Recommendations-Section-Headers-Box {
  display: flex;
  position: relative;
  max-width: 1590px;
  flex-direction: row;
  width: 100%;
  min-width: 1024px;
  grid-gap: 82px;
  align-items: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  overflow-x: scroll;
}

.Recommendations-Section-Headers-Box::-webkit-scrollbar {
  display: none;
}

.Recommendations-Section-Headers-Header {
  padding: 0 12px;
  padding-bottom: 33px;
  padding-top: 31px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  position: relative;
  top: 1px;
  cursor: pointer;
}

.Recommendations-Section-Headers-Header.selected {
  color: #ff8960;
  border-bottom: 2px solid #ff8960;
}

.Recommendations-Body-Section {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding: 0 83px;
}

.Recommendations-Body-Section-Types {
  display: flex;
  position: relative;
  max-width: 1590px;
  flex-direction: column;
  width: 100%;
  min-width: 1024px;
  padding-top: 56px;
  padding-bottom: 80px;
  grid-gap: 40px;
}

.Recommendations-Body-Section-Types-Header {
  display: flex;
  position: relative;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.Recommendations-Body-Section-Types-Header-Heading {
  color: #000;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 0.75;
  letter-spacing: 0.8px;
}

.Recommendations-Body-Section-Types-Header-Button {
  color: #fff;
  text-align: center;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 0.77;
  text-transform: uppercase;
  border-radius: 5px;
  background: #ff8960;
  padding: 18px 34px;
  cursor: pointer;
}

.Recommendations-Body-Section-Types-Content {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  flex-direction: row;
}

#Book .Recommendations-Body-Section-Types-Content {
  grid-gap: calc((((78 - 20) / (1920 - 1245)) * (100vw - 1245px)) + 20px);
}

#Movie .Recommendations-Body-Section-Types-Content {
  grid-gap: calc((((76 - 20) / (1920 - 1245)) * (100vw - 1245px)) + 20px);
}

#Video .Recommendations-Body-Section-Types-Content {
  grid-gap: 20px;
}

#Article .Recommendations-Body-Section-Types-Content {
  grid-gap: 33.6px;
  flex-wrap: wrap;
  flex-direction: row;
}

#Heros .Recommendations-Body-Section-Types-Content {
  grid-gap: calc((((80 - 20) / (1920 - 1245)) * (100vw - 1245px)) + 20px);
}

.Recommendations-Body-Section-Types-Content-Box {
  display: none;
  position: relative;
  grid-gap: 27px;
  flex-direction: column;
}

.show .Recommendations-Body-Section-Types-Content-Box {
  display: flex;
}

#Article .Recommendations-Body-Section-Types-Content-Box {
  width: calc(50% - 16.8px); 
  flex-direction: row;
  flex-wrap: wrap;
}

#Article:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 10) {
  display: flex;
}

.Recommendations-Body-Section-Types-Content-Box-imgTag {
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.Recommendations-Body-Section-Types-Content-Box-Title {
  color: #00171f;
  text-align: justify;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.66px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

#Article .Recommendations-Body-Section-Types-Content-Box-Title {
  border-bottom: 1px solid #ff8960;
  padding-bottom: 7px;
  width: fit-content;
}

@media (min-width: 1050px) {
  #Book .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(20% - 78px);
    max-width: 382.5px;
    min-width: 127.5px;
  }

  #Book:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 5) {
    display: flex;
  }

  #Movie .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(25% - 76px);
    max-width: 510px;
    min-width: 170px;
  }

  #Movie:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 4) {
    display: flex;
  }

  #Video .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(33.33% - 20px);
    max-width: 774px;
    min-width: 258px;
  }

  #Video:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 3) {
    display: flex;
  }

  #Heros .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(20% - 80px);
    max-width: 510px;
    min-width: 170px;
  }

  #Heros:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 4) {
    display: flex;
  }
}

@media (max-width: 1245px) {

  .Recommendations-Section-Headers,
  .Recommendations-Body-Section {
    padding-left: 29px;
    padding-right: 29px;
  }

  .Recommendations-Section-Headers-Box {
    max-width: unset;
    min-width: unset;
  }

  #Book .Recommendations-Body-Section-Types-Content {
    grid-gap: 20px;
  }

  #Movie .Recommendations-Body-Section-Types-Content {
    grid-gap: 20px;
  }

  #Heros .Recommendations-Body-Section-Types-Content {
    grid-gap: 20px;
  }

  .Recommendations-Body-Section-Types {
    max-width: unset;
    min-width: unset;
  }
}

@media (max-width: 1050px) and (min-width: 450px) {
  #Book .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(33.3% - 20px);
    max-width: 382.5px;
    min-width: 127.5px;
  }

  #Book:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 3) {
    display: flex;
  }

  #Movie .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(33.33% - 20px);
    max-width: 510px;
    min-width: 170px;
  }

  #Movie:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 3) {
    display: flex;
  }

  #Video .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(33.33% - 20px);
    max-width: 774px;
    min-width: 258px;
  }

  #Video:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 3) {
    display: flex;
  }

  #Heros .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(33.33% - 20px);
    max-width: 510px;
    min-width: 170px;
  }

  #Heros:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 3) {
    display: flex;
  }

  #Article .Recommendations-Body-Section-Types-Content-Box {
    width: 100%; 
    flex-direction: row;
    flex-wrap: wrap;
  }
    
  #Article:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 5) {
    display: flex;
  }

}

@media (max-width: 450px) {

  .Recommendations-Body-Section {
    padding-left: 11px;
    padding-right: 11px;
  }

  .Recommendations-Section-Headers-Box {
    grid-gap: 42px;
  }

  .Recommendations-Section-Headers {
    padding: 11px;
  }

  .Recommendations-Section-Headers-Header {
    padding: 0px 2px;
    padding-bottom: 5px;
    padding-top: 7px;
  }

  .Recommendations-Body-Section-Types {
    padding-top: 12px;
    padding-bottom: 25px;
    grid-gap: 15px;
  }

  .Recommendations-Body-Section-Types-Header-Heading {
    font-size: 1.33rem;
    line-height: 2.18;
  }

  .Recommendations-Body-Section-Types-Header-Button {
    border-radius: 5px;
    padding: 11px 22px;
  }

  #Book .Recommendations-Body-Section-Types-Content,
  #Movie .Recommendations-Body-Section-Types-Content,
  #Video .Recommendations-Body-Section-Types-Content,
  #Article .Recommendations-Body-Section-Types-Content,
  #Heros .Recommendations-Body-Section-Types-Content {
    grid-gap: 15px;
  }

  #Book .Recommendations-Body-Section-Types-Content-Box,
  #Movie .Recommendations-Body-Section-Types-Content-Box,
  #Video .Recommendations-Body-Section-Types-Content-Box,
  #Heros .Recommendations-Body-Section-Types-Content-Box {
    flex: 1 1 calc(50% - 15px);
    max-width: 382.5px;
    min-width: 127.5px;
  }

  #Book:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 2),
  #Movie:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 2),
  #Video:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 2),
  #Heros:has(.hide) .Recommendations-Body-Section-Types-Content-Box:nth-child(-n + 2) {
    display: flex;
  }

  .Recommendations-Body-Section-Types-Content-Box-Title {
    font-size: 1.16rem;
    line-height: 1.78;
  }
}