/* ==========================================================================
   SIA.AI Design System v2 — Utilitários
   --------------------------------------------------------------------------
   Conjunto pequeno e fechado: composição de layout, acessibilidade e ajustes
   de texto. Não é um framework utilitário — se um padrão se repete, ele vira
   componente em components.css.

   Último arquivo da ordem de carregamento, para poder ajustar composição sem
   aumentar especificidade de componente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */
.sia-v2-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Composição vertical
   -------------------------------------------------------------------------- */
.sia-v2-stack {
  display: flex;
  flex-direction: column;
}

.sia-v2-stack--1 {
  gap: var(--sia-v2-space-1);
}
.sia-v2-stack--2 {
  gap: var(--sia-v2-space-2);
}
.sia-v2-stack--3 {
  gap: var(--sia-v2-space-3);
}
.sia-v2-stack--4 {
  gap: var(--sia-v2-space-4);
}
.sia-v2-stack--5 {
  gap: var(--sia-v2-space-5);
}
.sia-v2-stack--6 {
  gap: var(--sia-v2-space-6);
}

/* --------------------------------------------------------------------------
   Composição horizontal
   -------------------------------------------------------------------------- */
.sia-v2-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sia-v2-space-2);
}

.sia-v2-cluster--3 {
  gap: var(--sia-v2-space-3);
}

.sia-v2-cluster--4 {
  gap: var(--sia-v2-space-4);
}

.sia-v2-cluster--between {
  justify-content: space-between;
}

.sia-v2-cluster--end {
  justify-content: flex-end;
}

.sia-v2-cluster--top {
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Grade responsiva simples
   -------------------------------------------------------------------------- */
.sia-v2-grid {
  display: grid;
  gap: var(--sia-v2-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sia-v2-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sia-v2-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sia-v2-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sia-v2-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Texto
   -------------------------------------------------------------------------- */
.sia-v2-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Conteúdo longo sem quebra natural (identificadores, URLs). */
.sia-v2-break-word {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Limita a duas linhas, preservando a leitura em cartões. */
.sia-v2-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sia-v2-measure {
  max-width: var(--sia-v2-reading-max-width);
}

.sia-v2-text-muted {
  color: var(--sia-v2-text-muted);
}

.sia-v2-text-subtle {
  color: var(--sia-v2-text-subtle);
}

.sia-v2-text-danger {
  color: var(--sia-v2-danger-text);
}

.sia-v2-text-success {
  color: var(--sia-v2-success-text);
}

.sia-v2-mono {
  font-family: var(--sia-v2-font-mono);
}

/* --------------------------------------------------------------------------
   Visibilidade por faixa
   -------------------------------------------------------------------------- */
.sia-v2-hide-desktop {
  display: initial;
}

.sia-v2-show-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .sia-v2-hide-desktop {
    display: none;
  }

  .sia-v2-show-desktop {
    display: initial;
  }
}

/* --------------------------------------------------------------------------
   Área rolável com altura limitada (demonstração de conteúdo longo)
   -------------------------------------------------------------------------- */
.sia-v2-scroll-area {
  max-height: 240px;
  overflow: auto;
  padding-right: var(--sia-v2-space-2);
}