// Responsive Enhancements for Better Mobile UX

// Touch-friendly interactions
@media (max-width: 991px) {
  // Larger tap targets for mobile
  .theme-btn,
  .theme-btn-secondary,
  .theme-btn-outline {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
  }
  
  // Better spacing for mobile
  .navbar-nav .nav-item {
    padding: var(--spacing-sm) 0;
  }
  
  // Improved dropdown on mobile
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--black_25);
  }
  
  // Mobile-optimized forms
  input,
  textarea,
  select {
    font-size: 16px; // Prevents zoom on iOS
    padding: var(--spacing-md);
  }
  
  // Better modal on mobile
  .modal-dialog {
    margin: var(--spacing-sm);
    max-width: calc(100% - var(--spacing-md));
  }
  
  // Touch-friendly cards
  .card,
  .card-hover {
    &:active {
      transform: scale(0.98);
    }
  }
}

// Tablet optimizations
@media (min-width: 768px) and (max-width: 1024px) {
  // Two-column layouts
  .col-md-6 {
    &.responsive-col {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
  
  // Better spacing for tablets
  h1, .h1 {
    font-size: var(--font-size-4xl);
  }
  
  h2, .h2 {
    font-size: var(--font-size-3xl);
  }
}

// Small mobile devices
@media (max-width: 576px) {
  // Stack everything on small screens
  .row > [class*="col-"] {
    margin-bottom: var(--spacing-lg);
  }
  
  // Smaller text on mobile
  h1, .h1 {
    font-size: var(--font-size-3xl);
  }
  
  h2, .h2 {
    font-size: var(--font-size-2xl);
  }
  
  h3, .h3 {
    font-size: var(--font-size-xl);
  }
  
  // Full-width buttons on mobile
  .btn-large,
  .theme-btn-block {
    width: 100%;
    display: block;
  }
  
  // Better padding for small screens
  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  
  // Toast notifications position
  .toast-notification {
    right: var(--spacing-sm);
    left: var(--spacing-sm);
    max-width: calc(100% - var(--spacing-md));
  }
}

// Landscape mobile
@media (max-width: 991px) and (orientation: landscape) {
  // Reduce vertical spacing in landscape
  section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
}

// High DPI screens
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  // Sharper images on retina
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

// Print styles
@media print {
  // Hide non-essential elements
  .navbar,
  .footer,
  .back-to-top,
  .toast-notification,
  .modal,
  button {
    display: none !important;
  }
  
  // Optimize for printing
  body {
    background: white;
    color: black;
  }
  
  // Avoid page breaks inside elements
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }
}

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

// Container queries for modern browsers
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .card-body {
      padding: var(--spacing-xl);
    }
  }
}

// Hover support detection
@media (hover: hover) and (pointer: fine) {
  // Only apply hover effects on devices that support it
  .hover-lift:hover {
    transform: translateY(-2px);
  }
  
  .hover-scale:hover {
    transform: scale(1.05);
  }
}

@media (hover: none) and (pointer: coarse) {
  // Touch devices - use active states instead
  .hover-lift:active {
    transform: translateY(-2px);
  }
  
  .hover-scale:active {
    transform: scale(1.05);
  }
}

// Safe area insets for notched devices (iPhone X, etc.)
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  
  .navbar {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  
  .modal {
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
  }
}
