/* The contact card (.cv): a colour header, then one floating row per way to reach the person.
   Used by the public card pages, the builder preview and the home page, so it sizes itself
   from its own width (cqi), never from the window. card-view.js sets --brand and --on-brand. */
.cv {
  --brand: var(--accent);
  --on-brand: #fff;
  container-type: inline-size;
  display: grid;
  gap: 1.25rem;
  color: var(--ink);
  text-align: left;
}

.cv-face {
  display: grid;
  justify-items: center;
  margin-bottom: -4.25rem; /* the first rows float over its bottom edge */
  padding: max(2.25rem, env(safe-area-inset-top)) 1.5rem 5.75rem;
  border-radius: 0 0 1.75rem 1.75rem;
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
}

.cv-avatar {
  display: grid;
  place-items: center;
  width: min(10rem, 44cqi);
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.26);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
  font-size: min(3.25rem, 15cqi);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

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

.cv-avatar .icon {
  width: 40%;
  height: 40%;
  opacity: 0.7;
}

.cv-name {
  margin: 1rem 0 0;
  font-size: clamp(1.625rem, 7.5cqi, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.cv-role {
  margin-top: 0.375rem;
  font-weight: 500;
  line-height: 1.3;
}

.cv-bio {
  max-width: 22rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.cv-name:empty,
.cv-role:empty,
.cv-bio:empty {
  display: none;
}

.cv .is-empty {
  opacity: 0.5;
}

.cv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.cv-actions .btn {
  min-height: 3.25rem;
  border-color: var(--on-brand);
  background: transparent;
  color: var(--on-brand);
}

.cv-actions .cv-save {
  background: var(--on-brand);
  color: var(--brand);
}

/* The page's blue focus ring cannot be seen on a blue or dark card: use the card's text colour */
.cv-face :focus-visible {
  outline-color: var(--on-brand);
}

.cv-rows {
  display: grid;
  gap: 0.625rem;
  margin: 0 1.25rem;
  padding: 0;
  list-style: none;
}

.cv-rows a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.25rem;
  padding: 0.625rem 1rem 0.625rem 0.75rem;
  border-radius: 0.875rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s var(--ease);
}

/* Each kind of row has its own colour, so the list reads at a glance */
.cv-rows li {
  --row: var(--ink);
}

.cv-rows [data-kind="phone"] {
  --row: #2450e6;
}

.cv-rows [data-kind="whatsapp-logo"] {
  --row: #128c7e;
}

.cv-rows [data-kind="envelope-simple"] {
  --row: #c2410c;
}

.cv-rows [data-kind="globe"] {
  --row: #0e7490;
}

.cv-rows [data-kind="instagram-logo"] {
  --row: #d62976;
}

.cv-rows [data-kind="linkedin-logo"] {
  --row: #0a66c2;
}

.cv-rows [data-kind="facebook-logo"] {
  --row: #1877f2;
}

.cv-rows [data-kind="map-pin"] {
  --row: #dc2626;
}

.cv-rows .icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6875rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--row) 12%, transparent);
  color: var(--row);
}

.cv-rows .cv-chev {
  width: 1rem;
  height: 1rem;
  padding: 0;
  background: none;
  color: var(--muted);
}

.cv-rows b,
.cv-rows small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-rows b {
  font-weight: 600;
}

.cv-rows small {
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (hover: hover) {
  .cv-rows a:hover {
    transform: translateY(-2px);
  }
}

/* The public card page around the card */
.card-page {
  display: grid;
  gap: 1.25rem;
  width: min(100%, 28rem);
  margin: 0 auto;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

.card-page > :not(.cv) {
  margin-inline: 1.25rem;
}

.show-qr {
  text-align: center;
}

.show-qr summary {
  padding: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.show-qr img {
  display: block;
  width: min(15rem, 100%);
  height: auto;
  margin: 0.75rem auto;
  border-radius: 0.875rem;
  background: #fff;
  image-rendering: pixelated;
}

.show-qr p,
.card-foot {
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

/* A phone to show a card in, on the home page and in the builder */
.phone {
  width: min(100%, 19.5rem);
  aspect-ratio: 9 / 18.5;
  padding: 0.5rem;
  border-radius: 2.75rem;
  background: #0d0f15;
  box-shadow: 0 2px 4px rgb(13 15 21 / 0.2), 0 30px 60px -20px rgb(13 15 21 / 0.45);
}

.phone-screen {
  height: 100%;
  overflow: hidden auto;
  border-radius: 2.25rem;
  background: var(--bg);
  scrollbar-width: none;
}

.phone .cv {
  zoom: 0.8; /* a 390px phone shown at about 310px */
  padding-bottom: 1.5rem;
}