/* =============================================================
   VagaCidade — utilities
   Poucas, nomeadas por intenção, sempre baseadas em tokens.
   ============================================================= */

@layer utilities {

  /* Conteúdo lido por leitores de tela, invisível na interface */
  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Atalho de teclado para pular direto ao conteúdo */
  .u-skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-loader);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background-color: var(--surface-inverse);
    color: var(--text-on-inverse);
    font-weight: var(--fw-semibold);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .u-skip-link:focus-visible {
    transform: translateY(0);
  }

  .u-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .u-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .u-grow { flex: 1; min-width: 0; }
  .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .u-center { text-align: center; }
  .u-muted { color: var(--text-muted); }
  .u-subtle { color: var(--text-subtle); font-size: var(--fs-sm); }
  .u-hidden { display: none !important; }

  .u-eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
  }
}