/* ═══════════════════════════════════════════════════
   LAYOUT.CSS — Grid Systems, Spacing, Containers
   CRYSTALINK Premium Website
   ═══════════════════════════════════════════════════ */

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

.container--narrow {
    max-width: 1080px;
}

.container--wide {
    max-width: 1600px;
}


/* ── Section Label (reusable) ───────────────────── */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: var(--space-md);
}

.section-label__line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--cyan);
    opacity: 0.6;
}


/* ── Section vertical spacing ───────────────────── */
section {
    position: relative;
}


/* ── Asymmetric Grid Utilities ──────────────────── */
.grid-asymmetric {
    display: grid;
    gap: var(--space-lg);
}

/* 40/60 split */
.grid-asymmetric--40-60 {
    grid-template-columns: 2fr 3fr;
}

/* 60/40 split */
.grid-asymmetric--60-40 {
    grid-template-columns: 3fr 2fr;
}

/* 45/55 split */
.grid-asymmetric--45-55 {
    grid-template-columns: 9fr 11fr;
}

@media (max-width: 768px) {
    .grid-asymmetric,
    .grid-asymmetric--40-60,
    .grid-asymmetric--60-40,
    .grid-asymmetric--45-55 {
        grid-template-columns: 1fr;
    }
}


/* ── Responsive Helpers ─────────────────────────── */
@media (max-width: 1200px) {
    :root {
        --nav-height: 70px;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 64px;
        --space-xl: 5rem;
        --space-2xl: 7rem;
        --space-3xl: 10rem;
    }
}

@media (max-width: 480px) {
    :root {
        --nav-height: 60px;
    }
}