/* ==========================================================================
   Layout & Grid — Tufford Group
   ========================================================================== */

/* ── Container ──
   Centered wrapper with max-width and side margins matching the grid spec.
   Desktop: 1440px max, 80px margins → 1280px content area
   Mobile:  390px, 16px margins → 358px content area
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--grid-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
}

/* ── Grid ──
   CSS Grid using the design token columns and gutter.
   Desktop: 12 columns, 24px gap
   Mobile:  4 columns, 16px gap
   ========================================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gutter);
}

/* ── Column Span Utilities ──
   .col-1 through .col-12 for desktop,
   .col-m-1 through .col-m-4 for mobile.
   ========================================================================== */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 767px) {
    .col-m-1 { grid-column: span 1; }
    .col-m-2 { grid-column: span 2; }
    .col-m-3 { grid-column: span 3; }
    .col-m-4 { grid-column: span 4; }
}

/* ── Column Start Utilities ── */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* ── Full-Bleed ──
   Breaks out of the container to span the full viewport width.
   ========================================================================== */
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* ── Section Spacing ── */
.section {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}