#staff img {
    max-width: 300px;
    display: block;
    margin: 0 auto
}


/* Reset the nested ul so it overrides the list-style: disc and padding from your base CSS */
#staff li ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: static; /* Resetting context */
}

/* 5. Elements 3 & 4 should not impact layout: We make the parent card relative 
   so we can absolutely position the name and bio inside it. */
#staff > ul > li {
    position: relative;
}

/* 3. First li (role) placed on the top border of the photo in a small frame */
#staff li ul li:nth-child(1) {
    position: absolute;
    top: 1.5rem; 
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--theme-bg);
    color: var(--theme-fg);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--theme-fg_accent);
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 10;
}

/* 2. Second li (Name) stands below the photo in large text */
#staff li ul li:nth-child(2) {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-top: 1rem;
    color: var(--theme-fg);
}

#staff li:hover ul li:nth-child(2) {
    color: var(--theme-fg_accent);
}


/* 4. Last li (Bio) pops up below element 3 when the card is hovered */
#staff li ul li:nth-child(3) {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--theme-bg, #ffffff);
    color: var(--theme-fg, #333333);
    padding: 0.75rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 300px; 
    max-width: 100%;
    z-index: 10;
    
    /* Hide the element initially */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Trigger the popup when hovering over the main card container */
#staff > ul > li:hover ul li:nth-child(3) {
    opacity: 1;
    visibility: visible;
}