/* Team member cards - modernized with Flexbox and accessibility */
.team-member {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md, 1rem);
    margin: var(--space-xs, 0.25rem);
    width: 8rem;
    text-align: center;
    vertical-align: top;
    transition: transform var(--transition-fast, 150ms ease-in-out),
                background-color var(--transition-fast, 150ms ease-in-out);
    border-radius: var(--radius-md, 0.375rem);
}

.team-member:hover,
.team-member:focus-within {
    transform: translateY(-4px);
    background-color: var(--bg-secondary, #f8f9fa);
}

.team-member-photo {
    display: block;
    margin-bottom: var(--space-sm, 0.5rem);
}

.team-member-photo img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    box-shadow: var(--shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    transition: box-shadow var(--transition-fast, 150ms ease-in-out);
}

.team-member:hover .team-member-photo img,
.team-member:focus-within .team-member-photo img {
    box-shadow: var(--shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.team-member-name {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--text-primary, #212529);
    word-break: break-word;
}

.team-member-handle {
    display: none;
}

/* Responsive adjustments for team members */
@media (max-width: 575.98px) {
    .team-member {
        width: 7rem;
    }

    .team-member-photo img {
        width: 56px;
        height: 56px;
    }

    .team-member-name {
        font-size: 0.85rem;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .team-member:hover,
    .team-member:focus-within {
        background-color: var(--bg-secondary, #2d2d2d);
    }
}

/* Sponsor box styles */
.only-dark { display: none !important; }

@media (prefers-color-scheme: dark) {
    .only-light { display: none !important; }
    .only-dark { display: inline-block !important; }
}

:root {
    --sponsor-text: #0d652d;
    --sponsor-bg: #e6f4ea;
    --sponsor-border: #a8dab5;
    --sponsor-accent: #1e8e3e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sponsor-text: #81c995;
        --sponsor-bg: #0d3a1f;
        --sponsor-border: #14592d;
        --sponsor-accent: #34a853;
    }
}

.hero.summary-box {
    margin-bottom: var(--space-lg);
}

.sponsor-box {
    color: var(--sponsor-text);
    background-color: var(--sponsor-bg);
    border-color: var(--sponsor-border);
    border-left: 4px solid var(--sponsor-accent);
    padding: var(--space-lg);
}

.sponsor-box img {
    margin: var(--space-sm) var(--space-xl) var(--space-sm) 0;
    vertical-align: middle;
}