/* ==========================================================================
   VLab-4000 — Layout: Container, Grid, Flex Utilities
   ========================================================================== */

/* -------------------------------------------------------------------------
   Container
------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-24);
    padding-left: var(--space-24);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--full {
    max-width: none;
}

/* -------------------------------------------------------------------------
   Section wrapper
------------------------------------------------------------------------- */
.section {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
}

.section--sm {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
}

.section--lg {
    padding-top: var(--space-128);
    padding-bottom: var(--space-128);
}

.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Tinted (Clean Slate) section */
.section--tinted {
    background-color: var(--color-bg-alt);
}

/* Dark (Medical Blue) section */
.section--dark {
    background-color: var(--ink-900);
    color: var(--white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
    color: var(--white);
}

.section--dark p,
.section--dark .lead {
    color: rgba(255, 255, 255, 0.8);
}

/* Accent border on top */
.section--accent-top {
    border-top: 4px solid var(--color-accent);
}

.section--cta-top {
    border-top: 4px solid var(--color-cta);
}

/* -------------------------------------------------------------------------
   Grid — mobile-first, single column base
------------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--grid-gap);
}

/* All grids are single column on mobile by default */
.grid-2,
.grid-3,
.grid-4,
.grid-6 {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: 1fr;
}

/* Auto-fit responsive grid */
.grid-auto {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto--sm {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto--lg {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Activate columns at tablet+ (768px) */
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
}

/* Full columns at desktop (1024px) */
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Asymmetric layouts */
.grid-2-1 {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: 1fr;
}

.grid-1-2 {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-2-1 { grid-template-columns: 2fr 1fr; }
    .grid-1-2 { grid-template-columns: 1fr 2fr; }
}

/* Gap variants */
.grid--gap-sm  { gap: var(--grid-gap-sm); }
.grid--gap-lg  { gap: var(--space-48); }
.grid--gap-xl  { gap: var(--space-64); }
.grid--no-gap  { gap: 0; }

/* Alignment utilities for grids */
.grid--center       { align-items: center; }
.grid--start        { align-items: start; }
.grid--end          { align-items: end; }
.grid--stretch      { align-items: stretch; }

/* -------------------------------------------------------------------------
   Flex utilities
------------------------------------------------------------------------- */
.flex            { display: flex; }
.inline-flex     { display: inline-flex; }
.flex-col        { flex-direction: column; }
.flex-row        { flex-direction: row; }
.flex-wrap       { flex-wrap: wrap; }
.flex-nowrap     { flex-wrap: nowrap; }

.flex-center     { align-items: center; justify-content: center; }
.flex-between    { align-items: center; justify-content: space-between; }
.flex-start      { align-items: center; justify-content: flex-start; }
.flex-end        { align-items: center; justify-content: flex-end; }

.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }
.items-baseline  { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.flex-1          { flex: 1 1 0%; }
.flex-auto       { flex: 1 1 auto; }
.flex-none       { flex: none; }
.flex-grow       { flex-grow: 1; }
.flex-shrink-0   { flex-shrink: 0; }

/* Gap utilities for flex */
.gap-4   { gap: var(--space-4); }
.gap-8   { gap: var(--space-8); }
.gap-12  { gap: var(--space-12); }
.gap-16  { gap: var(--space-16); }
.gap-24  { gap: var(--space-24); }
.gap-32  { gap: var(--space-32); }
.gap-48  { gap: var(--space-48); }

/* -------------------------------------------------------------------------
   Divider
------------------------------------------------------------------------- */
.divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-48) 0;
    border: none;
}

.divider--subtle {
    background-color: var(--color-border-light);
}

.divider--accent {
    background-color: var(--color-accent);
    height: 2px;
    width: 60px;
    border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------------------
   Stack (vertical rhythm helper)
------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-16); }
.stack--sm > * + * { margin-top: var(--space-8); }
.stack--md > * + * { margin-top: var(--space-24); }
.stack--lg > * + * { margin-top: var(--space-32); }
.stack--xl > * + * { margin-top: var(--space-48); }

/* -------------------------------------------------------------------------
   Sidebar layout
------------------------------------------------------------------------- */
.sidebar-layout {
    display: grid;
    gap: var(--space-48);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .sidebar-layout {
        grid-template-columns: 280px 1fr;
    }

    .sidebar-layout--right {
        grid-template-columns: 1fr 280px;
    }
}

/* -------------------------------------------------------------------------
   Cluster (inline wrapping group)
------------------------------------------------------------------------- */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: center;
}

.cluster--sm { gap: var(--space-8); }
.cluster--lg { gap: var(--space-24); }

/* -------------------------------------------------------------------------
   Cover (full-viewport centering)
------------------------------------------------------------------------- */
.cover {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cover > * {
    margin-top: auto;
    margin-bottom: auto;
}

/* -------------------------------------------------------------------------
   Aspect ratio helpers
------------------------------------------------------------------------- */
.aspect-video  { aspect-ratio: 16 / 9; overflow: hidden; }
.aspect-square { aspect-ratio: 1 / 1; overflow: hidden; }
.aspect-4-3    { aspect-ratio: 4 / 3; overflow: hidden; }

.aspect-video  > *,
.aspect-square > *,
.aspect-4-3    > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
}