/* Contact block — M20.
 *
 * Two columns where there is room: the routes to a person on the left, the
 * office on the right. The telephone is set large because on this page it is
 * the fastest working conversion the site has — the form is Phase 4, the
 * number answers today.
 */

.pl-contact__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 48rem) {
  .pl-contact__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.pl-contact__routes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pl-contact__label {
  margin-bottom: calc(var(--sp-1) * -1);
}

.pl-contact__phone a {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pl-contact__phone a:hover {
  color: var(--c-text-muted);
}

.pl-contact__hours,
.pl-contact__note,
.pl-contact__map-caption {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pl-contact__address {
  font-style: normal;
  line-height: var(--lh-body);
}

.pl-contact__country {
  display: block;
}

.pl-contact__markets .label,
.pl-contact__other .label {
  margin-bottom: var(--sp-1);
}

/* A market with no site of its own is still named. It reads as text rather
 * than as a link, because a link that goes nowhere is worse than a fact. */
.pl-contact__market {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text-muted);
}

.pl-contact__map img,
.pl-contact__map .pl-placeholder {
  width: 100%;
  border: var(--rule) solid var(--c-rule);
}

.pl-contact__map-caption {
  padding-top: var(--sp-1);
}