/*
 * Location cards and the [locations-search] results grid.
 *
 * The cards used to be styled with inline styles and Bootstrap column classes, and their
 * phone link was nested inside the card link (invalid HTML the browser silently rebuilt).
 * These rules reproduce the same look on valid markup. The shared rules in style.css
 * (.card-horizontal, .location-image, .logo-container, .location-address, .location-phone,
 * #main-search, ...) still apply unchanged.
 */

/* Grid: one column, two from 992px (was .col-sm-12 .col-lg-6) */
.site-main .location-results {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.site-main .location-results__item {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .site-main .location-results__item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Card: photo on the left, details on the right */
.site-main .location-card .card-horizontal {
  display: flex;
  height: 100%;
}

.site-main .location-card__media {
  display: block;
  height: 100%;
}

.site-main .location-card .card-body {
  flex: 1;
}

/* Location name, shown when there is no logo */
.site-main .location-card__name {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

/*
 * With a phone number, the details fill the card body and the number sits below them,
 * pulled up by style.css's `bottom: 3rem`. The empty line after the address keeps the
 * number's original position.
 */
.site-main .location-card--has-phone .location-card__details {
  height: 100%;
}

.site-main .location-card--has-phone .location-card__details::after {
  content: "";
  margin-left: 30px;
  font-size: 18px;
}

/* The whole card links to the location; the phone number stays clickable above it. */
.site-main .location-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.site-main .location-card .location-phone {
  z-index: 2;
}

/* Search suggestions: styled by jQuery UI's autocomplete classes; this adds the keyboard highlight. */
.location-suggestions .ui-menu-item.is-active {
  background: #d8d8d8;
}