/**
 * Esoteric Illuminati - Layout & Grid
 * Section padding: 64-96px vertical, 16-24px horizontal (mobile)
 * Component margins: 24-32px between major sections
 */

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

@media (min-width: 768px) {
    .container {
        padding-left: var(--space-24);
        padding-right: var(--space-24);
    }
}

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

#main-content {
    scroll-margin-top: calc(var(--header-height) + var(--space-16));
}

/* Grid - gaps use spacing scale */
.grid {
    display: grid;
    gap: var(--space-24);
}

@media (min-width: 768px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid { gap: var(--space-32); }
}

@media (min-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Section padding: 64-96px vertical, 16-24px horizontal (mobile) */
.section {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
}

@media (min-width: 768px) {
    .section {
        padding-top: var(--space-96);
        padding-bottom: var(--space-96);
    }
}

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

@media (min-width: 768px) {
    .section--hero {
        padding-top: var(--space-96);
        padding-bottom: var(--space-96);
    }
}

.header-spacer {
    height: var(--header-height);
}