.zuo-members-container { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.section-title { text-align: center; margin: 40px 0 30px; font-size: 2.2em; color: #334155; font-weight: 700; position: relative; }
.section-title::after { content: ''; display: block; width: 50px; height: 3px; background: #4facfe; margin: 10px auto 0; border-radius: 2px; }

.current-members, .alumni-members { display: grid; gap: 25px; margin-bottom: 50px; }

.member-card, .alumni-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); text-align: center; padding: 20px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.member-card:hover, .alumni-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

.member-card img, .alumni-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; margin-bottom: 15px; border: 1px solid #f1f5f9; }

.member-info h3 { margin: 0 0 8px; font-size: 1.25em; color: #1e293b; }
.member-info p { margin: 4px 0; color: #64748b; font-size: 0.95em; line-height: 1.4; }

.member-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.member-fun-facts { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; color: #94a3b8; font-size: 0.85em; }
.fact-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

.puma-datasource-tag { text-align: center; margin-top: 40px; opacity: 0.6; }
.puma-datasource-tag span { background: #f1f5f9; padding: 4px 12px; border-radius: 20px; font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }

/* Desktop & Tablet */
@media (min-width: 992px) {
    .current-members { grid-template-columns: repeat(3, 1fr); }
    .alumni-members { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) and (max-width: 991px) {
    .current-members { grid-template-columns: repeat(2, 1fr); }
    .alumni-members { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile */
@media (max-width: 767px) {
    .zuo-members-container { padding: 10px 5px; }
    .current-members, .alumni-members {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }
    .member-card, .alumni-card { padding: 12px; }
    .member-info h3 { font-size: 1.1em; }
    .member-info p { font-size: 0.85em; }
    .section-title { font-size: 1.8em; }
}