/* SUTRA - Utility Classes */

/* Text Alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.lang-ar .text-left {
  text-align: right;
}

.lang-ar .text-right {
  text-align: left;
}

/* Spacing Utilities - Margin */
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-8 { margin-block-start: var(--space-8); }
.mt-12 { margin-block-start: var(--space-12); }
.mt-16 { margin-block-start: var(--space-16); }

.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-8 { margin-block-end: var(--space-8); }
.mb-12 { margin-block-end: var(--space-12); }
.mb-16 { margin-block-end: var(--space-16); }

/* Spacing Utilities - Padding */
.pt-1 { padding-block-start: var(--space-1); }
.pt-2 { padding-block-start: var(--space-2); }
.pt-3 { padding-block-start: var(--space-3); }
.pt-4 { padding-block-start: var(--space-4); }
.pt-6 { padding-block-start: var(--space-6); }
.pt-8 { padding-block-start: var(--space-8); }
.pt-12 { padding-block-start: var(--space-12); }
.pt-16 { padding-block-start: var(--space-16); }

.pb-1 { padding-block-end: var(--space-1); }
.pb-2 { padding-block-end: var(--space-2); }
.pb-3 { padding-block-end: var(--space-3); }
.pb-4 { padding-block-end: var(--space-4); }
.pb-6 { padding-block-end: var(--space-6); }
.pb-8 { padding-block-end: var(--space-8); }
.pb-12 { padding-block-end: var(--space-12); }
.pb-16 { padding-block-end: var(--space-16); }

/* Display Utilities */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
  
  .show-mobile {
    display: none;
  }
}

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

/* Logical Properties Helpers */
.ml-auto {
  margin-inline-start: auto;
}

.mr-auto {
  margin-inline-end: auto;
}

.lang-ar .ml-auto {
  margin-inline-end: auto;
  margin-inline-start: 0;
}

.lang-ar .mr-auto {
  margin-inline-start: auto;
  margin-inline-end: 0;
}