/* ============================================================
   utilities.css — single-purpose helpers. Last layer, so these win
   without ever needing !important.
   ============================================================ */

@layer utilities {

  .pg-hidden {
    display: none;
  }

  .pg-flex {
    display: flex;
  }

  .pg-wrap {
    flex-wrap: wrap;
  }

  .pg-center {
    align-items: center;
  }

  .pg-between {
    justify-content: space-between;
  }

  .pg-gap-2 {
    gap: var(--s-2);
  }

  .pg-gap-3 {
    gap: var(--s-3);
  }

  .pg-gap-4 {
    gap: var(--s-4);
  }

  .pg-gap-5 {
    gap: var(--s-5);
  }

  .pg-gap-6 {
    gap: var(--s-6);
  }

  .pg-mt-4 {
    margin-block-start: var(--s-4);
  }

  .pg-mt-5 {
    margin-block-start: var(--s-5);
  }

  .pg-mt-6 {
    margin-block-start: var(--s-6);
  }

  .pg-mt-7 {
    margin-block-start: var(--s-7);
  }

  .pg-mt-8 {
    margin-block-start: var(--s-8);
  }

  .pg-fg {
    color: var(--fg);
  }

  .pg-fg-2 {
    color: var(--fg-2);
  }

  .pg-fg-3 {
    color: var(--fg-3);
  }

  .pg-accent {
    color: var(--accent);
  }

  /* Hand-authored display line breaks.

     Where a 136px line breaks is a design decision, not the browser's --
     text-wrap: balance is deliberately off. These classes are how a break
     is expressed, and they are the reason every headline must be proofed at
     320px rather than 390px. */
  .pg-br-sm {
    display: none;
  }

  @media (min-width: 480px) {

    .pg-br-sm {
      display: inline;
    }
  }

  .pg-br-md {
    display: none;
  }

  @media (min-width: 768px) {

    .pg-br-md {
      display: inline;
    }
  }

  .pg-br-lg {
    display: none;
  }

  @media (min-width: 1024px) {

    .pg-br-lg {
      display: inline;
    }
  }

  /* Below-md-only and above-md-only. Used sparingly: mobile is a design,
     not a subtraction table.

     revert-layer, NOT revert. `revert` rolls back to the user-agent value,
     so a .pg-btn carrying .pg-md-up would come back as `inline` and lose its
     flex layout. `revert-layer` rolls back to the previous cascade layer --
     components -- which is where the element's real display value lives. */
  .pg-md-up {
    display: none;
  }

  @media (min-width: 768px) {

    .pg-md-up {
      display: revert-layer;
    }

    .pg-md-down {
      display: none;
    }
  }
}