/**
 * Layout Primitives — lrxd theme
 *
 * Additive layer: new utility classes + legacy width aliases.
 * Zero visual change — existing style.css rules (many with !important) always
 * win because style.css is enqueued after this file.
 *
 * Enqueue order: tokens → reset → base → typography → layout → style → theme
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LEGACY CLASS MAP  (use the modern replacement for new markup)
 * ─────────────────────────────────────────────────────────────────────────────
 *
 *  Width utilities (flex children):
 *    .list-w-25 > *             →  .grid.grid-cols-4  (25% = 1 of 4 cols)
 *    .list-w-33 > *             →  .grid.grid-cols-3  (≈33% = 1 of 3 cols)
 *    .list-w-50 > *             →  .grid.grid-cols-2  (50% = 1 of 2 cols)
 *    .list-w-66 > *             →  context-specific; no 1:1 grid alias
 *    .list-w-75 > *             →  context-specific; no 1:1 grid alias
 *    .list-w-100 > *            →  .grid.grid-cols-1  (100%)
 *
 *  Responsive ≤ 1023px (md breakpoint):
 *    .list-w-md-25 / .w-md-25   →  .md\:grid-cols-4
 *    .list-w-md-33 / .w-md-33   →  .md\:grid-cols-3
 *    .list-w-md-50 / .w-md-50   →  .md\:grid-cols-2
 *    .list-w-md-100 / .w-md-100 →  .md\:grid-cols-1
 *
 *  Spacing shorthand (new names — legacy names stay in style.css):
 *    .ma-N   →  .m-N    (margin all sides)
 *    .pa-N   →  .p-N    (padding all sides)
 *    (direction utils .mt-N … .py-N are now also token-backed here;
 *     .mx-N and .px-N are new — horizontal margin/padding shorthand)
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * COLLISION GUARD — :where() approach
 * ─────────────────────────────────────────────────────────────────────────────
 * All spacing utilities are wrapped in :where(…) which reduces their
 * specificity to (0,0,0). This means they:
 *   · Never override component styles, plugin styles, or inline styles.
 *   · Are always overridden by existing style.css rules (which use !important
 *     for the same class names), so zero visual change for existing markup.
 *
 * Gravity Forms CSS was audited on 2026-06-24 and confirmed to use NO class
 * names matching .m-N, .mt-N, .mb-N, .mx-N, .my-N, .p-N, .pt-N, .pb-N,
 * .px-N, or .py-N. The :where() guard provides defence-in-depth against any
 * future plugin that might adopt similar names.
 *
 * .container and .grid* classes are NOT wrapped in :where() because they are
 * new names with no conflicts in any loaded stylesheet.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER
   Max-width wrapper, centered, with horizontal padding from the spacing scale.
   Side padding: --space-3 (30px) matches legacy --trim: 0 30px on .container-wrap.
   ═══════════════════════════════════════════════════════════════════════════ */

.container {
	max-width: var(--max-container-width); /* 1225px */
	margin-inline: auto;
	width: 100%;
	padding-inline: var(--space-3); /* 30px */
}


/* ═══════════════════════════════════════════════════════════════════════════
   GRID
   CSS Grid container + column-count helpers.
   ═══════════════════════════════════════════════════════════════════════════ */

.grid {
	display: grid;
}

.grid-cols-1  { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* md: responsive variants — collapse at the project's tablet breakpoint (≤ 1023px).
   Use escaped colon in HTML: class="md:grid-cols-2" */
@media (max-width: 1023px) {
	.md\:grid-cols-1  { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
	.md\:grid-cols-2  { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
	.md\:grid-cols-3  { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
	.md\:grid-cols-4  { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
	.md\:grid-cols-6  { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
	.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SPACING UTILITIES
   All wrapped in :where() — see COLLISION GUARD above.
   Token scale: --space-1 (10px) … --space-12 (120px). Step 0 = bare 0 (no unit).
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- All-sides margin (.m-N) --- */
:where(.m-0)  { margin: 0; }
:where(.m-1)  { margin: var(--space-1); }
:where(.m-2)  { margin: var(--space-2); }
:where(.m-3)  { margin: var(--space-3); }
:where(.m-4)  { margin: var(--space-4); }
:where(.m-5)  { margin: var(--space-5); }
:where(.m-6)  { margin: var(--space-6); }
:where(.m-7)  { margin: var(--space-7); }
:where(.m-8)  { margin: var(--space-8); }
:where(.m-9)  { margin: var(--space-9); }
:where(.m-10) { margin: var(--space-10); }
:where(.m-11) { margin: var(--space-11); }
:where(.m-12) { margin: var(--space-12); }

/* --- Margin-top (.mt-N) --- */
:where(.mt-0)  { margin-top: 0; }
:where(.mt-1)  { margin-top: var(--space-1); }
:where(.mt-2)  { margin-top: var(--space-2); }
:where(.mt-3)  { margin-top: var(--space-3); }
:where(.mt-4)  { margin-top: var(--space-4); }
:where(.mt-5)  { margin-top: var(--space-5); }
:where(.mt-6)  { margin-top: var(--space-6); }
:where(.mt-7)  { margin-top: var(--space-7); }
:where(.mt-8)  { margin-top: var(--space-8); }
:where(.mt-9)  { margin-top: var(--space-9); }
:where(.mt-10) { margin-top: var(--space-10); }
:where(.mt-11) { margin-top: var(--space-11); }
:where(.mt-12) { margin-top: var(--space-12); }

/* --- Margin-bottom (.mb-N) --- */
:where(.mb-0)  { margin-bottom: 0; }
:where(.mb-1)  { margin-bottom: var(--space-1); }
:where(.mb-2)  { margin-bottom: var(--space-2); }
:where(.mb-3)  { margin-bottom: var(--space-3); }
:where(.mb-4)  { margin-bottom: var(--space-4); }
:where(.mb-5)  { margin-bottom: var(--space-5); }
:where(.mb-6)  { margin-bottom: var(--space-6); }
:where(.mb-7)  { margin-bottom: var(--space-7); }
:where(.mb-8)  { margin-bottom: var(--space-8); }
:where(.mb-9)  { margin-bottom: var(--space-9); }
:where(.mb-10) { margin-bottom: var(--space-10); }
:where(.mb-11) { margin-bottom: var(--space-11); }
:where(.mb-12) { margin-bottom: var(--space-12); }

/* --- Horizontal margin (.mx-N) — margin-left + margin-right --- */
:where(.mx-0)  { margin-inline: 0; }
:where(.mx-1)  { margin-inline: var(--space-1); }
:where(.mx-2)  { margin-inline: var(--space-2); }
:where(.mx-3)  { margin-inline: var(--space-3); }
:where(.mx-4)  { margin-inline: var(--space-4); }
:where(.mx-5)  { margin-inline: var(--space-5); }
:where(.mx-6)  { margin-inline: var(--space-6); }
:where(.mx-7)  { margin-inline: var(--space-7); }
:where(.mx-8)  { margin-inline: var(--space-8); }
:where(.mx-9)  { margin-inline: var(--space-9); }
:where(.mx-10) { margin-inline: var(--space-10); }
:where(.mx-11) { margin-inline: var(--space-11); }
:where(.mx-12) { margin-inline: var(--space-12); }

/* --- Vertical margin (.my-N) — margin-top + margin-bottom --- */
:where(.my-0)  { margin-block: 0; }
:where(.my-1)  { margin-block: var(--space-1); }
:where(.my-2)  { margin-block: var(--space-2); }
:where(.my-3)  { margin-block: var(--space-3); }
:where(.my-4)  { margin-block: var(--space-4); }
:where(.my-5)  { margin-block: var(--space-5); }
:where(.my-6)  { margin-block: var(--space-6); }
:where(.my-7)  { margin-block: var(--space-7); }
:where(.my-8)  { margin-block: var(--space-8); }
:where(.my-9)  { margin-block: var(--space-9); }
:where(.my-10) { margin-block: var(--space-10); }
:where(.my-11) { margin-block: var(--space-11); }
:where(.my-12) { margin-block: var(--space-12); }

/* --- All-sides padding (.p-N) --- */
:where(.p-0)  { padding: 0; }
:where(.p-1)  { padding: var(--space-1); }
:where(.p-2)  { padding: var(--space-2); }
:where(.p-3)  { padding: var(--space-3); }
:where(.p-4)  { padding: var(--space-4); }
:where(.p-5)  { padding: var(--space-5); }
:where(.p-6)  { padding: var(--space-6); }
:where(.p-7)  { padding: var(--space-7); }
:where(.p-8)  { padding: var(--space-8); }
:where(.p-9)  { padding: var(--space-9); }
:where(.p-10) { padding: var(--space-10); }
:where(.p-11) { padding: var(--space-11); }
:where(.p-12) { padding: var(--space-12); }

/* --- Padding-top (.pt-N) --- */
:where(.pt-0)  { padding-top: 0; }
:where(.pt-1)  { padding-top: var(--space-1); }
:where(.pt-2)  { padding-top: var(--space-2); }
:where(.pt-3)  { padding-top: var(--space-3); }
:where(.pt-4)  { padding-top: var(--space-4); }
:where(.pt-5)  { padding-top: var(--space-5); }
:where(.pt-6)  { padding-top: var(--space-6); }
:where(.pt-7)  { padding-top: var(--space-7); }
:where(.pt-8)  { padding-top: var(--space-8); }
:where(.pt-9)  { padding-top: var(--space-9); }
:where(.pt-10) { padding-top: var(--space-10); }
:where(.pt-11) { padding-top: var(--space-11); }
:where(.pt-12) { padding-top: var(--space-12); }

/* --- Padding-bottom (.pb-N) --- */
:where(.pb-0)  { padding-bottom: 0; }
:where(.pb-1)  { padding-bottom: var(--space-1); }
:where(.pb-2)  { padding-bottom: var(--space-2); }
:where(.pb-3)  { padding-bottom: var(--space-3); }
:where(.pb-4)  { padding-bottom: var(--space-4); }
:where(.pb-5)  { padding-bottom: var(--space-5); }
:where(.pb-6)  { padding-bottom: var(--space-6); }
:where(.pb-7)  { padding-bottom: var(--space-7); }
:where(.pb-8)  { padding-bottom: var(--space-8); }
:where(.pb-9)  { padding-bottom: var(--space-9); }
:where(.pb-10) { padding-bottom: var(--space-10); }
:where(.pb-11) { padding-bottom: var(--space-11); }
:where(.pb-12) { padding-bottom: var(--space-12); }

/* --- Horizontal padding (.px-N) — padding-left + padding-right --- */
:where(.px-0)  { padding-inline: 0; }
:where(.px-1)  { padding-inline: var(--space-1); }
:where(.px-2)  { padding-inline: var(--space-2); }
:where(.px-3)  { padding-inline: var(--space-3); }
:where(.px-4)  { padding-inline: var(--space-4); }
:where(.px-5)  { padding-inline: var(--space-5); }
:where(.px-6)  { padding-inline: var(--space-6); }
:where(.px-7)  { padding-inline: var(--space-7); }
:where(.px-8)  { padding-inline: var(--space-8); }
:where(.px-9)  { padding-inline: var(--space-9); }
:where(.px-10) { padding-inline: var(--space-10); }
:where(.px-11) { padding-inline: var(--space-11); }
:where(.px-12) { padding-inline: var(--space-12); }

/* --- Vertical padding (.py-N) — padding-top + padding-bottom --- */
:where(.py-0)  { padding-block: 0; }
:where(.py-1)  { padding-block: var(--space-1); }
:where(.py-2)  { padding-block: var(--space-2); }
:where(.py-3)  { padding-block: var(--space-3); }
:where(.py-4)  { padding-block: var(--space-4); }
:where(.py-5)  { padding-block: var(--space-5); }
:where(.py-6)  { padding-block: var(--space-6); }
:where(.py-7)  { padding-block: var(--space-7); }
:where(.py-8)  { padding-block: var(--space-8); }
:where(.py-9)  { padding-block: var(--space-9); }
:where(.py-10) { padding-block: var(--space-10); }
:where(.py-11) { padding-block: var(--space-11); }
:where(.py-12) { padding-block: var(--space-12); }


/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY ALIASES
   Re-express the .list-w-* / .w-md-* patterns using token-backed values so
   existing markup keeps working. These rules are overridden by the identical
   declarations in style.css (which loads after), so zero visual change.
   See LEGACY CLASS MAP at the top of this file for migration guidance.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base widths (all viewports) */
.list-w-25 > *  { width: 25%; }
.list-w-33 > *  { width: calc(100% / 3); }
.list-w-50 > *  { width: 50%; }
.list-w-66 > *  { width: calc(100% / 3 * 2); }
.list-w-75 > *  { width: 75%; }
.list-w-100 > * { width: 100%; }

/* Responsive aliases — md breakpoint (≤ 1023px) */
@media (max-width: 1023px) {
	.list-w-md-25 > *  { width: 25%; }
	.list-w-md-33 > *  { width: calc(100% / 3); }
	.list-w-md-50 > *  { width: 50%; }
	.list-w-md-66 > *  { width: calc(100% / 3 * 2); }
	.list-w-md-75 > *  { width: 75%; }
	.list-w-md-100 > * { width: 100%; }
}

/* Responsive aliases — sm breakpoint (≤ 767px) */
@media (max-width: 767px) {
	.list-w-sm-25 > *  { width: 25%; }
	.list-w-sm-33 > *  { width: calc(100% / 3); }
	.list-w-sm-50 > *  { width: 50%; }
	.list-w-sm-66 > *  { width: calc(100% / 3 * 2); }
	.list-w-sm-75 > *  { width: 75%; }
	.list-w-sm-100 > * { width: 100%; }
}