/* =============================================================================
   BlocHost Design System - Grid System
   Responsive 12-column flexbox grid with containers
   ============================================================================= */

/* =========================================================================
   Containers
   ========================================================================= */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
  margin-right: auto;
  margin-left: auto;
}

/* Fixed-width containers at breakpoints */
@media (min-width: 576px) {
  .container, .container-sm {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: var(--container-md);
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: var(--container-xxl);
  }
}

/* Fluid container - full width always */
.container-fluid {
  max-width: 100%;
}

/* =========================================================================
   Row
   ========================================================================= */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--spacing-3) * -0.5);
  margin-left: calc(var(--spacing-3) * -0.5);
}

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

/* Row gutter variations */
.row.g-0 {
  margin-right: 0;
  margin-left: 0;
}

.row.g-0 > * {
  padding-right: 0;
  padding-left: 0;
}

.row.g-1 {
  margin-right: calc(var(--spacing-1) * -0.5);
  margin-left: calc(var(--spacing-1) * -0.5);
}

.row.g-1 > * {
  padding-right: calc(var(--spacing-1) * 0.5);
  padding-left: calc(var(--spacing-1) * 0.5);
}

.row.g-2 {
  margin-right: calc(var(--spacing-2) * -0.5);
  margin-left: calc(var(--spacing-2) * -0.5);
}

.row.g-2 > * {
  padding-right: calc(var(--spacing-2) * 0.5);
  padding-left: calc(var(--spacing-2) * 0.5);
}

.row.g-3 {
  margin-right: calc(var(--spacing-3) * -0.5);
  margin-left: calc(var(--spacing-3) * -0.5);
}

.row.g-3 > * {
  padding-right: calc(var(--spacing-3) * 0.5);
  padding-left: calc(var(--spacing-3) * 0.5);
}

.row.g-4 {
  margin-right: calc(var(--spacing-4) * -0.5);
  margin-left: calc(var(--spacing-4) * -0.5);
}

.row.g-4 > * {
  padding-right: calc(var(--spacing-4) * 0.5);
  padding-left: calc(var(--spacing-4) * 0.5);
}

.row.g-5 {
  margin-right: calc(var(--spacing-5) * -0.5);
  margin-left: calc(var(--spacing-5) * -0.5);
}

.row.g-5 > * {
  padding-right: calc(var(--spacing-5) * 0.5);
  padding-left: calc(var(--spacing-5) * 0.5);
}

/* =========================================================================
   Columns - Base (Mobile First)
   ========================================================================= */

.col {
  flex: 1 0 0%;
}

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

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

/* =========================================================================
   Columns - Small (≥576px)
   ========================================================================= */

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }

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

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

/* =========================================================================
   Columns - Medium (≥768px)
   ========================================================================= */

@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }

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

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

/* =========================================================================
   Columns - Large (≥992px)
   ========================================================================= */

@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }

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

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

/* =========================================================================
   Columns - Extra Large (≥1200px)
   ========================================================================= */

@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }

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

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

/* =========================================================================
   Columns - Extra Extra Large (≥1400px)
   ========================================================================= */

@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }

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

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

/* =========================================================================
   Offset Classes
   ========================================================================= */

.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

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

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

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

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

/* =========================================================================
   Row Columns (Auto-sizing columns)
   ========================================================================= */

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.666667%; }

@media (min-width: 576px) {
  .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.333333%; }
  .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.666667%; }
}

@media (min-width: 768px) {
  .row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.333333%; }
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-md-6 > * { flex: 0 0 auto; width: 16.666667%; }
}

@media (min-width: 992px) {
  .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.333333%; }
  .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.666667%; }
}

@media (min-width: 1200px) {
  .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.333333%; }
  .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.666667%; }
}