/* ── SmartConnect Person Display ──────────────────────────────────────
   Shared styles for [sc_broker_ae_*] and [sc_broker_am_*] shortcodes.

   Two components:
     .sc-person-bar    sticky narrow bar (drop at top of broker template)
     .sc-person-card   business-card panel (horizontal/vertical)

   Variables intentionally re-declared on the root selectors (not inherited
   from .sc-broker-page) so these components are standalone — drop on a
   tenant page, broker page, AE/AM template, or anywhere else and the
   styling holds without the broker reporting CSS being loaded.
   ────────────────────────────────────────────────────────────────────── */

.sc-person-bar,
.sc-person-card {
    --p-primary: var(--sc-hub-purple-deep, var(--sm-purple-deep, #321c44));
    --p-primary-soft: var(--sc-hub-purple, var(--sm-purple, #45295c));
    --p-accent: var(--sc-hub-orange, var(--sm-orange, #ed5c2e));
    --p-text: var(--sc-hub-body, var(--sm-body, #2c2622));
    --p-text-soft: #555570;
    --p-text-muted: var(--sc-hub-muted, var(--sm-muted, #6b5f78));
    --p-border: var(--sc-hub-border, var(--sm-border, #ddd4e8));
    --p-bg: var(--sc-hub-white, var(--sm-white, #FFFFFF));
    --p-bg-soft: var(--sc-hub-linen, var(--sm-linen, #faf8fc));
    --p-shadow: 0 1px 3px rgba(69, 41, 92, 0.06), 0 4px 16px rgba(69, 41, 92, 0.08);
    --p-shadow-lift: 0 4px 12px rgba(69, 41, 92, 0.10), 0 12px 32px rgba(69, 41, 92, 0.12);

    font-family: var(--sc-hub-font-body, var(--sm-font-body, 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
    color: var(--p-text);
    box-sizing: border-box;
}

.sc-person-bar *,
.sc-person-bar *::before,
.sc-person-bar *::after,
.sc-person-card *,
.sc-person-card *::before,
.sc-person-card *::after { box-sizing: border-box; }

/* Icon sizing — explicit width/height in CSS so theme stylesheets can't
   override the inline SVG attributes (which is what was making the
   calendar icon render at full viewBox size and cover the CTA text in
   v2.5.6/v2.5.7). */
.sc-person-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.sc-person-card__cta .sc-person-icon { width: 16px; height: 16px; }

/* ============================================================
   Sticky narrow bar — .sc-person-bar
   ============================================================ */

.sc-person-bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--p-border);
    box-shadow: var(--p-shadow);
    z-index: 50;
}

.sc-person-bar--sticky {
    position: sticky;
    top: 0;
}

/* WordPress admin bar offset when logged in. */
.admin-bar .sc-person-bar--sticky { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .sc-person-bar--sticky { top: 46px; }
}

.sc-person-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
}

.sc-person-bar__photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--p-bg);
    box-shadow: 0 1px 4px rgba(45, 19, 80, 0.12);
}

.sc-person-bar__identity {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex-shrink: 0;
    min-width: 0;
}

.sc-person-bar__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p-text-muted);
}

.sc-person-bar__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--p-text);
    margin-top: 2px;
}

.sc-person-bar__contact {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sc-person-bar__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--p-bg-soft);
    color: var(--p-text-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    line-height: 1;
    white-space: nowrap;
}
.sc-person-bar__pill:hover {
    background: var(--sc-hub-purple-lt, var(--sm-purple-lt, #f0eaf5));
    color: var(--p-primary);
    transform: translateY(-1px);
}

/* Bar CTA — !important on color/stroke is intentional. Themes (Astra,
   GeneratePress, Breakdance Default Theme, Hello, etc.) routinely set
   `a, a:visited, a:hover { color: var(--theme-primary) }` with high
   specificity. Without !important the link text inherits the theme
   purple, and because the SVG icon uses stroke="currentColor", the icon
   inherits the same color → purple icon + text on a purple-gradient
   button = invisible. We're explicitly overriding for these buttons only. */
.sc-person-bar a.sc-person-bar__cta,
.sc-person-bar a.sc-person-bar__cta:link,
.sc-person-bar a.sc-person-bar__cta:visited,
.sc-person-bar a.sc-person-bar__cta:hover,
.sc-person-bar a.sc-person-bar__cta:focus,
.sc-person-bar a.sc-person-bar__cta:active {
    color: #fff !important;
    text-decoration: none !important;
}

.sc-person-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--p-primary);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(45, 19, 80, 0.22);
}

.sc-person-bar__cta span { color: #fff !important; }
.sc-person-bar__cta svg,
.sc-person-bar__cta svg path,
.sc-person-bar__cta svg line,
.sc-person-bar__cta svg polyline,
.sc-person-bar__cta svg rect { stroke: #fff !important; color: #fff !important; }

.sc-person-bar__cta:hover {
    background: var(--p-primary-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 19, 80, 0.26);
}

/* Bar — tablet: collapse contact pills to icon-only to keep one row. */
@media (max-width: 900px) {
    .sc-person-bar__pill span:not(.sc-person-icon) {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
    }
    .sc-person-bar__pill {
        padding: 8px;
        width: 34px;
        height: 34px;
        justify-content: center;
    }
}

/* Bar — mobile: stack identity over contacts. */
@media (max-width: 600px) {
    .sc-person-bar__inner {
        padding: 10px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .sc-person-bar__contact {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
    .sc-person-bar__cta { padding: 8px 12px; }
}

/* ============================================================
   Business card — .sc-person-card
   ============================================================ */

.sc-person-card {
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: var(--p-shadow);
    display: flex;
    gap: 22px;
    transition: box-shadow 0.2s, transform 0.2s;
    max-width: 520px;
}

.sc-person-card:hover {
    box-shadow: var(--p-shadow-lift);
    transform: translateY(-1px);
}

.sc-person-card--horizontal { flex-direction: row;    align-items: center; }
.sc-person-card--vertical   { flex-direction: column; align-items: center; text-align: center; max-width: 320px; }

.sc-person-card__photo-wrap {
    flex-shrink: 0;
    position: relative;
}

.sc-person-card__photo-wrap::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--p-primary), var(--p-primary-soft));
    z-index: 0;
    opacity: 0.18;
}

.sc-person-card__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border: 3px solid var(--p-bg);
    box-shadow: 0 2px 8px rgba(45, 19, 80, 0.12);
}

.sc-person-card--vertical .sc-person-card__photo {
    width: 110px;
    height: 110px;
}

.sc-person-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sc-person-card--vertical .sc-person-card__body {
    align-items: center;
    width: 100%;
}

.sc-person-card__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p-primary-soft);
}

.sc-person-card__name {
    font-size: 20px;
    font-weight: 700;
    color: var(--p-text);
    margin: 2px 0 8px;
    line-height: 1.2;
}

.sc-person-card__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-person-card--vertical .sc-person-card__contact {
    align-items: center;
}

.sc-person-card__contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--p-text-soft);
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.3;
}
.sc-person-card__contact a:hover {
    color: var(--p-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sc-person-card__contact .sc-person-icon {
    color: var(--p-primary-soft);
}

/* Card CTA — same theme-override defense as bar CTA. See note there
   for why !important is appropriate (and scoped tightly) here. */
.sc-person-card a.sc-person-card__cta,
.sc-person-card a.sc-person-card__cta:link,
.sc-person-card a.sc-person-card__cta:visited,
.sc-person-card a.sc-person-card__cta:hover,
.sc-person-card a.sc-person-card__cta:focus,
.sc-person-card a.sc-person-card__cta:active {
    color: #fff !important;
    text-decoration: none !important;
}

.sc-person-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 20px;
    min-height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--p-primary) 0%, var(--p-primary-soft) 100%);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 2px 8px rgba(45, 19, 80, 0.22);
    align-self: flex-start;
}

.sc-person-card__cta span { color: #fff !important; }
.sc-person-card__cta svg,
.sc-person-card__cta svg path,
.sc-person-card__cta svg line,
.sc-person-card__cta svg polyline,
.sc-person-card__cta svg rect { stroke: #fff !important; color: #fff !important; }

.sc-person-card--vertical .sc-person-card__cta {
    align-self: stretch;
}

.sc-person-card__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(45, 19, 80, 0.28);
    filter: brightness(1.05);
}

/* Card — small viewports: collapse horizontal to centered/stacked. */
@media (max-width: 480px) {
    .sc-person-card--horizontal {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .sc-person-card--horizontal .sc-person-card__body {
        align-items: center;
    }
    .sc-person-card--horizontal .sc-person-card__contact {
        align-items: center;
    }
    .sc-person-card--horizontal .sc-person-card__cta {
        align-self: stretch;
    }
}

/* ============================================================
   Portal full-width bizcard — layout="portal" (portal-poc)
   ============================================================ */

.portal-bizcard,
.sc-person-portal-card {
    --portal-purple-900: var(--sc-hub-purple-deep, var(--sm-purple-deep, #321c44));
    --portal-purple-700: var(--sc-hub-purple, var(--sm-purple, #45295c));
    --portal-purple-600: var(--sc-hub-purple-mid, var(--sm-purple-mid, #5c3a78));
    --portal-purple-500: var(--sc-hub-purple-mid, var(--sm-purple-mid, #5c3a78));
    --portal-orange: var(--sc-hub-orange, var(--sm-orange, #ed5c2e));
    --portal-surface: var(--sc-hub-white, var(--sm-white, #ffffff));
    --portal-muted: var(--sc-hub-muted, var(--sm-muted, #6b5f78));
    --portal-border: var(--sc-hub-border, var(--sm-border, #ddd4e8));
    --portal-radius: var(--sc-hub-radius-md, var(--sm-radius-md, 14px));

    font-family: var(--sc-hub-font-body, var(--sm-font-body, 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
    box-sizing: border-box;
}

.portal-bizcard *,
.portal-bizcard *::before,
.portal-bizcard *::after {
    box-sizing: border-box;
}

.portal-bizcard {
    width: 100%;
    max-width: none;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    box-shadow: 0 4px 20px rgba(45, 19, 80, 0.08);
    padding: 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px 24px;
    align-items: center;
}

.portal-bizcard__photo {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(145deg, #e8e6ef, #d4d0de);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.portal-bizcard__photo-placeholder {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portal-muted);
}

.portal-bizcard--support-fallback .portal-bizcard__photo {
    background: linear-gradient(145deg, var(--p-bg-soft, #faf8fc) 0%, var(--sc-hub-purple-lt, var(--sm-purple-lt, #f0eaf5)) 100%);
}

.portal-bizcard--support-fallback .portal-bizcard__photo-placeholder {
    color: var(--p-primary-soft, #45295c);
}

.portal-bizcard__main {
    min-width: 0;
}

.portal-bizcard__eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--portal-purple-500);
}

.portal-bizcard h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--portal-purple-900);
    line-height: 1.2;
}

.portal-bizcard__role {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--portal-muted);
    line-height: 1.4;
}

.portal-bizcard__contact {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.portal-bizcard__contact a {
    font-weight: 600;
    color: var(--portal-purple-600);
    text-decoration: none;
}

.portal-bizcard__contact a:hover {
    text-decoration: underline;
}

.portal-bizcard__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.portal-bizcard .portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    text-align: center;
}

.portal-bizcard .portal-btn--primary {
    background: var(--portal-orange);
    color: #fff;
}

.portal-bizcard .portal-btn--primary:hover {
    filter: brightness(1.05);
}

.portal-bizcard .portal-btn--ghost {
    background: transparent;
    color: var(--portal-purple-600);
    border: 1px solid var(--portal-border);
}

.portal-bizcard .portal-btn--ghost:hover {
    background: rgba(112, 64, 176, 0.06);
}

.portal-bizcard .portal-btn--schedule {
    border-color: var(--portal-purple-500);
    color: var(--portal-purple-700);
}

@media (max-width: 720px) {
    .portal-bizcard {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .portal-bizcard__main {
        width: 100%;
    }

    .portal-bizcard__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}