/**
 * Responsive Design & Media Queries
 * Mobile-first approach: Base styles for mobile, then breakpoints for larger screens
 */

/* ===== MOBILE (Base) ===== */
/* Already handled in previous files with mobile-first approach */

/* ===== TABLET (768px and up) ===== */
@media (min-width: 768px) {
  /* Headings */
  h1 {
    font-size: var(--font-size-5xl);
  }
  
  h2 {
    font-size: var(--font-size-4xl);
  }
  
  h3 {
    font-size: var(--font-size-3xl);
  }
  
  /* Navigation adjustments */
  nav {
    flex-direction: row;
  }
  
  /* Button adjustments */
  .btn {
    padding: var(--spacing-md) var(--spacing-xl);
  }
  
  /* Card adjustments */
  .card-image {
    height: 300px;
  }
}

/* ===== DESKTOP (1024px and up) ===== */
@media (min-width: 1024px) {
  /* Headings */
  h1 {
    font-size: var(--font-size-5xl);
  }
  
  h2 {
    font-size: var(--font-size-4xl);
  }
  
  section {
    padding: var(--spacing-4xl) var(--spacing-xl);
  }
  
  /* Card adjustments */
  .card-image {
    height: 350px;
  }
  
  /* Two column layouts */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
  }
  
  .two-col.reverse {
    direction: rtl;
  }
  
  .two-col.reverse > * {
    direction: ltr;
  }
}

/* ===== LARGE DESKTOP (1280px and up) ===== */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
  
  section {
    padding: var(--spacing-4xl) 0;
  }
}

/* ===== EXTRA LARGE (1536px and up) ===== */
@media (min-width: 1536px) {
  .container {
    max-width: 1400px;
  }
  
  h1 {
    font-size: 3.5rem;
  }
  
  h2 {
    font-size: 2.75rem;
  }
}

/* ===== SMALL DEVICES (under 480px) ===== */
@media (max-width: 479px) {
  h1 {
    font-size: 1.875rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  .btn {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
  }
  
  .card-image {
    height: 200px;
  }
  
  section {
    padding: var(--spacing-2xl) var(--spacing-md);
  }
}

/* ===== Print Styles ===== */
@media print {
  body {
    background-color: white;
    color: black;
  }
  
  nav, footer, .no-print {
    display: none;
  }
  
  a {
    text-decoration: underline;
  }
  
  img {
    max-width: 100%;
  }
}

/* ===== Landscape Orientation ===== */
@media (orientation: landscape) and (max-height: 600px) {
  section {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .hero-section {
    min-height: 100vh;
  }
}

/* ===== High DPI Screens (Retina) ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Already handled by modern browsers with CSS */
}

/* ===== Dark Mode Media Query ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #1A1A1A;
    --background-light: #2D2D2D;
    --text-dark: #FFFFFF;
    --text-muted: #CCCCCC;
  }
  
  .card {
    background-color: #2D2D2D;
    border-color: #444;
  }
  
  input, textarea, select {
    background-color: #2D2D2D;
    border-color: #444;
    color: #FFFFFF;
  }
}

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

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets for touch */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  a {
    padding: var(--spacing-sm);
    margin: calc(var(--spacing-sm) * -1);
  }
}