/* passport.css — ProviderPassport tier B (docs/design/DESIGN-SYSTEM.md section 5
   "ProviderPassport" / docs/design/PROVIDER-PASSPORT-SPEC.md section 1 tier B).
   Used today by api/templates/companies/detail.html (management company /
   contractor passport, run 3, docs/design/BRIEF-domcom.md section 4).

   Tokens only from api/static/gde-tokens.css (DESIGN-SYSTEM.md sections 2/4)
   — no new radius/shadow/color values, per that section's prohibition. */

.passport {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 24px);
  align-items: start;
}

@media (min-width: 960px) {
  .passport {
    /* Sidebar ~1/3, main ~2/3, per DESIGN-SYSTEM.md section 5 ProviderPassport. */
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  }
}

.passport-sidebar,
.passport-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 16px);
  min-width: 0;
}

.passport-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-3, 16px);
  box-shadow: var(--shadow-1);
}

/* ── Sidebar: identity ── */
.passport-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2, 12px);
}

.passport-logo {
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  object-fit: cover;
  flex-shrink: 0;
}

.passport-logo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
}

.passport-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.passport-role {
  color: var(--ink-2);
  font-size: 0.92rem;
  margin: 2px 0 0;
}

/* ── Sidebar: badge row ── */
.passport-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.passport-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.passport-badge--verified {
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.passport-badge--partner {
  background: var(--warn-soft);
  color: var(--warn);
}

.passport-badge--ghost {
  background: var(--surface-2);
  color: var(--ink-3);
}

/* ── Sidebar: facts ── */
.passport-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
}

.passport-facts dt {
  color: var(--ink-3);
  font-size: 0.78rem;
}

.passport-facts dd {
  margin: 0 0 6px;
  color: var(--ink);
}

/* ── Sidebar: verify checklist ── */
.passport-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
}

.passport-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.passport-checklist__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  margin-top: 1px;
}

.passport-checklist__icon--ok {
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.passport-checklist__icon--pending {
  background: var(--surface-2);
  color: var(--ink-3);
}

/* ── Sidebar: contact + social ── */
.passport-social-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.passport-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--ink);
}

.passport-social-link:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

/* ── Main: stat tiles ── */
.passport-stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2, 12px);
}

.passport-stat-tile {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--space-3, 16px);
  text-align: center;
}

.passport-stat-tile__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

.passport-stat-tile__label {
  color: var(--ink-3);
  font-size: 0.8rem;
  margin-top: 4px;
}

/* ── Main: team photo + about ── */
.passport-team-photo {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* ── Main: certs grid ── */
.passport-certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2, 12px);
}

@media (max-width: 768px) {
  .passport-certs-grid {
    grid-template-columns: 1fr;
  }
}

.passport-cert-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-2, 12px);
  font-size: 0.86rem;
}

.passport-cert-card__title {
  font-weight: 600;
  color: var(--ink);
}

/* ── Main: tags ── */
.passport-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.passport-tag {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── Main: houses-served grid (reuses partials/house_card.html) ── */
.passport-houses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3, 16px);
}

/* ── Main: follow + share ── */
.passport-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.7;
}

.passport-share-row {
  display: flex;
  gap: var(--space-2, 12px);
  flex-wrap: wrap;
  align-items: center;
}

.passport-qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-3, 16px);
}

.passport-qr-modal.open {
  display: flex;
}

.passport-qr-modal__card {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--space-4, 24px);
  text-align: center;
  box-shadow: var(--shadow-2);
  max-width: 320px;
  width: 100%;
}

.passport-qr-modal__img {
  width: 220px;
  height: 220px;
  margin: var(--space-2, 12px) auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

/* ── Focus ring — DESIGN-SYSTEM.md section 9 ── */
.passport-follow-btn:focus-visible,
.passport-social-link:focus-visible {
  outline: 3px solid var(--cta-ring);
  outline-offset: 2px;
}