/* ================================================
   Person Page — Cherokee Hills Christian Church
   ================================================ */

/* ── Suppress Astra default post header border on people pages ── */
.single-people .entry-header,
.single-people .ast-article-single > .entry-header,
.single-people .ast-article-single,
.single-people .site-content .ast-container > .entry-header {
    border:         none !important;
    padding-bottom: 0 !important;
    margin-bottom:  0 !important;
    display:        none !important;
}

/* ── Page wrapper ── */
.person-page {
    width:      100%;
    max-width:  100%;
    margin:     0;
    padding:    2rem 1.5rem;
    box-sizing: border-box;
}

/* ── Two-column layout: photo | bio ── */
.person-top {
    display:       flex;
    gap:           3rem;
    align-items:   flex-start;
    margin-bottom: 2.5rem;
    width:         100%;
    box-sizing:    border-box;
}

/* ── Full width name header ── */
.person-header {
    margin-bottom:  1.5rem;
    padding-bottom: 1rem;
    border-bottom:  1px solid #e0e0e0;
}

/* Suppress any Astra default borders near the title area */
.person-page .entry-header,
.person-page .ast-single-post-order {
    border: none !important;
}

.person-name-heading {
    font-size:   1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin:      0;
    color:       #1a1a1a;
    white-space: normal;
}

.person-title-separator {
    color:       #01aeef;
    font-weight: 700;
    margin:      0 0.4rem;
}

.person-job-title {
    color:       #4f4f4f;
    font-weight: 400;
    font-size:   1.3rem;
}

/* ── Left column: photo only — 50/50 split ── */
.person-left {
    flex:      0 0 48%;
    width:     48%;
    max-width: 48%;
}

.person-photo img {
    width:         100%;
    height:        auto;
    border-radius: 8px;
    object-fit:    cover;
    display:       block;
}

/* ── Bio column ── */
.person-bio {
    flex:      1 1 0;
    min-width: 0;
    width:     0;
}

/* "About [Name]" inline label at start of bio */
.person-about-inline {
    font-weight:    700;
    color:          #0068A6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size:      1em;
    margin-right:   0.25rem;
    vertical-align: baseline;
}

.person-bio-content p {
    font-size:   16px;
    line-height: 1.7;
    color:       #333;
    margin:      0 0 1rem 0;
}

.person-bio-content ul,
.person-bio-content ol {
    font-size:    16px;
    line-height:  1.7;
    padding-left: 1.4rem;
    margin:       0 0 1rem 0;
}

/* ── Favorites section — full width below columns ── */
.person-favorites {
    border-top:    1px solid #e0e0e0;
    padding-top:   2rem;
    margin-bottom: 2rem;
}

.person-favorites-heading {
    font-size:      0.95rem;
    font-weight:    700;
    color:          #1a1a1a;
    margin:         0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.person-favorites-list {
    list-style:   disc;
    padding-left: 1.4rem;
    margin:       0;
    columns:      2;
    column-gap:   3rem;
}

.person-favorites-list li {
    font-size:     16px;
    line-height:   1.6;
    color:         #333;
    margin-bottom: 0.35rem;
    break-inside:  avoid;
}

/* ── Contact form ── */
.person-contact-form {
    border-top:  1px solid #e0e0e0;
    padding-top: 2rem;
    margin-top:  1rem;
}

.person-contact-form h2 {
    font-size:     1.3rem;
    margin-bottom: 1rem;
    color:         #1a1a1a;
}

/* ── Dot separator (staff directory cards) ── */
.person-dot-separator {
    color: #01aeef !important;
}

/* ── Responsive: tablet ── */
@media (max-width: 800px) {
    .person-top {
        gap: 2rem;
    }

    .person-left {
        flex:      0 0 auto;
        min-width: 220px;
        max-width: 45%;
    }

    .person-name-heading {
        font-size: 1.4rem;
    }

    .person-job-title {
        font-size: 1.1rem;
    }

    .person-favorites-list {
        columns: 1;
    }
}

/* ── Responsive: mobile — stack vertically ── */
@media (max-width: 580px) {
    .person-page {
        padding: 1.5rem 1rem;
    }

    .person-top {
        flex-direction: column;
        gap:            1.5rem;
    }

    .person-left {
        flex:      0 0 auto;
        width:     100%;
        max-width: 100%;
    }

    .person-bio {
        width: 100%;
    }

    .person-name-heading {
        font-size:   1.25rem;
        white-space: normal; /* allow wrapping on small screens */
    }

    .person-job-title {
        font-size: 1rem;
    }

    .person-bio-content p {
        font-size: 16px;
    }
}