/* The business card itself, shared by the public page and the app. */

.bcard {
  --card-bg: #fff;
  --card-ink: var(--forest);
  --card-sub: var(--sage);
  --accent: var(--green);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.586;
  width: 100%;
  padding: 6% 6.5%;
  border-radius: 18px;
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: 0 2px 4px rgb(20 46 38 / 10%), 0 18px 40px rgb(20 46 38 / 18%);
  display: flex; flex-direction: column; justify-content: space-between;
  container-type: inline-size;
}

/* Echo of the logo: a field of circles cut out of a block of colour */
.bcard-dots {
  position: absolute; top: 0; right: 0; bottom: 0; width: 38%;
  background:
    radial-gradient(circle, var(--card-bg) 0 46%, transparent 47%) 50% -2.5cqw / 9cqw 9cqw,
    var(--accent);
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent);
  mask-image: linear-gradient(to left, #000 35%, transparent);
  opacity: .9;
}

.bcard-brand { position: relative; display: flex; align-items: center; gap: .5em; font-size: max(13px, 4.2cqw); letter-spacing: .01em; }
.bcard-brand img { width: 1.9em; height: 1.9em; border-radius: 3px; }
.bcard-brand b { font-weight: 400; color: var(--card-sub); }

.bcard-person { position: relative; display: flex; align-items: center; gap: 4cqw; max-width: 78%; }
.bcard-photo {
  width: 19cqw; height: 19cqw; flex: none; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--card-bg); box-shadow: 0 0 0 2px var(--accent);
}
.bcard-initials {
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 7cqw;
}
.bcard-name { margin: 0; font-size: max(18px, 6.6cqw); font-weight: 700; color: var(--card-ink); line-height: 1.1; }
.bcard-title { margin: .25em 0 0; font-size: max(13px, 4cqw); color: var(--card-sub); line-height: 1.25; }
.bcard-dept { margin: .15em 0 0; font-size: max(12px, 3.4cqw); color: var(--card-sub); opacity: .85; }

.theme-forest { --card-bg: var(--forest); --card-ink: #fff; --card-sub: #a9c9b8; }
.theme-green  { --card-bg: var(--green); --card-ink: #fff; --card-sub: #e3f7ea; --accent: #fff; }
.theme-green .bcard-dots { opacity: .3; }
.theme-green .bcard-initials { color: var(--green); }
.theme-stone  { --card-bg: var(--stone); --card-ink: var(--forest); --card-sub: var(--sage); --accent: var(--sage); }

/* ---------- public card page ---------- */

body.public { background: linear-gradient(180deg, var(--forest) 0 260px, var(--stone) 260px); min-height: 100vh; }
.public-main { max-width: 480px; margin: 0 auto; padding: max(1.25rem, env(safe-area-inset-top)) 1rem 1rem; display: grid; gap: 1rem; }
.public .bio { margin: .25rem .25rem 0; color: var(--muted); }

.actions { list-style: none; margin: 0; padding: .35rem 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.actions li + li { border-top: 1px solid var(--line); }
.actions a { display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; color: var(--ink); text-decoration: none; }
.actions .icon { color: var(--green); }
.actions span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.actions small { color: var(--muted); font-size: .78rem; }

.public-footer { text-align: center; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
.public-footer img { width: 240px; height: auto; mix-blend-mode: multiply; }