/* ==========================================================================
           YOUR LAYOUT ENGINE (Strictly copied)
           ========================================================================== */

        :root {
            --border-color: #e5e5e5;
            --space: 1rem;
        }

        *, *::before, *::after { box-sizing: border-box; }

        /* Basic Reset */
        body { margin: 0; font-family: sans-serif; }
        img { display: block; width: 100%; height: auto; background: #eee; }

        /* 2. CONTAINER / WIDTHS */
        [data-width] {
            display: block;
            margin: 0 auto;
            padding: 1rem;
            width: 100%;
            max-width: 100%;
        }
        [data-width="640"]  { max-width: 640px; }
        [data-width="960"]  { max-width: 960px; }
        [data-width="1280"] { max-width: 1280px; }
        [data-width="1600"] { max-width: 1600px; }
        [data-width="1920"] { max-width: 1920px; }


        /* 3. GRID COLUMNS */
        [data-columns] {
            display: grid;
            gap: 1rem;
            grid-auto-flow: dense;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        }
        [data-columns="1"] { grid-template-columns: repeat(1, 1fr); }
        [data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
        [data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
        [data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
        [data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
        [data-columns="6"] { grid-template-columns: repeat(6, 1fr); }


        /* 4. ITEM SPANS */
        [data-span="2"]    { grid-column: span 2; }
        [data-span="3"]    { grid-column: span 3; }
        [data-span="4"]    { grid-column: span 4; }
        [data-span="5"]    { grid-column: span 5; }
        [data-span="full"] { grid-column: 1 / -1; }

        [data-row="2"] { grid-row: span 2; }
        [data-row="3"] { grid-row: span 3; }
        [data-row="4"] { grid-row: span 4; }


        /* 5. ALIGNMENT / POSITION */
        [data-position~="center"] { align-self: center; justify-self: center; }
        [data-position~="top"]    { align-self: start; }
        [data-position~="bottom"] { align-self: end; }
        [data-position~="left"]   { justify-self: start; }
        [data-position~="right"]  { justify-self: end; }


        /* 6. BORDERS & PADDING */
        [data-border~="all"]    { border: 1px solid var(--border-color); }
        [data-border~="top"]    { border-top: 1px solid var(--border-color); }
        [data-border~="bottom"] { border-bottom: 1px solid var(--border-color); }
        [data-border~="left"]   { border-left: 1px solid var(--border-color); }
        [data-border~="right"]  { border-right: 1px solid var(--border-color); }

        [data-padding~="all"]    { padding: var(--space); }
        [data-padding~="top"]    { padding-top: var(--space); }
        [data-padding~="bottom"] { padding-bottom: var(--space); }
        [data-padding~="left"]   { padding-left: var(--space); }
        [data-padding~="right"]  { padding-right: var(--space); }
        [data-padding~="y"] { padding-top: var(--space); padding-bottom: var(--space); }
        [data-padding~="x"] { padding-left: var(--space); padding-right: var(--space); }


        /* 7. TEXT ALIGNMENT */
        [data-text="left"]   { text-align: left; }
        [data-text="center"] { text-align: center; }
        [data-text="right"]  { text-align: right; }


        /* 8. HEIGHTS & ROWS */
        [data-height="screen"] { min-height: 100dvh; }
        [data-height="auto"]   { min-height: auto; }

        [data-rows="top"]    { grid-template-rows: 1fr auto; }
        [data-rows="bottom"] { grid-template-rows: auto 1fr; }
        [data-rows="middle"] { grid-template-rows: auto 1fr auto; }
        [data-rows="even"]   { grid-auto-rows: 1fr; }


        /* 10. MOBILE RESPONSIVE (Max-Width: 768px) */
        @media (max-width: 768px) {
            /* Auto-Collapse Strategy */
            [data-columns]:not([data-strict]) {
                grid-template-columns: 1fr !important;
                gap: 1rem;
            }
            /* Alignment Reset */
            [data-columns]:not([data-rows]):not([data-strict]) {
                grid-template-rows: auto;
                align-content: start;
            }
            /* Reset Spans */
            [data-columns]:not([data-strict]) > [data-span],
            [data-columns]:not([data-strict]) > [data-row] {
                grid-column: auto !important;
                grid-row: auto !important;
            }
            /* Reset Position Attributes: Fixes broken layouts on resize */
            [data-columns]:not([data-strict]) > [data-position] {
                align-self: stretch !important;
                justify-self: stretch !important;
            }
        }