/* === BREAKPOINT MIXINS - KEIMADA LIVE === */
/* Sistema unificado de breakpoints usando CSS custom properties */

/* Import variables */
@import url('./variables.css');

/* === BREAKPOINT MIXINS === */
/* Uso: @import this file, then use the custom properties in your media queries */

/* MOBILE FIRST APPROACH */
/* 
Usage examples:
@media (max-width: var(--breakpoint-truemobile)) { ... }    // ≤480px (trueMobile)
@media (max-width: var(--breakpoint-mobile)) { ... }        // ≤768px (mobile)
@media (min-width: calc(var(--breakpoint-mobile) + 1px)) and 
       (max-width: var(--breakpoint-tablet)) { ... }        // 769px-1024px (tablet)
@media (min-width: calc(var(--breakpoint-tablet) + 1px)) { ... } // ≥1025px (desktop+)
*/

/* === STANDARD BREAKPOINT CLASSES === */
/* Utilidad classes for hiding/showing at different breakpoints */

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

/* Show only on mobile (≤768px) */
.show-mobile {
    display: none;
}
@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Hide on tablet (769px-1024px) */
.hide-tablet {
    display: block;
}
@media (min-width: 769px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop (≥1025px) */
.hide-desktop {
    display: block;
}
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

/* === BREAKPOINT REFERENCE === */
/*
--breakpoint-truemobile: 480px    // Real mobile devices (≤480px + touch)
--breakpoint-mobile: 768px        // Mobile/Tablet boundary 
--breakpoint-tablet: 1024px       // Tablet/Desktop boundary
--breakpoint-desktop: 1200px      // Large Desktop threshold

Common usage patterns:
- Mobile: max-width: var(--breakpoint-mobile)
- Tablet: min-width: calc(var(--breakpoint-mobile) + 1px) and max-width: var(--breakpoint-tablet)
- Desktop: min-width: calc(var(--breakpoint-tablet) + 1px)
- Large Desktop: min-width: var(--breakpoint-desktop)
*/