/* ================================================
   CABEÇALHO DA PÁGINA DE ESTUDOS
   Título + descrição centralizados
   ================================================ */

.estudos-header {
  max-width: 900px;
  margin: 50px auto 20px;
  text-align: center;
  padding: 0 20px;
  position: relative; /* necessário para posicionar o botão histórico */
}

.estudos-header h2 {
  font-family: "Libre Baskerville", serif;
  font-size: 40px;
}

.estudos-header p {
  color: #555;
  line-height: 1.6;
}

/* ================================================
   BOTÃO "📜 HISTÓRICO"
   Fica no canto direito do cabeçalho
   ================================================ */

.btn-historico {
  position: absolute;
  right: 0;       /* cola na borda direita do cabeçalho */
  top: 0;
  background: #111;
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-historico:hover {
  background: #d4b06a;
  color: black;
  transform: scale(1.05);
}

/* ================================================
   BOTÕES DE CATEGORIA / FILTRO
   ================================================ */

.categorias {
  display: flex;
  flex-wrap: wrap;       /* quebra linha no celular */
  gap: 10px;
  justify-content: center;
  margin: 30px auto;
  max-width: 900px;
  padding: 0 20px;
}

.categoria-btn {
  background: #111;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.categoria-btn:hover {
  background: #8b6f3d;
}

/* Botão ativo (categoria selecionada) */
.categoria-btn.active {
  background: #d4b06a;
  color: black;
}

/* ================================================
   GRADE DE CARDS
   auto-fit = preenche colunas automaticamente
   minmax(260px, 1fr) = mínimo 260px, máximo proporcional
   ================================================ */

.estudos-grid {
  max-width: 1100px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  padding: 20px;
}

/* ================================================
   CARD DE ESTUDO
   Cada card é um bloco clicável com sombra
   ================================================ */

.estudo-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.3s;
}

.estudo-card:hover {
  transform: translateY(-6px);   /* sobe levemente ao passar o mouse */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
}

.estudo-card h3 {
  font-family: "Libre Baskerville", serif;
  color: #5a3e1b;
  margin-top: 0;
}

.estudo-card p {
  font-size: 14px;
  color: #555;
}

/* ================================================
   CONTEÚDO DE ESTUDO (quando abre dentro da página)
   Usado quando o estudo é exibido na mesma página,
   sem redirecionar. Começa oculto (display: none)
   ================================================ */

.estudo-conteudo {
  max-width: 900px;
  margin: 40px auto;
  padding: 35px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  display: none; /* oculto por padrão — o JS mostra quando necessário */
}

.estudo-conteudo h2 {
  font-family: "Libre Baskerville", serif;
}

.estudo-conteudo p {
  line-height: 1.8;
}

/* Botão "Voltar" dentro do conteúdo de estudo */
.voltar {
  margin-top: 20px;
  padding: 10px 18px;
  border: none;
  background: #8b6f3d;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

/* ================================================
   PAINEL LATERAL DE HISTÓRICO
   Começa fora da tela (right: -350px)
   A classe .ativo move para right: 0 (aparece)
   ================================================ */

.historico {
  position: fixed;
  top: 0;
  right: -350px;          /* escondido fora da tela */
  width: 320px;
  height: 100%;
  background: white;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
  padding: 20px;
  transition: 0.4s;       /* animação suave ao abrir/fechar */
  z-index: 999;
  overflow-y: auto;
  overflow-x: visible;
}

.historico h3 {
  font-family: "Libre Baskerville", serif;
  margin-top: 0;
}

/* Quando o JS adiciona a classe .ativo, o painel aparece */
.historico.ativo {
  right: 0;
}

/* Item dentro do histórico */
.historico-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: 0.2s;
}

.historico-item:hover {
  background: #f5f5f5;
}

/* ================================================
   SETA PARA FECHAR O HISTÓRICO
   Fica na borda esquerda do painel
   ================================================ */

.fechar-historico {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%); /* sai para fora do painel */
  width: 30px;
  height: 60px;
  background: #111;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
  box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.fechar-historico:hover {
  background: #d4b06a;
  color: black;
}

/* ================================================
   RESPONSIVO — CELULAR (telas menores que 600px)
   ================================================ */

@media (max-width: 600px) {

  /* Título menor no celular */
  .estudos-header h2 {
    font-size: 28px;
  }

  /* Botão histórico fica embaixo do título */
  .btn-historico {
    position: static;
    display: block;
    margin: 0 auto 20px;
  }

  /* Painel histórico ocupa mais espaço */
  .historico {
    width: 85vw;
    right: -90vw;
  }
}