html {
  font-family: "Manrope", sans-serif;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 16px;
}

body {
  margin: 0;
}

h1 {
  /* font-size: 64px; */
  /* Agora definimos font-size = 16px no html, portanto
  16 * 4 = 64. Por isso '4rem'*/
  font-size: 4rem;
  font-weight: 800;
  margin: 0;
}

h2 {
  /* font-size: 48px; */
  font-size: 3rem;
  font-weight: 800;
  margin: 0;
}

h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
}

p {
  /* Melhora a legibilidade com espaçamento de linha (line-height) e cor de texto mais suave. */
  /* font-size: 24px; */
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

button {
  background: #f84646;
  color: #fff;
  font-weight: 500;
  /* font-size: 24px; */
  font-size: 1.5rem;
  /* padding: 8px 24px; */
  padding: 0.5rem 1.5rem;
  /* border-radius: 8px; */
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

#presentation-container {
  /* padding: 40px 120px; */
  padding: 2.5rem 7.5rem;
  /* height: 600px; */
  height: 80vh;
  background-image: url(/assets/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#presentation {
  /* width: 600px; */
  width: 37.5rem;
  /* top: calc(50% - 185px); */
}

#qualities {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
}

#qualities > img {
  margin: 0 2.5rem;
}

.container {
  /* padding: 160px 120px; */
  padding: 5rem 7.5rem;
  text-align: center;
}

.contact-title {
  /* margin-top: 8px; */
  margin-top: 0.5rem;
}

.container > p {
  /* margin-top: 24px; */
  margin-top: 1.5rem;
}

.container > button {
  /* margin-top: 32px; */
  margin-top: 2rem;
  transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
}

.container > button:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.background-gradient {
  background: linear-gradient(180deg, #fff, #d9d9d9);
}

.background-red {
  background: #f84646;
  color: #fff;
}

.background-grey {
  background: #f4f5f7;
}

.article-container {
  display: flex;

  .article-details {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start; /* Consertamos assim o tamanho 100% do botão, evitando "stretch" */
    margin: 0 2.5rem 0 0;

    justify-content: space-between;

    & > button {
      font-size: 1rem;
    }
  }

  &:nth-child(even) {
    margin-top: 5rem;
    flex-direction: row-reverse;

    & > .article-details {
      margin: 0 0 0 2.5rem;
    }
  }
}

.footer-list {
  display: flex;
  text-align: left;

  & > ul > li {
    list-style: none;
    margin-bottom: 1rem;
  }
  & > ul > li:last-child {
    margin-bottom: 0;
  }

  .footer-list-title {
    margin-bottom: 1.5rem;
    font-weight: 700;
  }
}

.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8rem;
}

/* Grid Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(
    3,
    1fr
  ); /* 3 colunas de 1fr ou seja, cada coluna terá 1 item */
  gap: 5rem;
}

/* Grid Item */
.grid-item > h3,
.grid-item > p {
  margin: 0.5rem 0 0;
}

/* Grid Container Companies */
.grid-container-companies {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.grid-item-companies {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
}

/* OBSERVAÇÃO sobre adicionar classe única pra cada item (company-1, company-2...):
cada item terá uma classe unica, assim ele pode ser selecionado individualmente via
"grid-area" dizendo a posição da linha por coluna que ele se encontra.
*/
.company-1 {
  grid-area: 3/1;
}
.company-2 {
  grid-area: 2/2;
}
.company-3 {
  grid-area: 3/2;
}
.company-4 {
  grid-area: 1/3;
}
.company-5 {
  grid-area: 2/3;
}
.company-6 {
  grid-area: 3/3;
}
.company-7 {
  grid-area: 2/4;
}
.company-8 {
  grid-area: 3/4;
}
.company-9 {
  grid-area: 3/5;
}
/*  */
/* Responsividade */
/*  */
@media only screen and (max-width: 1170px) {
  .article-container h2 {
    font-size: 2.2rem;
  }
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-container {
    > img {
      width: 50%;
    }
  }

  .grid-container-companies {
    grid-template-columns: repeat(3, 1fr);
  }

  #presentation-container {
    padding: 5rem 4rem;
  }

  .container {
    padding: 5rem 4rem;
  }

  /* Reseta a posição fixa dos itens para que sigam o fluxo do grid de 3 colunas */
  /* 
    O seletor [class*="company-"] é um "seletor de atributo".
    Ele seleciona qualquer elemento cujo atributo 'class' CONTENHA a string "company-".
    É uma forma eficiente de aplicar o mesmo estilo a .company-1, .company-2, etc., de uma só vez.
  */
  [class*="company-"] {
    grid-area: auto;
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  /* #presentation-container {
    justify-content: center;
  } */

  .grid-container {
    grid-template-columns: 1fr;
  }

  #qualities {
    flex-direction: column;

    > img {
      transform: rotate(90deg);
      margin: 2rem 0;
    }
  }

  .article-container {
    /* Sobrescrevemos */
    flex-direction: column;

    /* Garante que a variação 'even' também fique em coluna no mobile */
    &:nth-child(even) {
      flex-direction: column;

      /* Cria uma regra com a MESMA especificidade para os articles pares e define o margin: 0 para eles também */
      & > .article-details {
        margin: 0;
      }
    }

    & > .article-details {
      text-align: center;
      align-items: normal;
      margin: 0;
    }

    /* Move a imagem para o topo, apenas no mobile */
    & > img {
      order: -1;
      margin-bottom: 1.5rem;
    }
  }

  .grid-container-companies {
    grid-template-columns: 1fr;
  }

  /* Reseta a posição fixa dos itens para que sigam o fluxo do grid de 1 coluna */
  /* 
    O seletor [class*="company-"] é um "seletor de atributo".
    Ele seleciona qualquer elemento cujo atributo 'class' CONTENHA a string "company-".
    É uma forma eficiente de aplicar o mesmo estilo a .company-1, .company-2, etc., de uma só vez.
  */
  [class*="company-"] {
    grid-area: auto;
    height: 6rem;
  }

  /*
    Isso vai:
    - Mudar o display para block, empilhando os itens.
    - Centralizar o conteúdo de texto e os ícones.
    - Adicionar espaçamentos verticais para não ficar tudo colado.
  */
  .footer-list,
  .footer-copyright {
    display: block;
  }

  .footer-list > ul {
    margin-bottom: 2.5rem; /* Espaço entre as listas de links */
  }

  .footer-copyright {
    margin-top: 4rem; /* Espaço maior acima da linha de copyright */
    flex-direction: column-reverse;

    > div:first-child {
      margin-bottom: 2rem;
    }
  }
}