/* Utilities - Helper Classes and Spacing */

/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacing-xs) !important; }
.pt-2 { padding-top: var(--spacing-sm) !important; }
.pt-3 { padding-top: var(--spacing-md) !important; }
.pt-4 { padding-top: var(--spacing-lg) !important; }
.pt-5 { padding-top: var(--spacing-xl) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--spacing-xs) !important; }
.pb-2 { padding-bottom: var(--spacing-sm) !important; }
.pb-3 { padding-bottom: var(--spacing-md) !important; }
.pb-4 { padding-bottom: var(--spacing-lg) !important; }
.pb-5 { padding-bottom: var(--spacing-xl) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-2 { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-3 { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-4 { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-2 { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-3 { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-4 { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }

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

/* Display Utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }

/* Width Utilities */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.max-w-sm { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
.max-w-md { max-width: 768px !important; margin-left: auto !important; margin-right: auto !important; }
.max-w-lg { max-width: 1024px !important; margin-left: auto !important; margin-right: auto !important; }
.max-w-xl { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }

/* Color Utilities */
.text-gold { color: var(--color-gold) !important; }
.text-light { color: var(--color-text-light) !important; }
.text-medium { color: var(--color-text-medium) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-dark { color: var(--color-text-dark) !important; }

.bg-dark-primary { background-color: var(--color-dark-primary) !important; }
.bg-dark-secondary { background-color: var(--color-dark-secondary) !important; }
.bg-light-primary { background-color: var(--color-light-primary) !important; }
.bg-gold { background-color: var(--color-gold) !important; }

/* Border Utilities */
.border-top { border-top: 1px solid var(--color-dark-tertiary) !important; }
.border-bottom { border-bottom: 1px solid var(--color-dark-tertiary) !important; }
.border-gold { border-color: var(--color-gold) !important; }

/* Position Utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Gap Utilities for Flexbox/Grid */
.gap-1 { gap: var(--spacing-xs) !important; }
.gap-2 { gap: var(--spacing-sm) !important; }
.gap-3 { gap: var(--spacing-md) !important; }
.gap-4 { gap: var(--spacing-lg) !important; }

/* Responsive Show/Hide */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* Aspect Ratio */
.aspect-16-9 {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.aspect-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aspect-4-3 {
  position: relative;
  padding-bottom: 75%;
  overflow: hidden;
}

.aspect-4-3 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aspect-square {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
}

.aspect-square > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image Effects */
.img-grayscale {
  filter: grayscale(100%);
  transition: filter var(--transition-medium);
}

.img-grayscale:hover {
  filter: grayscale(0%);
}

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

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

/* Shadow Utilities */
.shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.shadow-lg {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.shadow-gold {
  box-shadow: 0 10px 30px rgba(160, 113, 75, 0.25);
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

/* Transitions */
.transition-all {
  transition: all var(--transition-medium);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}