/* ============================================================
   MAHIRA PREMIUM | UTILITIES
   ============================================================
   Purpose: Reusable utility classes for layout, spacing, etc.
   Editable: Yes
   Dependencies: variables.css
   ============================================================ */

/* ========== IMAGE UTILITIES ========== */
.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-auto {
  width: 100%;
  height: auto;
  display: block;
}

.aspect-square { aspect-ratio: 1/1; }
.aspect-4x3 { aspect-ratio: 4/3; }
.aspect-16x9 { aspect-ratio: 16/9; }
.aspect-3x4 { aspect-ratio: 3/4; }
.aspect-9x16 { aspect-ratio: 9/16; }

/* ========== SPACING UTILITIES ========== */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }

/* ========== DISPLAY UTILITIES ========== */
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }

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

/* ========== BACKGROUND UTILITIES ========== */
.bg-cream { background-color: var(--cream); }
.bg-cream-dark { background-color: var(--cream-dark); }
.bg-white { background-color: var(--white); }
.bg-brown { background-color: var(--brown-dark); }

/* ========== BORDER UTILITIES ========== */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }

/* ========== SHADOW UTILITIES ========== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }