/* ============================================================
   Member_Details.css
   Replaces the inline styles and page-level <style> block in
   member_details.aspx, and the member-details block in Mobile.css.
   ============================================================ */

/* --- Profile: photo + facts beside the bio ------------------- */
.member_profile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}

.member_card {
    flex: 0 0 auto;
    width: 280px;
    max-width: 100%;
    text-align: center;
}

.member_photo {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

#tblMember_details {
    width: 100%;
    margin: 0 auto;
}

    #tblMember_details th,
    #tblMember_details td {
        padding: 6px 10px;
        border-bottom: 1px solid var(--rule-light);
    }

    #tblMember_details th {
        width: 40%;
        text-align: left;
        font-weight: 700;
    }

    #tblMember_details td {
        text-align: left;
    }

    #tblMember_details tr:last-child th,
    #tblMember_details tr:last-child td {
        border-bottom: none;
    }

.profile_link_row {
    padding-top: 10px;
    text-align: center;
}

#bio_container {
    flex: 1 1 400px;
    min-width: 0; /* lets long words and links wrap */
}

    #bio_container p {
        margin: 0 0 20px;
    }

/* --- District map + vote chart ------------------------------ */
.member_visuals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 24px;
    align-items: start;
    margin: 24px 0;
}

.member_visual {
    text-align: center;
}

.member_visual_label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 700;
}

.district_map {
    display: block;
    width: 100%;
    max-width: 529px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--rule);
}

/* The Chart control writes inline width/height onto its <img>.
   max-width beats an inline width, but an inline height can only
   be overridden with !important. */
.vote_chart img {
    max-width: 100%;
    height: auto !important;
}