/**
 * ============================================================================
 * QENEX UNIFIED DESIGN SYSTEM - UTILITIES
 * Version: 2.0.0
 * ============================================================================
 *
 * Responsive utilities and helper classes.
 * Import LAST, after all other stylesheets.
 */

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/*
 * Mobile First Approach
 * sm: 640px and up
 * md: 768px and up
 * lg: 1024px and up
 * xl: 1280px and up
 * 2xl: 1536px and up
 */

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

.hide-sm { display: none; }
.hide-md { display: none; }
.hide-lg { display: none; }
.hide-xl { display: none; }

@media (min-width: 640px) {
    .hide-sm { display: block; }
    .sm\:hidden { display: none !important; }
    .sm\:block { display: block; }
    .sm\:flex { display: flex; }
    .sm\:grid { display: grid; }
    .sm\:inline { display: inline; }
    .sm\:inline-flex { display: inline-flex; }
}

@media (min-width: 768px) {
    .hide-md { display: block; }
    .md\:hidden { display: none !important; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
    .md\:inline { display: inline; }
    .md\:inline-flex { display: inline-flex; }
}

@media (min-width: 1024px) {
    .hide-lg { display: block; }
    .lg\:hidden { display: none !important; }
    .lg\:block { display: block; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
    .lg\:inline { display: inline; }
    .lg\:inline-flex { display: inline-flex; }
}

@media (min-width: 1280px) {
    .hide-xl { display: block; }
    .xl\:hidden { display: none !important; }
    .xl\:block { display: block; }
    .xl\:flex { display: flex; }
    .xl\:grid { display: grid; }
}

/* ============================================================================
   RESPONSIVE GRID
   ============================================================================ */

@media (min-width: 640px) {
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================================
   RESPONSIVE FLEXBOX
   ============================================================================ */

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-col { flex-direction: column; }
    .sm\:items-start { align-items: flex-start; }
    .sm\:items-center { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
}

@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    .md\:items-start { align-items: flex-start; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
}

@media (min-width: 1024px) {
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-col { flex-direction: column; }
    .lg\:items-start { align-items: flex-start; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-between { justify-content: space-between; }
}

/* ============================================================================
   RESPONSIVE SPACING
   ============================================================================ */

@media (min-width: 640px) {
    .sm\:gap-4 { gap: var(--space-4); }
    .sm\:gap-6 { gap: var(--space-6); }
    .sm\:gap-8 { gap: var(--space-8); }
    .sm\:p-6 { padding: var(--space-6); }
    .sm\:p-8 { padding: var(--space-8); }
}

@media (min-width: 768px) {
    .md\:gap-4 { gap: var(--space-4); }
    .md\:gap-6 { gap: var(--space-6); }
    .md\:gap-8 { gap: var(--space-8); }
    .md\:p-6 { padding: var(--space-6); }
    .md\:p-8 { padding: var(--space-8); }
}

@media (min-width: 1024px) {
    .lg\:gap-4 { gap: var(--space-4); }
    .lg\:gap-6 { gap: var(--space-6); }
    .lg\:gap-8 { gap: var(--space-8); }
    .lg\:p-6 { padding: var(--space-6); }
    .lg\:p-8 { padding: var(--space-8); }
    .lg\:p-10 { padding: var(--space-10); }
}

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

@media (min-width: 640px) {
    .sm\:text-left { text-align: left; }
    .sm\:text-center { text-align: center; }
    .sm\:text-lg { font-size: var(--text-lg); }
    .sm\:text-xl { font-size: var(--text-xl); }
    .sm\:text-2xl { font-size: var(--text-2xl); }
}

@media (min-width: 768px) {
    .md\:text-left { text-align: left; }
    .md\:text-center { text-align: center; }
    .md\:text-lg { font-size: var(--text-lg); }
    .md\:text-xl { font-size: var(--text-xl); }
    .md\:text-2xl { font-size: var(--text-2xl); }
    .md\:text-3xl { font-size: var(--text-3xl); }
    .md\:text-4xl { font-size: var(--text-4xl); }
}

@media (min-width: 1024px) {
    .lg\:text-2xl { font-size: var(--text-2xl); }
    .lg\:text-3xl { font-size: var(--text-3xl); }
    .lg\:text-4xl { font-size: var(--text-4xl); }
    .lg\:text-5xl { font-size: var(--text-5xl); }
    .lg\:text-6xl { font-size: var(--text-6xl); }
}

/* ============================================================================
   MOBILE UTILITIES
   ============================================================================ */

/* Only show on mobile (below 768px) */
.mobile-only {
    display: block;
}

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

/* Only show on desktop (768px and up) */
.desktop-only {
    display: none;
}

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

/* ============================================================================
   TOUCH TARGET UTILITIES
   ============================================================================ */

.touch-target {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* ============================================================================
   OVERFLOW UTILITIES
   ============================================================================ */

.overflow-scroll-touch {
    -webkit-overflow-scrolling: touch;
}

.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ============================================================================
   SAFE AREA INSETS (for notched devices)
   ============================================================================ */

.safe-top {
    padding-top: env(safe-area-inset-top, 0);
}

.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-left {
    padding-left: env(safe-area-inset-left, 0);
}

.safe-right {
    padding-right: env(safe-area-inset-right, 0);
}

.safe-all {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
             env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* ============================================================================
   MOBILE NAVIGATION HELPERS
   ============================================================================ */

.mobile-nav-trigger {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}

@media (min-width: 768px) {
    .mobile-nav-trigger {
        display: none;
    }
}

.mobile-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 6, 24, 0.9);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-all-base);
}

.mobile-nav-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: var(--surface-dark);
    border-left: 1px solid var(--border-subtle);
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
}

.mobile-nav-panel.active {
    transform: translateX(0);
}

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

.section-responsive {
    padding: var(--space-12) var(--space-4);
}

@media (min-width: 640px) {
    .section-responsive {
        padding: var(--space-16) var(--space-6);
    }
}

@media (min-width: 1024px) {
    .section-responsive {
        padding: var(--space-20) var(--space-8);
    }
}

@media (min-width: 1280px) {
    .section-responsive {
        padding: var(--space-24) var(--space-10);
    }
}

/* ============================================================================
   ASPECT RATIO UTILITIES
   ============================================================================ */

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Reduce glass blur on mobile for performance */
@media (max-width: 768px) {
    .glass-bg,
    .card-glass,
    .nav {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Reduce animations on mobile */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .nebula-bg::before,
    .nebula-bg::after {
        animation-duration: 20s;
    }

    .particles-container .particle {
        animation-duration: 25s;
    }
}

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

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .card,
    .btn,
    .nav,
    .footer {
        background: white;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}