/* === Importa variáveis globais do index.css === */
@import url('/css/index.css');  
/* Importa as variáveis de cores, fontes e resets do CSS global */
@import url('/css/midiaquire.css');

/* === Estilos específicos da página de produtos === */

/* Introdução da página */
.introducao {
  text-align: center;             /* Centraliza o texto */
  padding: 3rem 1rem 2rem;        /* Espaçamento superior, laterais e inferior */
  color: var(--cor-escura);       /* Cor azul escuro para o texto */
}

.introducao h1 {
  font-size: 2.2rem;              /* Tamanho maior para o título */
  margin-bottom: 0.5rem;          /* Espaço abaixo do título */
}

.introducao p {
  font-size: 1.1rem;              /* Tamanho um pouco maior do texto */
  color: var(--cinza-escuro);     /* Cor cinza escuro para o texto */
}

/* Grade de produtos */
.produtos-grid {
  display: grid;                                   /* Ativa grid layout */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Quantidade automática de colunas com mínimo de 180px */
  gap: 2rem;                                       /* Espaço entre os cards */
  padding: 2rem 1rem;                              /* Espaçamento interno */
  max-width: 1100px;                               /* Limita a largura máxima */
  margin: 0 auto;                                  /* Centraliza horizontalmente */
}

/* Estilo de cada card de produto */
.produto {
  text-align: center;                              /* Centraliza o conteúdo do card */
  background-color: var(--cinza-claro);            /* Fundo cinza claro */
  border-radius: 8px;                              /* Bordas arredondadas */
  padding: 1.5rem;                                 /* Espaçamento interno */
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);            /* Sombra leve */
  transition: transform 0.3s, box-shadow 0.3s;     /* Transição suave */
  display: flex;                                   /* Ativa flexbox */
  flex-direction: column;                          /* Organiza os filhos em coluna */
  justify-content: flex-start;                     /* Alinha o conteúdo ao topo */
  height: 100%;                     
   min-height: 350px; 
   /* ou uma altura que cubra o maior card */               /* Ocupa toda a altura possível */
}

/* Efeito hover no card */
.produto:hover {
  transform: translateY(-6px);                     /* Eleva o card */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);          /* Aumenta a sombra */
}

/* Imagem do produto */
.produto img {
  width: 100%;                                     /* Ocupa toda a largura do container */
  max-width: 150px;                                /* Limite máximo de largura */
  height: 100%;                                    /* Mantém proporção */
  margin-bottom: 1rem;                             /* Espaço abaixo da imagem */
  object-fit: cover;
  margin-bottom: 1rem;
  border-radius: 6px; /* opcional */
}

/* Nome ou descrição do produto */
.produto p {
  font-weight: 600;                                /* Fonte em negrito médio */
  color: var(--preto);                             /* Cor preta */
  margin-bottom: 1.5rem;                           /* Adiciona margem abaixo do parágrafo para separar do botão */
}

/* === Botão "Saiba mais" === */
.btn-saiba-mais {
  background-color: var(--cor-primaria);           /* Fundo azul principal */
  color: var(--branco);                            /* Texto branco */
  border: none;                                    /* Remove borda */
  padding: 0.5rem 1.2rem;                          /* Padding interno */
  border-radius: 25px;                             /* Bordas arredondadas */
  cursor: pointer;                                 /* Mãozinha no hover */
  font-weight: 600;                                /* Fonte em negrito */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
  margin-top: auto;                                /* Empurra o botão para o fundo do card */
  margin-bottom: 0.5rem;                             /* Espaço inferior para não colar no limite do card */
  display: inline-block;                           /* Exibe como inline-block */
  font-size: 1rem;                                 /* Tamanho do texto */
  align-self: center;                              /* Centraliza o botão horizontalmente */
}

/* Hover do botão */
.btn-saiba-mais:hover {
  background-color: var(--cor-secundaria);         /* Muda para azul claro */
  transform: scale(1.05);                          /* Aumenta levemente o tamanho */
}

.btn-comprar {
  background-color: var(--cor-primaria);
  color: var(--branco);
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: auto;
  margin-bottom: 1rem;
  display: inline-block;
  font-size: 1rem;
  align-self: center;
  text-decoration: none; /* para links, remove sublinhado */
}

.btn-comprar:hover {
  background-color: var(--cor-secundaria);
  transform: scale(1.05);
}


/* === Responsividade para telas menores === */
@media (max-width: 768px) {
  .introducao h1 {
    font-size: 1.8rem;                             /* Reduz o tamanho do título */
  }

  .produtos-grid {
    gap: 1rem;                                     /* Diminui o espaçamento entre os cards */
  }

  .produto img {
    max-width: 100px;                              /* Reduz tamanho da imagem */
  }

  .produto {
    padding: 1rem;                                 /* Reduz padding do card */
  }

  .btn-saiba-mais {
    padding: 0.4rem 1rem;                          /* Reduz padding do botão */
    font-size: 0.9rem;                             /* Fonte um pouco menor */
  }
}