/* Niriv Mobile-First Container System */

/* CSS Custom Properties for Responsive Design */
:root {
    /* Breakpoints */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;
    
    /* Container Max Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1100px;
  --container-2xl: 1100px;
    
    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    
    /* Mobile-first padding */
    --container-padding: 1rem;
}

/* Mobile-First Container System */
.niriv-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Progressive Enhancement for Larger Screens */
@media (min-width: 640px) {
    :root {
        --container-padding: 1.5rem;
    }
    
    .niriv-container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    :root {
        --container-padding: 2rem;
    }
    
    .niriv-container {
        max-width: var(--container-md);
    }
}

@media (min-width: 1024px) {
    .niriv-container {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1100px) {
  .niriv-container {
    max-width: var(--container-xl);
  }
}

/* Fluid Container (no max-width) */
.niriv-container-fluid {
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Spacing Utilities - Mobile First */
.niriv-space-y > * + * {
    margin-top: var(--space-sm);
}

.niriv-space-y-xs > * + * {
    margin-top: var(--space-xs);
}

.niriv-space-y-md > * + * {
    margin-top: var(--space-md);
}

.niriv-space-y-lg > * + * {
    margin-top: var(--space-lg);
}

.niriv-space-y-xl > * + * {
    margin-top: var(--space-xl);
}

/* Responsive Spacing */
@media (min-width: 768px) {
    .md\:niriv-space-y-lg > * + * {
        margin-top: var(--space-lg);
    }
    
    .md\:niriv-space-y-xl > * + * {
        margin-top: var(--space-xl);
    }
}

@media (min-width: 1024px) {
    .lg\:niriv-space-y-xl > * + * {
        margin-top: var(--space-xl);
    }
    
    .lg\:niriv-space-y-2xl > * + * {
        margin-top: var(--space-2xl);
    }
}

/* Grid System - Mobile First */
.niriv-grid {
    display: grid;
    gap: var(--space-sm);
}

.niriv-grid-1 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .sm\:niriv-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sm\:niriv-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .md\:niriv-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\:niriv-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .md\:niriv-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .lg\:niriv-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .lg\:niriv-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:niriv-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Flexbox Utilities - Mobile First */
.niriv-flex {
    display: flex;
}

.niriv-flex-col {
    flex-direction: column;
}

.niriv-flex-wrap {
    flex-wrap: wrap;
}

.niriv-items-center {
    align-items: center;
}

.niriv-justify-center {
    justify-content: center;
}

.niriv-justify-between {
    justify-content: space-between;
}

@media (min-width: 768px) {
    .md\:niriv-flex-row {
        flex-direction: row;
    }
    
    .md\:niriv-items-start {
        align-items: flex-start;
    }
}

/* Width Utilities */
.niriv-w-full {
    width: 100%;
}

.niriv-w-auto {
    width: auto;
}

@media (min-width: 768px) {
    .md\:niriv-w-1\/2 {
        width: 50%;
    }
    
    .md\:niriv-w-1\/3 {
        width: 33.333333%;
    }
    
    .md\:niriv-w-2\/3 {
        width: 66.666667%;
    }
}

@media (min-width: 1024px) {
    .lg\:niriv-w-1\/4 {
        width: 25%;
    }
    
    .lg\:niriv-w-3\/4 {
        width: 75%;
    }
}

/* Visibility Utilities */
.niriv-hidden {
    display: none;
}

@media (min-width: 640px) {
    .sm\:niriv-block {
        display: block;
    }
    
    .sm\:niriv-hidden {
        display: none;
    }
}

@media (min-width: 768px) {
    .md\:niriv-block {
        display: block;
    }
    
    .md\:niriv-hidden {
        display: none;
    }
    
    .md\:niriv-flex {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .lg\:niriv-block {
        display: block;
    }
    
    .lg\:niriv-hidden {
        display: none;
    }
}