/*
 * Fluid 12-column grid — adapted from Statamic Peak (studio1902/statamic-peak).
 * Original: export/resources/css/peak.css — GPL-3.0-or-later, Studio 1902.
 * Plain CSS port (no Tailwind) for host sites without a Peak build pipeline.
 */

.fluid-grid {
    --col-gap: clamp(1rem, 3vw, 4rem);
    --content-max-width: 80rem;
    --col-width: calc(
        (
            min(
                calc(100% - var(--padding-left) - var(--padding-right) - 2 * var(--col-gap)),
                var(--content-max-width)
            ) - 11 * var(--col-gap)
        ) / 12
    );
    --padding-left: clamp(
        calc(env(safe-area-inset-left, 0rem) + 1rem),
        2vw,
        calc(env(safe-area-inset-left, 0rem) + 2rem)
    );
    --padding-right: clamp(
        calc(env(safe-area-inset-right, 0rem) + 1rem),
        2vw,
        calc(env(safe-area-inset-right, 0rem) + 2rem)
    );
    --side-width: minmax(0, 1fr);
    display: grid;
    column-gap: var(--col-gap);
    grid-template-columns:
        [full-start] var(--side-width)
        [content-start col-1] var(--col-width) [col-2] var(--col-width) [col-3] var(--col-width)
        [col-4] var(--col-width) [col-5] var(--col-width) [col-6] var(--col-width)
        [col-7] var(--col-width) [col-8] var(--col-width) [col-9] var(--col-width)
        [col-10] var(--col-width) [col-11] var(--col-width) [col-12] var(--col-width)
        [content-end] var(--side-width) [full-end];
}

.span-content {
    grid-column: content;
}

.span-full {
    grid-column: full;
}

/* Bricks layout column spans on named grid lines */
.bricks-span-12 { grid-column: col-1 / span 12; }
.bricks-span-6-l { grid-column: col-1 / span 6; }
.bricks-span-6-r { grid-column: col-7 / span 6; }
.bricks-span-4-l { grid-column: col-1 / span 4; }
.bricks-span-4-m { grid-column: col-5 / span 4; }
.bricks-span-4-r { grid-column: col-9 / span 4; }
.bricks-span-8-l { grid-column: col-1 / span 8; }
.bricks-span-8-r { grid-column: col-5 / span 8; }
.bricks-span-3-1 { grid-column: col-1 / span 3; }
.bricks-span-3-2 { grid-column: col-4 / span 3; }
.bricks-span-3-3 { grid-column: col-7 / span 3; }
.bricks-span-3-4 { grid-column: col-10 / span 3; }
.bricks-span-3-l { grid-column: col-1 / span 3; }
.bricks-span-3-r { grid-column: col-10 / span 3; }
.bricks-span-9-l { grid-column: col-1 / span 9; }
.bricks-span-9-r { grid-column: col-4 / span 9; }

@media (max-width: 767px) {
    .fluid-grid.bricks-layout .bricks-column {
        grid-column: content;
    }
}