/* Contacts */
.primary-contact-list {
  display: grid;
  gap: 12px;
}

.primary-contact {
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.primary-contact > div {
  min-width: 0;
}

.primary-contact .contact-links a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.primary-contact--with-photo,
.contact-card--with-photo {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.contact-photo {
  width: 76px;
  height: 92px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.contact-photo--small {
  width: 64px;
  height: 76px;
  border-radius: 12px;
}

.contact-card--with-photo {
  grid-template-columns: 64px minmax(0, 1fr);
}

.primary-contact__role {
  margin-bottom: 4px;
  color: var(--blue-700);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.primary-contact__name {
  margin-bottom: 12px;
  color: var(--navy-950);
  font-size: 1.06rem;
  font-weight: 780;
}

.contact-links {
  display: grid;
  gap: 5px;
  font-size: 0.91rem;
}

.contact-links a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  color: var(--ink-700);
  text-decoration: none;
}

.contact-links a:hover {
  color: var(--blue-700);
}

.contact-links a::before {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  content: "";
  background-color: currentColor;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.contact-links a[href^="mailto:"]::before {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/%3E%3C/svg%3E');
}

.contact-links a[href^="tel:"]::before {
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 1.23 0 2.44.2 3.57.57.35.13.74.04 1.02-.24l2.2-2.2z"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 1.23 0 2.44.2 3.57.57.35.13.74.04 1.02-.24l2.2-2.2z"/%3E%3C/svg%3E');
}

.contact-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.filter-status {
  min-height: 1.5em;
  margin: -16px 0 26px;
  color: var(--ink-600);
  font-size: 0.88rem;
}

.search-field {
  position: relative;
  flex: 1 1 auto;
}

.search-field svg {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  color: var(--ink-500);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 18px 0 48px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.search-field input::placeholder {
  color: var(--ink-700);
  opacity: 1;
}

.search-field input:focus {
  border-color: var(--action-focus);
  box-shadow: none;
  outline: 3px solid var(--action-focus);
  outline-offset: 3px;
}

.filter-select {
  min-height: 50px;
  padding: 0 52px 0 16px;
  color: var(--ink-900);
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23152033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

.contact-alphabet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: -8px 0 24px;
  padding: 9px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.contact-alphabet[hidden] { display: none; }

.contact-alphabet__scroll {
  display: flex;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.contact-alphabet__scroll::-webkit-scrollbar { display: none; }

.contact-alphabet__button,
.contact-alphabet__arrow {
  display: inline-grid;
  min-width: 42px;
  min-height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.contact-alphabet__button:first-child { min-width: 62px; }

.contact-alphabet__button:focus-visible,
.contact-alphabet__arrow:focus-visible {
  outline: 3px solid var(--action-focus);
  outline-offset: -3px;
}

.contact-alphabet__button:hover,
.contact-alphabet__button:focus-visible {
  color: var(--blue-700);
  border-color: var(--blue-500);
}

.contact-alphabet__button[aria-pressed="true"] {
  color: #fff;
  background: var(--blue-700);
  border-color: var(--blue-700);
  box-shadow: var(--shadow-sm);
}

.contact-alphabet__arrow {
  min-width: 34px;
  color: var(--blue-700);
  background: transparent;
  border-color: transparent;
  font-size: 1.75rem;
}

.contact-alphabet__arrow:disabled {
  opacity: 0.32;
  cursor: default;
}

.contact-alphabet__arrow[hidden] {
  display: none;
}

.contact-reset {
  margin-top: -8px;
  margin-bottom: 24px;
}

.contact-group + .contact-group {
  margin-top: 46px;
}