/* ============================================
   INSTADM - Standardized Breakpoints
   Use these consistently across all CSS files
   ============================================ */

:root {
    /* Mobile-first breakpoints */
    --bp-xs: 480px;
    /* Small phones */
    --bp-sm: 640px;
    /* Large phones */
    --bp-md: 768px;
    /* Tablets */
    --bp-lg: 1024px;
    /* Laptops */
    --bp-xl: 1280px;
    /* Desktops */
    --bp-2xl: 1536px;
    /* Large screens */
}

/*
 * USAGE GUIDE:
 * 
 * Mobile-first (preferred):
 * @media (min-width: 640px) { }  - sm and up
 * @media (min-width: 768px) { }  - md and up
 * @media (min-width: 1024px) { } - lg and up
 * 
 * Desktop-first (when needed):
 * @media (max-width: 767px) { }  - below md (mobile)
 * @media (max-width: 639px) { }  - below sm (phones only)
 * 
 * Range queries:
 * @media (min-width: 768px) and (max-width: 1023px) { } - tablets only
 */

/* ============================================
   CONTAINER QUERIES (Modern CSS)
   ============================================ */

/* Container query setup for component-level responsiveness */
.container-responsive {
    container-type: inline-size;
}

/* Example container query usage:
@container (min-width: 400px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}
*/