/*
 * Canonical reference thresholds: 1240, 1200, 1024, 767, 480 and 390px.
 * The 1240/1200 component-specific transitions are intentionally deferred
 * until those exact components are implemented in later phases.
 */

@media (max-width: 1024px) {
  :root {
    --nurture-container-gutter: 16px;
    --nurture-section-space: 58px;
  }

  .layout-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  :root {
    --nurture-container-gutter: 10px;
    --nurture-section-space: 48px;
  }

  .button {
    border-radius: var(--nurture-radius-button-mobile);
  }

  .modal {
    padding: var(--nurture-space-3);
  }

  .modal__panel {
    max-height: calc(100vh - (var(--nurture-space-3) * 2));
    border-radius: var(--nurture-radius-compact);
  }
}

/* 480px and 390px remain reserved for measured component adjustments. */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}