/* Page geometry and feature states; shared appearance lives in styles.css and families.css. */
.profile-intro-video{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--radius-md);background:var(--paper)}
.profile-intro-video-play{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;width:100%;height:100%;padding:1.2rem;border:0;background:transparent;color:var(--minder-teal-dark);font-weight:800;text-align:center}.profile-intro-video-play:hover{background:var(--surface-brand)}.profile-intro-video-play:focus-visible{outline:3px solid var(--primary);outline-offset:-5px}.profile-intro-video-play i{font-size:clamp(2.3rem,5vw,3.5rem)}.profile-intro-video-play small{font-size:.78rem;font-weight:500;color:var(--muted)}.profile-intro-video iframe{width:100%;height:100%;border:0}.profile-video-external{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.82rem;font-weight:700;text-decoration:none}
.break-word {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto;
    }
    .profile-bio-content {
        line-height: 1.8;
        font-size: 1.1rem;
    }
    .metadata-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        background: var(--paper) !important;
        padding: 0.5rem 1rem !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        max-width: 100%;
    }
    /* Allow long values (e.g. education summary) to wrap inside the pill
       instead of being truncated or overflowing the container. */
    .metadata-pill--wrap {
        white-space: normal !important;
        align-items: flex-start !important;
        border-radius: 16px !important;
    }
    .metadata-pill--wrap .bi {
        margin-top: 0.15rem;
    }
    /* Specialty / qualification badges: wrap long labels, never clip them. */
    .spec-badge {
        white-space: normal !important;
        text-align: center;
        max-width: 100%;
    }
    /* border-opacity-* utilities don't exist in Bootstrap 5.1, so give the
       primary specialty badges the faint teal border the design intended. */
    .spec-badge.border-primary { border-color: rgba(54, 117, 136, 0.25) !important; }
    /* Centered-label divider above the specialties / methods clouds. */
    .profile-divider {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        margin: 0.25rem 0 1rem;
    }
    .profile-divider::before,
    .profile-divider::after {
        content: "";
        flex: 1 1 0;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(54, 117, 136, 0.28), transparent);
    }
    .profile-divider > span {
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--minder-teal-dark);
        white-space: nowrap;
    }
    /* Unify the success-green accents into the Minder teal on this profile so
       the page reads with a single brand accent (scoped to this page only). */
    .text-success { color: var(--minder-teal-dark) !important; }
    .bg-success:not([class*="bg-opacity"]) { background-color: var(--minder-teal) !important; }
    .border-success { border-color: rgba(54, 117, 136, 0.25) !important; }
    /* Section headings: a 2-column grid — icon in its own auto column, text in
       a 1fr column. Every line of the (possibly wrapping) text aligns in the
       text column; the icon is baseline-aligned to the first line. */
    .section-heading {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.5rem;
        align-items: baseline;
    }
    .section-heading > .bi {
        line-height: 1;
    }
    @media (min-width: 768px) {
        .border-md-end { border-right: 1px solid rgba(0,0,0,0.05) !important; }
    }
    @media (max-width: 767.98px) {
        .avatar-xxxl {
            width: 120px;
            height: 120px;
        }
    }
    /* Mobile + stacked tablet (below lg): the main professional card fills the
       entire screen width with no surrounding padding and no gap above it — one
       full-screen container. The sidebar cards stay inset as normal contained
       cards. Desktop (lg+) is unaffected. */
    @media (max-width: 991.98px) {
        /* Neutralise the base layout's <main class="main-container"> padding
           (2rem 1rem) — the real source of the side padding and the gap above
           the profile. Scoped to this page only via its extracss <style>. */
        .main-container {
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-top: 0 !important;
        }
        .profile-page-container {
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-top: 0 !important;
        }
        .profile-page-container > .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .profile-page-container > .row > .col-lg-8 {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        /* The full-bleed main card squares its corners on mobile; the sidebar
           cards keep their radius. */
        .profile-page-container > .row > .col-lg-8 > .card {
            border-radius: 0 !important;
        }
        .profile-page-container > .row > .col-lg-4 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
    }