/**
 * Builder V8 — Layout System
 * Container grid and flex utilities using CSS custom properties.
 * Complements Franken UI's uk-container.
 */

/* ---- Container ---- */
.v8-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--section-padding-x, 1.5rem);
}

.v8-container--narrow {
    max-width: 800px;
}

.v8-container--wide {
    max-width: 1400px;
}

/* ---- Section wrappers ---- */
.v8-section {
    padding-block: var(--section-padding-y, 5rem);
}

.v8-section--sm {
    padding-block: calc(var(--section-padding-y, 5rem) * 0.5);
}

.v8-section--lg {
    padding-block: calc(var(--section-padding-y, 5rem) * 1.5);
}

/* Background surface variants (mapped from design.json background values) */
.v8-bg-white  { background-color: var(--color-bg-white, #ffffff); }
.v8-bg-alt    { background-color: var(--color-bg-alt, #f8fafc); }
.v8-bg-dark   {
    background-color: var(--color-bg-dark, #0f172a);
    color: var(--color-text-on-dark, #f8fafc);
}
.v8-bg-gradient {
    background: linear-gradient(135deg, var(--color-primary, #2563eb), var(--color-secondary, #1e40af));
    color: var(--color-text-on-dark, #f8fafc);
}

/* ---- Flex helpers ---- */
.v8-flex        { display: flex; }
.v8-flex-center { display: flex; align-items: center; justify-content: center; }
.v8-flex-between { display: flex; align-items: center; justify-content: space-between; }
.v8-flex-col    { display: flex; flex-direction: column; }
.v8-flex-wrap   { flex-wrap: wrap; }
.v8-gap-4       { gap: var(--space-4, 1rem); }
.v8-gap-6       { gap: var(--space-6, 1.5rem); }
.v8-gap-8       { gap: var(--space-8, 2rem); }

/* ---- Grid helpers ---- */
.v8-grid        { display: grid; }
.v8-grid-2      { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8, 2rem); }
.v8-grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6, 1.5rem); }
.v8-grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6, 1.5rem); }

@media (max-width: 768px) {
    .v8-grid-2,
    .v8-grid-3,
    .v8-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .v8-grid-3,
    .v8-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Split layouts ---- */
.v8-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-12, 3rem);
}

.v8-split--60-40 {
    grid-template-columns: 3fr 2fr;
}

.v8-split--40-60 {
    grid-template-columns: 2fr 3fr;
}

/* Grid (and flex) items default to min-width:auto (= min-content), so a wide
   child — an image or a long heading word — can force its track wider than the
   viewport and cause horizontal overflow on mobile. Allow tracks to shrink. */
.v8-split > * {
    min-width: 0;
}

@media (max-width: 768px) {
    .v8-split,
    .v8-split--60-40,
    .v8-split--40-60 {
        grid-template-columns: 1fr;
    }

    .v8-split--image-first .v8-split__image {
        order: -1;
    }
}

/* ---- Spacers ---- */
.v8-spacer-4  { height: var(--space-4, 1rem); }
.v8-spacer-8  { height: var(--space-8, 2rem); }
.v8-spacer-12 { height: var(--space-12, 3rem); }