////
///
/// Viewport Grid
/// ===========================================================================
///
/// Fills its parent with equal viewports for multi-camera, multi-map and
/// comparison pages. Each `__cell` is a positioned, clipped container, so a
/// canvas or map inside it can be absolutely positioned or sized to 100%,
/// and overlay panels anchor to the cell.
///
///     <div class="ss-l-viewport-grid ss-l-viewport-grid--2x2">
///         <div class="ss-l-viewport-grid__cell">…</div>  (× 4)
///     </div>
///
/// Layouts: default (1), `--2h` (side by side), `--2v` (stacked), `--2x2`,
/// `--3x2` and `--2x3` (six cells, columns × rows), and `--1-3` / `--1-4`
/// with their `-side` forms (one large view over / beside three or four
/// small ones: the first cell is the large one). Below `md`, every layout
/// stacks into one column.
///
/// Tokens: `--ss-viewport-grid-gap` (default 1 px hairline, so the cells
/// read as one surface), `--ss-viewport-grid-min` (minimum cell height
/// when stacked).
///
/// @group Layout
/// @author Scape Press
/// @link https://scape.style
/// @since 0.5.0
/// @access public
///
////

@use "../01-core/prefix" as *;
@use "../01-core/external" as *;
@use "breakpoints" as *;

@layer ss.layout {
    .#{$ss-prefix-layout}-viewport-grid {
        --ss-viewport-grid-gap: #{q(1)};
        --ss-viewport-grid-min: #{q(240)};

        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: var(--ss-viewport-grid-gap);
        inline-size: 100%;
        block-size: 100%;
        min-block-size: 0;
    }

    .#{$ss-prefix-layout}-viewport-grid__cell {
        position: relative;
        min-inline-size: 0;
        min-block-size: 0;
        overflow: hidden;

        > canvas,
        > iframe,
        > video {
            display: block;
            inline-size: 100%;
            block-size: 100%;
            border: 0;
        }
    }

    // Label in a cell's top-left corner ("Top", "Front", "Camera 2").
    .#{$ss-prefix-layout}-viewport-grid__label {
        position: absolute;
        inset-block-start: var(--ss-space-2);
        inset-inline-start: var(--ss-space-2);
        z-index: var(--ss-z-10, 10);
        padding: var(--ss-space-1) var(--ss-space-2);
        pointer-events: none;
    }

    .#{$ss-prefix-layout}-viewport-grid--2h {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .#{$ss-prefix-layout}-viewport-grid--2v {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .#{$ss-prefix-layout}-viewport-grid--2x2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    // One main view on top, three small ones in a row below.
    .#{$ss-prefix-layout}-viewport-grid--1-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);

        > :first-child {
            grid-column: 1 / -1;
        }
    }

    // One main view on the left, three small ones stacked on the right.
    .#{$ss-prefix-layout}-viewport-grid--1-3-side {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        grid-template-rows: repeat(3, minmax(0, 1fr));

        > :first-child {
            grid-row: 1 / -1;
        }
    }

    // Six cells: three columns by two rows, or two columns by three rows.
    .#{$ss-prefix-layout}-viewport-grid--3x2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .#{$ss-prefix-layout}-viewport-grid--2x3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    // One main view on top, four small ones in a row below.
    .#{$ss-prefix-layout}-viewport-grid--1-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);

        > :first-child {
            grid-column: 1 / -1;
        }
    }

    // One main view on the left, four small ones stacked on the right.
    .#{$ss-prefix-layout}-viewport-grid--1-4-side {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        grid-template-rows: repeat(4, minmax(0, 1fr));

        > :first-child {
            grid-row: 1 / -1;
        }
    }

    @include breakpoint-down("md") {
        .#{$ss-prefix-layout}-viewport-grid[class*="--"] {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: none;
            grid-auto-rows: minmax(var(--ss-viewport-grid-min), 1fr);
            block-size: auto;

            > :first-child {
                grid-column: auto;
                grid-row: auto;
            }
        }
    }
}