/*
 * TBMeili - common/grid helpers
 * Adapted from AmbJoliSearch jolisearch-common.css (scoped & cleaned)
 *
 * Usage:
 *  - add class "smartsearch-grid" on a WRAPPER that contains col-*-x-12 classes
 *  - then you can use col-*-x-12 inside that wrapper
 *
 * Notes:
 *  - This is a legacy float-based mini grid. For new overlay layouts prefer CSS Grid/Flex.
 */

/* Make sizing predictable (scoped) */
.smartsearch-grid,
.smartsearch-grid * {
  box-sizing: border-box;
}

/* Clearfix for float grid (prevents parent height collapse) */
.smartsearch-grid::after{
  content: "";
  display: block;
  clear: both;
}

/* ---------- 12-column mini grid (scoped) ---------- */

/* xs (base, no media query) */
.smartsearch-grid .col-xs-1-12 { width: 8.33333%; }
.smartsearch-grid .col-xs-offset-1-12 { margin-left: 8.33333%; }
.smartsearch-grid .col-xs-2-12 { width: 16.66667%; }
.smartsearch-grid .col-xs-offset-2-12 { margin-left: 16.66667%; }
.smartsearch-grid .col-xs-3-12 { width: 25%; }
.smartsearch-grid .col-xs-offset-3-12 { margin-left: 25%; }
.smartsearch-grid .col-xs-4-12 { width: 33.33333%; }
.smartsearch-grid .col-xs-offset-4-12 { margin-left: 33.33333%; }
.smartsearch-grid .col-xs-5-12 { width: 41.66667%; }
.smartsearch-grid .col-xs-offset-5-12 { margin-left: 41.66667%; }
.smartsearch-grid .col-xs-6-12 { width: 50%; }
.smartsearch-grid .col-xs-offset-6-12 { margin-left: 50%; }
.smartsearch-grid .col-xs-7-12 { width: 58.33333%; }
.smartsearch-grid .col-xs-offset-7-12 { margin-left: 58.33333%; }
.smartsearch-grid .col-xs-8-12 { width: 66.66667%; }
.smartsearch-grid .col-xs-offset-8-12 { margin-left: 66.66667%; }
.smartsearch-grid .col-xs-9-12 { width: 75%; }
.smartsearch-grid .col-xs-offset-9-12 { margin-left: 75%; }
.smartsearch-grid .col-xs-10-12 { width: 83.33333%; }
.smartsearch-grid .col-xs-offset-10-12 { margin-left: 83.33333%; }
.smartsearch-grid .col-xs-11-12 { width: 91.66667%; }
.smartsearch-grid .col-xs-offset-11-12 { margin-left: 91.66667%; }
.smartsearch-grid .col-xs-12-12 { width: 100%; }
.smartsearch-grid .col-xs-offset-12-12 { margin-left: 100%; }

/* Float columns (scoped) */
.smartsearch-grid [class*="col-"]{
  float: left;
}

/* Gutters (scoped) */
.smartsearch-grid [class*="col-"]{
  padding-left: 15px;
  padding-right: 15px;
}

/* sm */
@media (min-width: 768px) {
  .smartsearch-grid .col-sm-1-12 { width: 8.33333%; }
  .smartsearch-grid .col-sm-offset-1-12 { margin-left: 8.33333%; }
  .smartsearch-grid .col-sm-2-12 { width: 16.66667%; }
  .smartsearch-grid .col-sm-offset-2-12 { margin-left: 16.66667%; }
  .smartsearch-grid .col-sm-3-12 { width: 25%; }
  .smartsearch-grid .col-sm-offset-3-12 { margin-left: 25%; }
  .smartsearch-grid .col-sm-4-12 { width: 33.33333%; }
  .smartsearch-grid .col-sm-offset-4-12 { margin-left: 33.33333%; }
  .smartsearch-grid .col-sm-5-12 { width: 41.66667%; }
  .smartsearch-grid .col-sm-offset-5-12 { margin-left: 41.66667%; }
  .smartsearch-grid .col-sm-6-12 { width: 50%; }
  .smartsearch-grid .col-sm-offset-6-12 { margin-left: 50%; }
  .smartsearch-grid .col-sm-7-12 { width: 58.33333%; }
  .smartsearch-grid .col-sm-offset-7-12 { margin-left: 58.33333%; }
  .smartsearch-grid .col-sm-8-12 { width: 66.66667%; }
  .smartsearch-grid .col-sm-offset-8-12 { margin-left: 66.66667%; }
  .smartsearch-grid .col-sm-9-12 { width: 75%; }
  .smartsearch-grid .col-sm-offset-9-12 { margin-left: 75%; }
  .smartsearch-grid .col-sm-10-12 { width: 83.33333%; }
  .smartsearch-grid .col-sm-offset-10-12 { margin-left: 83.33333%; }
  .smartsearch-grid .col-sm-11-12 { width: 91.66667%; }
  .smartsearch-grid .col-sm-offset-11-12 { margin-left: 91.66667%; }
  .smartsearch-grid .col-sm-12-12 { width: 100%; }
  .smartsearch-grid .col-sm-offset-12-12 { margin-left: 100%; }
}

/* md */
@media (min-width: 992px) {
  .smartsearch-grid .col-md-1-12 { width: 8.33333%; }
  .smartsearch-grid .col-md-offset-1-12 { margin-left: 8.33333%; }
  .smartsearch-grid .col-md-2-12 { width: 16.66667%; }
  .smartsearch-grid .col-md-offset-2-12 { margin-left: 16.66667%; }
  .smartsearch-grid .col-md-3-12 { width: 25%; }
  .smartsearch-grid .col-md-offset-3-12 { margin-left: 25%; }
  .smartsearch-grid .col-md-4-12 { width: 33.33333%; }
  .smartsearch-grid .col-md-offset-4-12 { margin-left: 33.33333%; }
  .smartsearch-grid .col-md-5-12 { width: 41.66667%; }
  .smartsearch-grid .col-md-offset-5-12 { margin-left: 41.66667%; }
  .smartsearch-grid .col-md-6-12 { width: 50%; }
  .smartsearch-grid .col-md-offset-6-12 { margin-left: 50%; }
  .smartsearch-grid .col-md-7-12 { width: 58.33333%; }
  .smartsearch-grid .col-md-offset-7-12 { margin-left: 58.33333%; }
  .smartsearch-grid .col-md-8-12 { width: 66.66667%; }
  .smartsearch-grid .col-md-offset-8-12 { margin-left: 66.66667%; }
  .smartsearch-grid .col-md-9-12 { width: 75%; }
  .smartsearch-grid .col-md-offset-9-12 { margin-left: 75%; }
  .smartsearch-grid .col-md-10-12 { width: 83.33333%; }
  .smartsearch-grid .col-md-offset-10-12 { margin-left: 83.33333%; }
  .smartsearch-grid .col-md-11-12 { width: 91.66667%; }
  .smartsearch-grid .col-md-offset-11-12 { margin-left: 91.66667%; }
  .smartsearch-grid .col-md-12-12 { width: 100%; }
  .smartsearch-grid .col-md-offset-12-12 { margin-left: 100%; }
}

/* lg */
@media (min-width: 1200px) {
  .smartsearch-grid .col-lg-1-12 { width: 8.33333%; }
  .smartsearch-grid .col-lg-offset-1-12 { margin-left: 8.33333%; }
  .smartsearch-grid .col-lg-2-12 { width: 16.66667%; }
  .smartsearch-grid .col-lg-offset-2-12 { margin-left: 16.66667%; }
  .smartsearch-grid .col-lg-3-12 { width: 25%; }
  .smartsearch-grid .col-lg-offset-3-12 { margin-left: 25%; }
  .smartsearch-grid .col-lg-4-12 { width: 33.33333%; }
  .smartsearch-grid .col-lg-offset-4-12 { margin-left: 33.33333%; }
  .smartsearch-grid .col-lg-5-12 { width: 41.66667%; }
  .smartsearch-grid .col-lg-offset-5-12 { margin-left: 41.66667%; }
  .smartsearch-grid .col-lg-6-12 { width: 50%; }
  .smartsearch-grid .col-lg-offset-6-12 { margin-left: 50%; }
  .smartsearch-grid .col-lg-7-12 { width: 58.33333%; }
  .smartsearch-grid .col-lg-offset-7-12 { margin-left: 58.33333%; }
  .smartsearch-grid .col-lg-8-12 { width: 66.66667%; }
  .smartsearch-grid .col-lg-offset-8-12 { margin-left: 66.66667%; }
  .smartsearch-grid .col-lg-9-12 { width: 75%; }
  .smartsearch-grid .col-lg-offset-9-12 { margin-left: 75%; }
  .smartsearch-grid .col-lg-10-12 { width: 83.33333%; }
  .smartsearch-grid .col-lg-offset-10-12 { margin-left: 83.33333%; }
  .smartsearch-grid .col-lg-11-12 { width: 91.66667%; }
  .smartsearch-grid .col-lg-offset-11-12 { margin-left: 91.66667%; }
  .smartsearch-grid .col-lg-12-12 { width: 100%; }
  .smartsearch-grid .col-lg-offset-12-12 { margin-left: 100%; }
}

/* ---------- Centering/width helper (optional) ----------
 * If you want centered overlay:
 * add class "smartsearch-centered" on .smartsearch-dd element
 */
.smartsearch-dd.smartsearch-centered{
  left: 50% !important;
  transform: translateX(-50%);
  max-width: 65vw;
}

/* Mobile: wider */
@media (max-width: 576px) {
  .smartsearch-dd.smartsearch-centered{
    left: 50% !important;
    transform: translateX(-50%);
    max-width: 98vw;
  }
}