/* ==========================================================================
   YHB - BUSINESS CONTACT CARD  |  shared styles for every consultant card
   Geometry derived from the reference design: the card is 540 x 477 CSS px.
   The only per-person difference is the CSS custom property --accent, which a
   card can override to tint the labels with its own brand colour.
   ========================================================================== */

:root {
  --page-bg-from: #eef5fd;
  --page-bg-to: #e0eaf3;
  --card-bg: #ffffff;
  --card-border: #eef2f7;
  --card-shadow: 0 16px 44px rgba(23, 60, 94, 0.10), 0 2px 8px rgba(23, 60, 94, 0.05);

  --ink-strong: #0e2038;
  --ink-body: #6f7d89;
  --ink-muted: #8e9aa5;

  --accent: #2a8f8f;
  --eyebrow: #2c5a7a;

  --blue: #1c68a6;
  --blue-hover: #175a91;
  --blue-shadow: 0 7px 16px rgba(28, 104, 166, 0.26);

  --hairline: #eceff4;
  --qr-border: #e7eef7;
  --green: #3ddc84;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px 34px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink-strong);
  background:
    radial-gradient(1080px 600px at 50% 32%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 68%),
    radial-gradient(720px 500px at 6% 4%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
    linear-gradient(118deg, var(--page-bg-from) 0%, #e8f1fa 52%, var(--page-bg-to) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ------------------------------------------------------------------ card */
.card {
  width: 100%;
  max-width: 540px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 42px 42px 46px;
  box-shadow: var(--card-shadow);
}

/* -------------------------------------------------------------- identity */
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  flex: 0 0 auto;
  width: 99px;
  height: 99px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  background: #e9edf2;
  box-shadow: 0 4px 13px rgba(23, 60, 94, 0.14);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.who { min-width: 0; }

.eyebrow {
  margin: 0 0 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

.name {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
}

.role {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- intro copy */
.intro {
  margin: 26px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-body);
}

/* ------------------------------------------------------------ contact row */
.contact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.contact-main {
  flex: 1 1 auto;
  min-width: 0;
}

.section-label {
  margin: 0 0 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.phone {
  min-width: 0;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: 0.004em;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------ copy button */
.copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(28, 104, 166, 0.22);
  transition: background-color .16s ease, transform .16s ease;
}

.copy:hover { background: var(--blue-hover); }
.copy:active { transform: translateY(1px); }
.copy:focus-visible { outline: 2px solid #0f4c81; outline-offset: 2px; }

.copy svg { flex: 0 0 auto; opacity: .95; }
.copy .copy-done { display: none; }

.copy.is-done { background: #17845f; }
.copy.is-done .copy-idle { display: none; }
.copy.is-done .copy-done { display: inline; }
.copy.is-done svg { display: none; }

/* -------------------------------------------------------------- QR panel */
.qr-panel {
  flex: 0 0 108px;
  width: 108px;
  min-height: 129px;
  margin-top: 12px;
  padding: 12px 19px 10px;
  border: 1px solid var(--qr-border);
  border-radius: 13px;
  background: #fff;
  text-align: center;
  box-shadow: 0 6px 18px rgba(23, 60, 94, 0.05);
}

.qr-panel img {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  display: block;
  border-radius: 4px;
}

.qr-panel .scan {
  margin: 6px 0 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8e9aa5;
}

/* ------------------------------------------------------------------- CTA */
.cta {
  width: 100%;
  margin-top: 16px;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 17px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--blue-shadow);
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.cta:hover {
  background: var(--blue-hover);
  box-shadow: 0 9px 20px rgba(28, 104, 166, 0.3);
}

.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid #0f4c81; outline-offset: 2px; }

.cta .dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.16);
}

.cta .arrow { flex: 0 0 auto; margin-left: auto; opacity: .95; }

/* ---------------------------------------------------------------- helper */
.helper {
  margin: 11px 0 0;
  font-size: 11.5px;
  line-height: 1.74;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 640px) {
  body { padding: 26px 14px 22px; }

  .card { padding: 28px 22px 32px; }

  .identity { gap: 16px; }
  .avatar { width: 78px; height: 78px; border-width: 2px; }
  .name { font-size: 21px; }
  .role { font-size: 12.5px; }
  .intro { margin-top: 22px; font-size: 13.5px; }

  .contact {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 24px;
    padding-top: 20px;
  }

  .contact-main { display: contents; }

  .section-label { order: 1; margin-bottom: 0; }
  .phone-row { order: 2; gap: 10px; }
  .qr-panel { order: 3; }
  .cta { order: 4; margin-top: 4px; }
  .helper { order: 5; }

  .phone { font-size: 18px; }
  .copy { height: 32px; }

  .qr-panel {
    align-self: center;
    flex: 0 0 auto;
    width: 100%;
    max-width: 190px;
    min-height: 0;
    margin: 0 auto;
    padding: 14px;
  }

  .qr-panel img { width: 110px; height: 110px; }
}

@media print {
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; border-color: #dfe6ee; }
}