/* =============================================================================
   Nodra — 2x Grid (по мотивам IBM Carbon: 16 колонок, gutter 32px).
   Брейкпоинты: sm <672 (4 кол.), md 672–1055 (8 кол.), lg ≥1056 (16 кол.).
   Использование:
     <div class="n-grid">
       <div class="n-col n-col-sm-4 n-col-md-4 n-col-lg-8"> ... </div>
     </div>
   ============================================================================= */

.n-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--n-grid-gutter);
    row-gap: 0;
    width: 100%;
    max-width: var(--n-grid-max-width);
    margin-inline: auto;
    padding-inline: var(--n-grid-margin);
}

.n-grid--narrow { column-gap: var(--n-grid-gutter-narrow); }
.n-grid--full-width { max-width: none; }

/* Колонка по умолчанию занимает всю строку, пока не задан span */
.n-col { grid-column: 1 / -1; min-width: 0; }

/* ---- sm: <672px (4 колонки) ---- */
.n-col-sm-1 { grid-column: span 1; }
.n-col-sm-2 { grid-column: span 2; }
.n-col-sm-3 { grid-column: span 3; }
.n-col-sm-4 { grid-column: span 4; }

@media (min-width: 672px) {
    .n-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

    /* ---- md: 672–1055px (8 колонок) ---- */
    .n-col-md-1 { grid-column: span 1; }
    .n-col-md-2 { grid-column: span 2; }
    .n-col-md-3 { grid-column: span 3; }
    .n-col-md-4 { grid-column: span 4; }
    .n-col-md-5 { grid-column: span 5; }
    .n-col-md-6 { grid-column: span 6; }
    .n-col-md-7 { grid-column: span 7; }
    .n-col-md-8 { grid-column: span 8; }
}

@media (min-width: 1056px) {
    .n-grid { grid-template-columns: repeat(16, minmax(0, 1fr)); }

    /* ---- lg: ≥1056px (16 колонок) ---- */
    .n-col-lg-1  { grid-column: span 1; }
    .n-col-lg-2  { grid-column: span 2; }
    .n-col-lg-3  { grid-column: span 3; }
    .n-col-lg-4  { grid-column: span 4; }
    .n-col-lg-5  { grid-column: span 5; }
    .n-col-lg-6  { grid-column: span 6; }
    .n-col-lg-7  { grid-column: span 7; }
    .n-col-lg-8  { grid-column: span 8; }
    .n-col-lg-9  { grid-column: span 9; }
    .n-col-lg-10 { grid-column: span 10; }
    .n-col-lg-11 { grid-column: span 11; }
    .n-col-lg-12 { grid-column: span 12; }
    .n-col-lg-13 { grid-column: span 13; }
    .n-col-lg-14 { grid-column: span 14; }
    .n-col-lg-15 { grid-column: span 15; }
    .n-col-lg-16 { grid-column: span 16; }
}