// ====================================================================
// LAYOUT
// ====================================================================

// --------------------------------------------------------------------
// Simple Bootstrap 3-style column layout
//
//   This is a subset of Boostrap 3's grid system that was sufficient
//   for most pages that use a two-column layout on desktop.
//
//   TIPS
//   - use tailwind `order-{x}` to push/pull columns
//   - for a single centered column, use eg. `col-lg-10 mx-auto`
//
// --------------------------------------------------------------------
$GRID_GUTTER_X: 15px;

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: $GRID_GUTTER_X;
  padding-right: $GRID_GUTTER_X;

  @include breakpoint-up(md) {
    width: $--bp-md;
  }

  @include breakpoint-up(lg) {
    width: 970px;
  }
}

.row {
  @apply flex flex-wrap;
  margin-left: -$GRID_GUTTER_X;
  margin-right: -$GRID_GUTTER_X;
}

// NOTE! how `col-lg-*` breakpoints match `mbl/dsk` in tailwind config
.col-lg-3,
.col-lg-4,
.col-lg-6,
.col-lg-8,
.col-lg-9,
.col-lg-10 {
  @apply grow-0 w-full;
  padding-left: $GRID_GUTTER_X;
  padding-right: $GRID_GUTTER_X;
}

@include screen(dsk) {
  .col-lg-3 {
    @apply w-3/12;
  }
  .col-lg-4 {
    @apply w-4/12;
  }
  .col-lg-6 {
    @apply w-6/12;
  }
  .col-lg-8 {
    @apply w-8/12;
  }
  .col-lg-9 {
    @apply w-9/12;
  }
  .col-lg-10 {
    @apply w-10/12;
  }
}

// A few places can afford columns in tablet portrait mode (md)
.col-md-3,
.col-md-6,
.col-md-9 {
  @apply grow-0 w-full;
  padding-left: $GRID_GUTTER_X;
  padding-right: $GRID_GUTTER_X;
}
@include breakpoint-up(md) {
  .col-md-3 {
    @apply w-3/12;
  }
  .col-md-6 {
    @apply w-6/12;
  }
  .col-md-9 {
    @apply w-9/12;
  }
}

// --------------------------------------------------------------------
// CANCEL GUTTERS
//   Cancel the column gutter on small screens only.
//
//   Ideal for sections of content with a full width image or table,
//   to gain extra space, spanning from edge to edge of the device.
// --------------------------------------------------------------------
@include breakpoint-down(md) {
  .no-gutter-xs-sm {
    margin-left: -$GRID_GUTTER_X;
    margin-right: -$GRID_GUTTER_X;
  }
}
