/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Layout */
.massajio-container {
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.massajio-container--narrow {
  max-width: var(--width-content);
}

.massajio-container--full {
  max-width: var(--width-full);
}

/* Flexbox */
.massajio-flex {
  display: flex;
}

.massajio-flex--wrap {
  flex-wrap: wrap;
}

.massajio-flex--center {
  align-items: center;
  justify-content: center;
}

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

.massajio-flex--col {
  flex-direction: column;
}

.massajio-gap-1 { gap: var(--space-1); }
.massajio-gap-2 { gap: var(--space-2); }
.massajio-gap-3 { gap: var(--space-3); }
.massajio-gap-4 { gap: var(--space-4); }
.massajio-gap-6 { gap: var(--space-6); }
.massajio-gap-8 { gap: var(--space-8); }

/* Spacing */
.massajio-mt-2 { margin-top: var(--space-2); }
.massajio-mt-4 { margin-top: var(--space-4); }
.massajio-mt-6 { margin-top: var(--space-6); }
.massajio-mt-8 { margin-top: var(--space-8); }
.massajio-mb-2 { margin-bottom: var(--space-2); }
.massajio-mb-4 { margin-bottom: var(--space-4); }
.massajio-mb-6 { margin-bottom: var(--space-6); }
.massajio-mb-8 { margin-bottom: var(--space-8); }

/* Text */
.massajio-text-center { text-align: center; }
.massajio-text-right { text-align: right; }
.massajio-text-muted { color: var(--color-text-muted); }
.massajio-text-secondary { color: var(--color-text-secondary); }
.massajio-text-accent { color: var(--color-accent); }
.massajio-text-warm { color: var(--color-warm); }
.massajio-text-cool { color: var(--color-cool); }

.massajio-font-sans { font-family: var(--font-sans); }
.massajio-font-serif { font-family: var(--font-serif); }
.massajio-font-mono { font-family: var(--font-mono); }

/* Display */
.massajio-hidden { display: none; }
.massajio-block { display: block; }
.massajio-inline-block { display: inline-block; }

@media (min-width: 640px) {
  .massajio-sm-hidden { display: none; }
  .massajio-sm-block { display: block; }
}

@media (min-width: 1024px) {
  .massajio-lg-hidden { display: none; }
  .massajio-lg-block { display: block; }
}

/* Grid */
.massajio-grid {
  display: grid;
  gap: var(--space-4);
}

.massajio-grid--2col {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .massajio-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.massajio-grid--3col {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .massajio-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .massajio-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.massajio-section {
  margin-top: var(--space-8);
}

.massajio-section__title {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}