/**
 * Nature Index - Grid System
 * Responsive column grid for layouts
 * ==================================
 */

/* ========================================
   12-Column Grid System
   ======================================== */

.ni-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--ni-space-4) * -0.5);
    margin-right: calc(var(--ni-space-4) * -0.5);
}

.ni-row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--ni-space-4) * 0.5);
    padding-right: calc(var(--ni-space-4) * 0.5);
}

/* No gutters variant */
.ni-row-no-gutters {
    margin-left: 0;
    margin-right: 0;
}

.ni-row-no-gutters > * {
    padding-left: 0;
    padding-right: 0;
}

/* Column base */
.ni-col {
    flex: 1 0 0%;
}

.ni-col-auto {
    flex: 0 0 auto;
    width: auto;
}

/* Fixed width columns */
.ni-col-1 { flex: 0 0 auto; width: 8.333333%; }
.ni-col-2 { flex: 0 0 auto; width: 16.666667%; }
.ni-col-3 { flex: 0 0 auto; width: 25%; }
.ni-col-4 { flex: 0 0 auto; width: 33.333333%; }
.ni-col-5 { flex: 0 0 auto; width: 41.666667%; }
.ni-col-6 { flex: 0 0 auto; width: 50%; }
.ni-col-7 { flex: 0 0 auto; width: 58.333333%; }
.ni-col-8 { flex: 0 0 auto; width: 66.666667%; }
.ni-col-9 { flex: 0 0 auto; width: 75%; }
.ni-col-10 { flex: 0 0 auto; width: 83.333333%; }
.ni-col-11 { flex: 0 0 auto; width: 91.666667%; }
.ni-col-12 { flex: 0 0 auto; width: 100%; }

/* Offset classes */
.ni-offset-1 { margin-left: 8.333333%; }
.ni-offset-2 { margin-left: 16.666667%; }
.ni-offset-3 { margin-left: 25%; }
.ni-offset-4 { margin-left: 33.333333%; }
.ni-offset-5 { margin-left: 41.666667%; }
.ni-offset-6 { margin-left: 50%; }

/* ========================================
   Responsive Grid - SM (576px+)
   ======================================== */

@media (min-width: 576px) {
    .ni-col-sm { flex: 1 0 0%; }
    .ni-col-sm-auto { flex: 0 0 auto; width: auto; }
    .ni-col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
    .ni-col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
    .ni-col-sm-3 { flex: 0 0 auto; width: 25%; }
    .ni-col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
    .ni-col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
    .ni-col-sm-6 { flex: 0 0 auto; width: 50%; }
    .ni-col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
    .ni-col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
    .ni-col-sm-9 { flex: 0 0 auto; width: 75%; }
    .ni-col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .ni-col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .ni-col-sm-12 { flex: 0 0 auto; width: 100%; }
    
    .ni-offset-sm-0 { margin-left: 0; }
    .ni-offset-sm-1 { margin-left: 8.333333%; }
    .ni-offset-sm-2 { margin-left: 16.666667%; }
    .ni-offset-sm-3 { margin-left: 25%; }
    .ni-offset-sm-4 { margin-left: 33.333333%; }
    .ni-offset-sm-5 { margin-left: 41.666667%; }
    .ni-offset-sm-6 { margin-left: 50%; }
}

/* ========================================
   Responsive Grid - MD (768px+)
   ======================================== */

@media (min-width: 768px) {
    .ni-col-md { flex: 1 0 0%; }
    .ni-col-md-auto { flex: 0 0 auto; width: auto; }
    .ni-col-md-1 { flex: 0 0 auto; width: 8.333333%; }
    .ni-col-md-2 { flex: 0 0 auto; width: 16.666667%; }
    .ni-col-md-3 { flex: 0 0 auto; width: 25%; }
    .ni-col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .ni-col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .ni-col-md-6 { flex: 0 0 auto; width: 50%; }
    .ni-col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .ni-col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .ni-col-md-9 { flex: 0 0 auto; width: 75%; }
    .ni-col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .ni-col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .ni-col-md-12 { flex: 0 0 auto; width: 100%; }
    
    .ni-offset-md-0 { margin-left: 0; }
    .ni-offset-md-1 { margin-left: 8.333333%; }
    .ni-offset-md-2 { margin-left: 16.666667%; }
    .ni-offset-md-3 { margin-left: 25%; }
    .ni-offset-md-4 { margin-left: 33.333333%; }
    .ni-offset-md-5 { margin-left: 41.666667%; }
    .ni-offset-md-6 { margin-left: 50%; }
}

/* ========================================
   Responsive Grid - LG (992px+)
   ======================================== */

@media (min-width: 992px) {
    .ni-col-lg { flex: 1 0 0%; }
    .ni-col-lg-auto { flex: 0 0 auto; width: auto; }
    .ni-col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
    .ni-col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .ni-col-lg-3 { flex: 0 0 auto; width: 25%; }
    .ni-col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .ni-col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .ni-col-lg-6 { flex: 0 0 auto; width: 50%; }
    .ni-col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .ni-col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .ni-col-lg-9 { flex: 0 0 auto; width: 75%; }
    .ni-col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .ni-col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .ni-col-lg-12 { flex: 0 0 auto; width: 100%; }
    
    .ni-offset-lg-0 { margin-left: 0; }
    .ni-offset-lg-1 { margin-left: 8.333333%; }
    .ni-offset-lg-2 { margin-left: 16.666667%; }
    .ni-offset-lg-3 { margin-left: 25%; }
    .ni-offset-lg-4 { margin-left: 33.333333%; }
    .ni-offset-lg-5 { margin-left: 41.666667%; }
    .ni-offset-lg-6 { margin-left: 50%; }
}

/* ========================================
   Responsive Grid - XL (1200px+)
   ======================================== */

@media (min-width: 1200px) {
    .ni-col-xl { flex: 1 0 0%; }
    .ni-col-xl-auto { flex: 0 0 auto; width: auto; }
    .ni-col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
    .ni-col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
    .ni-col-xl-3 { flex: 0 0 auto; width: 25%; }
    .ni-col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .ni-col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
    .ni-col-xl-6 { flex: 0 0 auto; width: 50%; }
    .ni-col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
    .ni-col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
    .ni-col-xl-9 { flex: 0 0 auto; width: 75%; }
    .ni-col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .ni-col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
    .ni-col-xl-12 { flex: 0 0 auto; width: 100%; }
    
    .ni-offset-xl-0 { margin-left: 0; }
    .ni-offset-xl-1 { margin-left: 8.333333%; }
    .ni-offset-xl-2 { margin-left: 16.666667%; }
    .ni-offset-xl-3 { margin-left: 25%; }
    .ni-offset-xl-4 { margin-left: 33.333333%; }
    .ni-offset-xl-5 { margin-left: 41.666667%; }
    .ni-offset-xl-6 { margin-left: 50%; }
}

/* ========================================
   Responsive Display Utilities
   ======================================== */

/* Hidden on specific breakpoints */
@media (max-width: 575.98px) {
    .ni-hidden-xs { display: none !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .ni-hidden-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .ni-hidden-md { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .ni-hidden-lg { display: none !important; }
}

@media (min-width: 1200px) {
    .ni-hidden-xl { display: none !important; }
}

/* Visible only on specific breakpoints */
.ni-visible-xs,
.ni-visible-sm,
.ni-visible-md,
.ni-visible-lg,
.ni-visible-xl {
    display: none !important;
}

@media (max-width: 575.98px) {
    .ni-visible-xs { display: block !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .ni-visible-sm { display: block !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .ni-visible-md { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .ni-visible-lg { display: block !important; }
}

@media (min-width: 1200px) {
    .ni-visible-xl { display: block !important; }
}

/* ========================================
   Responsive Text Alignment
   ======================================== */

@media (min-width: 576px) {
    .ni-text-sm-left { text-align: left; }
    .ni-text-sm-center { text-align: center; }
    .ni-text-sm-right { text-align: right; }
}

@media (min-width: 768px) {
    .ni-text-md-left { text-align: left; }
    .ni-text-md-center { text-align: center; }
    .ni-text-md-right { text-align: right; }
}

@media (min-width: 992px) {
    .ni-text-lg-left { text-align: left; }
    .ni-text-lg-center { text-align: center; }
    .ni-text-lg-right { text-align: right; }
}

/* ========================================
   Responsive Flex Utilities
   ======================================== */

@media (min-width: 576px) {
    .ni-flex-sm-row { flex-direction: row; }
    .ni-flex-sm-column { flex-direction: column; }
    .ni-justify-sm-start { justify-content: flex-start; }
    .ni-justify-sm-center { justify-content: center; }
    .ni-justify-sm-end { justify-content: flex-end; }
    .ni-justify-sm-between { justify-content: space-between; }
}

@media (min-width: 768px) {
    .ni-flex-md-row { flex-direction: row; }
    .ni-flex-md-column { flex-direction: column; }
    .ni-justify-md-start { justify-content: flex-start; }
    .ni-justify-md-center { justify-content: center; }
    .ni-justify-md-end { justify-content: flex-end; }
    .ni-justify-md-between { justify-content: space-between; }
}

@media (min-width: 992px) {
    .ni-flex-lg-row { flex-direction: row; }
    .ni-flex-lg-column { flex-direction: column; }
    .ni-justify-lg-start { justify-content: flex-start; }
    .ni-justify-lg-center { justify-content: center; }
    .ni-justify-lg-end { justify-content: flex-end; }
    .ni-justify-lg-between { justify-content: space-between; }
}