/* Responsive CSS - Media queries pour mobile */

/* ========== Mobile First Approach ========== */
/* Base styles are mobile, then we enhance for larger screens */

/* ========== Small devices (landscape phones, 640px and up) ========== */
@media (min-width: 640px) {
  :root {
    --font-size-h1: 2.75rem;
    --font-size-h2: 2.25rem;
  }
  
  .hero {
    padding: 3.5rem 0;
  }
}

/* ========== Medium devices (tablets, 768px and up) ========== */
@media (min-width: 768px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2.5rem;
  }
  
  .hero {
    padding: 4rem 0 5rem;
  }
  
  .card-image {
    height: 220px;
  }
}

/* ========== Large devices (desktops, 1024px and up) ========== */
@media (min-width: 1024px) {
  :root {
    --font-size-h1: 3.5rem;
  }
  
  .hero {
    padding: 5rem 0 6rem;
  }
  
  .card-image {
    height: 240px;
  }
  
  /* Hover effects only on desktop */
  .card {
    cursor: pointer;
  }
}

/* ========== Extra large devices (large desktops, 1280px and up) ========== */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--spacing-3xl);
  }
}

/* ========== Print styles ========== */
@media print {
  header,
  footer,
  .nav-toggle,
  .btn {
    display: none;
  }
  
  body {
    background-color: white;
    color: black;
  }
  
  .card {
    break-inside: avoid;
    border: 1px solid #000;
  }
}

/* ========== Accessibility: Reduced motion ========== */
@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;
  }
}

/* ========== High contrast mode ========== */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-color: #000000;
  }
  
  .card {
    border-width: 2px;
  }
  
  .btn {
    border-width: 2px;
  }
}