/* ==========================================================================
   apostila-layout.css  —  casca de layout partilhada dos playbooks
   --------------------------------------------------------------------------
   ESTÁGIO 1: só overrides de layout. Nada de cores, fontes ou componentes —
   isso continua no <style> inline de cada ficheiro.

   Carregado DEPOIS do <style> inline (ganha na cascata, mesma especificidade).
   Dois blocos independentes; cada apostila ativa só o do seu template:
     - Template A  →  .sidebar fixa + .main deslocada
     - Template B  →  scrollytelling (#arco + nav.sumario + section.cap)
   Ficheiros "X" (sem template) não linkam este CSS.

   Botão único de largura por template: as duas custom properties abaixo.
   ========================================================================== */

:root{
  --apostila-maxw:   1040px;  /* Template A — largura do bloco de leitura */
  --apostila-maxw-b:  860px;  /* Template B — largura da coluna de capítulo */
}

/* ═══════════════ TEMPLATE A — painel lateral ═══════════════
   Encosta na sidebar até haver folga; a partir daí centraliza no espaço
   à direita da sidebar (margens iguais dos dois lados).
   Só acima do breakpoint — abaixo, as regras mobile inline de cada
   ficheiro continuam a mandar. */
@media (min-width: 961px){
  .main{
    /* aceita --side-w, --sidebar-w ou o default 290px */
    --_sw: var(--side-w, var(--sidebar-w, 290px));
    margin-left:  calc(var(--_sw) + max(0px, (100% - var(--_sw) - var(--apostila-maxw)) / 2));
    margin-right: auto;
    max-width:    var(--apostila-maxw);
    padding:      56px 76px 120px;
  }
}

/* ═══════════════ TEMPLATE B — scrollytelling ═══════════════
   Já vinha centrado (margin:0 auto); aqui só passamos a largura para o
   token partilhado. Valor atual = 860px, idêntico ao --maxw local. */
section.cap{
  max-width:     var(--apostila-maxw-b);
  margin-inline: auto;
}