/* =========================================================================
   UNIVERSAL DESIGN SYSTEM - LAYOUT
   =========================================================================
   STRICT RULE: Only use for structural wrappers, containers, and 
   main page layout. No component styles here.
   ========================================================================= */

/* Main Page Wrapper */
.tool-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-main);
}

/* Tool Main Content Area */
.tool-main-content {
    flex: 1;
    position: relative;
    z-index: 10;
}

/* Universal Container (Caps width on large screens) */
.u-container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* Narrow Container for Inputs/Forms */
.u-container-narrow {
    width: 100%;
    max-width: var(--container-width-sm);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* Universal Section Spacing */
.u-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

/* Hero Layout */
.u-hero-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--space-20);
    padding-bottom: var(--space-16);
    position: relative;
}

/* Input Card Layout (Pulls up over background) */
.u-input-layout {
    position: relative;
    z-index: 20;
    margin-top: calc(var(--space-12) * -1);
    margin-bottom: var(--space-12);
}

/* Results Layout Container */
.u-results-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Universal 2-Column Grid (For charts vs recommendations, etc.) */
.u-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Universal 3-Column Grid (For metrics, quick wins, etc.) */
.u-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Universal 4-Column Grid */
.u-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Responsive Grid Upgrades (Will be enhanced in responsive.css) */
@media (min-width: 768px) {
    .u-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .u-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .u-grid-4 { grid-template-columns: repeat(4, 1fr); }
}