/**
 * Padding utilities — small, hand-written, rem-based scale.
 *
 * Values come from the t-shirt spacing primitives in variables.css. The class
 * numbers are the step index; the token is the size name:
 *   1 = xs (8px)   2 = sm (16px)   3 = md (24px)
 *   4 = lg (32px)  5 = xl (48px)   6-8 = 2xl/3xl/4xl (64/80/96px, margin only)
 *
 * Every step compresses at 991px (the values live in variables.css, under the
 * same token names) so these classes respond on their own — do NOT add a
 * per-element mobile override on top unless a specific element needs it.
 *
 * Axes: p (all), px/py (horizontal/vertical), pt/pr/pb/pl (single side).
 * px/py use logical properties (padding-inline/block) so they stay correct in
 * RTL automatically. pt/pb are block-direction (RTL-safe). pl/pr are PHYSICAL —
 * if this site ever ships an RTL locale, mirror those under html[dir="rtl"].
 *
 * Kept deliberately minimal — reuse the grid and semantic classes first; reach
 * for these only when nothing existing fits.
 */

/* size 1 (xs) — .5rem / 8px */
.p-1  { padding: var(--padding-xs); }
.px-1 { padding-inline: var(--padding-xs); }
.py-1 { padding-block: var(--padding-xs); }
.pt-1 { padding-top: var(--padding-xs); }
.pr-1 { padding-right: var(--padding-xs); }
.pb-1 { padding-bottom: var(--padding-xs); }
.pl-1 { padding-left: var(--padding-xs); }

/* size 2 (sm) — 1rem / 16px */
.p-2  { padding: var(--padding-sm); }
.px-2 { padding-inline: var(--padding-sm); }
.py-2 { padding-block: var(--padding-sm); }
.pt-2 { padding-top: var(--padding-sm); }
.pr-2 { padding-right: var(--padding-sm); }
.pb-2 { padding-bottom: var(--padding-sm); }
.pl-2 { padding-left: var(--padding-sm); }

/* size 3 (md) — 1.5rem / 24px */
.p-3  { padding: var(--padding-md); }
.px-3 { padding-inline: var(--padding-md); }
.py-3 { padding-block: var(--padding-md); }
.pt-3 { padding-top: var(--padding-md); }
.pr-3 { padding-right: var(--padding-md); }
.pb-3 { padding-bottom: var(--padding-md); }
.pl-3 { padding-left: var(--padding-md); }

/* size 4 (lg) — 2rem / 32px */
.p-4  { padding: var(--padding-lg); }
.px-4 { padding-inline: var(--padding-lg); }
.py-4 { padding-block: var(--padding-lg); }
.pt-4 { padding-top: var(--padding-lg); }
.pr-4 { padding-right: var(--padding-lg); }
.pb-4 { padding-bottom: var(--padding-lg); }
.pl-4 { padding-left: var(--padding-lg); }

/* size 5 (xl) — 3rem / 48px */
.p-5  { padding: var(--padding-xl); }
.px-5 { padding-inline: var(--padding-xl); }
.py-5 { padding-block: var(--padding-xl); }
.pt-5 { padding-top: var(--padding-xl); }
.pr-5 { padding-right: var(--padding-xl); }
.pb-5 { padding-bottom: var(--padding-xl); }
.pl-5 { padding-left: var(--padding-xl); }

/* zero (none) — reset padding on any axis */
.p-0  { padding: var(--padding-none); }
.px-0 { padding-inline: var(--padding-none); }
.py-0 { padding-block: var(--padding-none); }
.pt-0 { padding-top: var(--padding-none); }
.pr-0 { padding-right: var(--padding-none); }
.pb-0 { padding-bottom: var(--padding-none); }
.pl-0 { padding-left: var(--padding-none); }

/**
 * Margin utilities — same primitives and axes as the padding set above; the
 * scale runs two steps further here.
 *   1 = xs    2 = sm    3 = md    4 = lg
 *   5 = xl    6 = 2xl   7 = 3xl   8 = 4xl
 * mx/my use logical properties (RTL-safe); mt/mb are block-direction (RTL-safe);
 * ml/mr are PHYSICAL — mirror under html[dir="rtl"] if an RTL locale ships.
 * Plus `auto` variants for centering (mx-auto) and pushing flex items.
 */

/* size 1 (xs) — .5rem / 8px */
.m-1  { margin: var(--padding-xs); }
.mx-1 { margin-inline: var(--padding-xs); }
.my-1 { margin-block: var(--padding-xs); }
.mt-1 { margin-top: var(--padding-xs); }
.mr-1 { margin-right: var(--padding-xs); }
.mb-1 { margin-bottom: var(--padding-xs); }
.ml-1 { margin-left: var(--padding-xs); }

/* size 2 (sm) — 1rem / 16px */
.m-2  { margin: var(--padding-sm); }
.mx-2 { margin-inline: var(--padding-sm); }
.my-2 { margin-block: var(--padding-sm); }
.mt-2 { margin-top: var(--padding-sm); }
.mr-2 { margin-right: var(--padding-sm); }
.mb-2 { margin-bottom: var(--padding-sm); }
.ml-2 { margin-left: var(--padding-sm); }

/* size 3 (md) — 1.5rem / 24px */
.m-3  { margin: var(--padding-md); }
.mx-3 { margin-inline: var(--padding-md); }
.my-3 { margin-block: var(--padding-md); }
.mt-3 { margin-top: var(--padding-md); }
.mr-3 { margin-right: var(--padding-md); }
.mb-3 { margin-bottom: var(--padding-md); }
.ml-3 { margin-left: var(--padding-md); }

/* size 4 (lg) — 2rem / 32px */
.m-4  { margin: var(--padding-lg); }
.mx-4 { margin-inline: var(--padding-lg); }
.my-4 { margin-block: var(--padding-lg); }
.mt-4 { margin-top: var(--padding-lg); }
.mr-4 { margin-right: var(--padding-lg); }
.mb-4 { margin-bottom: var(--padding-lg); }
.ml-4 { margin-left: var(--padding-lg); }

/* size 5 (xl) — 3rem / 48px */
.m-5  { margin: var(--padding-xl); }
.mx-5 { margin-inline: var(--padding-xl); }
.my-5 { margin-block: var(--padding-xl); }
.mt-5 { margin-top: var(--padding-xl); }
.mr-5 { margin-right: var(--padding-xl); }
.mb-5 { margin-bottom: var(--padding-xl); }
.ml-5 { margin-left: var(--padding-xl); }

/* size 6 (2xl) — 4rem / 64px */
.m-6  { margin: var(--padding-2xl); }
.mx-6 { margin-inline: var(--padding-2xl); }
.my-6 { margin-block: var(--padding-2xl); }
.mt-6 { margin-top: var(--padding-2xl); }
.mr-6 { margin-right: var(--padding-2xl); }
.mb-6 { margin-bottom: var(--padding-2xl); }
.ml-6 { margin-left: var(--padding-2xl); }

/* size 7 (3xl) — 5rem / 80px */
.m-7  { margin: var(--padding-3xl); }
.mx-7 { margin-inline: var(--padding-3xl); }
.my-7 { margin-block: var(--padding-3xl); }
.mt-7 { margin-top: var(--padding-3xl); }
.mr-7 { margin-right: var(--padding-3xl); }
.mb-7 { margin-bottom: var(--padding-3xl); }
.ml-7 { margin-left: var(--padding-3xl); }

/* size 8 (4xl) — 6rem / 96px */
.m-8  { margin: var(--padding-4xl); }
.mx-8 { margin-inline: var(--padding-4xl); }
.my-8 { margin-block: var(--padding-4xl); }
.mt-8 { margin-top: var(--padding-4xl); }
.mr-8 { margin-right: var(--padding-4xl); }
.mb-8 { margin-bottom: var(--padding-4xl); }
.ml-8 { margin-left: var(--padding-4xl); }

/* zero (none) — reset margin on any axis */
.m-0  { margin: var(--padding-none); }
.mx-0 { margin-inline: var(--padding-none); }
.my-0 { margin-block: var(--padding-none); }
.mt-0 { margin-top: var(--padding-none); }
.mr-0 { margin-right: var(--padding-none); }
.mb-0 { margin-bottom: var(--padding-none); }
.ml-0 { margin-left: var(--padding-none); }

/* auto — centering and flex-item pushing */
.m-auto  { margin: auto; }
.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }
.mt-auto { margin-top: auto; }
.mr-auto { margin-right: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }


/**
 * FLEX — one property per class, composed at the call site:
 * `flex flex-col justify-between`. Nothing here bundles a direction into a
 * justify class; that's what made .flex-between misleading before it was
 * removed. The one composite worth keeping is .centered (main.css), which is a
 * layout pattern rather than a utility — it also styles its children.
 */
.flex {
    display: flex;
}

.flex-col{
    flex-direction: column;
}

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

.justify-center{
    justify-content: center;
}

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

.justify-end{
    justify-content: flex-end;
}

/**
 * MAX-WIDTH — one family, and the digit count is the unit: two digits are a
 * percentage, three are pixels. (The old .max-w-760 claimed 760px and set 70%;
 * it's .mw-70 now.) These set max-width only — pair with .mx-auto to centre,
 * which is why every call site that used to rely on the px classes' built-in
 * margin now says so out loud.
 */
.mw-60 {
    max-width: 60%;
}

.mw-70 {
    max-width: 70%;
}

.mw-80 {
    max-width: 80%;
}

.mw-500 {
    max-width: 500px;
}

.mw-750 {
    max-width: 750px;
}

.mw-850 {
    max-width: 850px;
}