/**
 * @file
 * Grid shim. A minimal, standalone reimplementation of the Bootstrap 3 grid
 * class names (.container, .container-fluid, .row, .col-*) so that WYSIWYG body
 * content authored against those classes keeps its layout — without shipping
 * Bootstrap. Only the sm (768) and md (992) tiers are shipped — those are the
 * only ones the site's content uses; xs/lg tiers were dropped as unused.
 */

.container,
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
@media (min-width: 1350px) { .container { width: var(--container-max); } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Columns: full width by default, sized from their breakpoint up. */
[class*="col-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

/* sm / md stack (full width) below their breakpoint. */
@media (min-width: 768px) {
  .col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.3333%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6667%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 992px) {
  .col-md-1  { width: 8.3333%; }
  .col-md-2  { width: 16.6667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6667%; }
  .col-md-12 { width: 100%; }
}

/* Generic bare ".col" used by the content editor's .btgrid blocks.
   Below 992px these stack (matching the old float-based grid); from 992px up
   they share the row as equal flexible columns. */
.btgrid .row .col {
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
}
@media (min-width: 992px) {
  .btgrid .row .col { flex: 1 1 0; overflow: visible; }
}
.btgrid table { width: 100%; }

.border-right { border-right: 1px solid var(--color-border); }

@media (max-width: 991px) {
  /* Non-standard breakpoint kept to match editor-entered spacing. */
  .btgrid .row .col .content { margin-top: 40px !important; }
  .btgrid iframe { margin-top: 0 !important; }
}