/* FitUI V2 — Layout primitives */

.fit-container {
    width: min(calc(100% - (var(--fit-gutter) * 2)), var(--fit-container));
    margin-inline: auto;
}

/*
 * Home V2 containment bridge.
 * The production legacy global.css declares .fit-container with !important
 * and a 1700px shell. This scoped rule keeps Home V2 on its official grid
 * until the shared global layer is migrated.
 */
body.fitui-v2-active .fit-container {
    width: min(calc(100% - (var(--fit-gutter) * 2)), var(--fit-container)) !important;
    max-width: var(--fit-container) !important;
    margin-inline: auto !important;
}

.fit-container--wide {
    width: min(calc(100% - (var(--fit-gutter) * 2)), var(--fit-container-wide));
    margin-inline: auto;
}

body.fitui-v2-active .fit-container--wide {
    width: min(calc(100% - (var(--fit-gutter) * 2)), var(--fit-container-wide)) !important;
    max-width: var(--fit-container-wide) !important;
    margin-inline: auto !important;
}

.fit-section {
    position: relative;
    padding-block: var(--fit-section-space);
}

.fit-grid {
    display: grid;
    gap: var(--fit-space-6);
}

.fit-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fit-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fit-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
    .fit-grid--3,
    .fit-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    :root {
        --fit-gutter: 18px;
        --fit-section-space: 72px;
    }

    .fit-grid--2,
    .fit-grid--3,
    .fit-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}