/* Fixed participant layout: three equal video cards per row at every size. */
.video-grid-container {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#video-grid,
#video-grid.single,
#video-grid.double,
#video-grid.multi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-content: start;
    width: 100%;
    height: auto;
    min-height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    gap: 12px;
}

#video-grid .video-card:not(.pinned),
#video-grid.double .video-card.local:not(.pinned),
#video-grid.double .video-card:not(.local):not(.pinned),
#video-grid.multi .video-card:not(.pinned) {
    inset: auto;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    grid-column: auto;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
}

#video-grid .video-card:last-child:nth-child(odd):not(.pinned) {
    grid-column: auto;
}

@media (max-width: 768px) {
    .video-grid-container {
        padding: 8px;
    }

    #video-grid,
    #video-grid.single,
    #video-grid.double,
    #video-grid.multi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 6px;
    }

    #video-grid .video-card:not(.pinned),
    #video-grid.double .video-card.local:not(.pinned),
    #video-grid.double .video-card:not(.local):not(.pinned),
    #video-grid.multi .video-card:not(.pinned) {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        z-index: auto;
        aspect-ratio: 4 / 3;
        border-radius: 9px;
    }

    #video-grid .video-overlay {
        padding: 5px;
    }

    #video-grid .username-tag {
        max-width: 100%;
        padding: 3px 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.62rem;
    }

    #video-grid .mic-status-icon {
        width: 22px;
        height: 22px;
    }
}