/* ============================================================
   CSS for Leadership / Parish Elders page
   ============================================================ */

/* ---------- Page Header / Hero ---------- */
.page-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    position: relative;
    padding: 110px 0 80px;
    overflow: hidden;
}

.page-header .overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, .15), transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(14, 165, 233, .12), transparent 50%);
    pointer-events: none;
}

.page-header h1 {
    font-family: 'Playfair Display', serif;
    letter-spacing: 1px;
}

.page-header .lead {
    opacity: .85;
}

/* ---------- Section Group Headings ---------- */
.section-group-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: .25rem;
}

.section-group-subtitle {
    font-size: .95rem;
    color: #64748b;
    margin-bottom: 0;
}

.section-divider {
    width: 60px;
    height: 3px;
    border: none;
    border-radius: 2px;
    margin: .75rem auto 0;
}

/* Custom colours per church */
.section-divider.office {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.section-divider.tumaini {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.section-divider.shalom {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.section-divider.miracle {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.section-divider.emmanuel {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.section-divider.retired {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}

.section-divider.history {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

/* ---------- Church Badge on Cards ---------- */
.church-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 3px 10px;
    border-radius: 50px;
    color: #fff;
}

.church-badge.office {
    background: #1e293b;
}

.church-badge.tumaini {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.church-badge.shalom {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.church-badge.miracle {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1e293b;
}

.church-badge.emmanuel {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.church-badge.retired {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
    color: #334155;
}

/* ---------- Elder Card ---------- */
.elder-card {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    background: #fff;
}

.elder-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12) !important;
}

/* ---------- Elder Image ---------- */
.elder-img {
    width: 130px;
    height: 150px;
    object-fit: cover;
    margin: 0 auto 12px;
    border: 3px solid #f1f5f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.elder-card:hover .elder-img {
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

/* ---------- Card Text ---------- */
.elder-card .card-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
    transition: color .3s ease;
}

.elder-card:hover .card-title {
    color: #ef4444;
}

.elder-card .elder-district {
    font-size: .85rem;
    color: #6366f1;
    font-weight: 500;
}

.elder-card .elder-role {
    font-size: .8rem;
    color: #94a3b8;
}

/* ---------- Background alternation ---------- */
.leadership-section {
    padding: 3.5rem 0;
}

.leadership-section:nth-child(even) {
    background-color: #f8fafc;
}

.leadership-section:nth-child(odd) {
    background-color: #fff;
}

/* ---------- Past Leaders Table ---------- */
.history-section {
    padding: 3.5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.history-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.history-table thead {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
}

.history-table thead th {
    font-weight: 600;
    padding: 14px 18px;
    font-size: .9rem;
    letter-spacing: .3px;
    border: none;
}

.history-table tbody td {
    padding: 12px 18px;
    font-size: .9rem;
    vertical-align: middle;
    border-color: #f1f5f9;
}

.history-table tbody tr {
    transition: background .2s ease;
}

.history-table tbody tr:hover {
    background-color: #f1f5f9;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
    .page-header {
        padding: 90px 0 60px;
    }

    .section-group-title {
        font-size: 1.4rem;
    }

    .elder-img {
        width: 110px;
        height: 130px;
    }

    .leadership-section {
        padding: 2.5rem 0;
    }

    .history-table thead th,
    .history-table tbody td {
        padding: 10px 12px;
        font-size: .82rem;
    }
}