/**
 * NB NOW — Grid System
 * =====================
 * Mobile-first responsive grid: 4 / 8 / 12 columns.
 * Matches the React Tailwind grid 1:1.
 */

/* Container */
.nbnow-container {
    max-width: var(--nbnow-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nbnow-container-px);
    padding-right: var(--nbnow-container-px);
}

@media (min-width: 640px) {
    .nbnow-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .nbnow-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ── Grid Base ───────────────────────────────────── */
.nbnow-grid {
    display: grid;
    gap: 1.5rem;
}

/* Mobile: 4-column grid */
.nbnow-grid--12 { grid-template-columns: repeat(4, 1fr); }
.nbnow-grid--3  { grid-template-columns: 1fr; }
.nbnow-grid--4  { grid-template-columns: 1fr; }

/* Tablet: 8-column grid */
@media (min-width: 640px) {
    .nbnow-grid--12 { grid-template-columns: repeat(8, 1fr); }
    .nbnow-grid--3  { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .nbnow-grid--4  { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 12-column grid */
@media (min-width: 1024px) {
    .nbnow-grid--12 { grid-template-columns: repeat(12, 1fr); gap: 2.5rem; }
    .nbnow-grid--3  { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
    .nbnow-grid--4  { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* ── Column Spans ────────────────────────────────── */
/* Mobile only (4-col base) — scoped so tablet/desktop spans are not overridden */
@media (max-width: 639px) {
    .nbnow-col-4  { grid-column: span 4; }
    .nbnow-col-12 { grid-column: span 4; } /* full-width on mobile */
}

/* Tablet: full-width rows that only use `.nbnow-col-12` (no `nbnow-col-sm-*`) */
@media (min-width: 640px) and (max-width: 1023px) {
    .nbnow-col-12 { grid-column: span 8; }
}

/* Tablet */
@media (min-width: 640px) {
    .nbnow-col-sm-4  { grid-column: span 4; }
    .nbnow-col-sm-8  { grid-column: span 8; }
}

/* Desktop — do not add a bare `.nbnow-col-12` here: it would override `.nbnow-col-lg-*` on the same element */
@media (min-width: 1024px) {
    .nbnow-col-lg-3  { grid-column: span 3; }
    .nbnow-col-lg-4  { grid-column: span 4; }
    .nbnow-col-lg-5  { grid-column: span 5; }
    .nbnow-col-lg-6  { grid-column: span 6; }
    .nbnow-col-lg-7  { grid-column: span 7; }
    .nbnow-col-lg-8  { grid-column: span 8; }
    .nbnow-col-lg-12 { grid-column: span 12; }
}

/* ── Aspect Ratios ───────────────────────────────── */
.nbnow-aspect-hero  { aspect-ratio: 3 / 2; }
.nbnow-aspect-card  { aspect-ratio: 16 / 10; }
.nbnow-aspect-wide  { aspect-ratio: 16 / 9; }
.nbnow-aspect-sq    { aspect-ratio: 1 / 1; }

@media (max-width: 639px) {
    .nbnow-aspect-hero { aspect-ratio: 4 / 3; }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .nbnow-aspect-hero { aspect-ratio: 16 / 9; }
}