/* ===== Método Cornell ===== */
.cornell-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
}

.cornell-container h1 {
  text-align: center;
  margin: 70px 0 1rem; /* topo fixo em 70px */
  color: var(--secondary); /* azul da identidade */
}

.cornell-container p {
  text-align: center;
  margin-bottom: 2rem;
  color: color-mix(in srgb, var(--text) 85%, var(--border));
}

/* Estrutura principal */
.cornell-grid {
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: auto 150px;
  gap: 1rem;
}

/* Coluna esquerda (pistas) */
.cornell-cues {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.cornell-cues textarea {
  width: 100%;
  height: 400px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  resize: vertical;
}

/* Coluna direita (anotações) */
.cornell-notes {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.cornell-notes textarea {
  width: 100%;
  height: 400px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  resize: vertical;
}

/* Resumo (embaixo) */
.cornell-summary {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.cornell-summary textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  resize: vertical;
}

/* Estilização dos títulos */
.cornell-cues h2,
.cornell-notes h2,
.cornell-summary h2 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--primary); /* verde da marca */
}

/* Ajuste para telas pequenas */
@media (max-width: 768px) {
  .cornell-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .cornell-cues textarea,
  .cornell-notes textarea {
    height: 200px;
  }
}