/*
  Wortic macOS UI Kit — Grade de layout
  A régua horizontal do sistema, aplicável. Os NÚMEROS moram em
  foundation/tokens.css (--wm-grid-*, --wm-container-*) e trocam
  sozinhos por faixa; aqui só existem as formas que os consomem.

  Não confundir com o componente `grids` (components/grids/): aquele
  faz grades FLUIDAS de conteúdo (auto-fill de cards). Esta é a grade
  ESTRUTURAL da página — colunas fixas, gutter e margem.

  Ficha: foundation/docs/grade.json
*/

@layer utilities {
  /* Container: largura máxima da faixa + margem lateral da faixa. */
  .wm-container {
    width: 100%;
    max-width: var(--wm-container);
    margin-inline: auto;
    padding-inline: var(--wm-grid-margin);
  }

  .wm-container--sm { max-width: var(--wm-container-sm); }
  .wm-container--md { max-width: var(--wm-container-md); }
  .wm-container--lg { max-width: var(--wm-container-lg); }
  .wm-container--xl { max-width: var(--wm-container-xl); }

  /* Medida de leitura: ~68 caracteres. Texto corrido nunca deve
     atravessar as 12 colunas — ninguém lê uma linha de 1040px. */
  .wm-container--prose { max-width: var(--wm-container-prose); }

  .wm-container--flush { padding-inline: 0; }

  /* Grade estrutural: N colunas iguais com o gutter da faixa. */
  .wm-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--wm-grid-columns), minmax(0, 1fr));
    gap: var(--wm-grid-gutter);
  }

  /* Gutter só na horizontal (linhas coladas, colunas separadas) */
  .wm-layout-grid--tight-rows {
    row-gap: var(--wm-space-4);
  }

  /* Vãos: quantas colunas o filho ocupa. Acima do número de colunas
     da faixa, o grid satura em 100% — por isso o minmax(0,1fr). */
  .wm-col-1  { grid-column: span 1; }
  .wm-col-2  { grid-column: span 2; }
  .wm-col-3  { grid-column: span 3; }
  .wm-col-4  { grid-column: span 4; }
  .wm-col-5  { grid-column: span 5; }
  .wm-col-6  { grid-column: span 6; }
  .wm-col-7  { grid-column: span 7; }
  .wm-col-8  { grid-column: span 8; }
  .wm-col-9  { grid-column: span 9; }
  .wm-col-10 { grid-column: span 10; }
  .wm-col-11 { grid-column: span 11; }
  .wm-col-12 { grid-column: span 12; }
  .wm-col-full { grid-column: 1 / -1; }

  /* Abaixo de --wm-bp-md a grade tem 8 colunas ou menos: qualquer vão
     maior que a faixa vira largura cheia, em vez de estourar. */
  @media (max-width: 679px) {   /* [--wm-bp-md] */
    .wm-col-5,
    .wm-col-6,
    .wm-col-7,
    .wm-col-8,
    .wm-col-9,
    .wm-col-10,
    .wm-col-11,
    .wm-col-12 {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 559px) {   /* [--wm-bp-sm] */
    .wm-col-3,
    .wm-col-4 {
      grid-column: 1 / -1;
    }
  }

  /* Vãos POR FAIXA (opt-in). As faixas não dividem igual: metade na
     faixa de 12 colunas é span 6, na de 8 é span 4, na de 6 é span 3.
     Um cartão de "um quarto" (col-3 em 12 colunas) cai na faixa de 8 e
     vira 3/8 — a linha soma 6 e sobra um buraco de 2 colunas à direita,
     grade rasgada (o bento do page-layouts exibia exatamente isso entre
     680 e 899px, a largura do painel da wiki). Estas classes ajustam o
     vão SÓ na faixa indicada; sem elas, vale o .wm-col-* de sempre.
     md = faixa de 8 colunas (680–899), sm = faixa de 6 (560–679). */
  @media (min-width: 680px) and (max-width: 899px) {   /* [--wm-bp-md, --wm-bp-lg) */
    .wm-col-md-2 { grid-column: span 2; }
    .wm-col-md-3 { grid-column: span 3; }
    .wm-col-md-4 { grid-column: span 4; }
    .wm-col-md-6 { grid-column: span 6; }
    .wm-col-md-full { grid-column: 1 / -1; }
  }
  @media (min-width: 560px) and (max-width: 679px) {   /* [--wm-bp-sm, --wm-bp-md) */
    .wm-col-sm-2 { grid-column: span 2; }
    .wm-col-sm-3 { grid-column: span 3; }
    .wm-col-sm-full { grid-column: 1 / -1; }
  }

  /* A mesma grade dentro de um container query, para painel que muda
     de largura sem a janela mudar (sidebar aberta/fechada). */
  .wm-layout-grid--cq {
    container-type: inline-size;
  }
}