/* The contact card, as a component.
 *
 * Two pages draw this: the public card at contact.emetrealestate.com/<slug>,
 * and the live preview inside the creator on the hub. They must be the same
 * card — a preview that is a second implementation of the thing it previews is
 * a preview of something else, and the difference only shows up after someone
 * has published.
 *
 * So the markup comes from shared/card.js and the styling comes from here, and
 * neither page owns a copy of either. A page brings its own page-level layout
 * (where the card sits, what surrounds it) and nothing more.
 *
 * Everything is prefixed `ec-`. The palette comes from tokens.css, which must
 * be linked first.
 */

.ec {
  width: 100%;
  background: var(--surface);
  border-radius: calc(var(--r) * 3);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
  text-align: left;
}

/* ---------------------------------------------------------------- header */

.ec-top {
  background: var(--accent-ink);
  background-image:
    radial-gradient(120% 90% at 82% 4%, rgba(24, 99, 220, .9), transparent 62%);
  padding: 28px 24px 24px;
  text-align: center;
}

.ec-word {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: #FFFFFF;
}
.ec-word .ec-dot { color: var(--accent); }

.ec-face {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: block;
  margin: 20px auto 0;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .92);
  background: var(--surface-2);
}
/* .ec-face sets display, and a display rule beats the hidden attribute. */
.ec-face[hidden] { display: none; }

.ec-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--accent);
}

/* ---------------------------------------------------------------- name */

.ec-ident { padding: 22px 24px 2px; text-align: center; }

.ec-name {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-wrap: balance;
}
.ec-role {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.ec-co { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }
.ec-role[hidden], .ec-lic[hidden], .ec-headline[hidden] { display: none; }

.ec-headline {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  text-wrap: pretty;
}

.ec-lic {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- rows */

.ec-rows { padding: 20px 20px 24px; display: grid; gap: 10px; }
.ec-rows:empty { display: none; }

.ec-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-radius: 100px;
  background: var(--surface-2);
  text-decoration: none;
  color: var(--ink);
  transition: background .14s;
}
a.ec-row:hover { background: var(--surface-3); }

/* The booking row leads, so it carries the accent rather than sitting in the
   same grey as a phone number. Still a row, not a button: the button set is
   not designed yet and inventing one here would be a second style to unpick. */
.ec-book {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
a.ec-book:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.ec-book .ec-k { color: var(--accent); }
.ec-book .ec-v { color: var(--accent-ink); }

.ec-lines { display: flex; flex-direction: column; min-width: 0; }
.ec-k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ec-v {
  font-size: 15px;
  font-weight: 700;
  /* A long email on a narrow phone must not push the pill wider than the
     card. It truncates instead, and the row is a link either way. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- footer */

.ec-foot {
  padding: 18px 22px 24px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
  line-height: 1.6;
}

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