/**
 * Centralized Responsive Breakpoints
 * 
 * This file defines the standardized breakpoints for the entire theme.
 * Using a mobile-first approach with 3 main breakpoints based on column layouts.
 * 
 * Breakpoints:
 * - Mobile (base): 1-2 columns
 * - Tablet (800px+): 3 columns  
 * - Desktop (1200px+): 4 columns
 * 
 * Aligns with BuddyBoss theme breakpoint at 800px (799px + 1)
 */

:root {
    /* Breakpoint values */
    --breakpoint-tablet: 800px;   /* 3 columns layout */
    --breakpoint-desktop: 1200px; /* 4 columns layout */
    
    /* Grid column counts */
    --grid-columns-mobile: 2;
    --grid-columns-tablet: 3;
    --grid-columns-desktop: 4;
    
    /* Container widths */
    --container-max-width: 1400px;
    --container-padding: 20px;
    
    /* Readable breakpoint aliases for clarity */
    --bp-md: var(--breakpoint-tablet);
    --bp-lg: var(--breakpoint-desktop);
}

/**
 * Utility classes for responsive visibility
 * These follow mobile-first approach
 */

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

@media (min-width: 800px) {
    .hide-mobile {
        display: initial !important;
    }
    
    .show-mobile-only {
        display: none !important;
    }
}

/* Hide on tablet, show on desktop+ */
@media (min-width: 800px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hide-tablet {
        display: initial !important;
    }
    
    .show-tablet-only {
        display: none !important;
    }
}

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

@media (min-width: 1200px) {
    .show-desktop-only {
        display: initial !important;
    }
}

/**
 * Responsive grid mixin-like classes
 */
.responsive-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
}

@media (min-width: 800px) {
    .responsive-grid {
        grid-template-columns: repeat(var(--grid-columns-tablet), 1fr);
    }
}

@media (min-width: 1200px) {
    .responsive-grid {
        grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
    }
}