/*
 * Estrutura: seção, linha e coluna (etapa D2).
 *
 * Estes três não transcrevem nada do site estático -- **ele não tem grid**. Confirmei
 * varrendo o `main.css`: `.wrapper` nunca é uma regra própria, é sempre escopado por
 * componente (`.page__footer .wrapper`, `.page__header .wrapper`…), e as larguras máximas
 * são todas diferentes entre si -- 1000, 1151, 820, 1200, 1100, 870, 1120, 931px. Não há
 * container compartilhado para reproduzir.
 *
 * A consequência manda no que este arquivo pode fazer: **nenhuma geometria própria.** Sem
 * largura máxima, sem `padding`, sem `gap`. Estes três só *arranjam* o que está dentro
 * deles; a medida de cada bloco chega com o componente dos blocos E e F, como no original.
 * Um `max-width` aqui seria uma invenção que toda página do bloco G teria de contornar.
 *
 * **Por que nomes em português, se o resto do tema usa os do original.** Justamente porque
 * o resto usa os do original: as classes transcritas são todas inglesas (`page__footer`,
 * `wrapper`, `footer__nav`), e `.section`, `.row` e `.column` são genéricas o bastante para
 * colidir com alguma que ainda vai ser transcrita. `.secao`, `.linha` e `.coluna` não podem
 * colidir com nada que venha de lá.
 */

/*
 * A seção não tem regra de fundo além destas duas: cor, imagem e os quatro espaçamentos são
 * por instância e chegam no atributo `style`, escritos pelo template.
 */
.secao {
  background-size: cover;
  background-position: center;
}

.linha {
  display: flex;
  /*
   * `wrap` para o empilhamento móvel lá embaixo funcionar. Sem ele, `flex-basis: 100%` só
   * espremeria as colunas na mesma faixa em vez de quebrá-las.
   */
  flex-wrap: wrap;
}

/* Os valores vêm do campo `align` do `RowPluginModel`, que é `choices` -- daí o template
 * poder compor a classe direto com o valor, sem tabela de tradução. */
.linha--left {
  justify-content: flex-start;
}

.linha--center {
  justify-content: center;
}

.linha--right {
  justify-content: flex-end;
}

/*
 * `flex: 1` para as colunas de uma linha dividirem a largura em partes iguais, que é o que
 * um editor espera ao pôr duas lado a lado. É a única decisão de medida do arquivo, e é
 * relativa: não fixa largura nenhuma, só reparte a que a linha tiver.
 */
.coluna {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* O mesmo ponto de quebra do rodapé. */
@media (max-width: 768px) {
  .coluna {
    flex-basis: 100%;
  }
}