/* ========== ENHANCED RESPONSIVE UTILITY CLASSES ========== */
/* Mobile-First Approach - Base styles apply to mobile, then override for larger screens */

/* ========== ADDITIONAL RESPONSIVE DISPLAY UTILITIES ========== */

/* Hide on specific breakpoints */
@media (max-width: 575px) {
  .d-xs-none { display: none !important; }
}

@media (max-width: 767px) {
  .d-sm-down-none { display: none !important; }
}

@media (max-width: 991px) {
  .d-md-down-none { display: none !important; }
}

@media (max-width: 1199px) {
  .d-lg-down-none { display: none !important; }
}

/* ========== RESPONSIVE FLEXBOX UTILITIES ========== */

/* Small devices (576px and up) */
@media (min-width: 576px) {
  .flex-sm-wrap { flex-wrap: wrap !important; }
  .flex-sm-nowrap { flex-wrap: nowrap !important; }
  
  .align-sm-start { align-items: flex-start !important; }
  .align-sm-center { align-items: center !important; }
  .align-sm-end { align-items: flex-end !important; }
  
  .gap-sm-2 { gap: var(--space-2) !important; }
  .gap-sm-4 { gap: var(--space-4) !important; }
  .gap-sm-6 { gap: var(--space-6) !important; }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
  .flex-md-wrap { flex-wrap: wrap !important; }
  .flex-md-nowrap { flex-wrap: nowrap !important; }
  
  .align-md-start { align-items: flex-start !important; }
  .align-md-center { align-items: center !important; }
  .align-md-end { align-items: flex-end !important; }
  
  .gap-md-2 { gap: var(--space-2) !important; }
  .gap-md-4 { gap: var(--space-4) !important; }
  .gap-md-6 { gap: var(--space-6) !important; }
  .gap-md-8 { gap: var(--space-8) !important; }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
  .flex-lg-wrap { flex-wrap: wrap !important; }
  .flex-lg-nowrap { flex-wrap: nowrap !important; }
  
  .align-lg-start { align-items: flex-start !important; }
  .align-lg-center { align-items: center !important; }
  .align-lg-end { align-items: flex-end !important; }
  
  .gap-lg-2 { gap: var(--space-2) !important; }
  .gap-lg-4 { gap: var(--space-4) !important; }
  .gap-lg-6 { gap: var(--space-6) !important; }
  .gap-lg-8 { gap: var(--space-8) !important; }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
  .flex-xl-row { flex-direction: row !important; }
  .flex-xl-column { flex-direction: column !important; }
  .flex-xl-wrap { flex-wrap: wrap !important; }
  .flex-xl-nowrap { flex-wrap: nowrap !important; }
  
  .gap-xl-4 { gap: var(--space-4) !important; }
  .gap-xl-6 { gap: var(--space-6) !important; }
  .gap-xl-8 { gap: var(--space-8) !important; }
}

/* ========== RESPONSIVE GRID SYSTEM ========== */

/* Base grid utilities (mobile-first) */
.grid { display: grid !important; }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }

/* Small devices (576px and up) */
@media (min-width: 576px) {
  .grid-sm-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  
  .gap-sm-1 { gap: var(--space-1) !important; }
  .gap-sm-3 { gap: var(--space-3) !important; }
  .gap-sm-5 { gap: var(--space-5) !important; }
  .gap-sm-8 { gap: var(--space-8) !important; }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
  .grid-md-auto-fit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
  .grid-cols-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .grid-cols-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  
  .gap-md-1 { gap: var(--space-1) !important; }
  .gap-md-3 { gap: var(--space-3) !important; }
  .gap-md-5 { gap: var(--space-5) !important; }
  .gap-md-10 { gap: var(--space-10) !important; }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
  .grid-lg-auto-fit { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important; }
  .grid-cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  
  .gap-lg-1 { gap: var(--space-1) !important; }
  .gap-lg-3 { gap: var(--space-3) !important; }
  .gap-lg-5 { gap: var(--space-5) !important; }
  .gap-lg-10 { gap: var(--space-10) !important; }
  .gap-lg-12 { gap: var(--space-12) !important; }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
  .grid-cols-xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .grid-cols-xl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .grid-cols-xl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
}

/* ========== RESPONSIVE SPACING UTILITIES ========== */

/* Small devices (576px and up) */
@media (min-width: 576px) {
  .m-sm-0 { margin: var(--space-0) !important; }
  .m-sm-2 { margin: var(--space-2) !important; }
  .m-sm-4 { margin: var(--space-4) !important; }
  .m-sm-6 { margin: var(--space-6) !important; }
  .m-sm-8 { margin: var(--space-8) !important; }
  .m-sm-auto { margin: auto !important; }
  
  .mt-sm-1 { margin-top: var(--space-1) !important; }
  .mt-sm-2 { margin-top: var(--space-2) !important; }
  .mt-sm-3 { margin-top: var(--space-3) !important; }
  .mt-sm-5 { margin-top: var(--space-5) !important; }
  
  .mb-sm-1 { margin-bottom: var(--space-1) !important; }
  .mb-sm-2 { margin-bottom: var(--space-2) !important; }
  .mb-sm-3 { margin-bottom: var(--space-3) !important; }
  .mb-sm-4 { margin-bottom: var(--space-4) !important; }
  .mb-sm-5 { margin-bottom: var(--space-5) !important; }
  
  .ml-sm-auto { margin-left: auto !important; }
  .mr-sm-auto { margin-right: auto !important; }
  .mx-sm-auto { margin-left: auto !important; margin-right: auto !important; }
  
  .p-sm-0 { padding: var(--space-0) !important; }
  .p-sm-2 { padding: var(--space-2) !important; }
  .p-sm-3 { padding: var(--space-3) !important; }
  .p-sm-5 { padding: var(--space-5) !important; }
  
  .pt-sm-2 { padding-top: var(--space-2) !important; }
  .pt-sm-4 { padding-top: var(--space-4) !important; }
  .pt-sm-6 { padding-top: var(--space-6) !important; }
  
  .pb-sm-2 { padding-bottom: var(--space-2) !important; }
  .pb-sm-4 { padding-bottom: var(--space-4) !important; }
  .pb-sm-6 { padding-bottom: var(--space-6) !important; }
  
  .px-sm-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-sm-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  
  .py-sm-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-sm-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
  .m-md-0 { margin: var(--space-0) !important; }
  .m-md-2 { margin: var(--space-2) !important; }
  .m-md-3 { margin: var(--space-3) !important; }
  .m-md-5 { margin: var(--space-5) !important; }
  .m-md-10 { margin: var(--space-10) !important; }
  .m-md-auto { margin: auto !important; }
  
  .mt-md-1 { margin-top: var(--space-1) !important; }
  .mt-md-2 { margin-top: var(--space-2) !important; }
  .mt-md-3 { margin-top: var(--space-3) !important; }
  .mt-md-5 { margin-top: var(--space-5) !important; }
  .mt-md-10 { margin-top: var(--space-10) !important; }
  .mt-md-12 { margin-top: var(--space-12) !important; }
  
  .mb-md-1 { margin-bottom: var(--space-1) !important; }
  .mb-md-2 { margin-bottom: var(--space-2) !important; }
  .mb-md-3 { margin-bottom: var(--space-3) !important; }
  .mb-md-5 { margin-bottom: var(--space-5) !important; }
  .mb-md-10 { margin-bottom: var(--space-10) !important; }
  .mb-md-12 { margin-bottom: var(--space-12) !important; }
  
  .ml-md-auto { margin-left: auto !important; }
  .mr-md-auto { margin-right: auto !important; }
  .mx-md-auto { margin-left: auto !important; margin-right: auto !important; }
  
  .p-md-0 { padding: var(--space-0) !important; }
  .p-md-2 { padding: var(--space-2) !important; }
  .p-md-3 { padding: var(--space-3) !important; }
  .p-md-5 { padding: var(--space-5) !important; }
  .p-md-10 { padding: var(--space-10) !important; }
  
  .pt-md-2 { padding-top: var(--space-2) !important; }
  .pt-md-3 { padding-top: var(--space-3) !important; }
  .pt-md-5 { padding-top: var(--space-5) !important; }
  .pt-md-10 { padding-top: var(--space-10) !important; }
  
  .pb-md-2 { padding-bottom: var(--space-2) !important; }
  .pb-md-3 { padding-bottom: var(--space-3) !important; }
  .pb-md-5 { padding-bottom: var(--space-5) !important; }
  .pb-md-10 { padding-bottom: var(--space-10) !important; }
  
  .px-md-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-md-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .px-md-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  
  .py-md-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-md-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .py-md-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
  .m-lg-0 { margin: var(--space-0) !important; }
  .m-lg-2 { margin: var(--space-2) !important; }
  .m-lg-3 { margin: var(--space-3) !important; }
  .m-lg-5 { margin: var(--space-5) !important; }
  .m-lg-10 { margin: var(--space-10) !important; }
  .m-lg-12 { margin: var(--space-12) !important; }
  .m-lg-auto { margin: auto !important; }
  
  .mt-lg-1 { margin-top: var(--space-1) !important; }
  .mt-lg-2 { margin-top: var(--space-2) !important; }
  .mt-lg-3 { margin-top: var(--space-3) !important; }
  .mt-lg-5 { margin-top: var(--space-5) !important; }
  .mt-lg-10 { margin-top: var(--space-10) !important; }
  .mt-lg-12 { margin-top: var(--space-12) !important; }
  .mt-lg-16 { margin-top: var(--space-16) !important; }
  
  .mb-lg-1 { margin-bottom: var(--space-1) !important; }
  .mb-lg-2 { margin-bottom: var(--space-2) !important; }
  .mb-lg-3 { margin-bottom: var(--space-3) !important; }
  .mb-lg-5 { margin-bottom: var(--space-5) !important; }
  .mb-lg-10 { margin-bottom: var(--space-10) !important; }
  .mb-lg-12 { margin-bottom: var(--space-12) !important; }
  .mb-lg-16 { margin-bottom: var(--space-16) !important; }
  
  .ml-lg-auto { margin-left: auto !important; }
  .mr-lg-auto { margin-right: auto !important; }
  .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
  
  .p-lg-0 { padding: var(--space-0) !important; }
  .p-lg-2 { padding: var(--space-2) !important; }
  .p-lg-3 { padding: var(--space-3) !important; }
  .p-lg-5 { padding: var(--space-5) !important; }
  .p-lg-10 { padding: var(--space-10) !important; }
  .p-lg-12 { padding: var(--space-12) !important; }
  
  .pt-lg-2 { padding-top: var(--space-2) !important; }
  .pt-lg-3 { padding-top: var(--space-3) !important; }
  .pt-lg-5 { padding-top: var(--space-5) !important; }
  .pt-lg-10 { padding-top: var(--space-10) !important; }
  .pt-lg-12 { padding-top: var(--space-12) !important; }
  
  .pb-lg-2 { padding-bottom: var(--space-2) !important; }
  .pb-lg-3 { padding-bottom: var(--space-3) !important; }
  .pb-lg-5 { padding-bottom: var(--space-5) !important; }
  .pb-lg-10 { padding-bottom: var(--space-10) !important; }
  .pb-lg-12 { padding-bottom: var(--space-12) !important; }
  
  .px-lg-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-lg-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .px-lg-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-lg-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
  
  .py-lg-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-lg-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .py-lg-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-lg-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
  .m-xl-0 { margin: var(--space-0) !important; }
  .m-xl-4 { margin: var(--space-4) !important; }
  .m-xl-8 { margin: var(--space-8) !important; }
  .m-xl-12 { margin: var(--space-12) !important; }
  .m-xl-16 { margin: var(--space-16) !important; }
  .m-xl-auto { margin: auto !important; }
  
  .mt-xl-4 { margin-top: var(--space-4) !important; }
  .mt-xl-8 { margin-top: var(--space-8) !important; }
  .mt-xl-12 { margin-top: var(--space-12) !important; }
  .mt-xl-16 { margin-top: var(--space-16) !important; }
  .mt-xl-20 { margin-top: var(--space-20) !important; }
  
  .mb-xl-4 { margin-bottom: var(--space-4) !important; }
  .mb-xl-8 { margin-bottom: var(--space-8) !important; }
  .mb-xl-12 { margin-bottom: var(--space-12) !important; }
  .mb-xl-16 { margin-bottom: var(--space-16) !important; }
  .mb-xl-20 { margin-bottom: var(--space-20) !important; }
  
  .p-xl-4 { padding: var(--space-4) !important; }
  .p-xl-8 { padding: var(--space-8) !important; }
  .p-xl-12 { padding: var(--space-12) !important; }
  .p-xl-16 { padding: var(--space-16) !important; }
  
  .px-xl-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-xl-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
  
  .py-xl-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-xl-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
}

/* ========== RESPONSIVE WIDTH & HEIGHT UTILITIES ========== */

@media (min-width: 576px) {
  .w-sm-full { width: 100% !important; }
  .w-sm-auto { width: auto !important; }
  .w-sm-50 { width: 50% !important; }
  .w-sm-75 { width: 75% !important; }
  
  .h-sm-full { height: 100% !important; }
  .h-sm-auto { height: auto !important; }
}

@media (min-width: 768px) {
  .w-md-full { width: 100% !important; }
  .w-md-auto { width: auto !important; }
  .w-md-50 { width: 50% !important; }
  .w-md-33 { width: 33.333333% !important; }
  .w-md-66 { width: 66.666667% !important; }
  .w-md-75 { width: 75% !important; }
  
  .h-md-full { height: 100% !important; }
  .h-md-auto { height: auto !important; }
  
  .max-w-md-full { max-width: 100% !important; }
}

@media (min-width: 992px) {
  .w-lg-full { width: 100% !important; }
  .w-lg-auto { width: auto !important; }
  .w-lg-50 { width: 50% !important; }
  .w-lg-33 { width: 33.333333% !important; }
  .w-lg-66 { width: 66.666667% !important; }
  .w-lg-25 { width: 25% !important; }
  .w-lg-75 { width: 75% !important; }
  
  .h-lg-full { height: 100% !important; }
  .h-lg-auto { height: auto !important; }
  
  .max-w-lg-full { max-width: 100% !important; }
}

@media (min-width: 1200px) {
  .w-xl-full { width: 100% !important; }
  .w-xl-auto { width: auto !important; }
  .w-xl-50 { width: 50% !important; }
  
  .max-w-xl-full { max-width: 100% !important; }
}

/* ========== RESPONSIVE TEXT UTILITIES ========== */

@media (min-width: 576px) {
  .text-sm-xs { font-size: var(--text-xs) !important; }
  .text-sm-sm { font-size: var(--text-sm) !important; }
  .text-sm-base { font-size: var(--text-base) !important; }
  .text-sm-lg { font-size: var(--text-lg) !important; }
  .text-sm-xl { font-size: var(--text-xl) !important; }
}

@media (min-width: 768px) {
  .text-md-xs { font-size: var(--text-xs) !important; }
  .text-md-sm { font-size: var(--text-sm) !important; }
  .text-md-base { font-size: var(--text-base) !important; }
  .text-md-lg { font-size: var(--text-lg) !important; }
  .text-md-xl { font-size: var(--text-xl) !important; }
  .text-md-2xl { font-size: var(--text-2xl) !important; }
  .text-md-3xl { font-size: var(--text-3xl) !important; }
}

@media (min-width: 992px) {
  .text-lg-base { font-size: var(--text-base) !important; }
  .text-lg-lg { font-size: var(--text-lg) !important; }
  .text-lg-xl { font-size: var(--text-xl) !important; }
  .text-lg-2xl { font-size: var(--text-2xl) !important; }
  .text-lg-3xl { font-size: var(--text-3xl) !important; }
  .text-lg-4xl { font-size: var(--text-4xl) !important; }
  .text-lg-5xl { font-size: var(--text-5xl) !important; }
}

@media (min-width: 1200px) {
  .text-xl-2xl { font-size: var(--text-2xl) !important; }
  .text-xl-3xl { font-size: var(--text-3xl) !important; }
  .text-xl-4xl { font-size: var(--text-4xl) !important; }
  .text-xl-5xl { font-size: var(--text-5xl) !important; }
  .text-xl-6xl { font-size: var(--text-6xl) !important; }
}

/* ========== RESPONSIVE ORDER UTILITIES ========== */

@media (min-width: 576px) {
  .order-sm-first { order: -1 !important; }
  .order-sm-last { order: 999 !important; }
  .order-sm-0 { order: 0 !important; }
  .order-sm-1 { order: 1 !important; }
  .order-sm-2 { order: 2 !important; }
  .order-sm-3 { order: 3 !important; }
}

@media (min-width: 768px) {
  .order-md-first { order: -1 !important; }
  .order-md-last { order: 999 !important; }
  .order-md-0 { order: 0 !important; }
  .order-md-1 { order: 1 !important; }
  .order-md-2 { order: 2 !important; }
  .order-md-3 { order: 3 !important; }
}

@media (min-width: 992px) {
  .order-lg-first { order: -1 !important; }
  .order-lg-last { order: 999 !important; }
  .order-lg-0 { order: 0 !important; }
  .order-lg-1 { order: 1 !important; }
  .order-lg-2 { order: 2 !important; }
  .order-lg-3 { order: 3 !important; }
}

@media (min-width: 1200px) {
  .order-xl-first { order: -1 !important; }
  .order-xl-last { order: 999 !important; }
  .order-xl-0 { order: 0 !important; }
  .order-xl-1 { order: 1 !important; }
  .order-xl-2 { order: 2 !important; }
}

/* ========== RESPONSIVE CONTAINER UTILITIES ========== */

.container-fluid {
  width: 100%;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  margin-right: auto;
  margin-left: auto;
}

.container-responsive {
  width: 100%;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-responsive {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-responsive {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-responsive {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container-responsive {
    max-width: var(--container-max);
  }
}

/* ========== RESPONSIVE VISIBILITY HELPERS ========== */

/* Show only on mobile */
.mobile-only {
  display: block !important;
}

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

/* Show only on tablet and up */
.tablet-up {
  display: none !important;
}

@media (min-width: 768px) {
  .tablet-up {
    display: block !important;
  }
}

/* Show only on desktop and up */
.desktop-up {
  display: none !important;
}

@media (min-width: 992px) {
  .desktop-up {
    display: block !important;
  }
}

/* Hide on mobile */
.hide-mobile {
  display: none !important;
}

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

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}