/* 
 * Responsive Utility Classes 
 * Provides additional classes that make using the breakpoint system easier
 */

/* Display Utilities - Control when elements show or hide */

/* Hide at specific breakpoints */
.hide-xs {
  display: none;
}

@media (min-width: 576px) {
  .hide-xs {
    display: initial;
  }
  .hide-sm {
    display: none;
  }
}

@media (min-width: 768px) {
  .hide-sm {
    display: initial;
  }
  .hide-md {
    display: none;
  }
}

@media (min-width: 992px) {
  .hide-md {
    display: initial;
  }
  .hide-lg {
    display: none;
  }
}

@media (min-width: 1200px) {
  .hide-lg {
    display: initial;
  }
  .hide-xl {
    display: none;
  }
}

/* Only show at specific breakpoints */
.show-xs {
  display: initial;
}
.show-sm, .show-md, .show-lg, .show-xl {
  display: none;
}

@media (min-width: 576px) and (max-width: 767px) {
  .show-xs {
    display: none;
  }
  .show-sm {
    display: initial;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .show-xs {
    display: none;
  }
  .show-md {
    display: initial;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .show-xs {
    display: none;
  }
  .show-lg {
    display: initial;
  }
}

@media (min-width: 1200px) {
  .show-xs {
    display: none;
  }
  .show-xl {
    display: initial;
  }
}

/* Spacing Utilities - Control spacing at different breakpoints */
@media (min-width: 576px) {
  .sm\:p-0 { padding: 0 !important; }
  .sm\:p-1 { padding: var(--space-1) !important; }
  .sm\:p-2 { padding: var(--space-2) !important; }
  .sm\:p-3 { padding: var(--space-3) !important; }
  .sm\:p-4 { padding: var(--space-4) !important; }
  
  .sm\:m-0 { margin: 0 !important; }
  .sm\:m-1 { margin: var(--space-1) !important; }
  .sm\:m-2 { margin: var(--space-2) !important; }
  .sm\:m-3 { margin: var(--space-3) !important; }
  .sm\:m-4 { margin: var(--space-4) !important; }
}

@media (min-width: 768px) {
  .md\:p-0 { padding: 0 !important; }
  .md\:p-1 { padding: var(--space-1) !important; }
  .md\:p-2 { padding: var(--space-2) !important; }
  .md\:p-3 { padding: var(--space-3) !important; }
  .md\:p-4 { padding: var(--space-4) !important; }
  
  .md\:m-0 { margin: 0 !important; }
  .md\:m-1 { margin: var(--space-1) !important; }
  .md\:m-2 { margin: var(--space-2) !important; }
  .md\:m-3 { margin: var(--space-3) !important; }
  .md\:m-4 { margin: var(--space-4) !important; }
}

@media (min-width: 992px) {
  .lg\:p-0 { padding: 0 !important; }
  .lg\:p-1 { padding: var(--space-1) !important; }
  .lg\:p-2 { padding: var(--space-2) !important; }
  .lg\:p-3 { padding: var(--space-3) !important; }
  .lg\:p-4 { padding: var(--space-4) !important; }
  
  .lg\:m-0 { margin: 0 !important; }
  .lg\:m-1 { margin: var(--space-1) !important; }
  .lg\:m-2 { margin: var(--space-2) !important; }
  .lg\:m-3 { margin: var(--space-3) !important; }
  .lg\:m-4 { margin: var(--space-4) !important; }
}

/* Layout Utilities - Control layout at different breakpoints */
@media (min-width: 576px) {
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:flex-col { flex-direction: column !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:justify-between { justify-content: space-between !important; }
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row !important; }
  .md\:flex-col { flex-direction: column !important; }
  .md\:items-center { align-items: center !important; }
  .md\:justify-between { justify-content: space-between !important; }
  
  /* Grid for screenshots and cards */
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (min-width: 992px) {
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:flex-col { flex-direction: column !important; }
  
  /* Grid for screenshots and cards */
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Typography Utilities - Control text at different breakpoints */
@media (min-width: 576px) {
  .sm\:text-left { text-align: left !important; }
  .sm\:text-center { text-align: center !important; }
  .sm\:text-right { text-align: right !important; }
}

@media (min-width: 768px) {
  .md\:text-left { text-align: left !important; }
  .md\:text-center { text-align: center !important; }
  .md\:text-right { text-align: right !important; }
}