/* #####################################################################
   MONARCH DESIGN SYSTEM v0.8.1
   MODULE: Layout
   PURPOSE: Page structure, grids, style-guide panels, and responsive behavior.
   DEPENDENCIES: colors.php, fonts.css
   ##################################################################### */

*,*::before,*::after { box-sizing: border-box; }
.style-guide { width: min(1200px,94%); margin: 0 auto; padding: var(--space-xl) 0 var(--space-3xl); }
.style-guide-hero { padding: var(--space-lg) 0 var(--space-2xl); text-align:center; }
.style-guide-hero .lead,.section-intro { max-width: 52rem; margin-inline:auto; text-align:center; }
.style-section { scroll-margin-top: 6rem; margin: var(--space-lg) 0; padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.paired-grid,.token-grid,.component-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-lg); align-items:stretch; }
.token-grid { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
.component-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.paired-panel,.demo-panel,.token-card { min-width:0; padding:var(--space-lg); border:1px solid var(--color-border-light); border-radius:var(--radius-md); background:var(--surface-faint); }
.color-swatch { aspect-ratio:1/1; border-radius:var(--radius-sm); box-shadow:inset 0 0 0 1px var(--surface-stroke); }
.token-card { margin:0; text-align:center; }
.token-card figcaption { padding-top:var(--space-md); line-height:1.3; }
.token-card code { display:block; margin-top:var(--space-xs); color:var(--site-color-text); font-size:var(--fs-sm); }
.code-example { overflow:auto; padding:var(--space-md); border-radius:var(--radius-md); background:var(--color-code-background); box-shadow:var(--shadow-md); }
.site-footer { padding:var(--space-xl); border-top:1px solid var(--color-border); text-align:center; }
@media (max-width: 700px) { .paired-grid { grid-template-columns:1fr; } .style-section { margin-block:var(--space-md); padding:var(--space-md); } }


/* =====================================================================
   STYLE GUIDE CHAPTERS AND UTILITY DEMONSTRATIONS
   ===================================================================== */
.chapter-divider { margin:var(--space-2xl) 0 var(--space-md); padding:var(--space-lg); border-left:.5rem solid var(--site-color-primary); background:linear-gradient(90deg,color-mix(in srgb, var(--site-color-text) 6%, transparent),transparent); }
.chapter-divider h2 { margin:0; text-align:left; }
.chapter-divider p { max-width:52rem; margin:.5rem 0 0; }
.utility-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--space-lg); }
.utility-card { min-width:0; padding:var(--space-lg); border:1px solid var(--color-border-light); border-radius:var(--radius-md); background:var(--surface-faint); }
.utility-card h3 { text-align:left; }
.utility-demo { min-height:5rem; margin:var(--space-md) 0; padding:var(--space-md); border:1px dashed var(--color-border-light); border-radius:var(--radius-sm); }
.utility-classes { margin:0; padding:.75rem; border-radius:var(--radius-sm); background:var(--color-code-background); font-size:var(--fs-sm); white-space:pre-wrap; }
.pattern-demo { padding:var(--space-lg); border:1px dashed var(--site-color-secondary); border-radius:var(--radius-md); }

/* =====================================================================
   DESIGN TOKEN REFERENCE
   Concise card-based presentation with live visual previews.
   ===================================================================== */
.foundation-token-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.foundation-token-card {
    min-width: 0;
    padding: var(--space-lg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--surface-faint);
}

.foundation-token-card h3 {
    margin-bottom: var(--space-md);
    text-align: center;
}

.foundation-token-list {
    display: grid;
    gap: var(--space-xs);
}

.foundation-token-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    align-items: baseline;
    padding: .3rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--site-color-text) 6%, transparent);
}

.foundation-token-row:last-child {
    border-bottom: 0;
}

.token-name {
    color: var(--site-color-secondary);
}

.code-value {
    color: var(--color-code);
    font-weight: var(--fw-semibold);
    text-align: right;
}

.token-preview {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: var(--space-md);
    min-height: 5rem;
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border: 1px dashed var(--color-border-light);
    border-radius: var(--radius-sm);
}

.token-spacing-preview span {
    display: block;
    width: .75rem;
    background: var(--site-color-accent);
}

.token-spacing-preview span:nth-child(1) { height: var(--space-sm); }
.token-spacing-preview span:nth-child(2) { height: var(--space-lg); }
.token-spacing-preview span:nth-child(3) { height: var(--space-2xl); }

.token-radius-preview span,
.token-shadow-preview span {
    display: block;
    width: 3rem;
    height: 3rem;
    background: var(--surface-strong);
    border: 1px solid var(--color-border-light);
}

.token-radius-preview .radius-sm { border-radius: var(--radius-sm); }
.token-radius-preview .radius-md { border-radius: var(--radius-md); }
.token-radius-preview .radius-lg { border-radius: var(--radius-lg); }

.token-shadow-preview span { border-radius: var(--radius-sm); }
.token-shadow-preview .shadow-sm { box-shadow: var(--shadow-sm); }
.token-shadow-preview .shadow-md { box-shadow: var(--shadow-md); }
.token-shadow-preview .shadow-lg { box-shadow: var(--shadow-lg); }

@media (max-width: 900px) {
    .foundation-token-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   TOKEN-DRIVEN LAYOUT DEMONSTRATIONS
   ===================================================================== */
.layout-demo-shell {
    overflow: hidden;
    padding-block: var(--space-md);
    border: 1px dashed var(--site-color-secondary);
    border-radius: var(--radius-md);
    background: var(--surface-faint);
}
.layout-demo-shell + .layout-demo-shell { margin-top: var(--space-lg); }
.layout-demo-label {
    margin: 0 0 var(--space-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
}
.layout-demo-cell {
    min-height: 4rem;
    padding-block: var(--space-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
    text-align: center;
}
.layout-token-table code { white-space: nowrap; }