/**
 * Staff Bios — Dance Quest About sections 1-2. Live values: 60px section
 * padding, 30px row padding, one-quarter photo column, 26px names, 16px body
 * at 1.7 line height, dividers in rgba(0,0,0,.17).
 */
.staffbios {
    padding: 60px 0;
    background: var(--background, #ffffff);
}

.staffbios-list {
    width: 80%;
    margin-inline: auto;
}

.staffbios-member {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 3%;
    align-items: start;
    padding: 30px 0;
}

.staffbios-member + .staffbios-member {
    border-top: 1px solid rgba(0, 0, 0, 0.17);
}

.staffbios-member--right { grid-template-columns: 3fr 1fr; }
.staffbios-member--right .staffbios-photo { order: 2; justify-self: end; }

.staffbios-photo img {
    display: block;
    width: 240px; /* live photos display at 240px */
    max-width: 100%;
    height: auto;
}

.staffbios-name {
    margin: 0 0 10px;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-weight: var(--font-heading-weight, 500);
    font-size: 26px;
    line-height: 1.2;
    color: var(--foreground, #333333);
}

.staffbios-bio {
    font-family: var(--font-paragraph, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted-foreground, #666666);
}

.staffbios-bio p { margin: 0 0 1em; }
.staffbios-bio p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
    .staffbios-member,
    .staffbios-member--right { grid-template-columns: 1fr; gap: 20px; }
    .staffbios-member--right .staffbios-photo { order: 0; }
    .staffbios-photo { max-width: 260px; }
}

.staffbios--plain .staffbios-member + .staffbios-member { border-top: 0; }