/*
  ============================================================
  grid.css — Layout de colunas do portal
  ============================================================
  Este arquivo controla APENAS a estrutura de colunas
  (#main e seus filhos). Estilos visuais ficam em style.css.

  Por que separado?
  - No Plone 4 o portal_css (CSS Registry) permite habilitar
    ou desabilitar arquivos individualmente. Separar grid de
    estilo facilita a manutenção e a depuração.
  - Segue o padrão do Portal Modelo 3 do Interlegis, que
    também separa grid.css de style.css.

  Como o layout funciona:
  - Usa Flexbox (moderno, suportado desde IE 11+).
  - 3 colunas: sidebar esquerda + conteúdo + sidebar direita.
  - No mobile vira coluna única empilhada.

  ATENÇÃO: Os IDs abaixo (#main, #column-one, etc.) são
  nativos do Plone 4. Não os renomeie.
  ============================================================
*/

/* ===================================
   WRAPPER RAIZ
   O #wrapper envolve toda a página.
   width: 100% garante que ocupe a tela toda.
=================================== */
#wrapper {
  width: 100%;
}

/* ===================================
   ÁREA PRINCIPAL — FLEXBOX DE 3 COLUNAS
   ===================================
   max-width: 1350px → limita a largura em telas grandes,
   evitando linhas muito compridas (prejudicial à leitura).

   margin: 50px auto → centraliza horizontalmente e
   adiciona respiro vertical acima e abaixo do conteúdo.

   display: flex → ativa o Flexbox para posicionar as
   3 colunas lado a lado.

   align-items: flex-start → importante: faz cada coluna
   ter sua própria altura, sem se esticar até a maior.
   Sem isso, as sidebars ficam tão altas quanto o conteúdo.
=================================== */
#main {
  width: 100%;
  max-width: 1350px;
  margin: 50px auto;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  gap: 40px;              /* espaço entre as colunas */
  align-items: flex-start;
}

/* ===================================
   COLUNA ESQUERDA (#column-one)
   ===================================
   width: 220px → largura fixa para sidebar.
   flex-shrink: 0 → impede que o Flexbox comprima esta
   coluna quando não há espaço suficiente.
   Sem isso, a sidebar encolheria junto com o conteúdo.
=================================== */
#column-one {
  width: 220px;
  flex-shrink: 0;
}

/* ===================================
   COLUNA DIREITA (#column-two)
   Mesmas regras da coluna esquerda.
=================================== */
#column-two {
  width: 220px;
  flex-shrink: 0;
}

/* ===================================
   CONTEÚDO CENTRAL (#main-content)
   ===================================
   flex: 1 → faz o conteúdo ocupar todo o espaço
   restante entre as duas sidebars.

   min-width: 0 → correção importante para Flexbox:
   sem isso, conteúdos longos (tabelas, imagens)
   podem vazar para fora do contêiner.
=================================== */
#main-content {
  flex: 1;
  min-width: 0;
  max-width: 1000px;
}

/* ===================================
   RESPONSIVO — TABLET PAISAGEM / DESKTOP MÉDIO
   (entre 981px e 1200px)
   Reduz gaps e larguras das sidebars para caber melhor.
=================================== */
@media (max-width: 1200px) {
  #main {
    gap: 25px;
    padding: 0 25px;
  }
  #column-one,
  #column-two {
    width: 200px;
  }
}

/* ===================================
   RESPONSIVO — TABLET RETRATO
   (até 980px)
   ===================================
   Muda para layout de coluna única:
   flex-direction: column → empilha os elementos verticalmente.
   align-items: center → centraliza cada bloco.
   width: 100% em cada bloco → ocupa toda a largura disponível.
=================================== */
@media (max-width: 980px) {
  #main {
    flex-direction: column;
    align-items: center;
  }
  #column-one,
  #column-two,
  #main-content {
    width: 100%;
    max-width: 850px;
  }
}

/* ===================================
   RESPONSIVO — MOBILE
   (até 768px)
   Reduz o padding e a margem para usar melhor o espaço.
=================================== */
@media (max-width: 768px) {
  #main {
    padding: 0 16px;
    margin: 25px auto;
  }
}