/* ═══════════════════════════════════════════
   DataDeep — Layout / Grid / Containers
   ═══════════════════════════════════════════ */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

.container-narrow {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

.container-wide {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* Section spacing */
.section {
    padding: var(--space-16) 0;
    position: relative;
}

.section-sm {
    padding: var(--space-12) 0;
}

.section-lg {
    padding: var(--space-20) 0;
}

/* Section header */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-12);
}

.section-header .section-subtitle {
    margin: 0 auto;
}

/* Grid system */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Split layout (text + image) */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.split-reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}
.split-reverse > *:first-child { order: 2; }
.split-reverse > *:last-child { order: 1; }

/* Flex utilities */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Section backgrounds */
.off-white { background: var(--dd-off-white); }

/* Section divider (gradient line) */
.section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dd-purple), transparent);
    opacity: 0.2;
}

/* Dot grid pattern background */
.dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(187, 49, 199, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 100%);
    pointer-events: none;
}