/**
 * Responsive Design
 * Mobile-first breakpoint adjustments
 */

/* ==========================================================================
   BREAKPOINTS
   
   sm: 640px   - Larger phones / small tablets
   md: 768px   - Tablets
   lg: 1024px  - Laptops
   xl: 1280px  - Desktops
   ========================================================================== */

/* ==========================================================================
   MOBILE FIRST BASE (< 640px)
   ========================================================================== */

/* Stack navigation on mobile */
.nav-primary {
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Full width buttons on mobile */
.mobile-btn-block {
  width: 100%;
}

/* Single column grids on mobile */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

/* ==========================================================================
   SMALL SCREENS (640px+)
   ========================================================================== */

@media (min-width: 640px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sm\:flex-row {
    flex-direction: row;
  }
  
  .sm\:w-auto {
    width: auto;
  }
  
  .sm\:hidden {
    display: none;
  }
  
  .sm\:block {
    display: block;
  }
}

/* ==========================================================================
   MEDIUM SCREENS (768px+)
   ========================================================================== */

@media (min-width: 768px) {
  /* Horizontal navigation */
  .nav-primary {
    flex-direction: row;
    gap: var(--spacing-6);
  }
  
  /* Side-by-side layout */
  .md\:flex-row {
    flex-direction: row;
  }
  
  .md\:items-center {
    align-items: center;
  }
  
  .md\:justify-between {
    justify-content: space-between;
  }
  
  .md\:w-auto {
    width: auto;
  }
  
  .md\:w-half {
    width: 50%;
  }
  
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
  }
  
  .md\:hidden {
    display: none;
  }
  
  .md\:block {
    display: block;
  }
  
  .md\:flex {
    display: flex;
  }
  
  /* Larger padding on tablet+ */
  .md\:p-8 {
    padding: var(--spacing-8);
  }
  
  .md\:py-12 {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }
  
  /* Larger margins */
  .md\:mb-8 {
    margin-bottom: var(--spacing-8);
  }
}

/* ==========================================================================
   LARGE SCREENS (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .lg\:flex-row {
    flex-direction: row;
  }
  
  .lg\:w-auto {
    width: auto;
  }
  
  .lg\:gap-8 {
    gap: var(--spacing-8);
  }
  
  .lg\:hidden {
    display: none;
  }
  
  .lg\:block {
    display: block;
  }
  
  .lg\:flex {
    display: flex;
  }
  
  /* Larger sections */
  .lg\:py-16 {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
}

/* ==========================================================================
   EXTRA LARGE SCREENS (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {
  .xl\:gap-12 {
    gap: var(--spacing-12);
  }
  
  .xl\:hidden {
    display: none;
  }
  
  .xl\:block {
    display: block;
  }
}

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

@media print {
  /* Hide non-essential elements */
  .no-print,
  .skip-link,
  nav,
  footer,
  .btn {
    display: none !important;
  }
  
  /* Use print-friendly colors */
  body {
    color: #000;
    background: #fff;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  /* Avoid page breaks inside elements */
  .card,
  .section {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   REDUCED MOTION
   Already handled in reset.css, but reinforcing here
   ========================================================================== */

@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: more) {
  :root {
    --color-border: var(--color-gray-700);
    --color-text-secondary: var(--color-gray-700);
    --focus-ring-width: 4px;
  }
  
  .btn {
    border-width: 3px;
  }
  
  .form-input,
  .form-textarea,
  .form-select {
    border-width: 3px;
  }
}