/* ========================================
   LAYOUT STYLES
   Containers, grids, section layouts, floating shell offset
   ======================================== */

/* Main Container: same outer width as .header (min + gutter + max-width) */
.wireframe-container {
    width: min(100% - 2 * var(--layout-gutter), var(--layout-max-width));
    margin-inline: auto;
    background: transparent;
    box-shadow: none;
    /* Space for fixed floating header (see components.css .header) */
    padding-top: var(--site-header-offset);
    position: relative;
}

/* MARK: - Scroll sentinel for header elevation (observed by js/site.js)
   Placed immediately after <header>; first in-flow pixel below header offset. */
.header-scroll-sentinel {
    height: 1px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    visibility: hidden;
}

/* MARK: - Optional translucent panels for long prose on dark gradient */
.surface {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-floating);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.panel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-panel);
    padding: 24px 28px;
}

/* Section Spacing: fluid horizontal padding via token */
section {
    padding: 64px var(--section-padding-x);
}

section:last-child {
    border-bottom: none;
}

/* Grid Layouts */
/* Two-column layout: title+description on left, image on right,
   both aligned to the top of their respective columns */
.sandbox-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: start;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.feature-card-full {
    grid-column: 1 / -1;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

/* Flexbox Layouts */
.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Centered Content */
.text-center {
    text-align: center;
}