/**
 * OpinionsHub Responsive Styles
 * Mobile-first approach with breakpoints
 */

/* ============================================
   BREAKPOINTS
   ============================================ */
/* 
   Mobile: < 640px
   Tablet: 640px - 1024px  
   Desktop: > 1024px
*/

/* ============================================
   MOBILE STYLES (< 640px)
   ============================================ */

@media (max-width: 640px) {
    /* Hide desktop navigation */
    .nav-sidebar,
    .right-sidebar {
        display: none;
    }
    
    /* Full-width main content */
    .app-container {
        flex-direction: column;
    }
    
    .main-content {
        max-width: 100%;
        border-right: none;
    }
    
    /* Mobile header */
    .page-header {
        padding: var(--space-md);
    }
    
    .header-title {
        font-size: var(--text-lg);
    }
    
    /* Mobile bottom navigation */
    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--color-bg-primary);
        border-top: 1px solid var(--color-border-primary);
        padding: var(--space-sm) 0;
        z-index: var(--z-fixed);
        justify-content: space-around;
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-sm);
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: var(--text-xs);
    }
    
    .mobile-nav-item.active {
        color: var(--color-primary);
    }
    
    .mobile-nav-icon {
        width: 24px;
        height: 24px;
        margin-bottom: var(--space-xs);
    }
    
    /* Add bottom padding to content for mobile nav */
    .feed-container {
        padding-bottom: 80px;
    }
    
    /* Opinion cards */
    .opinion-card {
        padding: var(--space-md);
    }
    
    .opinion-avatar {
        width: 40px;
        height: 40px;
    }
    
    .opinion-header {
        gap: var(--space-sm);
    }
    
    .opinion-actions {
        gap: var(--space-md);
    }
    
    /* Composer */
    .composer-container {
        padding: var(--space-md);
    }
    
    .composer-textarea {
        font-size: var(--text-sm);
    }
    
    /* Profile */
    .profile-banner {
        height: 120px;
    }
    
    .profile-avatar-large {
        width: 80px;
        height: 80px;
    }
    
    .profile-info {
        padding: 0 var(--space-md);
    }
    
    .profile-display-name {
        font-size: var(--text-xl);
    }
    
    /* Modal on mobile */
    .modal-content {
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        margin-top: auto;
        max-height: 95vh;
    }
    
    .modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }
    
    /* Toast */
    #toast-container {
        top: var(--space-md);
        right: var(--space-md);
        left: var(--space-md);
    }
    
    .toast {
        min-width: auto;
    }
}

/* ============================================
   TABLET STYLES (640px - 1024px)
   ============================================ */

@media (min-width: 640px) and (max-width: 1024px) {
    /* Show mobile nav on tablet */
    .mobile-nav {
        display: none;
    }
    
    /* Adjust sidebars */
    .nav-sidebar {
        width: 200px;
    }
    
    .right-sidebar {
        display: none;
    }
    
    .nav-logo {
        font-size: var(--text-xl);
    }
    
    .nav-link {
        padding: var(--space-sm) var(--space-md);
    }
    
    .compose-button {
        padding: var(--space-md);
    }
}

/* ============================================
   DESKTOP STYLES (> 1024px)
   ============================================ */

@media (min-width: 1024px) {
    /* Hide mobile nav on desktop */
    .mobile-nav {
        display: none;
    }
    
    /* Full layout */
    .app-container {
        display: flex;
    }
    
    /* Hover effects on desktop only */
    .opinion-card:hover {
        background-color: var(--color-bg-secondary);
    }
    
    .nav-link:hover {
        background-color: var(--color-bg-hover);
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 640px) and (orientation: landscape) {
    .profile-banner {
        height: 80px;
    }
    
    .modal-content {
        max-height: 90vh;
    }
}

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

@media print {
    .nav-sidebar,
    .right-sidebar,
    .mobile-nav,
    .compose-button,
    .opinion-actions {
        display: none !important;
    }
    
    .main-content {
        max-width: 100%;
        border: none;
    }
    
    .opinion-card {
        break-inside: avoid;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */

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

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --color-border-primary: #000;
        --color-text-secondary: #333;
    }
    
    [data-theme="dark"] {
        --color-border-primary: #fff;
        --color-text-secondary: #ccc;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .opinion-action-button {
        padding: var(--space-md);
    }
    
    .nav-link {
        padding: var(--space-md);
    }
    
    /* Remove hover effects */
    .opinion-card:hover {
        background-color: transparent;
    }
}