/* ============================================
   Dopafix — Responsive Overrides
   Mobile-first with breakpoints at 360, 390, 430, 768, 1024, 1280, 1440+
   ============================================ */

/* 360px - smallest phones */
@media (max-width: 360px) {
  :root {
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
  }

  .container { padding: 0 var(--space-md); }

  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  .card { padding: var(--space-lg); }

  .pricing-price { font-size: 2.25rem; }

  .hero { padding-top: calc(var(--header-height) + var(--space-2xl)); }

  .step-number {
    width: 60px;
    height: 60px;
    font-size: 1.35rem;
  }

  .footer-grid { gap: var(--space-xl); }
}

/* 390px - iPhone standard */
@media (min-width: 361px) and (max-width: 390px) {
  .container { padding: 0 1.25rem; }
}

/* 430px - larger phones */
@media (min-width: 391px) and (max-width: 430px) {
  .container { padding: 0 1.5rem; }
}

/* 768px - tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 0 var(--space-xl); }

  .hero-content { text-align: center; max-width: 90%; margin: 0 auto; }
  .hero-actions { justify-content: center; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .edu-grid { grid-template-columns: 1fr; }
}

/* 1024px - small laptops / large tablets */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container { padding: 0 var(--space-xl); }

  .hero-visual {
    right: -10%;
    width: 40%;
    opacity: 0.5;
  }

  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 1280px - standard desktop */
@media (min-width: 1280px) and (max-width: 1439px) {
  .container { max-width: 1140px; }
}

/* 1440px+ - large desktop */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }

  .hero-visual {
    right: 0;
    width: 42%;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .card:hover,
  .pricing-card:hover,
  .blog-card:hover,
  .edu-card:hover {
    transform: none;
  }

  .btn-primary:hover:not(:disabled) {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #4a3fd4;
    --color-text: #000000;
    --color-muted: #444444;
  }

  .card,
  .pricing-card,
  .blog-card,
  .edu-card {
    border-width: 2px;
  }
}