/* ==========================================================================
   Responsive — Edge Pharma
   Centralized breakpoint overrides. Every other file is mobile-first
   (base rules target the smallest screen); this file layers up-scaling
   adjustments only, in ascending order. Loaded last so it always wins.

   Breakpoints:
     sm   576px
     md   768px
     lg   992px
     xl   1200px
     xxl  1400px
   ========================================================================== */

/* ---------------------------------------------------------------------
   sm — 576px
   --------------------------------------------------------------------- */
@media (min-width: 576px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ---------------------------------------------------------------------
   md — 768px
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-8);
  }

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

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

/* ---------------------------------------------------------------------
   lg — 992px
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .u-mobile-only {
    display: none;
  }

  .u-desktop-only {
    display: block;
  }

  .navbar__list {
    display: flex;
  }

  .navbar__toggle {
    display: none;
  }

  .section {
    padding-block: var(--space-13);
  }

  .section--lg {
    padding-block: var(--space-14);
  }

  .section--xl {
    padding-block: var(--space-15);
  }
}

/* ---------------------------------------------------------------------
   xl — 1200px
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  :root {
    --container-padding: var(--space-9);
  }
}

/* ---------------------------------------------------------------------
   xxl — 1400px
   --------------------------------------------------------------------- */
@media (min-width: 1400px) {
  :root {
    --container-padding: var(--space-10);
  }
}