/* aprender/styles.css — coluna única + tipografia de leitura.
 *
 * Estrutura:
 *   .aprender-shell  → wrapper de largura total (o índice de seções vive no
 *                       carril lateral — ver src/components/sidebar.js, Task 6)
 *   .aprender        → article com tipografia de leitura (Inter / Lora h2)
 *
 * buildToc() (./toc.js) ainda gera nav + scroll-spy, mas nav não é mais
 * inserido no DOM da página — só sections é consumido (pelo carril).
 */

.aprender-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

/* ============ TOC (nav gerado por buildToc, não montado na página —
   estilos mantidos porque buildToc segue existindo; ver Task 6) ============ */
/* Task 7: no hay regla "display: none < 900px" que agregar acá — el nav
   .aprender-toc nunca se monta en el DOM, en ningún ancho (Task 6), así que
   no hay duplicado que ocultar por debajo del quiebre. Por debajo de 900px
   el índice vive en el cajón (sidebar modo tópico), no duplicado en la
   columna. */
.aprender-toc-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}
.aprender-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-link {
  display: block;
  padding: 4px 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -14px;
  padding-left: 12px;
  transition: color 120ms, border-color 120ms;
}
.toc-link:hover { color: var(--fg-strong); }
.toc-link.toc-h3 {
  padding-left: 24px;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}
.toc-link.toc-h3:hover { color: var(--fg-muted); }
.toc-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ============ Article (corpo do aprender) ============ */
/* Grade de conteúdo: o limite de leitura vale para o TEXTO, não para o bloco.
 *
 * Antes o max-width de 80ch estava aqui, no contêiner, então a imagem herdava
 * o limite do parágrafo: num MacBook de 1512px o diagrama do lemnisco ficava
 * espremido em 757px com ~473px vazios à direita. Mas comprimento de linha e
 * tamanho de figura são coisas diferentes — o olho perde a linha acima de ~90
 * caracteres; uma figura não tem esse problema.
 *
 * Todos os 94 elementos do conteúdo curado são filhos diretos de .aprender
 * (verificado: img no nível 1, tabelas dentro de div.table-scroll também no
 * nível 1), então a regra do filho direto cobre tudo sem tocar em data/.
 */
.aprender {
  font-family: var(--font-content);
  font-size: var(--content-fs);
  line-height: var(--line-loose);
  max-width: 100%;
  color: var(--fg);
}

/* O texto mantém a medida de leitura e fica centrado, em vez de colado à
   esquerda com todo o vazio de um lado só. */
.aprender > * {
  max-width: 80ch;
  margin-inline: auto;
}

/* Imagem e tabela sobem até a largura do outlet. Não estica imagem pequena:
   base.css:70 já limita img a 100% do seu tamanho natural, então cada figura
   cresce até onde faz sentido e para. */
.aprender > img,
.aprender > .table-scroll {
  max-width: 100%;
}
.aprender h2 { scroll-margin-top: calc(var(--header-h) + var(--sp-3)); }
.aprender h3 { scroll-margin-top: calc(var(--header-h) + var(--sp-2)); }

.aprender h2,
.aprender h3,
.aprender h4 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  color: var(--fg-strong);
}
.aprender h2 {
  font-size: var(--fs-xl);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.aprender h3 { font-size: var(--fs-lg); font-weight: 600; }
.aprender h4 { font-size: var(--fs-md); font-weight: 600; }
.aprender > h2:first-child,
.aprender > h3:first-child { margin-top: 0; }

/* «auto» en el eje horizontal, no 0: el atajo margin viene después de la regla
   de la grade de contenido y con «0 0» le borraba el margin-inline:auto, así
   que el texto quedaba pegado a la izquierda con todo el vacío de un solo
   lado. Con longhands esto no habría pasado. */
.aprender p {
  margin: 0 auto var(--sp-4);
}

.aprender ul, .aprender ol { margin: 0 auto var(--sp-4); padding-left: var(--sp-5); }
.aprender li { margin-bottom: var(--sp-2); line-height: var(--line-base); }

.aprender img {
  display: block;
  max-width: 100%;
  border-radius: var(--r-md);
  margin: var(--sp-4) auto;
  border: 1px solid var(--border);
}

.aprender figure { max-width: 100%; }

/* SVGs inline */
.aprender svg { max-width: 100%; height: auto; display: block; margin: var(--sp-4) auto; }

.aprender hr {
  border: none;
  border-top: 1px dashed var(--border);
  margin: var(--sp-6) 0;
}

.aprender-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--fg-muted);
}