/* ==========================================
   UTILITY CLASSES - DRY responsive patterns
   ========================================== */

/* Responsive Visibility */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

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

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

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

@media (min-width: 768px) {
  .text-center-mobile {
    text-align: left;
  }
}

/* Spacing Utilities - based on design system */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* Flexible Spacing - responsive margins */
.responsive-margin-top {
  margin-top: var(--space-xl);
}

.responsive-margin-bottom {
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .responsive-margin-top {
    margin-top: var(--space-2xl);
  }
  
  .responsive-margin-bottom {
    margin-bottom: var(--space-2xl);
  }
}

/* Flexible Width Utilities */
.full-width { width: 100%; }
.max-content { width: max-content; }
.min-content { width: min-content; }

/* Common Overlay Pattern */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.black-overlay {
  @extend .overlay;
  background-color: rgba(0, 0, 0, 0.4);
}

/* Responsive Container Padding Pattern */
.slim-mobile-padding {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

@media (min-width: 768px) {
  .slim-mobile-padding {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Common Flex Patterns */
.flex-center-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .flex-center-mobile {
    flex-direction: row;
    justify-content: flex-start;
  }
}

/* Touch Target Optimization */
.touch-target {
  min-height: 48px;
  min-width: 48px;
}

@media (max-width: 768px) {
  .touch-target {
    min-height: 52px;
  }
}

/* Common Animation Patterns */
.smooth-transform {
  transition: all 0.3s ease-in-out;
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale:hover {
  transform: scale(1.02);
}