/* ==========================================================================
   Utilities - Tailwind-like reusable classes
   Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48, 64
   ========================================================================== */

/* Display */
.u-hidden { display: none !important; }
.u-block { display: block !important; }
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }

/* Flexbox */
.u-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.u-flex-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.u-flex-col {
  flex-direction: column !important;
}

.u-flex-wrap {
  flex-wrap: wrap !important;
}

/* Text alignment */
.u-text-center { text-align: center !important; }
.u-text-left { text-align: left !important; }
.u-text-right { text-align: right !important; }

/* Spacing - Margin */
.u-m-0 { margin: 0 !important; }
.u-mt-4 { margin-top: 4px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mt-32 { margin-top: 32px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-mb-4 { margin-bottom: 4px !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-mb-24 { margin-bottom: 24px !important; }
.u-mb-32 { margin-bottom: 32px !important; }
.u-mb-40 { margin-bottom: 40px !important; }

/* Spacing - Padding */
.u-p-0 { padding: 0 !important; }
.u-p-8 { padding: 8px !important; }
.u-p-16 { padding: 16px !important; }
.u-p-24 { padding: 24px !important; }

/* Layout */
.u-container {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.u-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .u-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Visibility */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}