/*
============================================================
Manual Rehab NYC
layout.css

Purpose:
Controls page structure, containers,
sections, grids, and layout patterns.

============================================================
*/

/* ==========================================================================
   Container
   ========================================================================== */

.container {

    width: min(
        100% - (var(--container-padding) * 2),
        var(--container-width)
    );

    margin-inline: auto;

}


/* ==========================================================================
   Sections
   ========================================================================== */

.section {

    padding-block: var(--space-2xl);

}


.section-small {

    padding-block: var(--space-xl);

}


/* ==========================================================================
   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;

}


/* ==========================================================================
   Grid Layouts
   ========================================================================== */

.grid {

    display: grid;

    gap: var(--space-lg);

}


.grid-2 {

    grid-template-columns: repeat(2, 1fr);

}


.grid-3 {

    grid-template-columns: repeat(3, 1fr);

}


/* ==========================================================================
   Two Column Layout
   ========================================================================== */

.split {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--space-xl);

    align-items: center;

}


/* ==========================================================================
   Text Width Control
   ========================================================================== */

.text-content {

    max-width: 70ch;

}