/* ============================================
   Bootstrap 5.3 Breakpoint System - Global Configuration
   ============================================ */

/*
 * Bootstrap 5.3 Standard Breakpoints:
 * - xs: < 576px (extra small devices, phones)
 * - sm: >= 576px (small devices, landscape phones)
 * - md: >= 768px (medium devices, tablets)  **KEY BREAKPOINT**
 * - lg: >= 992px (large devices, desktops)
 * - xl: >= 1200px (extra large devices, large desktops)
 * - xxl: >= 1400px (extra extra large devices, larger desktops)
 * 
 * IMPORTANT: Bootstrap uses min-width in their media queries
 * For max-width queries, use .98px to avoid conflicts:
 * - max-width: 767.98px (mobile)
 * - max-width: 991.98px (below desktop)
 */

/* CSS Custom Properties for Breakpoints */
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;      /* Key breakpoint: Bootstrap md starts here */
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
  
  /* Max-width equivalents for use in max-width queries */
  --bs-breakpoint-sm-max: 575.98px;
  --bs-breakpoint-md-max: 767.98px;  /* Use this for mobile styles */
  --bs-breakpoint-lg-max: 991.98px;
  --bs-breakpoint-xl-max: 1199.98px;
}

/* ============================================
   Global Responsive Overrides
   ============================================ */

/* Mobile: Below Bootstrap md breakpoint (< 768px) */
@media (max-width: 767.98px) {
  /* Bootstrap col-md-* classes stack vertically (default behavior) */
  /* Add any global mobile overrides here */
}

/* Tablet: Bootstrap md breakpoint (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Bootstrap col-md-* classes activate here */
  /* Add any global tablet overrides here */
}

/* Desktop: Bootstrap lg breakpoint and above (992px+) */
@media (min-width: 992px) {
  /* Bootstrap col-lg-* classes activate here */
  /* Add any global desktop overrides here */
}