/* Hub pages: the location, place, practice area and legal aid pages. Loaded by solicitors/hub/base.html. */

/* --- Full list ---
 * Every firm a page covers, in columns that read downwards: one on a
 * phone, two on a tablet, three on a desktop. A row is never split across
 * two columns. How many rows show before "Show all" is pressed is set
 * beside the list, from the list's own figures.
 */
.ls-hub-list {
  column-gap: 3rem;
}

.ls-hub-list > li {
  break-inside: avoid;
}

@media (min-width: 768px) {
  .ls-hub-list { column-count: 2; }
}

@media (min-width: 992px) {
  .ls-hub-list { column-count: 3; }
}

/* --- Pills ---
 * A pill that is a link darkens under the pointer, as the homepage's area
 * pills do.
 */
.ls-hub-pill {
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

@media (hover: hover) {
  .ls-hub-pill:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }

  /* The count is in the primary colour, so it turns with the label. */
  .ls-hub-pill:hover,
  .ls-hub-pill:hover > span {
    color: #fff !important;
  }
}

/* --- Top rated list ---
 * One bordered box of rows at desktop. Below it the same rows are separate
 * cards, two to a row on a tablet and one on a phone. Bootstrap has no
 * border or grid utility that changes with the width.
 */
.ls-hub-top {
  display: grid;
  gap: 1rem;
}

.ls-hub-top > li {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

@media (min-width: 768px) {
  .ls-hub-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .ls-hub-top {
    display: block;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
  }

  .ls-hub-top > li {
    border: 0;
    border-radius: 0;
  }

  .ls-hub-top > li + li {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
  }
}

/* --- Search panel ---
 * Its fields and its button are one joined row from the tablet up. On a
 * phone they stack, each at full width with its own corners. The input
 * group's own joining rules are very specific, hence the !important.
 *
 * Where the panel asks for a place, the suggestions open just under the
 * field, as they do under the site's own search box.
 */
.ls-hub-search .autocomplete-results {
  top: calc(100% + 4px);
  z-index: 1050;
}

@media (max-width: 767.98px) {
  .ls-hub-search .input-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ls-hub-search .input-group > .form-control,
  .ls-hub-search .input-group > .form-select,
  .ls-hub-search .input-group > .btn {
    width: 100%;
    margin-left: 0 !important;
    border-radius: var(--bs-border-radius) !important;
  }

  /* Stacked, the button sits under the field. The suggestions still open
   * under the field, a field's own height down, and so over the button. */
  .ls-hub-search .autocomplete-results {
    top: calc(2.25rem + var(--bs-border-width) * 2 + 4px);
  }
}