/* ============================================================
   grid.css  ·  Sistema de grid do portfólio
   12 colunas, na lógica do Bootstrap, com CSS Grid nativo.

   Container: 1320px (equivalente ao container xxl do Bootstrap)
   Gutter:    24px   (o padrão do Bootstrap, 1.5rem)

   Uso:
     .wrap        container centralizado
     .g12         vira grid de 12 colunas
     .c-read      8 colunas centralizadas   (col-8 offset-2)  → texto de leitura
     .c-wide      10 colunas centralizadas  (col-10 offset-1) → título, metadados
     .c-full      12 colunas                (col-12)          → mídia, cards

   Por que não usar `ch` para largura de coluna: `ch` é relativo ao
   font-size do próprio elemento, então dois elementos com a mesma
   medida em `ch` caem em eixos diferentes. Aqui tudo deriva da grid.
   ============================================================ */

/* Prefixo --grid-* de propósito: as páginas já usam nomes como --pad
   para outras coisas (no index.html, --pad é o respiro vertical das
   sections). Namespear evita que uma redefina a outra por acidente. */
:root{
  --grid-container: 1760px;
  --grid-gutter: 24px;
  /* As 2 colunas laterais é que fazem o respiro do site, então o padding
     aqui é só a margem de segurança de tela pequena, não o respiro. */
  --grid-pad: clamp(24px, 2.5vw, 40px);
}

.wrap{
  max-width: var(--grid-container);
  margin-inline: auto;
  padding-left: var(--grid-pad);
  padding-right: var(--grid-pad);
}

/* Grid de 12 colunas. Gap só na horizontal: o ritmo vertical
   continua nas margens que cada página já define. */
.g12{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: 0;
  align-content: start;
}

/* ------------------------------------------------------------------
   O conteúdo vive nas 8 COLUNAS CENTRAIS (3 a 10).
   As colunas 1-2 e 11-12 ficam vazias: são o respiro do site.

   Texto, título e mídia ocupam a MESMA faixa e terminam na mesma
   linha. Antes cada um tinha um span diferente (texto 8, título 10,
   mídia 12), então tudo começava junto e terminava em lugar diferente,
   o que desarmoniza a página.

   Os nomes seguem por semântica, mas hoje todos apontam pra mesma
   faixa de propósito: uma régua à esquerda, uma à direita.
   ------------------------------------------------------------------ */
.c-narrow,
.c-read,
.c-wide,
.c-full{ grid-column: 3 / span 8; }

/* Um filho direto de .g12 sem classe cai na mesma faixa,
   assim nada escapa da grid silenciosamente. */
.g12 > *{ grid-column: 3 / span 8; }

/* Telas médias: o respiro cai pra 1 coluna de cada lado, senão sobra
   pouca largura útil pro conteúdo. */
@media (max-width: 1280px){
  .g12 > *{ grid-column: 2 / span 10; }
}

/* Mobile: coluna única, a grid sai do caminho. Respiro de coluna não
   existe aqui, quem faz a margem é o padding do container. */
@media (max-width: 860px){
  .g12{ display: block; }
  .g12 > *{ grid-column: auto; }
}

/* ------------------------------------------------------------------
   Rótulo de seção: o número vai ACIMA do título, não ao lado.

   Em flex, o "01" empurrava o h2 uns 35px pra dentro: o span começava
   na régua e o título dele não, o que quebrava o alinhamento na página
   inteira. Empilhado, número e título nascem os dois na coluna 1, que
   é o que a home já fazia com .sec-mark.
   ------------------------------------------------------------------ */
.sec-label{ display: block; }
.sec-label .no{ display: block; margin-bottom: 8px; }
.sec-label h2{ margin: 0; }