/* Business card layouts. Colours, type, spacing and radii come from the Pando tokens only. */
html, body { margin: 0; background: var(--surface); }
.bc { box-sizing: border-box; min-height: 100vh; max-width: 480px; margin: 0 auto; padding: var(--space-7) var(--space-4); display: grid; gap: var(--space-5); align-content: start; }

/* Layout "page": identity panel beside links and about on wide screens. */
.bc--page { max-width: 960px; }
@media (min-width: 768px) {
  .bc--page { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .bc--page > * { grid-column: 2; }
  .bc--page .bc-header { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: var(--space-7); }
}

.bc-header { padding: var(--space-5); gap: var(--space-4); }
.bc-logo { display: block; height: 40px; width: auto; max-width: 160px; margin-bottom: var(--space-2); }
.bc-photo { width: 72px; height: 72px; border-radius: var(--radius-full); object-fit: cover; }
.bc-name { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; }
.bc-role { margin: 0; font-size: 16px; line-height: 24px; color: var(--mint); }
.bc-tagline { margin: 0; font-size: 14px; line-height: 20px; }

.bc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bc-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); text-decoration: none; transition: background-color 150ms; }
.bc-link:hover { background: var(--line); }
.bc-link__text { display: grid; min-width: 0; }
.bc-link__label { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.bc-link__value { font-size: 14px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }

.bc-about { font-size: 14px; line-height: 20px; }
.bc-about > :first-child { margin-top: 0; }
.bc-about > :last-child { margin-bottom: 0; }
.bc-about h1, .bc-about h2 { font-size: 18px; line-height: 24px; }
.bc-about h3 { font-size: 16px; line-height: 22px; }
.bc-about a { color: var(--teal-ink); }

.bc-qr { border: none; padding: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); }
.bc-qr::backdrop { background: rgb(0 0 0 / 0.6); }
.bc-qr__body { display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-5); }
/* The QR code is plain black on white in every style and theme, so every scanner can read it. */
.bc-qr__code { background: #ffffff; color: #000000; padding: var(--space-3); border-radius: var(--radius-md); width: 200px; height: 200px; }
.bc-qr__code svg { display: block; width: 100%; height: 100%; }
.bc-caption { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin: 0; }

.bc-error { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .bc-link { transition: none; }
}