/*
 * stgag_search — the search page's layout.
 *
 * Hand-written plain CSS, no build. Replaces the Foundation grid this template
 * used, which came from comsolit_t3base's stylesheet — the `legacy` cascade
 * layer stgag/theme is deleting (app repo open-issues #82).
 *
 * ⚠️ In Resources/Public/Css/, NOT Resources/Public/stylesheets/. The latter is
 * the gulp SCSS build's output (`scss.build` in gulp.config.json), and the
 * stgag-search.css sitting there is generated. ℹ️ That file is also dead: it is
 * registered nowhere and is absent from the rendered search page on both dev and
 * production. The page's styling comes entirely from the legacy layer.
 *
 * ⚠️ SCOPE IS LAYOUT ONLY. This template is an AngularJS application — `ng-app`,
 * the ui-bootstrap `<accordion>` around related objects, `<pagination>`. None of
 * that is Foundation and none of it is touched here; it belongs to the separate
 * AngularJS migration.
 *
 * ⚠️ The grid is 60 columns and the breakpoints are t3base's:
 *   smed   26.25em   large-13 -> 21.667%   (13/60)
 *   medium 40em      large-47 -> 78.333%   (47/60)
 *   large  62em      smed-22  -> 36.667%   smed-16 -> 26.667%
 *                    medium-20 -> 33.333%  medium-40 -> 66.667%
 * Reading them as twelfths, or assuming Foundation's stock breakpoints, gets
 * every width wrong. Media-query lengths resolve against the initial font size,
 * so they are immune to the legacy layer's `html { font-size: 105% }`.
 *
 * ⚠️ NO gutter-cancelling negative margin on the outer row. Foundation applies
 * one to a row nested inside a column, and production has it (`-15px`) because
 * t3base wraps the plugin in one. Under stgag_theme the plugin sits directly in
 * the content column and the row measures `margin-left: 0` — adding one would
 * pull the whole search 15px left of the rest of the page. Measured on both
 * before porting: nav 257@0, sidebar 227@15, content 928@257 at 1200px.
 */

.stgag-search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.stgag-search__row > * {
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

@media print, screen and (min-width: 40em) {
  .stgag-search__row > * {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* --- The two columns: navigation 13/60, results 47/60 from `large` up ------ */

@media screen and (min-width: 62em) {
  .search-result-navigation {
    width: 21.6666667%;
  }

  #search-results-content {
    width: 78.3333333%;
  }
}

/*
 * The index list is a sidebar above `large` and a <select> below it — Foundation
 * `show-for-large` / `hide-for-large`.
 */
#search-results-sidebar {
  display: none;
}

@media screen and (min-width: 62em) {
  #search-results-sidebar {
    display: block;
  }

  select[name="search-result-select"] {
    display: none;
  }
}

/* Foundation's `.menu.vertical`: an unstyled list stacked vertically. */
.stgag-search__index-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Related objects inside a result -------------------------------------- */

.stgag-search__related {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-left: 10px;
  padding-right: 10px;
}

@media print, screen and (min-width: 40em) {
  .stgag-search__related {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.results-content-group {
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

@media print, screen and (min-width: 40em) {
  .results-content-group {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media print, screen and (min-width: 26.25em) {
  .results-content-group--wide {
    width: 36.6666667%;
  }

  .results-content-group--narrow {
    width: 26.6666667%;
  }
}

/* --- Pagination -----------------------------------------------------------
 * Two copies, one per breakpoint, differing only in `max-size`. Foundation's
 * show-for-medium / hide-for-medium swapped them.
 */
.stgag-search__pagination--wide,
.stgag-search__pagination--narrow {
  width: 100%;
  text-align: center;
}

.stgag-search__pagination--wide {
  display: none;
}

@media print, screen and (min-width: 40em) {
  .stgag-search__pagination--wide {
    display: block;
  }

  .stgag-search__pagination--narrow {
    display: none;
  }
}

/* --- Person result -------------------------------------------------------- */

.stgag-search__person-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.stgag-search__person-row > * {
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

@media print, screen and (min-width: 40em) {
  .stgag-search__person-row > * {
    padding-left: 15px;
    padding-right: 15px;
  }

  .stgag-search__person-row > .person-image {
    width: 33.3333333%;
  }

  .stgag-search__person-row > .person-image + * {
    width: 66.6666667%;
  }
}