/**
 * LyfeHub Responsive Breakpoint System
 * =====================================
 * Standardized breakpoints and visibility utilities for mobile-first responsive design.
 * Import this file BEFORE style.css so app styles can override when needed.
 *
 * Breakpoint Scale:
 *   sm (640px)  - Mobile phones (landscape)
 *   md (768px)  - Tablets (portrait)
 *   lg (1024px) - Tablets (landscape) / Small laptops
 *   xl (1280px) - Desktops
 */

/* ==========================================================================
   CSS Custom Properties (Breakpoint Values)
   ========================================================================== */

:root {
  /* Breakpoint values - use in calc() or reference in documentation */
  --bp-sm: 640px;   /* Mobile landscape */
  --bp-md: 768px;   /* Tablet portrait */
  --bp-lg: 1024px;  /* Tablet landscape */
  --bp-xl: 1280px;  /* Desktop */
}


/* ==========================================================================
   Visibility Utility Classes
   ========================================================================== 
   
   Usage:
     .mobile-only   → Visible only on screens ≤768px
     .tablet-only   → Visible only on screens 769px-1024px
     .desktop-only  → Visible only on screens >1024px
     
     .hide-mobile   → Hidden on screens ≤768px
     .hide-tablet   → Hidden on screens 769px-1024px
     .hide-desktop  → Hidden on screens >1024px
*/

/* --------------------------------------
   Mobile Only (≤768px)
   Visible by default, hidden on larger screens
   -------------------------------------- */
.mobile-only {
  display: block;
}

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


/* --------------------------------------
   Tablet Only (769px - 1024px)
   Hidden by default, shown only in tablet range
   -------------------------------------- */
.tablet-only {
  display: none;
}

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


/* --------------------------------------
   Desktop Only (>1024px)
   Hidden by default, shown on large screens
   -------------------------------------- */
.desktop-only {
  display: none;
}

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


/* --------------------------------------
   Hide on Mobile (≤768px)
   Visible by default, hidden on mobile
   -------------------------------------- */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}


/* --------------------------------------
   Hide on Tablet (769px - 1024px)
   Visible by default, hidden in tablet range
   -------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}


/* --------------------------------------
   Hide on Desktop (>1024px)
   Visible by default, hidden on large screens
   -------------------------------------- */
@media (min-width: 1025px) {
  .hide-desktop {
    display: none !important;
  }
}


/* ==========================================================================
   Inline Visibility Variants
   ========================================================================== 
   For elements that should be inline rather than block
*/

.mobile-only-inline {
  display: inline;
}

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

.tablet-only-inline {
  display: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-only-inline {
    display: inline !important;
  }
}

.desktop-only-inline {
  display: none;
}

@media (min-width: 1025px) {
  .desktop-only-inline {
    display: inline !important;
  }
}


/* ==========================================================================
   Flex Visibility Variants
   ========================================================================== 
   For elements that should be flex containers
*/

.mobile-only-flex {
  display: flex;
}

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

.tablet-only-flex {
  display: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-only-flex {
    display: flex !important;
  }
}

.desktop-only-flex {
  display: none;
}

@media (min-width: 1025px) {
  .desktop-only-flex {
    display: flex !important;
  }
}