/* ==========================================================================
   Responsive Styles
   Mobile-first approach: base styles target mobile (up to 768px).
   Media queries progressively enhance for tablet and desktop.
   ========================================================================== */

/* ==========================================================================
   Small Mobile (480px+) - Stats grid 2-column
   ========================================================================== */
@media screen and (min-width: 480px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Tablet (769px - 1024px)
   ========================================================================== */
@media screen and (min-width: 769px) {
  :root {
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.75rem;
    --container-padding: 1.5rem;
  }

  .section {
    padding: var(--space-4xl) 0;
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats grid: 4 columns on tablet+ */
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats__number {
    font-size: 3.5rem;
  }

  .stats__suffix {
    font-size: 2.25rem;
  }

  .stats__label {
    font-size: var(--fs-body);
  }
}

/* ==========================================================================
   Desktop (above 1024px)
   ========================================================================== */
@media screen and (min-width: 1025px) {
  :root {
    --fs-h1: 3.5rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
    --container-padding: 2rem;
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Large Desktop (above 1440px)
   ========================================================================== */
@media screen and (min-width: 1441px) {
  :root {
    --container-max-width: 1400px;
  }
}

/* ==========================================================================
   Mobile - Disable parallax for performance
   Requirements: 17.6
   ========================================================================== */
@media screen and (max-width: 768px) {
  .page-header--parallax,
  .page-header--about,
  .page-header--services,
  .page-header--gallery,
  .page-header--reviews,
  .page-header--contact {
    background-attachment: scroll;
  }
}

/* ==========================================================================
   Reduced Motion - Disable parallax and complex transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-header--parallax,
  .page-header--about,
  .page-header--services,
  .page-header--gallery,
  .page-header--reviews,
  .page-header--contact {
    background-attachment: scroll;
  }
}