/* Shared by the admin preview and the profile in the call. */
.therapist-card {
    --profile-inset: 24px;
    --profile-surface: #fdfcf8;
    --profile-ink: #34483d;
    --profile-body: #536157;
    --profile-muted: #737d70;
    --profile-line: #e5e6dd;
    color: var(--profile-ink);
    font-family: var(--sans);
    background: var(--profile-surface);
}

/* Keep the person and the dismiss control visible when a longer biography scrolls. */
.therapist-card-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 24px var(--profile-inset) 22px;
    background: var(--profile-surface);
}
.therapist-card-person { display: flex; align-items: center; gap: 18px; }
.therapist-card-portrait {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 80px;
    width: 80px;
    height: 96px;
    overflow: hidden;
    border: 1px solid #dfe4d8;
    border-radius: 20px;
    background: #e9ede2;
    color: #7b8d6f;
    font: 32px var(--serif);
}
.therapist-card-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.therapist-card-person > div { min-width: 0; padding-right: 32px; }
.therapist-card .therapist-card-person h2 { margin: 0; color: var(--profile-ink); font: 400 36px/1.1 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.therapist-card-person p { margin: 8px 0 0; color: var(--profile-body); font: 500 13px/1.45 var(--sans); overflow-wrap: anywhere; }
.therapist-card-pronouns { display: block; margin-top: 4px; color: var(--profile-muted); font: 11px/1.5 var(--sans); }
.therapist-card-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--profile-muted);
    cursor: pointer;
}
.therapist-card-close::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #efefe8; transition: background-color .15s; }
.therapist-card-close .icon { position: relative; font-size: 13px; }
.therapist-card-close:hover::before { background: #e5e7dd; }
.therapist-card-close:focus-visible { outline: 2px solid #839575; outline-offset: -3px; }

.therapist-card-content { display: grid; gap: 20px; margin-inline: var(--profile-inset); padding-block: 22px; border-top: 1px solid var(--profile-line); }
.therapist-card-content:not(:has(> [data-profile-optional]:not([hidden]))) { display: none; }
.therapist-card .therapist-card-content h3 { margin: 0; color: var(--profile-ink); font: 500 13px/1.4 var(--sans); letter-spacing: 0; }
.therapist-card-content p { margin: 8px 0 0; color: var(--profile-body); font: 13px/1.7 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.therapist-card-approach { padding: 16px 18px; border: 1px solid #e6e7dc; border-radius: 16px; background: #f2f3eb; }

/* Labels and values share a baseline and column across both supporting details. */
.therapist-card-details { display: grid; gap: 16px; margin: 0 var(--profile-inset); padding-block: 20px 24px; border-top: 1px solid var(--profile-line); }
.therapist-card-details:not(:has(> div:not([hidden]))) { display: none; }
.therapist-card-details > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.therapist-card-details dt { color: var(--profile-muted); font: 400 12px/1.65 var(--sans); }
.therapist-card-details dd { margin: 0; color: var(--profile-body); font: 400 12px/1.65 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.therapist-card [hidden] { display: none !important; }

@media (max-width: 420px) {
    .therapist-card { --profile-inset: 22px; }
    .therapist-card-header { padding-block: 22px 20px; }
    .therapist-card-person { gap: 16px; }
    .therapist-card-portrait { flex-basis: 72px; width: 72px; height: 88px; border-radius: 18px; }
    .therapist-card .therapist-card-person h2 { font-size: 33px; }
    .therapist-card-details > div { grid-template-columns: 68px minmax(0, 1fr); column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .therapist-card-close::before { transition: none; } }
@media (forced-colors: active) { .therapist-card-approach { border-color: CanvasText; } }