/* ============================================================================
   COFFEE BLEND — DESIGN SYSTEM · 04. UTILIDADES
   ----------------------------------------------------------------------------
   Carregado POR ÚLTIMO, de propósito.

   Utilidade e componente têm a mesma especificidade (0,1,0). Quem vier depois
   na folha ganha. Se `.cb-only-mobile { display: none }` morar em base.css,
   o `.cb-icon-button { display: inline-flex }` de components.css sobrescreve
   e o botão de menu vaza para o desktop. Mantendo as utilidades no fim da
   cascata o conflito deixa de existir — sem !important.

   Ordem obrigatória no <head>:
     tokens.css → base.css → components.css → utilities.css
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TEXTO
--------------------------------------------------------------------------- */
.cb-text-sm { font-size: var(--cb-text-sm); }
.cb-text-xs { font-size: var(--cb-text-xs); }
.cb-muted { color: var(--cb-fg-muted); }
.cb-center { text-align: center; }

/* ---------------------------------------------------------------------------
   ESPAÇAMENTO
--------------------------------------------------------------------------- */
.cb-flush { margin-block: 0; }
.cb-flush-end { margin-block-end: 0; }

/* Sarjeta do mosaico: usada por seções `--bleed` que hospedam blocos
   arredondados coladinhos na borda da tela. */
.cb-bleed-pad { padding-inline: var(--cb-mosaic-gap); }

/* ---------------------------------------------------------------------------
   PROPORÇÕES DE MÍDIA
--------------------------------------------------------------------------- */
.cb-ratio-square { aspect-ratio: 1 / 1; }
.cb-ratio-portrait { aspect-ratio: 3 / 4; }
.cb-ratio-story { aspect-ratio: 9 / 16; }
.cb-ratio-landscape { aspect-ratio: 4 / 3; }
.cb-ratio-wide { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------------------
   ACESSIBILIDADE
--------------------------------------------------------------------------- */
.cb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   VISIBILIDADE POR BREAKPOINT
--------------------------------------------------------------------------- */
/* Estas utilidades só ESCONDEM. Não devolvem display nenhum.

   A versão anterior fazia `.cb-only-desktop { display: revert }` acima de
   1024 px, e `revert` desfaz o CSS do AUTOR — apagava junto o
   `display: flex` do próprio componente. O botão de conta no header ficava
   `display: block` e o ícone encostava no canto superior esquerdo, 11 px
   fora do centro, em todas as páginas.

   Escondendo por media query invertida, acima de 1024 a regra simplesmente
   não existe e o display do componente vale. */
@media (max-width: 1023.98px) {
  .cb-only-desktop { display: none; }
}

@media (min-width: 1024px) {
  .cb-only-mobile { display: none; }
}