/* Профиль и правка вида карты: крупная обложка сверху, дальше поля
   и списки одного экрана. */

.kindcover {
  position: relative;
  aspect-ratio: 1.586;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.kindcover__face {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Кнопка в углу обложки — то карандаш (правка), то три точки
   (просмотр), но место и вид одни: та же роль, что у шестерёнки
   на лице карты клиента (card-face.css) — вид принадлежит этому виду
   карты, и кнопка стоит прямо на нём. */
.kindcover__act {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: var(--card-plate);
  color: var(--card-ink);
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.kindcover__edit:active { transform: scale(.94); }

.kindcover__edit .icon { width: var(--fs-md); height: var(--fs-md); }

@media (hover: hover) {
  .kindcover__edit:hover { background: var(--card-veil); }
}

.kindname {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Отступ под круглой кнопкой на профиле — как у остальных списков
   раздела, чтобы последняя строка клиентов не пряталась под ней. */
.screen--businessCardKind .plain {
  padding-bottom: calc(var(--sp-14) + var(--sp-4));
}

.kindedit__acts {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.kindedit__acts .btn { flex: 1; }