/* ==========================================================================
   Lab 10 — Colunas (columns): marcador que põe os blocos seguintes lado a lado.
   Título e âncora opcionais do grupo, por cima das colunas.
   Coluna presa (campo do marcador: nenhuma, 1.ª ou 2.ª): só a partir de
   1024px, por baixo do cabeçalho fixo (regra 17). Abaixo de 768px empilha.
   Entre colunas, 72px a partir de 1024px (24px da grelha + 48px de margem),
   como a imagem com texto ao lado (2.12).
   ========================================================================== */
.columns__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block); align-items: start; }
.columns__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.columns__col > * { margin: 0; }
@media (min-width: 48em) {
  .columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}
@media (min-width: 64em) {
  .columns__col + .columns__col { margin-left: var(--space-6); }
  .columns__col--sticky { position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); transition: top var(--duration-motion) var(--ease); }
}

/* 3 e 4 colunas (tema, chat 24): o número escolhido a partir de 1024px; entre 768 e 1023px
   ficam 2 por linha (a regra base), como na intranet. Entre colunas o mesmo espaço de 72px
   (grelha + 48px), sem a margem da 2.ª coluna, que com mais de duas as fazia desiguais */
@media (min-width: 64em) {
  .columns__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .columns__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .columns__grid--3, .columns__grid--4 { column-gap: calc(var(--grid-gap) + var(--space-6)); }
  .columns__grid--3 > .columns__col + .columns__col, .columns__grid--4 > .columns__col + .columns__col { margin-left: 0; }
}

/* Alinhamento vertical e espaço entre colunas (campos da intranet, chat 27). O espaço usa a
   escala do Casa Ásia: `--columns-gap` a partir de 768px (substitui os 72px), `--columns-gap-m`
   entre as colunas empilhadas em telemóvel. */
.columns__grid[data-valign="center"] { align-items: center; }
.columns__grid[data-valign="end"] { align-items: end; }
@media (max-width: 47.9375em) {
  .columns__grid[style*="--columns-gap-m"] { gap: var(--columns-gap-m); }
}
@media (min-width: 48em) {
  .columns__grid[style*="--columns-gap:"] { column-gap: var(--columns-gap); }
}
@media (min-width: 64em) {
  .columns__grid[style*="--columns-gap:"] > .columns__col + .columns__col { margin-left: 0; }
  .columns__grid--3[style*="--columns-gap:"], .columns__grid--4[style*="--columns-gap:"] { column-gap: var(--columns-gap); }
}

/* Os blocos de coluna de texto (Text, List, Text quote, Text highlight, HTML, Accordion) dentro
   de umas Columns ocupam a coluna toda, até à largura de leitura: a grelha de 12 da coluna de
   texto é da página, não da coluna (chat 27). */
.columns__col .text-block { display: block; }