/**
 * Smart Suite — Layout Foundation (ss-layout.css)
 *
 * 12-column CSS Grid system, 5 unified breakpoints, container queries,
 * and utility class library. Loads before all other Smart Suite CSS.
 *
 * Breakpoints:
 *   xs  ≤ 480px   sm  ≤ 640px   md  ≤ 768px   lg  ≤ 1024px   xl  ≤ 1280px
 *
 * Inspired by Tailwind (utility-first) + Bootstrap (grid model),
 * purpose-built for a PHP page builder (builder-renderer.php).
 *
 * @package SmartSuite
 * @version 1.0.0
 */

/* ========================================================================
   STEP 1 — Design Tokens (CSS Custom Properties)
   ======================================================================== */

:root {
    /* ── Breakpoints (for JS / documentation; CSS uses @media directly) ── */
    --ss-bp-xs:  480px;
    --ss-bp-sm:  640px;
    --ss-bp-md:  768px;
    --ss-bp-lg:  1024px;
    --ss-bp-xl:  1280px;

    /* ── Spacing scale (8 px base, 16 steps) ── */
    --ss-s-0:    0;
    --ss-s-px:   1px;
    --ss-s-0\.5: 2px;
    --ss-s-1:    4px;
    --ss-s-2:    8px;
    --ss-s-3:    12px;
    --ss-s-4:    16px;
    --ss-s-5:    20px;
    --ss-s-6:    24px;
    --ss-s-8:    32px;
    --ss-s-10:   40px;
    --ss-s-12:   48px;
    --ss-s-16:   64px;
    --ss-s-20:   80px;
    --ss-s-24:   96px;

    /* ── Container max-widths ── */
    --ss-container-sm:  640px;
    --ss-container-md:  768px;
    --ss-container-lg:  1024px;
    --ss-container-xl:  1140px;
    --ss-container-2xl: 1400px;

    /* ── Grid ── */
    --ss-grid-columns: 12;
    --ss-grid-gap:     24px;
}

/* ========================================================================
   STEP 2 — Container System
   ======================================================================== */

.ss-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--ss-s-5);
    container-type: inline-size;
    container-name: ss-layout;
}

/* Responsive max-width stepping */
@media (min-width: 640px)  { .ss-container { max-width: var(--ss-container-sm);  } }
@media (min-width: 768px)  { .ss-container { max-width: var(--ss-container-md);  } }
@media (min-width: 1024px) { .ss-container { max-width: var(--ss-container-lg);  } }
@media (min-width: 1140px) { .ss-container { max-width: var(--ss-container-xl);  } }
@media (min-width: 1400px) { .ss-container { max-width: var(--ss-container-2xl); } }

/* Fluid — no max-width */
.ss-container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--ss-s-5);
    max-width: none;
    container-type: inline-size;
    container-name: ss-layout;
}

/* Fixed-tier containers */
.ss-container-sm { width: 100%; max-width: var(--ss-container-sm);  margin-inline: auto; padding-inline: var(--ss-s-5); }
.ss-container-md { width: 100%; max-width: var(--ss-container-md);  margin-inline: auto; padding-inline: var(--ss-s-5); }
.ss-container-lg { width: 100%; max-width: var(--ss-container-lg);  margin-inline: auto; padding-inline: var(--ss-s-5); }
.ss-container-xl { width: 100%; max-width: var(--ss-container-xl);  margin-inline: auto; padding-inline: var(--ss-s-5); }

/* ========================================================================
   STEP 3 — 12-Column CSS Grid System
   ======================================================================== */

.ss-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ss-grid-gap);
}

/* ── Base column spans ── */
.ss-col-1  { grid-column: span 1;  }
.ss-col-2  { grid-column: span 2;  }
.ss-col-3  { grid-column: span 3;  }
.ss-col-4  { grid-column: span 4;  }
.ss-col-5  { grid-column: span 5;  }
.ss-col-6  { grid-column: span 6;  }
.ss-col-7  { grid-column: span 7;  }
.ss-col-8  { grid-column: span 8;  }
.ss-col-9  { grid-column: span 9;  }
.ss-col-10 { grid-column: span 10; }
.ss-col-11 { grid-column: span 11; }
.ss-col-12 { grid-column: span 12; }
.ss-col-auto { grid-column: auto;  }

/* ── Start / End positioning ── */
.ss-col-start-1  { grid-column-start: 1;  }
.ss-col-start-2  { grid-column-start: 2;  }
.ss-col-start-3  { grid-column-start: 3;  }
.ss-col-start-4  { grid-column-start: 4;  }
.ss-col-start-5  { grid-column-start: 5;  }
.ss-col-start-6  { grid-column-start: 6;  }
.ss-col-start-7  { grid-column-start: 7;  }
.ss-col-start-8  { grid-column-start: 8;  }
.ss-col-start-9  { grid-column-start: 9;  }
.ss-col-start-10 { grid-column-start: 10; }
.ss-col-start-11 { grid-column-start: 11; }
.ss-col-start-12 { grid-column-start: 12; }
.ss-col-start-13 { grid-column-start: 13; }

.ss-col-end-1  { grid-column-end: 1;  }
.ss-col-end-2  { grid-column-end: 2;  }
.ss-col-end-3  { grid-column-end: 3;  }
.ss-col-end-4  { grid-column-end: 4;  }
.ss-col-end-5  { grid-column-end: 5;  }
.ss-col-end-6  { grid-column-end: 6;  }
.ss-col-end-7  { grid-column-end: 7;  }
.ss-col-end-8  { grid-column-end: 8;  }
.ss-col-end-9  { grid-column-end: 9;  }
.ss-col-end-10 { grid-column-end: 10; }
.ss-col-end-11 { grid-column-end: 11; }
.ss-col-end-12 { grid-column-end: 12; }
.ss-col-end-13 { grid-column-end: 13; }

/* ── Responsive column spans — sm (≥ 640px) ── */
@media (min-width: 640px) {
    .ss-col-sm-1  { grid-column: span 1;  }
    .ss-col-sm-2  { grid-column: span 2;  }
    .ss-col-sm-3  { grid-column: span 3;  }
    .ss-col-sm-4  { grid-column: span 4;  }
    .ss-col-sm-5  { grid-column: span 5;  }
    .ss-col-sm-6  { grid-column: span 6;  }
    .ss-col-sm-7  { grid-column: span 7;  }
    .ss-col-sm-8  { grid-column: span 8;  }
    .ss-col-sm-9  { grid-column: span 9;  }
    .ss-col-sm-10 { grid-column: span 10; }
    .ss-col-sm-11 { grid-column: span 11; }
    .ss-col-sm-12 { grid-column: span 12; }
}

/* ── Responsive column spans — md (≥ 768px) ── */
@media (min-width: 768px) {
    .ss-col-md-1  { grid-column: span 1;  }
    .ss-col-md-2  { grid-column: span 2;  }
    .ss-col-md-3  { grid-column: span 3;  }
    .ss-col-md-4  { grid-column: span 4;  }
    .ss-col-md-5  { grid-column: span 5;  }
    .ss-col-md-6  { grid-column: span 6;  }
    .ss-col-md-7  { grid-column: span 7;  }
    .ss-col-md-8  { grid-column: span 8;  }
    .ss-col-md-9  { grid-column: span 9;  }
    .ss-col-md-10 { grid-column: span 10; }
    .ss-col-md-11 { grid-column: span 11; }
    .ss-col-md-12 { grid-column: span 12; }
}

/* ── Responsive column spans — lg (≥ 1024px) ── */
@media (min-width: 1024px) {
    .ss-col-lg-1  { grid-column: span 1;  }
    .ss-col-lg-2  { grid-column: span 2;  }
    .ss-col-lg-3  { grid-column: span 3;  }
    .ss-col-lg-4  { grid-column: span 4;  }
    .ss-col-lg-5  { grid-column: span 5;  }
    .ss-col-lg-6  { grid-column: span 6;  }
    .ss-col-lg-7  { grid-column: span 7;  }
    .ss-col-lg-8  { grid-column: span 8;  }
    .ss-col-lg-9  { grid-column: span 9;  }
    .ss-col-lg-10 { grid-column: span 10; }
    .ss-col-lg-11 { grid-column: span 11; }
    .ss-col-lg-12 { grid-column: span 12; }
}

/* ── Responsive column spans — xl (≥ 1280px) ── */
@media (min-width: 1280px) {
    .ss-col-xl-1  { grid-column: span 1;  }
    .ss-col-xl-2  { grid-column: span 2;  }
    .ss-col-xl-3  { grid-column: span 3;  }
    .ss-col-xl-4  { grid-column: span 4;  }
    .ss-col-xl-5  { grid-column: span 5;  }
    .ss-col-xl-6  { grid-column: span 6;  }
    .ss-col-xl-7  { grid-column: span 7;  }
    .ss-col-xl-8  { grid-column: span 8;  }
    .ss-col-xl-9  { grid-column: span 9;  }
    .ss-col-xl-10 { grid-column: span 10; }
    .ss-col-xl-11 { grid-column: span 11; }
    .ss-col-xl-12 { grid-column: span 12; }
}

/* ── Named ratio shortcuts ── */
.ss-ratio-sidebar-main > :nth-child(1) { grid-column: span 4; }
.ss-ratio-sidebar-main > :nth-child(2) { grid-column: span 8; }

.ss-ratio-main-sidebar > :nth-child(1) { grid-column: span 8; }
.ss-ratio-main-sidebar > :nth-child(2) { grid-column: span 4; }

.ss-ratio-thirds > * { grid-column: span 4; }

.ss-ratio-quarter > * { grid-column: span 3; }

.ss-ratio-2-1 > :nth-child(1) { grid-column: span 8; }
.ss-ratio-2-1 > :nth-child(2) { grid-column: span 4; }

.ss-ratio-1-2 > :nth-child(1) { grid-column: span 4; }
.ss-ratio-1-2 > :nth-child(2) { grid-column: span 8; }

.ss-ratio-3-1 > :nth-child(1) { grid-column: span 9; }
.ss-ratio-3-1 > :nth-child(2) { grid-column: span 3; }

.ss-ratio-1-3 > :nth-child(1) { grid-column: span 3; }
.ss-ratio-1-3 > :nth-child(2) { grid-column: span 9; }

/* ========================================================================
   STEP 4 — Row Nesting & Subgrid
   ======================================================================== */

/* Nested .ss-grid-12 inside a column: subgrid where supported, fallback to 12-col */
[class*="ss-col-"] > .ss-grid-12 {
    grid-template-columns: subgrid;
}

/* Fallback for browsers without subgrid — always works */
@supports not (grid-template-columns: subgrid) {
    [class*="ss-col-"] > .ss-grid-12 {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* ========================================================================
   STEP 5 — Flexbox Element Layer
   ======================================================================== */

.ss-flex         { display: flex; }
.ss-inline-flex  { display: inline-flex; }
.ss-flex-col     { flex-direction: column; }
.ss-flex-row     { flex-direction: row; }
.ss-flex-wrap    { flex-wrap: wrap; }
.ss-flex-nowrap  { flex-wrap: nowrap; }

/* Align items */
.ss-items-start    { align-items: flex-start; }
.ss-items-center   { align-items: center; }
.ss-items-end      { align-items: flex-end; }
.ss-items-stretch  { align-items: stretch; }
.ss-items-baseline { align-items: baseline; }

/* Justify content */
.ss-justify-start   { justify-content: flex-start; }
.ss-justify-center  { justify-content: center; }
.ss-justify-end     { justify-content: flex-end; }
.ss-justify-between { justify-content: space-between; }
.ss-justify-around  { justify-content: space-around; }
.ss-justify-evenly  { justify-content: space-evenly; }

/* Align self */
.ss-self-start   { align-self: flex-start; }
.ss-self-center  { align-self: center; }
.ss-self-end     { align-self: flex-end; }
.ss-self-stretch { align-self: stretch; }

/* Grow / Shrink */
.ss-grow     { flex-grow: 1; }
.ss-grow-0   { flex-grow: 0; }
.ss-shrink   { flex-shrink: 1; }
.ss-shrink-0 { flex-shrink: 0; }

/* Basis */
.ss-basis-auto { flex-basis: auto; }
.ss-basis-full { flex-basis: 100%; }
.ss-basis-1\/2 { flex-basis: 50%; }
.ss-basis-1\/3 { flex-basis: 33.333333%; }
.ss-basis-1\/4 { flex-basis: 25%; }

/* ========================================================================
   STEP 6 — Spacing Utilities
   Logical properties internally for RTL support.
   Class names use familiar pl/pr/ml/mr convention.
   ======================================================================== */

/* ── Padding: all sides ── */
.ss-p-0    { padding: 0; }
.ss-p-px   { padding: 1px; }
.ss-p-0\.5 { padding: 2px; }
.ss-p-1    { padding: 4px; }
.ss-p-2    { padding: 8px; }
.ss-p-3    { padding: 12px; }
.ss-p-4    { padding: 16px; }
.ss-p-5    { padding: 20px; }
.ss-p-6    { padding: 24px; }
.ss-p-8    { padding: 32px; }
.ss-p-10   { padding: 40px; }
.ss-p-12   { padding: 48px; }
.ss-p-16   { padding: 64px; }
.ss-p-20   { padding: 80px; }
.ss-p-24   { padding: 96px; }

/* ── Padding: inline (horizontal / left-right) ── */
.ss-px-0    { padding-inline: 0; }
.ss-px-px   { padding-inline: 1px; }
.ss-px-0\.5 { padding-inline: 2px; }
.ss-px-1    { padding-inline: 4px; }
.ss-px-2    { padding-inline: 8px; }
.ss-px-3    { padding-inline: 12px; }
.ss-px-4    { padding-inline: 16px; }
.ss-px-5    { padding-inline: 20px; }
.ss-px-6    { padding-inline: 24px; }
.ss-px-8    { padding-inline: 32px; }
.ss-px-10   { padding-inline: 40px; }
.ss-px-12   { padding-inline: 48px; }
.ss-px-16   { padding-inline: 64px; }
.ss-px-20   { padding-inline: 80px; }
.ss-px-24   { padding-inline: 96px; }

/* ── Padding: block (vertical / top-bottom) ── */
.ss-py-0    { padding-block: 0; }
.ss-py-px   { padding-block: 1px; }
.ss-py-0\.5 { padding-block: 2px; }
.ss-py-1    { padding-block: 4px; }
.ss-py-2    { padding-block: 8px; }
.ss-py-3    { padding-block: 12px; }
.ss-py-4    { padding-block: 16px; }
.ss-py-5    { padding-block: 20px; }
.ss-py-6    { padding-block: 24px; }
.ss-py-8    { padding-block: 32px; }
.ss-py-10   { padding-block: 40px; }
.ss-py-12   { padding-block: 48px; }
.ss-py-16   { padding-block: 64px; }
.ss-py-20   { padding-block: 80px; }
.ss-py-24   { padding-block: 96px; }

/* ── Padding: individual sides (logical) ── */
.ss-pt-0  { padding-block-start: 0; }   .ss-pt-1  { padding-block-start: 4px; }
.ss-pt-2  { padding-block-start: 8px; }  .ss-pt-3  { padding-block-start: 12px; }
.ss-pt-4  { padding-block-start: 16px; } .ss-pt-5  { padding-block-start: 20px; }
.ss-pt-6  { padding-block-start: 24px; } .ss-pt-8  { padding-block-start: 32px; }
.ss-pt-10 { padding-block-start: 40px; } .ss-pt-12 { padding-block-start: 48px; }
.ss-pt-16 { padding-block-start: 64px; } .ss-pt-20 { padding-block-start: 80px; }
.ss-pt-24 { padding-block-start: 96px; }

.ss-pb-0  { padding-block-end: 0; }   .ss-pb-1  { padding-block-end: 4px; }
.ss-pb-2  { padding-block-end: 8px; }  .ss-pb-3  { padding-block-end: 12px; }
.ss-pb-4  { padding-block-end: 16px; } .ss-pb-5  { padding-block-end: 20px; }
.ss-pb-6  { padding-block-end: 24px; } .ss-pb-8  { padding-block-end: 32px; }
.ss-pb-10 { padding-block-end: 40px; } .ss-pb-12 { padding-block-end: 48px; }
.ss-pb-16 { padding-block-end: 64px; } .ss-pb-20 { padding-block-end: 80px; }
.ss-pb-24 { padding-block-end: 96px; }

.ss-pl-0  { padding-inline-start: 0; }   .ss-pl-1  { padding-inline-start: 4px; }
.ss-pl-2  { padding-inline-start: 8px; }  .ss-pl-3  { padding-inline-start: 12px; }
.ss-pl-4  { padding-inline-start: 16px; } .ss-pl-5  { padding-inline-start: 20px; }
.ss-pl-6  { padding-inline-start: 24px; } .ss-pl-8  { padding-inline-start: 32px; }
.ss-pl-10 { padding-inline-start: 40px; } .ss-pl-12 { padding-inline-start: 48px; }
.ss-pl-16 { padding-inline-start: 64px; } .ss-pl-20 { padding-inline-start: 80px; }
.ss-pl-24 { padding-inline-start: 96px; }

.ss-pr-0  { padding-inline-end: 0; }   .ss-pr-1  { padding-inline-end: 4px; }
.ss-pr-2  { padding-inline-end: 8px; }  .ss-pr-3  { padding-inline-end: 12px; }
.ss-pr-4  { padding-inline-end: 16px; } .ss-pr-5  { padding-inline-end: 20px; }
.ss-pr-6  { padding-inline-end: 24px; } .ss-pr-8  { padding-inline-end: 32px; }
.ss-pr-10 { padding-inline-end: 40px; } .ss-pr-12 { padding-inline-end: 48px; }
.ss-pr-16 { padding-inline-end: 64px; } .ss-pr-20 { padding-inline-end: 80px; }
.ss-pr-24 { padding-inline-end: 96px; }

/* ── Margin: all sides ── */
.ss-m-0    { margin: 0; }
.ss-m-px   { margin: 1px; }
.ss-m-0\.5 { margin: 2px; }
.ss-m-1    { margin: 4px; }
.ss-m-2    { margin: 8px; }
.ss-m-3    { margin: 12px; }
.ss-m-4    { margin: 16px; }
.ss-m-5    { margin: 20px; }
.ss-m-6    { margin: 24px; }
.ss-m-8    { margin: 32px; }
.ss-m-10   { margin: 40px; }
.ss-m-12   { margin: 48px; }
.ss-m-16   { margin: 64px; }
.ss-m-20   { margin: 80px; }
.ss-m-24   { margin: 96px; }

/* ── Margin: inline (horizontal) ── */
.ss-mx-0    { margin-inline: 0; }
.ss-mx-1    { margin-inline: 4px; }
.ss-mx-2    { margin-inline: 8px; }
.ss-mx-3    { margin-inline: 12px; }
.ss-mx-4    { margin-inline: 16px; }
.ss-mx-5    { margin-inline: 20px; }
.ss-mx-6    { margin-inline: 24px; }
.ss-mx-8    { margin-inline: 32px; }
.ss-mx-auto { margin-inline: auto; }

/* ── Margin: block (vertical) ── */
.ss-my-0  { margin-block: 0; }
.ss-my-1  { margin-block: 4px; }
.ss-my-2  { margin-block: 8px; }
.ss-my-3  { margin-block: 12px; }
.ss-my-4  { margin-block: 16px; }
.ss-my-5  { margin-block: 20px; }
.ss-my-6  { margin-block: 24px; }
.ss-my-8  { margin-block: 32px; }

/* ── Margin: individual sides (logical) ── */
.ss-mt-0  { margin-block-start: 0; }   .ss-mt-1  { margin-block-start: 4px; }
.ss-mt-2  { margin-block-start: 8px; }  .ss-mt-3  { margin-block-start: 12px; }
.ss-mt-4  { margin-block-start: 16px; } .ss-mt-5  { margin-block-start: 20px; }
.ss-mt-6  { margin-block-start: 24px; } .ss-mt-8  { margin-block-start: 32px; }
.ss-mt-10 { margin-block-start: 40px; } .ss-mt-12 { margin-block-start: 48px; }
.ss-mt-16 { margin-block-start: 64px; } .ss-mt-20 { margin-block-start: 80px; }
.ss-mt-24 { margin-block-start: 96px; }

.ss-mb-0  { margin-block-end: 0; }   .ss-mb-1  { margin-block-end: 4px; }
.ss-mb-2  { margin-block-end: 8px; }  .ss-mb-3  { margin-block-end: 12px; }
.ss-mb-4  { margin-block-end: 16px; } .ss-mb-5  { margin-block-end: 20px; }
.ss-mb-6  { margin-block-end: 24px; } .ss-mb-8  { margin-block-end: 32px; }
.ss-mb-10 { margin-block-end: 40px; } .ss-mb-12 { margin-block-end: 48px; }
.ss-mb-16 { margin-block-end: 64px; } .ss-mb-20 { margin-block-end: 80px; }
.ss-mb-24 { margin-block-end: 96px; }

.ss-ml-0  { margin-inline-start: 0; }   .ss-ml-1  { margin-inline-start: 4px; }
.ss-ml-2  { margin-inline-start: 8px; }  .ss-ml-3  { margin-inline-start: 12px; }
.ss-ml-4  { margin-inline-start: 16px; } .ss-ml-5  { margin-inline-start: 20px; }
.ss-ml-6  { margin-inline-start: 24px; } .ss-ml-8  { margin-inline-start: 32px; }
.ss-ml-auto { margin-inline-start: auto; }

.ss-mr-0  { margin-inline-end: 0; }   .ss-mr-1  { margin-inline-end: 4px; }
.ss-mr-2  { margin-inline-end: 8px; }  .ss-mr-3  { margin-inline-end: 12px; }
.ss-mr-4  { margin-inline-end: 16px; } .ss-mr-5  { margin-inline-end: 20px; }
.ss-mr-6  { margin-inline-end: 24px; } .ss-mr-8  { margin-inline-end: 32px; }
.ss-mr-auto { margin-inline-end: auto; }

/* ── Gap ── */
.ss-gap-0    { gap: 0; }
.ss-gap-px   { gap: 1px; }
.ss-gap-0\.5 { gap: 2px; }
.ss-gap-1    { gap: 4px; }
.ss-gap-2    { gap: 8px; }
.ss-gap-3    { gap: 12px; }
.ss-gap-4    { gap: 16px; }
.ss-gap-5    { gap: 20px; }
.ss-gap-6    { gap: 24px; }
.ss-gap-8    { gap: 32px; }
.ss-gap-10   { gap: 40px; }
.ss-gap-12   { gap: 48px; }
.ss-gap-16   { gap: 64px; }
.ss-gap-20   { gap: 80px; }
.ss-gap-24   { gap: 96px; }

.ss-gap-x-0  { column-gap: 0; }
.ss-gap-x-1  { column-gap: 4px; }
.ss-gap-x-2  { column-gap: 8px; }
.ss-gap-x-3  { column-gap: 12px; }
.ss-gap-x-4  { column-gap: 16px; }
.ss-gap-x-5  { column-gap: 20px; }
.ss-gap-x-6  { column-gap: 24px; }
.ss-gap-x-8  { column-gap: 32px; }
.ss-gap-x-10 { column-gap: 40px; }
.ss-gap-x-12 { column-gap: 48px; }
.ss-gap-x-16 { column-gap: 64px; }

.ss-gap-y-0  { row-gap: 0; }
.ss-gap-y-1  { row-gap: 4px; }
.ss-gap-y-2  { row-gap: 8px; }
.ss-gap-y-3  { row-gap: 12px; }
.ss-gap-y-4  { row-gap: 16px; }
.ss-gap-y-5  { row-gap: 20px; }
.ss-gap-y-6  { row-gap: 24px; }
.ss-gap-y-8  { row-gap: 32px; }
.ss-gap-y-10 { row-gap: 40px; }
.ss-gap-y-12 { row-gap: 48px; }
.ss-gap-y-16 { row-gap: 64px; }

/* ── Responsive spacing — md (≥ 768px) ── */
@media (min-width: 768px) {
    .ss-md\:p-0  { padding: 0; }
    .ss-md\:p-2  { padding: 8px; }
    .ss-md\:p-4  { padding: 16px; }
    .ss-md\:p-6  { padding: 24px; }
    .ss-md\:p-8  { padding: 32px; }
    .ss-md\:p-10 { padding: 40px; }
    .ss-md\:p-12 { padding: 48px; }

    .ss-md\:px-0 { padding-inline: 0; }
    .ss-md\:px-4 { padding-inline: 16px; }
    .ss-md\:px-6 { padding-inline: 24px; }
    .ss-md\:px-8 { padding-inline: 32px; }

    .ss-md\:py-0 { padding-block: 0; }
    .ss-md\:py-4 { padding-block: 16px; }
    .ss-md\:py-6 { padding-block: 24px; }
    .ss-md\:py-8 { padding-block: 32px; }

    .ss-md\:m-0  { margin: 0; }
    .ss-md\:m-4  { margin: 16px; }
    .ss-md\:m-6  { margin: 24px; }

    .ss-md\:mt-0 { margin-block-start: 0; }
    .ss-md\:mb-0 { margin-block-end: 0; }

    .ss-md\:gap-4 { gap: 16px; }
    .ss-md\:gap-6 { gap: 24px; }
    .ss-md\:gap-8 { gap: 32px; }
}

/* ── Responsive spacing — lg (≥ 1024px) ── */
@media (min-width: 1024px) {
    .ss-lg\:p-0  { padding: 0; }
    .ss-lg\:p-4  { padding: 16px; }
    .ss-lg\:p-6  { padding: 24px; }
    .ss-lg\:p-8  { padding: 32px; }
    .ss-lg\:p-10 { padding: 40px; }
    .ss-lg\:p-12 { padding: 48px; }

    .ss-lg\:px-0 { padding-inline: 0; }
    .ss-lg\:px-4 { padding-inline: 16px; }
    .ss-lg\:px-6 { padding-inline: 24px; }
    .ss-lg\:px-8 { padding-inline: 32px; }

    .ss-lg\:py-0 { padding-block: 0; }
    .ss-lg\:py-4 { padding-block: 16px; }
    .ss-lg\:py-6 { padding-block: 24px; }
    .ss-lg\:py-8 { padding-block: 32px; }

    .ss-lg\:m-0  { margin: 0; }
    .ss-lg\:m-4  { margin: 16px; }
    .ss-lg\:m-6  { margin: 24px; }

    .ss-lg\:mt-0 { margin-block-start: 0; }
    .ss-lg\:mb-0 { margin-block-end: 0; }

    .ss-lg\:gap-4 { gap: 16px; }
    .ss-lg\:gap-6 { gap: 24px; }
    .ss-lg\:gap-8 { gap: 32px; }
}

/* ========================================================================
   STEP 7 — Display & Overflow Utilities
   ======================================================================== */

.ss-block        { display: block; }
.ss-inline       { display: inline; }
.ss-inline-block { display: inline-block; }
.ss-hidden       { display: none; }
.ss-grid         { display: grid; }
/* .ss-inline-flex defined in Step 5 */

/* ── Overflow ── */
.ss-overflow-hidden { overflow: hidden; }
.ss-overflow-auto   { overflow: auto; }
.ss-overflow-x-auto {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.ss-overflow-y-auto {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Text truncation ── */
.ss-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Width / min-width — critical for overflow prevention ── */
.ss-min-w-0     { min-width: 0; }
.ss-w-full      { width: 100%; }
.ss-w-auto      { width: auto; }
.ss-max-w-full  { max-width: 100%; }
.ss-max-w-prose { max-width: 65ch; }
.ss-max-w-none  { max-width: none; }
.ss-h-full      { height: 100%; }
.ss-h-auto      { height: auto; }
.ss-min-h-0     { min-height: 0; }

/* ── Responsive display — sm ── */
@media (min-width: 640px) {
    .ss-sm\:block  { display: block; }
    .ss-sm\:hidden { display: none; }
    .ss-sm\:flex   { display: flex; }
    .ss-sm\:grid   { display: grid; }
}

/* ── Responsive display — md ── */
@media (min-width: 768px) {
    .ss-md\:block  { display: block; }
    .ss-md\:hidden { display: none; }
    .ss-md\:flex   { display: flex; }
    .ss-md\:grid   { display: grid; }
}

/* ── Responsive display — lg ── */
@media (min-width: 1024px) {
    .ss-lg\:block  { display: block; }
    .ss-lg\:hidden { display: none; }
    .ss-lg\:flex   { display: flex; }
    .ss-lg\:grid   { display: grid; }
}

/* ── Responsive display — xl ── */
@media (min-width: 1280px) {
    .ss-xl\:block  { display: block; }
    .ss-xl\:hidden { display: none; }
    .ss-xl\:flex   { display: flex; }
    .ss-xl\:grid   { display: grid; }
}

/* ========================================================================
   STEP 8 — Typography Utilities
   ======================================================================== */

/* ── Size (fluid with clamp) ── */
.ss-text-xs  { font-size: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem); line-height: 1rem; }
.ss-text-sm  { font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); line-height: 1.25rem; }
.ss-text-base { font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); line-height: 1.5rem; }
.ss-text-lg  { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); line-height: 1.75rem; }
.ss-text-xl  { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem); line-height: 1.75rem; }
.ss-text-2xl { font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); line-height: 2rem; }
.ss-text-3xl { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem); line-height: 2.25rem; }
.ss-text-4xl { font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem); line-height: 2.5rem; }

/* ── Weight ── */
.ss-font-light    { font-weight: 300; }
.ss-font-normal   { font-weight: 400; }
.ss-font-medium   { font-weight: 500; }
.ss-font-semibold { font-weight: 600; }
.ss-font-bold     { font-weight: 700; }

/* ── Alignment ── */
.ss-text-left    { text-align: start; }
.ss-text-center  { text-align: center; }
.ss-text-right   { text-align: end; }
.ss-text-justify { text-align: justify; }

/* ── Line height ── */
.ss-leading-tight   { line-height: 1.25; }
.ss-leading-snug    { line-height: 1.375; }
.ss-leading-normal  { line-height: 1.5; }
.ss-leading-relaxed { line-height: 1.625; }
.ss-leading-loose   { line-height: 2; }

/* ── Color — references branding CSS vars from smart-suite.css ── */
.ss-text-primary   { color: var(--ss-primary, #6366f1); }
.ss-text-secondary { color: var(--ss-secondary, #8b5cf6); }
.ss-text-muted     { color: var(--ss-text-muted, #6b7280); }
.ss-text-inverse   { color: var(--ss-bg, #ffffff); }
.ss-text-success   { color: var(--ss-success, #10b981); }
.ss-text-warning   { color: var(--ss-warning, #f59e0b); }
.ss-text-error     { color: var(--ss-error, #ef4444); }

/* ── Whitespace / word-break ── */
.ss-whitespace-nowrap  { white-space: nowrap; }
.ss-whitespace-normal  { white-space: normal; }
.ss-break-words        { overflow-wrap: break-word; word-break: break-word; }
.ss-break-all          { word-break: break-all; }

/* ========================================================================
   STEP 9 — Container Queries for Nested Responsiveness
   ======================================================================== */

/*
 * Container-query column spans mirror the responsive grid but respond to
 * container width instead of viewport — critical for widgets inside
 * sidebars, Elementor columns, or other constrained contexts.
 */

/* ── CQ breakpoint: sm (≥ 640px container width) ── */
@container ss-layout (min-width: 640px) {
    .ss-cq-col-sm-1  { grid-column: span 1;  }
    .ss-cq-col-sm-2  { grid-column: span 2;  }
    .ss-cq-col-sm-3  { grid-column: span 3;  }
    .ss-cq-col-sm-4  { grid-column: span 4;  }
    .ss-cq-col-sm-5  { grid-column: span 5;  }
    .ss-cq-col-sm-6  { grid-column: span 6;  }
    .ss-cq-col-sm-7  { grid-column: span 7;  }
    .ss-cq-col-sm-8  { grid-column: span 8;  }
    .ss-cq-col-sm-9  { grid-column: span 9;  }
    .ss-cq-col-sm-10 { grid-column: span 10; }
    .ss-cq-col-sm-11 { grid-column: span 11; }
    .ss-cq-col-sm-12 { grid-column: span 12; }
}

/* ── CQ breakpoint: md (≥ 768px container width) ── */
@container ss-layout (min-width: 768px) {
    .ss-cq-col-md-1  { grid-column: span 1;  }
    .ss-cq-col-md-2  { grid-column: span 2;  }
    .ss-cq-col-md-3  { grid-column: span 3;  }
    .ss-cq-col-md-4  { grid-column: span 4;  }
    .ss-cq-col-md-5  { grid-column: span 5;  }
    .ss-cq-col-md-6  { grid-column: span 6;  }
    .ss-cq-col-md-7  { grid-column: span 7;  }
    .ss-cq-col-md-8  { grid-column: span 8;  }
    .ss-cq-col-md-9  { grid-column: span 9;  }
    .ss-cq-col-md-10 { grid-column: span 10; }
    .ss-cq-col-md-11 { grid-column: span 11; }
    .ss-cq-col-md-12 { grid-column: span 12; }
}

/* ── CQ breakpoint: lg (≥ 1024px container width) ── */
@container ss-layout (min-width: 1024px) {
    .ss-cq-col-lg-1  { grid-column: span 1;  }
    .ss-cq-col-lg-2  { grid-column: span 2;  }
    .ss-cq-col-lg-3  { grid-column: span 3;  }
    .ss-cq-col-lg-4  { grid-column: span 4;  }
    .ss-cq-col-lg-5  { grid-column: span 5;  }
    .ss-cq-col-lg-6  { grid-column: span 6;  }
    .ss-cq-col-lg-7  { grid-column: span 7;  }
    .ss-cq-col-lg-8  { grid-column: span 8;  }
    .ss-cq-col-lg-9  { grid-column: span 9;  }
    .ss-cq-col-lg-10 { grid-column: span 10; }
    .ss-cq-col-lg-11 { grid-column: span 11; }
    .ss-cq-col-lg-12 { grid-column: span 12; }
}

/* ── CQ breakpoint: xl (≥ 1280px container width) ── */
@container ss-layout (min-width: 1280px) {
    .ss-cq-col-xl-1  { grid-column: span 1;  }
    .ss-cq-col-xl-2  { grid-column: span 2;  }
    .ss-cq-col-xl-3  { grid-column: span 3;  }
    .ss-cq-col-xl-4  { grid-column: span 4;  }
    .ss-cq-col-xl-5  { grid-column: span 5;  }
    .ss-cq-col-xl-6  { grid-column: span 6;  }
    .ss-cq-col-xl-7  { grid-column: span 7;  }
    .ss-cq-col-xl-8  { grid-column: span 8;  }
    .ss-cq-col-xl-9  { grid-column: span 9;  }
    .ss-cq-col-xl-10 { grid-column: span 10; }
    .ss-cq-col-xl-11 { grid-column: span 11; }
    .ss-cq-col-xl-12 { grid-column: span 12; }
}

/* Entity grid container queries removed — opt-in only via .ss-grid-12 */

/* ========================================================================
   STEP 10 — Responsive Collapse Rules
   ======================================================================== */

/*
 * Mobile-first: base styles are full-width stacked.
 * Columns expand as viewport increases.
 */

/* ── xs (≤ 480px): Everything stacks to full-width ── */
@media (max-width: 480px) {
    .ss-grid-12 > [class*="ss-col-"] {
        grid-column: 1 / -1;
    }

    /* Ratio shortcuts collapse */
    [class*="ss-ratio-"] > * {
        grid-column: 1 / -1 !important;
    }

    /* Tables always scroll horizontally */
    .ss-el-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── sm (≤ 640px): Tables scroll ── */
@media (max-width: 640px) {
    /* Tables always scroll on small viewports */
    .ss-el-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ss-el-table table {
        min-width: 500px;
    }
}

/* ── md (≤ 768px): Named ratios collapse ── */
@media (max-width: 768px) {
    /* Named ratios collapse (new system only) */
    .ss-grid-12.ss-ratio-sidebar-main > *,
    .ss-grid-12.ss-ratio-main-sidebar > *,
    .ss-grid-12.ss-ratio-2-1 > *,
    .ss-grid-12.ss-ratio-1-2 > *,
    .ss-grid-12.ss-ratio-3-1 > *,
    .ss-grid-12.ss-ratio-1-3 > * {
        grid-column: 1 / -1 !important;
    }
}

/* ── lg (≤ 1024px): placeholder for project-specific overrides ── */

/* ── xl (≥ 1280px): Full layout, max container width ── */
@media (min-width: 1280px) {
    .ss-container {
        max-width: var(--ss-container-2xl);
    }
}

/* ── Table overflow protection (always-on) ── */
.ss-table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.ss-table-scroll-wrap table {
    width: 100%;
    min-width: 400px;
}

/* ========================================================================
   Backward Compatibility — intentionally omitted.
   The new .ss-grid-12 / .ss-col-* / .ss-container system is opt-in only.
   Existing .ss-row / .ss-row-grid / .ss-grid-cols-* classes are untouched.
   ======================================================================== */

/* ========================================================================
   Position & Z-Index Utilities
   ======================================================================== */

.ss-relative { position: relative; }
.ss-absolute { position: absolute; }
.ss-fixed    { position: fixed; }
.ss-sticky   { position: sticky; top: 0; }
.ss-static   { position: static; }

.ss-inset-0     { inset: 0; }
.ss-top-0       { top: 0; }
.ss-right-0     { right: 0; }
.ss-bottom-0    { bottom: 0; }
.ss-left-0      { left: 0; }

.ss-z-0    { z-index: 0; }
.ss-z-10   { z-index: 10; }
.ss-z-20   { z-index: 20; }
.ss-z-30   { z-index: 30; }
.ss-z-40   { z-index: 40; }
.ss-z-50   { z-index: 50; }
.ss-z-auto { z-index: auto; }

/* ========================================================================
   Border & Radius Utilities
   ======================================================================== */

.ss-rounded-none { border-radius: 0; }
.ss-rounded-sm   { border-radius: 2px; }
.ss-rounded      { border-radius: 4px; }
.ss-rounded-md   { border-radius: 6px; }
.ss-rounded-lg   { border-radius: 8px; }
.ss-rounded-xl   { border-radius: 12px; }
.ss-rounded-2xl  { border-radius: 16px; }
.ss-rounded-full { border-radius: 9999px; }

.ss-border-0 { border-width: 0; }
.ss-border   { border-width: 1px; border-style: solid; }
.ss-border-2 { border-width: 2px; border-style: solid; }

/* ========================================================================
   Visibility & Accessibility
   ======================================================================== */

.ss-visible   { visibility: visible; }
.ss-invisible { visibility: hidden; }

/* Screen-reader only */
.ss-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================================================
   Transition / Animation Utilities
   ======================================================================== */

.ss-transition      { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.ss-transition-none { transition-property: none; }
.ss-duration-75   { transition-duration: 75ms; }
.ss-duration-100  { transition-duration: 100ms; }
.ss-duration-150  { transition-duration: 150ms; }
.ss-duration-200  { transition-duration: 200ms; }
.ss-duration-300  { transition-duration: 300ms; }
.ss-duration-500  { transition-duration: 500ms; }

.ss-ease-linear  { transition-timing-function: linear; }
.ss-ease-in      { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ss-ease-out     { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ss-ease-in-out  { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ========================================================================
   Opacity Utilities
   ======================================================================== */

.ss-opacity-0   { opacity: 0; }
.ss-opacity-25  { opacity: 0.25; }
.ss-opacity-50  { opacity: 0.5; }
.ss-opacity-75  { opacity: 0.75; }
.ss-opacity-100 { opacity: 1; }

/* ========================================================================
   Cursor Utilities
   ======================================================================== */

.ss-cursor-auto    { cursor: auto; }
.ss-cursor-default { cursor: default; }
.ss-cursor-pointer { cursor: pointer; }
.ss-cursor-not-allowed { cursor: not-allowed; }

/* ========================================================================
   Print
   ======================================================================== */

@media print {
    .ss-print\:hidden { display: none !important; }
    .ss-print\:block  { display: block !important; }
}