/* ==============================================
   STYLES: responsive.css
   All media queries — centralized
   ============================================== */


/* --- Mobile adjustments (< 768px) --- */

@media (max-width: 767px) {

  .section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .section--lg {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .header__inner {
    height: 60px;
  }

  .btn {
    padding: 12px 24px;
    font-size: var(--text-xs);
  }

}


/* --- Tablet (768px – 1023px) --- */

@media (min-width: 768px) and (max-width: 1023px) {

  .header__inner {
    height: 68px;
  }

}


/* --- Desktop (≥ 1024px) --- */

@media (min-width: 1024px) {

  .header__inner {
    height: 80px;
  }

}


/* --- Large desktop (≥ 1440px) --- */

@media (min-width: 1440px) {

  :root {
    --gutter: 4rem;
  }

}


/* --- 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;
  }

}