/* Staff Profiles – frontend styles */

/* CSS custom property defaults (overridden per-instance by inline style) */
.sp-team-grid {
    --sp-img-w:      250px;
    --sp-img-h:      250px;
    --sp-font-family: inherit;
    --sp-name-size:  18px;
    --sp-name-color: #1a1a1a;
    --sp-title-size: 13px;
    --sp-title-color:#666666;
    --sp-bio-size:   14px;
    --sp-bio-color:  #444444;
    --sp-line-height:1.65;
}

.sp-team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 28px;
    margin: 36px auto;
    font-family: var(--sp-font-family);
}

.sp-member-card {
    text-align: center;
    width: var(--sp-img-w);
    flex-shrink: 0;
}

/* ── Photo ─────────────────────────────────────────────────────────────── */

.sp-member-photo-wrap {
    width: var(--sp-img-w);
    height: var(--sp-img-h);
    margin: 0 auto 18px;
    overflow: hidden;
    border: 3px solid #e0e0e0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-radius 0.25s;
}

/* Square (default) */
.sp-shape-square .sp-member-photo-wrap {
    border-radius: 10px;
}

/* Circle */
.sp-shape-circle .sp-member-photo-wrap {
    border-radius: 50%;
}

.sp-member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-photo-placeholder .dashicons {
    font-size: 80px;
    width: 80px;
    height: 80px;
    color: #ccc;
}

/* ── Text ──────────────────────────────────────────────────────────────── */

.sp-member-info { padding: 0 4px; }

.sp-member-name {
    margin: 0 0 4px;
    font-size: var(--sp-name-size);
    font-weight: 700;
    color: var(--sp-name-color);
    line-height: 1.3;
}

.sp-member-title {
    margin: 0 0 10px;
    font-size: var(--sp-title-size);
    font-weight: 600;
    color: var(--sp-title-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sp-member-bio {
    margin: 0;
    font-size: var(--sp-bio-size);
    line-height: var(--sp-line-height);
    color: var(--sp-bio-color);
    text-align: left;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .sp-member-card,
    .sp-member-photo-wrap {
        width: min(var(--sp-img-w), 160px);
        height: min(var(--sp-img-h), 160px);
    }
}

@media (max-width: 400px) {
    .sp-member-card,
    .sp-member-photo-wrap {
        width: min(var(--sp-img-w), 140px);
        height: min(var(--sp-img-h), 140px);
    }
}