/**
 * Layout Styles - Grid System & Responsive Layout
 *
 * 3-Zone Workbench Layout:
 * - inputs-column: Setup panel (left) - sticky on desktop
 * - visualizer-column: Canvas (center) - flexible, dominant
 * - data-column: Output panel (right) - fixed width
 *
 * Breakpoints:
 * - Desktop: 1200px+ (3-column)
 * - Tablet: 851-1199px (2-column)
 * - Mobile: ≤850px (single column)
 */

/* ===== Container ===== */
.container {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-lg);
    gap: var(--space-lg);
}

/* ===== Main Layout Grid ===== */
.layout {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
    grid-template-areas:
        "visualizer"
        "inputs"
        "data";
}

/* ===== Column Definitions ===== */

/* Setup Panel (Left) - Sticky with fixed width */
.inputs-column {
    grid-area: inputs;
    position: sticky;
    top: var(--space-lg);
    align-self: start;
}

/* Canvas (Center) - Dominant, flexible */
.visualizer-column {
    grid-area: visualizer;
    display: flex;
    flex-direction: column;
}

/* Output Panel (Right) - Fixed width */
.data-column {
    grid-area: data;
}

/* ===== Responsive Breakpoints ===== */

/* Desktop Layout: 3-zone workbench */
@media (min-width: 1200px) {
    .layout {
        grid-template-columns: 340px minmax(600px, 1fr) 380px;
        grid-template-areas: "inputs visualizer data";
    }
}

/* Tablet Layout: Right panel collapses below canvas */
@media (min-width: 851px) and (max-width: 1199px) {
    .layout {
        grid-template-columns: 340px 1fr;
        grid-template-areas:
            "inputs visualizer"
            "inputs data";
    }
}

/* Mobile Layout: Single column, non-sticky setup */
@media (max-width: 850px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visualizer"
            "inputs"
            "data";
    }

    .inputs-column {
        position: static;
    }

    .container {
        padding: 0 var(--space-md) var(--space-md);
    }
}