/* The search page. Loaded by solicitors/search.html alone. */

/* --- Filter panel ---
 * From desktop width the panel stays in view while the list scrolls,
 * below the site's own header. It never scrolls within itself: a panel
 * taller than the window, which it is on most laptops, moves with the
 * page until one of its edges meets the window's, and the page's script
 * sets how far down it rests as the page scrolls. So the panel is sticky
 * only where that script runs; without it the panel is part of the page.
 * Below desktop width it is an offcanvas panel, and Bootstrap places it.
 */
@media (min-width: 992px) {
  .ls-search-live .ls-search-filters {
    position: sticky;
    top: var(--ls-search-filters-top, var(--ls-header-offset));
  }
}

/* Beside the list the filters are a card, as each result is. In the
 * slide-out panel they are the panel's own content, with no card drawn
 * inside it. Bootstrap's border and rounding utilities have no form
 * that starts at a width.
 */
@media (min-width: 992px) {
  .ls-search-filters-card {
    padding: 1rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
  }
}

/* --- Applying in place ---
 * The page works as forms: each has an Apply button. Once the page's
 * script has taken over, a choice applies as it is made, so the buttons
 * go and the panel says so. The script marks the page with one class.
 */
.ls-search-live-note {
  display: none;
}

.ls-search-live .ls-search-live-note {
  display: block;
}

.ls-search-live .ls-search-apply {
  display: none;
}

/* --- Map ---
 * The switch works the map, which the map's script draws, so it is
 * shown once that script is running. The map itself has a fixed height
 * above the list. A pressed pin's card is drawn inside Google's own
 * info window, which sets its own type, so the card names the site's.
 */
.ls-search-view {
  display: none;
}

.ls-search-maps .ls-search-view {
  display: inline-flex;
}

.ls-search-map {
  height: 420px;
}

.ls-search-pin-card {
  font-family: var(--bs-body-font-family);
}

/* On a phone the switch is one button that floats over the list at the
 * foot of the screen, and stays there, over the map, while the map is
 * open. Like the switch, it is shown once the map's script is running.
 */
.ls-search-view-float {
  display: none;
  z-index: 1021;
}

.ls-search-maps .ls-search-view-float {
  display: inline-flex;
}

/* On a phone the open map fills the screen under the site's header,
 * which stays in reach above it, and the page behind does not scroll.
 * A pressed pin's card sits at the map's foot, clear of the floating
 * button, in place of Google's info window, which a small screen has
 * no room for.
 */
@media (max-width: 767.98px) {
  .ls-search-map-panel {
    position: fixed;
    top: var(--ls-header-height, 56px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
  }

  .ls-search-map-panel .ls-search-map {
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .ls-search-map-card {
    bottom: 5.25rem;
  }

  .ls-search-map-open {
    overflow: hidden;
  }
}

/* --- Result card ---
 * A grid of fixed rows, so that every card is the same height and a
 * missing value never moves anything: 318 pixels narrow and 190 wide.
 * The layout follows the width of the results column, not the screen's,
 * because the column is as wide at tablet width, where the filters have
 * left the page, as it is at desktop width. The card was tested at every
 * results width with these values; Bootstrap has no grid of named areas
 * and no utility that follows a container's width.
 *
 * Narrow, below a column of 600 pixels: a head block holding the logo
 * and the name, then four rows, then the rating beside View profile.
 */
.ls-search-results {
  container-type: inline-size;
}

.ls-result-card {
  display: grid;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 104px 24px 24px 24px 24px 44px;
  grid-template-areas:
    "head head"
    "status status"
    "where where"
    "facts facts"
    "pills pills"
    "rating action";
}

.ls-result-card > *,
.ls-result-card-head > * {
  min-width: 0;
}

.ls-result-card-head {
  grid-area: head;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.ls-result-card-logo {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ls-result-card-logo img {
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
}

.ls-result-card-no-logo {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

/* Up to two lines on the narrow card. */
.ls-result-card-name {
  flex: none;
  font-size: 1.1875rem;
  line-height: 24px;
}

.ls-result-card-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ls-result-card-pro-narrow {
  position: absolute;
  top: 0;
  right: 0;
}

.ls-result-card-pro-wide {
  display: none;
}

/* The status badge and what follows it are 12 pixels apart, which the
 * narrowest card was measured with and Bootstrap has no gap for.
 */
.ls-result-card-status {
  grid-area: status;
  gap: 0.75rem;
}

.ls-result-card-status .badge {
  flex-shrink: 0;
}

.ls-result-card-where {
  grid-area: where;
}

.ls-result-card-facts {
  grid-area: facts;
}

/* One line of pills, never two. The card carries the line cut for four
 * widths, and only the one that fits is shown.
 */
.ls-result-card-pills {
  grid-area: pills;
}

.ls-result-card-pills .badge {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.ls-result-card-more {
  flex-shrink: 0;
}

.ls-result-card-pills-aa,
.ls-result-card-pills-a,
.ls-result-card-pills-b {
  display: none;
}

.ls-result-card-pills-c {
  display: contents;
}

/* What only a card with room shows, and what stands in for it. */
.ls-result-card-roomy {
  display: none;
}

.ls-result-card-rating {
  grid-area: rating;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* The shared rating element sets its two lines to the right, for the
 * hub pages' rows. At the foot of the narrow card they are set left.
 */
.ls-result-card-rating > div {
  align-items: flex-start !important;
}

.ls-result-card-action {
  grid-area: action;
  align-self: center;
}

@container (min-width: 480px) {
  .ls-result-card-pills-c {
    display: none;
  }

  .ls-result-card-pills-b {
    display: contents;
  }

  .ls-result-card-roomy {
    display: inline;
  }

  .ls-result-card-tight {
    display: none;
  }
}

/* Wide, from a column of 600 pixels: the name, the status, the
 * location, the facts and the practice areas down the left, and the
 * logo, the rating and View profile down the right.
 */
@container (min-width: 600px) {
  .ls-result-card {
    column-gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) 216px;
    grid-template-rows: 28px 24px 24px 24px 24px;
    grid-template-areas:
      "name logo"
      "status logo"
      "where rating"
      "facts rating"
      "pills action";
  }

  .ls-result-card-head {
    display: contents;
  }

  .ls-result-card-pro-narrow {
    display: none;
  }

  .ls-result-card-pro-wide {
    display: inline-flex;
  }

  /* The narrowest wide card has less room beside its logo than the
   * widest narrow card has across its whole width, so the short labels
   * come back until the column is 640 pixels. The page's own columns
   * are 516 and then 696 pixels wide, so this is for a column the page
   * does not have today: found by drawing every organisation's card.
   */
  .ls-result-card-roomy {
    display: none;
  }

  .ls-result-card-tight {
    display: inline;
  }

  .ls-result-card-logo {
    grid-area: logo;
    flex: none;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .ls-result-card-logo img {
    height: auto;
    max-width: 196px;
    max-height: 52px;
    object-position: right top;
  }

  .ls-result-card-no-logo {
    width: 52px;
    height: 52px;
    font-size: 1.625rem;
  }

  /* One line, cut short with an ellipsis. */
  .ls-result-card-name {
    grid-area: name;
    font-size: 1.25rem;
    line-height: 28px;
  }

  .ls-result-card-name a {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ls-result-card-rating {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .ls-result-card-rating > div {
    align-items: flex-end !important;
  }

  .ls-result-card-action {
    align-self: end;
    justify-self: end;
  }
}

@container (min-width: 640px) {
  .ls-result-card-roomy {
    display: inline;
  }

  .ls-result-card-tight {
    display: none;
  }
}

@container (min-width: 800px) {
  .ls-result-card-pills-b {
    display: none;
  }

  .ls-result-card-pills-a {
    display: contents;
  }
}

@container (min-width: 940px) {
  .ls-result-card-pills-a {
    display: none;
  }

  .ls-result-card-pills-aa {
    display: contents;
  }
}