/**
 * CheckToBuild - Responsive System
 * Breakpoints y utilidades responsive unificadas
 * 
 * @package CheckToBuild
 * @since 2.0.0
 */

/* ===========================
   BREAKPOINTS DEFINIDOS
   =========================== */

/*
 * xs: 0-479px      (Small mobile)
 * sm: 480-767px    (Mobile)
 * md: 768-991px    (Tablet)
 * lg: 992-1199px   (Desktop)
 * xl: 1200-1399px  (Large desktop)
 * 2xl: 1400px+     (Extra large)
 */

/* ===========================
   DISPLAY RESPONSIVE
   =========================== */

/* Tablet y menor (768px) */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .show-mobile-flex {
        display: flex !important;
    }
}

/* Desktop y mayor (769px+) */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
    
    .show-desktop {
        display: block !important;
    }
    
    .show-desktop-flex {
        display: flex !important;
    }
}

/* ===========================
   TEXT ALIGNMENT RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .text-md-center {
        text-align: center !important;
    }
    
    .text-md-left {
        text-align: left !important;
    }
    
    .text-md-right {
        text-align: right !important;
    }
}

/* ===========================
   FLEX DIRECTION RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .flex-md-column {
        flex-direction: column !important;
    }
    
    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }
}

/* ===========================
   ORDER RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .order-md-first {
        order: -1 !important;
    }
    
    .order-md-last {
        order: 999 !important;
    }
    
    .order-md-0 { order: 0 !important; }
    .order-md-1 { order: 1 !important; }
    .order-md-2 { order: 2 !important; }
    .order-md-3 { order: 3 !important; }
}

/* ===========================
   WIDTH RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .w-md-full {
        width: 100% !important;
    }
    
    .w-md-auto {
        width: auto !important;
    }
}

/* ===========================
   PADDING RESPONSIVE
   =========================== */

@media (max-width: 992px) {
    .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .px-lg-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
    .py-lg-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
}

@media (max-width: 768px) {
    .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .px-md-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
    .py-md-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
    .px-md-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
    .py-md-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
}

/* ===========================
   MARGIN RESPONSIVE
   =========================== */

@media (max-width: 992px) {
    .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
    .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .mt-lg-0 { margin-top: 0 !important; }
    .mb-lg-0 { margin-bottom: 0 !important; }
}

@media (max-width: 768px) {
    .mx-md-auto { margin-left: auto !important; margin-right: auto !important; }
    .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .mt-md-0 { margin-top: 0 !important; }
    .mb-md-0 { margin-bottom: 0 !important; }
    .mt-md-4 { margin-top: var(--space-4) !important; }
    .mb-md-4 { margin-bottom: var(--space-4) !important; }
}

/* ===========================
   GAP RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .gap-md-2 { gap: var(--space-2) !important; }
    .gap-md-4 { gap: var(--space-4) !important; }
}

/* ===========================
   MOBILE-SPECIFIC BREAKPOINTS
   =========================== */

/* Small Mobile (480px y menor) */
@media (max-width: 480px) {
    .hide-xs {
        display: none !important;
    }
    
    .show-xs {
        display: block !important;
    }
    
    .text-xs-center {
        text-align: center !important;
    }
    
    .px-xs-2 {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
    }
}

/* ===========================
   TABLET BREAKPOINT (992px)
   =========================== */

@media (max-width: 992px) {
    .hide-tablet {
        display: none !important;
    }
    
    .show-tablet {
        display: block !important;
    }
}

@media (min-width: 993px) {
    .hide-desktop-lg {
        display: none !important;
    }
}

/* ===========================
   DESKTOP BREAKPOINT (1200px+)
   =========================== */

@media (min-width: 1200px) {
    .show-xl {
        display: block !important;
    }
}

@media (max-width: 1199px) {
    .hide-below-xl {
        display: none !important;
    }
}

/* ===========================
   ORIENTACIÓN
   =========================== */

@media (orientation: portrait) {
    .hide-portrait {
        display: none !important;
    }
}

@media (orientation: landscape) {
    .hide-landscape {
        display: none !important;
    }
}

/* ===========================
   PRINT
   =========================== */

@media print {
    .hide-print {
        display: none !important;
    }
    
    .show-print {
        display: block !important;
    }
}

/* ===========================
   BREAKPOINT-SPECIFIC OVERRIDES
   =========================== */

/* Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .container {
        max-width: 1420px;
    }
}

/* Large Desktop (1200-1399px) */
@media (max-width: 1399px) {
    .container {
        max-width: 1200px;
    }
}

/* Desktop (992-1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
}

/* Tablet (768-991px) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
}

/* Mobile (768px y menor) */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
    }
}

/* ===========================
   HOVER STATES (solo desktop)
   =========================== */

/* Desactivar hover effects en touch devices */
@media (hover: none) and (pointer: coarse) {
    .hover-effect:hover {
        transform: none;
    }
}

/* ===========================
   REDUCED MOTION
   =========================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}