/**
 * Teamz Listing - Responsive Stylesheet
 *
 * Mobile-first responsive design with breakpoints
 *
 * @package Teamz_Listing
 * @since 1.0.0
 */

/* ==========================================================================
   Breakpoint Reference
   ========================================================================== 
   - xs: 0 - 479px (Small phones)
   - sm: 480px - 639px (Large phones)
   - md: 640px - 767px (Small tablets)
   - lg: 768px - 1023px (Tablets)
   - xl: 1024px - 1279px (Small desktops)
   - 2xl: 1280px+ (Large desktops)
   ========================================================================== */

/* ==========================================================================
   Extra Small Devices (< 480px)
   ========================================================================== */
@media (max-width: 479px) {
    :root {
        --tz-text-4xl: 1.75rem;
        --tz-text-3xl: 1.5rem;
        --tz-text-2xl: 1.25rem;
    }

    .tz-container {
        padding-left: var(--tz-space-4);
        padding-right: var(--tz-space-4);
    }

    .tz-section {
        padding-top: var(--tz-space-10);
        padding-bottom: var(--tz-space-10);
    }

    /* Header */
    .tz-header-inner {
        min-height: 64px;
    }

    .tz-logo img {
        max-height: 36px;
    }

    /* Buttons */
    .tz-btn {
        padding: var(--tz-space-2) var(--tz-space-4);
        font-size: var(--tz-text-sm);
    }

    .tz-btn-lg {
        padding: var(--tz-space-3) var(--tz-space-6);
    }

    /* Cards */
    .tz-card-body {
        padding: var(--tz-space-4);
    }

    .tz-listing-card-features {
        flex-direction: column;
        gap: var(--tz-space-2);
    }

    /* Search */
    .tz-search-form {
        padding: var(--tz-space-4);
    }

    .tz-search-form-inline {
        flex-direction: column;
    }

    /* Dashboard */
    .tz-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tz-space-3);
    }

    .tz-stat-card {
        padding: var(--tz-space-4);
    }

    .tz-stat-value {
        font-size: var(--tz-text-2xl);
    }

    /* Gallery */
    .tz-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--tz-space-2);
    }

    .tz-gallery-main {
        grid-column: span 3;
    }

    /* Modals */
    .tz-modal {
        max-width: calc(100% - var(--tz-space-8));
        margin: var(--tz-space-4);
    }

    .tz-modal-header,
    .tz-modal-body,
    .tz-modal-footer {
        padding: var(--tz-space-4);
    }

    /* Tables */
    .tz-table-responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tz-table th,
    .tz-table td {
        padding: var(--tz-space-3);
        font-size: var(--tz-text-sm);
    }

    /* Footer */
    .tz-footer-widgets {
        grid-template-columns: 1fr;
        gap: var(--tz-space-8);
    }
}

/* ==========================================================================
   Small Devices (480px - 639px)
   ========================================================================== */
@media (min-width: 480px) and (max-width: 639px) {
    .tz-container {
        padding-left: var(--tz-space-5);
        padding-right: var(--tz-space-5);
    }

    /* Grid */
    .tz-grid-2,
    .tz-grid-3,
    .tz-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .tz-footer-widgets {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tz-space-6);
    }

    /* Pricing */
    .tz-pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--tz-space-5);
    }

    /* Stats */
    .tz-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Medium Devices (640px - 767px)
   ========================================================================== */
@media (min-width: 640px) and (max-width: 767px) {
    /* Grid */
    .tz-grid-3,
    .tz-grid-4,
    .tz-grid-5,
    .tz-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Search Filters */
    .tz-search-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .tz-footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pricing */
    .tz-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .tz-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Tablets and Below (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Navigation */
    .tz-nav {
        display: none;
    }

    .tz-mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    .tz-mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--tz-white);
        z-index: var(--tz-z-modal);
        transform: translateX(-100%);
        transition: transform var(--tz-transition-slow);
        overflow-y: auto;
    }

    .tz-mobile-menu.is-open {
        transform: translateX(0);
    }

    .tz-mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--tz-space-4);
        border-bottom: 1px solid var(--tz-gray-200);
    }

    .tz-mobile-menu-nav {
        padding: var(--tz-space-4);
    }

    .tz-mobile-menu-link {
        display: block;
        padding: var(--tz-space-4);
        font-size: var(--tz-text-lg);
        color: var(--tz-gray-700);
        border-bottom: 1px solid var(--tz-gray-100);
    }

    .tz-mobile-menu-link:hover {
        color: var(--tz-primary);
    }

    /* Dashboard */
    .tz-dashboard {
        grid-template-columns: 1fr;
    }

    .tz-dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100%;
        transform: translateX(-100%);
        transition: transform var(--tz-transition-slow);
        z-index: var(--tz-z-modal);
        border-radius: 0;
    }

    .tz-dashboard-sidebar.is-open {
        transform: translateX(0);
    }

    .tz-dashboard-sidebar-toggle {
        display: flex;
        position: fixed;
        bottom: var(--tz-space-6);
        left: var(--tz-space-4);
        z-index: var(--tz-z-fixed);
        width: 56px;
        height: 56px;
        background-color: var(--tz-primary);
        color: var(--tz-white);
        border-radius: var(--tz-radius-full);
        box-shadow: var(--tz-shadow-lg);
        align-items: center;
        justify-content: center;
    }

    .tz-dashboard-content {
        padding: var(--tz-space-5);
    }

    .tz-dashboard-header {
        flex-direction: column;
        gap: var(--tz-space-4);
        align-items: flex-start;
    }

    /* Map */
    .tz-map-container {
        height: 350px;
    }

    /* Single Listing */
    .tz-single-listing-layout {
        display: block;
    }

    .tz-single-listing-sidebar {
        margin-top: var(--tz-space-6);
    }

    /* Gallery */
    .tz-gallery-main {
        aspect-ratio: 4/3;
    }

    /* Hide on mobile */
    .tz-hide-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   Large Tablets (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Container */
    .tz-container {
        max-width: var(--tz-container-md);
    }

    /* Grid */
    .tz-grid-4,
    .tz-grid-5,
    .tz-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Search Filters */
    .tz-search-filters {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .tz-footer-widgets {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dashboard */
    .tz-dashboard {
        grid-template-columns: 240px 1fr;
        gap: var(--tz-space-6);
    }

    .tz-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pricing */
    .tz-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tz-pricing-card-featured {
        grid-column: span 2;
    }
}

/* ==========================================================================
   Desktop and Above (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
    /* Show on tablet+ */
    .tz-show-mobile {
        display: none !important;
    }

    /* Hide dashboard sidebar toggle on desktop */
    .tz-dashboard-sidebar-toggle {
        display: none;
    }

    /* Single Listing Layout */
    .tz-single-listing-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: var(--tz-space-8);
    }

    .tz-single-listing-sidebar {
        position: sticky;
        top: 100px;
        height: fit-content;
    }
}

/* ==========================================================================
   Small Desktops (1024px - 1279px)
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tz-container {
        max-width: var(--tz-container-lg);
    }

    /* Grid */
    .tz-grid-5,
    .tz-grid-6 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Footer */
    .tz-footer-widgets {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Pricing */
    .tz-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tz-pricing-card-featured {
        grid-column: auto;
    }
}

/* ==========================================================================
   Large Desktops (>= 1280px)
   ========================================================================== */
@media (min-width: 1280px) {
    .tz-container {
        max-width: var(--tz-container-xl);
    }

    /* Extra large screens */
    .tz-container-2xl {
        max-width: var(--tz-container-2xl);
    }

    /* Grid */
    .tz-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .tz-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Stats */
    .tz-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Extra Large Desktops (>= 1440px)
   ========================================================================== */
@media (min-width: 1440px) {
    /* Single Listing Layout */
    .tz-single-listing-layout {
        grid-template-columns: 1fr 420px;
    }
}

/* ==========================================================================
   Touch Device Optimizations
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .tz-btn {
        min-height: 44px;
    }

    .tz-form-input,
    .tz-form-select,
    .tz-form-textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Remove hover effects */
    .tz-card:hover {
        box-shadow: var(--tz-shadow);
        transform: none;
    }

    .tz-card:hover .tz-card-image img {
        transform: none;
    }

    .tz-pricing-card:hover {
        box-shadow: var(--tz-shadow);
        transform: none;
    }

    /* Tap highlight */
    a, button {
        -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
    }
}

/* ==========================================================================
   High DPI Displays
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders */
    .tz-card,
    .tz-form-input,
    .tz-form-select {
        border-width: 0.5px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   Dark Mode Support (Optional)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    .tz-theme-auto {
        --tz-white: #0f172a;
        --tz-gray-50: #1e293b;
        --tz-gray-100: #334155;
        --tz-gray-200: #475569;
        --tz-gray-300: #64748b;
        --tz-gray-400: #94a3b8;
        --tz-gray-500: #cbd5e1;
        --tz-gray-600: #e2e8f0;
        --tz-gray-700: #f1f5f9;
        --tz-gray-800: #f8fafc;
        --tz-gray-900: #ffffff;
    }
}

/* ==========================================================================
   Print Styles Override
   ========================================================================== */
@media print {
    /* Hide non-essential elements */
    .tz-header,
    .tz-footer,
    .tz-mobile-menu,
    .tz-dashboard-sidebar,
    .tz-toast-container,
    .tz-modal-backdrop,
    .tz-modal,
    .tz-btn,
    .tz-map-container {
        display: none !important;
    }

    /* Reset backgrounds */
    body {
        background: white !important;
        color: black !important;
    }

    .tz-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    /* Links */
    a {
        text-decoration: underline !important;
        color: #000 !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Page breaks */
    .tz-card,
    .tz-section {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Landscape Orientation
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
    /* Reduce header height on short landscape screens */
    .tz-header-inner {
        min-height: 56px;
    }

    /* Reduce modal height */
    .tz-modal-body {
        max-height: calc(80vh - 100px);
    }

    /* Map adjustments */
    .tz-map-container {
        height: 60vh;
        min-height: 250px;
    }
}

/* ==========================================================================
   Safe Area Insets (Notched Devices)
   ========================================================================== */
@supports (padding: max(0px)) {
    .tz-header {
        padding-left: max(var(--tz-space-4), env(safe-area-inset-left));
        padding-right: max(var(--tz-space-4), env(safe-area-inset-right));
    }

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

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

    .tz-dashboard-sidebar-toggle {
        bottom: max(var(--tz-space-6), calc(env(safe-area-inset-bottom) + var(--tz-space-4)));
        left: max(var(--tz-space-4), env(safe-area-inset-left));
    }
}