/* Three-column activity layout added by claude */
.activity-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.activity-col {
    box-sizing: border-box;
}

.activity-col-left  { flex: 0 0 18%; max-width: 18%; }
.activity-col-center { flex: 0 0 64%; max-width: 64%; }
.activity-col-right { flex: 0 0 18%; max-width: 18%; }


@media (max-width: 950px) {
    .activity-row {
        flex-wrap: wrap;
    }
    .activity-col-left,
    .activity-col-right {
        order: 2;          /* push below center */
        flex: 0 0 100%;
        max-width: 100%;
    }
    .activity-col-center {
        order: 1;          /* center appears first */
        flex: 0 0 100%;
        max-width: 100%;
    }
}