/* ============================================================
   Визитка разработчика — portable "made by" card
   All rules are scoped to .visitka* classes and use inline fallback
   colors (not the host site's tokens), so this folder drops into any
   project unmodified.
   ============================================================ */

/* Lock page scroll while the card is open (iOS otherwise scrolls the
   page behind, toggling the toolbar and making the dialog jump).
   Scoped to .visitka so it won't fight a host site's own dialog rule. */
html:has(.visitka[open]) { overflow: hidden; }

.visitka {
  border: 0; padding: 0; margin: auto;
  width: min(92vw, 680px);
  border-radius: 16px;
  background: #fff; color: #141C2B;
  box-shadow: 0 20px 55px rgba(20, 28, 43, .18);
  overscroll-behavior: contain;
  font-family: inherit;
}
.visitka::backdrop { background: rgba(20, 28, 43, .6); }

.visitka__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(12px, 4vw, 36px);
  padding: clamp(18px, 4vw, 32px);
  padding-right: max(clamp(18px, 4vw, 32px), 44px);  /* room for the close button, so it never overlaps the name */
}

.visitka__photo {
  width: clamp(76px, 22vw, 220px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: #ECEDEF;
}
.visitka__photo img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply;    /* photo's white background reads as the grey backing */
}

.visitka__name { font-size: clamp(1rem, 4.8vw, 1.9rem); font-weight: 700; line-height: 1.15; margin: 0; }
.visitka__role { color: #6B7280; margin: 6px 0 0; }

.visitka__links { display: flex; flex-wrap: wrap; gap: 12px clamp(10px, 2vw, 20px); margin-top: clamp(14px, 3vw, 24px); }
.visitka__link {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #141C2B; font-size: clamp(.75rem, 2.6vw, .95rem); text-decoration: none;
}
.visitka__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(42px, 9vw, 64px); height: clamp(42px, 9vw, 64px);
  border-radius: 50%;
  background: #fff; color: #2563EB; border: 1px solid #E7EBF0;
  box-shadow: 0 1px 2px rgba(20,28,43,.05), 0 1px 3px rgba(20,28,43,.05);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.visitka__icon svg { width: 45%; height: 45%; }
.visitka__link:hover .visitka__icon { background: #2563EB; color: #fff; transform: translateY(-2px); }

.visitka__foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  border-top: 1px solid #E7EBF0;
  padding: 12px clamp(20px, 4vw, 32px);
  color: #6B7280; font-size: .9rem;
}
.visitka__foot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.visitka__site { color: inherit; text-decoration: none; transition: color .15s ease; }
.visitka__site:hover { color: #2563EB; }

.visitka__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: #F1F2F4; color: #141C2B; cursor: pointer;
}
.visitka__close svg { width: 16px; height: 16px; }
.visitka__close:hover { background: #E5E7EB; }

@media (max-width: 30em) {
  .visitka__body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .visitka__links { display: grid; grid-template-columns: repeat(2, 96px); justify-content: center; gap: 14px 12px; }
}

/* Trigger button used in a host page's footer ("Разработано — <name>") */
.visitka-trigger {
  background: none; border: 0; padding: 0; font: inherit;
  color: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .15s ease;
}
.visitka-trigger:hover { color: #2563EB; }