/* Contacts: desktop table and compact cards on smaller screens. */
.contacts-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.contacts-table {
  width: 100%;
  table-layout: fixed;
}

.contacts-table th,
.contacts-table td {
  overflow-wrap: anywhere;
  word-break: normal;
}

.contacts-table th:nth-child(1),
.contacts-table td:nth-child(1) { width: 18%; }
.contacts-table th:nth-child(2),
.contacts-table td:nth-child(2) { width: 15%; }
.contacts-table th:nth-child(3),
.contacts-table td:nth-child(3) { width: 24%; }
.contacts-table th:nth-child(4),
.contacts-table td:nth-child(4) { width: 6%; }
.contacts-table th:nth-child(5),
.contacts-table td:nth-child(5) { width: 6%; }
.contacts-table th:nth-child(6),
.contacts-table td:nth-child(6) { width: 14%; }
.contacts-table th:nth-child(7),
.contacts-table td:nth-child(7) { width: 17%; }

.contacts-error {
  color: #b94a48;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 979px) {
  .contacts-table-wrapper {
    overflow: visible;
  }

  .contacts-table,
  .contacts-table tbody,
  .contacts-table tr {
    display: block;
    width: auto;
  }

  /* Override the desktop nth-column widths before rendering card rows. */
  .contacts-table td:nth-child(n) {
    width: auto;
  }

  .contacts-table thead {
    display: none;
  }

  .contacts-table tbody tr {
    margin: 0 0 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  .contacts-table td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    gap: 8px;
    padding: 9px 12px;
    border-top: 1px solid #eee;
    text-align: left;
  }

  .contacts-table td:first-child {
    border-top: 0;
  }

  .contacts-table td::before {
    content: attr(data-label);
    color: #555;
    font-weight: bold;
  }

  .contacts-table a {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .contacts-table td {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}