/* ==========================================================================
   Responsive Spacing Presets
   --------------------------------------------------------------------------
   WordPress generates CSS custom properties from theme.json "spacingSizes":
     --wp--preset--spacing--3xs  (0.25rem /  4px)
     --wp--preset--spacing--2xs  (0.5rem  /  8px)
     --wp--preset--spacing--xs   (0.75rem / 12px)
     --wp--preset--spacing--s    (1rem    / 16px)
     --wp--preset--spacing--m    (2rem    / 32px)
     --wp--preset--spacing--l    (4rem    / 64px)
     --wp--preset--spacing--xl   (6rem    / 96px)
     --wp--preset--spacing--2xl  (8rem    / 128px)

   theme.json holds the DESKTOP values (what the editor preview shows).
   Below we redefine them at smaller breakpoints so any block using a preset
   (padding, margin, blockGap) automatically scales down.

   Small sizes (3xs–s) stay fixed — they're already component-scale and don't
   need to shrink further. Container-scale sizes (m–2xl) shrink on phone/tablet.

   Breakpoints mirror containers.css:
     < 48rem  → phone
     < 64rem  → tablet
   ========================================================================== */

/* Phone: tightest container-scale values. */
:root {
    --wp--preset--spacing--m: 1.25rem;
    --wp--preset--spacing--l: 2rem;
    --wp--preset--spacing--xl: 3rem;
    --wp--preset--spacing--2xl: 4rem;
}

/* Tablet bump. */
@media (min-width: 48rem) {
    :root {
        --wp--preset--spacing--m: 1.5rem;
        --wp--preset--spacing--l: 3rem;
        --wp--preset--spacing--xl: 4.5rem;
        --wp--preset--spacing--2xl: 6rem;
    }
}

/* Laptop / desktop: theme.json defaults. */
@media (min-width: 64rem) {
    :root {
        --wp--preset--spacing--m: 2rem;
        --wp--preset--spacing--l: 4rem;
        --wp--preset--spacing--xl: 6rem;
        --wp--preset--spacing--2xl: 8rem;
    }
}