/* ==========================================================================
   Rascasse Marketing — Layout / Grid / Containers
   ========================================================================== */

.container {
    max-width: var(--rm-container);
    margin: 0 auto;
    padding: 0 var(--rm-space-6);
}

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

/* Section spacing — reduced ~35% for tighter scroll flow (Apr 2026) */
.section {
    padding: var(--rm-space-10) 0;
}

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

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

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

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

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }

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

/* Max-width text */
.max-w-prose {
    max-width: 65ch;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Responsive grid */
@media (max-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .section { padding: var(--rm-space-8) 0; }
    .section--lg { padding: var(--rm-space-10) 0; }
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
    .grid--4 { grid-template-columns: 1fr; }
    .container { padding: 0 var(--rm-space-5); }
}