/*!
 * PeerX Responsive Framework - Zengo Theme
 * Complementary responsive utilities for the Zengo design system
 */

/* ===== RESPONSIVE UTILITIES ===== */

/* Visibility utilities by breakpoint */
@media (max-width: 480px) {
    .sm-show { display: block !important; }
    .sm-hide { display: none !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .md-show { display: block !important; }
    .md-hide { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .lg-show { display: block !important; }
    .lg-hide { display: none !important; }
}

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

/* ===== RESPONSIVE TEXT ALIGNMENT ===== */
@media (max-width: 768px) {
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
    .mobile-text-right { text-align: right !important; }
}

/* ===== RESPONSIVE SPACING ===== */
@media (max-width: 480px) {
    .mobile-p-2 { padding: var(--space-2) !important; }
    .mobile-p-3 { padding: var(--space-3) !important; }
    .mobile-p-4 { padding: var(--space-4) !important; }

    .mobile-m-2 { margin: var(--space-2) !important; }
    .mobile-m-3 { margin: var(--space-3) !important; }
    .mobile-m-4 { margin: var(--space-4) !important; }

    .mobile-mt-0 { margin-top: 0 !important; }
    .mobile-mb-0 { margin-bottom: 0 !important; }
}

/* ===== RESPONSIVE FLEXBOX ===== */
@media (max-width: 768px) {
    .mobile-flex-col { flex-direction: column !important; }
    .mobile-flex-row { flex-direction: row !important; }
    .mobile-justify-center { justify-content: center !important; }
    .mobile-items-center { align-items: center !important; }
}

/* ===== RESPONSIVE WIDTHS ===== */
@media (max-width: 480px) {
    .mobile-w-full { width: 100% !important; }
    .mobile-w-auto { width: auto !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .tablet-w-1-2 { width: 50% !important; }
    .tablet-w-1-3 { width: 33.333333% !important; }
    .tablet-w-2-3 { width: 66.666667% !important; }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
    /* Touch-friendly button sizing */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: var(--space-4) var(--space-6);
    }

    /* Larger tap targets for touch */
    .btn-sm {
        min-height: 36px;
        padding: var(--space-3) var(--space-5);
    }

    /* Remove hover effects on touch devices */
    .btn:hover,
    .card:hover {
        transform: none;
    }
}

/* ===== RESPONSIVE CARDS ===== */
@media (max-width: 768px) {
    .card {
        margin-bottom: var(--space-4);
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

@media (min-width: 1025px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
}

/* ===== RESPONSIVE NAVIGATION ===== */
@media (max-width: 768px) {
    .nav-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-glass);
        padding: var(--space-3);
        z-index: var(--z-fixed);
    }

    .nav-mobile .nav-item {
        flex: 1;
        text-align: center;
        padding: var(--space-2);
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
    }

    .nav-mobile .nav-item:hover {
        background: var(--bg-tertiary);
    }
}

/* ===== RESPONSIVE TABLES ===== */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-mobile-stack th,
    .table-mobile-stack td {
        display: block;
        border: none;
        padding: var(--space-2) var(--space-4);
    }

    .table-mobile-stack thead {
        display: none;
    }

    .table-mobile-stack tr {
        border: 1px solid var(--border-primary);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-4);
        background: var(--bg-secondary);
    }
}

/* ===== RESPONSIVE FORMS ===== */
@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    .form-col {
        width: 100%;
    }

    input[type="email"],
    input[type="password"],
    input[type="text"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ===== SAFE AREAS (iOS/Android) ===== */
@supports (padding: max(0px)) {
    .safe-top {
        padding-top: max(var(--space-4), env(safe-area-inset-top));
    }

    .safe-bottom {
        padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }

    .safe-left {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
    }

    .safe-right {
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (max-height: 480px) and (orientation: landscape) {
    .landscape-hide {
        display: none !important;
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .retina-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}