/* 
 * KENNIX RESPONSIVE CSS
 * Standardized breakpoints for consistent responsive behavior
 */

:root {
  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 960px;
}

/* 
 * DEVICE DETECTION MIXINS
 * These classes can be used in JavaScript with matchMedia to detect device types
 */
.device-mobile {
  display: none;
}

.device-tablet {
  display: none;
}

.device-desktop {
  display: none;
}

@media (max-width: 768px) {
  .device-mobile {
    display: block;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  .device-tablet {
    display: block;
  }
}

@media (min-width: 961px) {
  .device-desktop {
    display: block;
  }
}

/* 
 * RESPONSIVE HELPERS
 * Utility classes for responsive design
 */

/* Hide elements based on device type */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  .hide-on-tablet {
    display: none !important;
  }
}

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

/* Show elements based on device type */
.show-on-mobile {
  display: none !important;
}

.show-on-tablet {
  display: none !important;
}

.show-on-desktop {
  display: none !important;
}

@media (max-width: 768px) {
  .show-on-mobile {
    display: block !important;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  .show-on-tablet {
    display: block !important;
  }
}

@media (min-width: 961px) {
  .show-on-desktop {
    display: block !important;
  }
}

/* Special case for landscape mode on mobile */
@media (max-width: 960px) and (orientation: landscape) {
  .show-on-landscape {
    display: block !important;
  }
  
  .hide-on-landscape {
    display: none !important;
  }
}