/* GENERATED por sincronizar-ds.mjs — NÃO EDITAR À MÃO.
   Fonte: potenzia-digital/cleomar-design-system@0aab8e4 03-ui-kit/foundations/layout.css
   Para atualizar: git -C <clone> pull && npm run build && node sincronizar-ds.mjs */

/* Foundations — containers e grid. Breakpoints: md 768px, lg 1024px, xl 1280px
   (literais porque var() não funciona em @media — espelham breakpoints.json). */

.ct-container {
  width: 100%;
  max-width: calc(var(--ct-container-default) + 2 * var(--ct-container-padding));
  margin-inline: auto;
  padding-inline: var(--ct-container-padding);
}
.ct-container--narrow { max-width: calc(var(--ct-container-narrow) + 2 * var(--ct-container-padding)); }
.ct-container--wide   { max-width: calc(var(--ct-container-wide) + 2 * var(--ct-container-padding)); }

/* Grid: 4 → 8 → 12 colunas. Filhos ocupam a largura toda por padrão;
   defina --span-sm / --span-md / --span-lg no filho para mudar. */
.ct-grid {
  --_cols: var(--ct-grid-columns-sm);
  display: grid;
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  gap: var(--ct-gap-lg) var(--ct-grid-gutter-sm);
}
.ct-grid > * { grid-column: span min(var(--span-sm, 4), 4); }

@media (min-width: 768px) {
  .ct-grid { --_cols: var(--ct-grid-columns-md); column-gap: var(--ct-grid-gutter-md); }
  .ct-grid > * { grid-column: span min(var(--span-md, 8), 8); }
}
@media (min-width: 1024px) {
  .ct-grid { --_cols: var(--ct-grid-columns-lg); column-gap: var(--ct-grid-gutter-lg); }
  .ct-grid > * { grid-column: span min(var(--span-lg, 12), 12); }
}
@media (min-width: 1280px) {
  .ct-grid { column-gap: var(--ct-grid-gutter-xl); }
}

.ct-section { padding-block: var(--ct-section-y); }