/* utilities.css */

.u-hidden { display: none !important; }
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

.u-flex { display: flex; }
.u-grid { display: grid; }
.u-block { display: block; }

.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }

.u-w-full { width: 100%; }
.u-mx-auto { margin-inline: auto; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }

.u-rounded { border-radius: var(--radius-md); }
.u-shadow-sm { box-shadow: var(--shadow-sm); }

.u-overflow-hidden { overflow: hidden; }

/* =========================
   PATTERN DE FUNDO
   Uso: adicione .u-pattern a qualquer section/div com position: relative
   Variante branca: .u-pattern--white (para fundos escuros)
   Controle de tamanho: .u-pattern--sm / --lg
========================= */

.u-pattern {
  position: relative;
}

.u-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/ofisp-pattern.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.u-pattern > * {
  position: relative;
  z-index: 1;
}

.u-pattern--white::before {
  filter: brightness(0) invert(1);
  opacity: 0.15;
}

.u-pattern--sm::before { background-size: 180px auto; }
.u-pattern--lg::before { background-size: 480px auto; }