/**
 * Responsive Styles for Mobile-First Design
 */

/* Mobile First - Base styles above are for mobile */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
  :root {
    --navbar-height: 47px;
    --card-width: 95vw;
    --card-height: 65vh;
  }

  /* Typography adjustments */
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 18px;
  }

  /* Hide desktop menu, show mobile toggle */
  .desktop-menu {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: block;
  }

  /* Auth pages */
  .auth-card {
    padding: var(--spacing-lg);
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }

  /* Discover page */
  .swipe-buttons {
    gap: var(--spacing-sm);
  }

  .swipe-btn {
    width: 50px;
    height: 50px;
    font-size: var(--font-size-base);
  }

  .btn-pass,
  .btn-like {
    width: 60px;
    height: 60px;
  }

  /* Matches page */
  .matches-grid {
    grid-template-columns: 1fr;
  }

  /* Chat page */
  .chat-container {
    flex-direction: column;
  }

  .conversations-panel {
    width: 100%;
    height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .chat-panel {
    width: 100%;
    height: 60vh;
  }

  /* Footer */
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Stats bar - prevent expansion on mobile */
  .gamification-stats-bar-wrapper {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .gamification-stats-bar {
    width: auto; /* Don't expand */
    max-width: calc(100vw - var(--spacing-md) * 2);
  }

  /* Stats extension - smaller on mobile */
  .stats-extension {
    min-width: 280px;
    max-width: calc(100vw - var(--spacing-md) * 2);
  }
}

/* Medium devices (tablets, 769px and up) */
@media (min-width: 769px) {
  :root {
    --card-width: 400px;
    --card-height: 600px;
  }

  /* Show desktop menu on tablets */
  .mobile-menu-toggle {
    display: none;
  }

  .desktop-menu {
    display: flex !important;
  }

  /* Matches grid */
  .matches-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Chat layout */
  .chat-container {
    display: grid;
    grid-template-columns: 350px 1fr;
  }

  .conversations-panel {
    border-right: 1px solid var(--border-color);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .matches-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .chat-container {
    grid-template-columns: 400px 1fr;
  }

  /* Card hover effects on desktop */
  .match-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .match-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px var(--shadow-lg);
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .matches-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 600px) {
  .navbar {
    /* height: 50px; */
  }

  .gamification-stats-bar-wrapper {
    /* top: 50px; Adjust for landscape navbar height */
  }

  .discover-container {
    /* padding-top: calc(50px + var(--spacing-md)); */
  }

  .card-stack {
    height: 80vh;
    max-height: none;
  }

  .swipe-buttons {
    margin-top: var(--spacing-md);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn,
  .navbar-item,
  .swipe-btn {
    min-height: 44px;
    min-width: 44px;
  }

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

  /* Enlarge clickable areas */
  .dropdown-item,
  .menu-item {
    padding: var(--spacing-lg);
  }
}

/* Print styles */
@media print {
  .navbar,
  .footer,
  .swipe-buttons,
  .btn,
  .mobile-menu {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .profile-card,
  .match-card {
    box-shadow: none;
    border: 1px solid #000;
  }
}

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

/* High contrast mode */
@media (prefers-contrast: more) {
  :root {
    --primary-color: #ff0000;
    --text-primary: #000000;
    --bg-primary: #ffffff;
    --border-color: #000000;
  }

  .btn,
  .card,
  .input {
    border: 2px solid var(--border-color);
  }
}

/* Dark mode specific responsive adjustments */
@media (prefers-color-scheme: dark) {
  .auth-page {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  }

  .card-image-container::after {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
  }
}