//
// FILMSTRIP — light
// =================
// Frame grid showing visual progress over time. Each cell is a thumbnail
// + timestamp + (optional) milestone names.
//

.filmstrip {
    padding-bottom: 24px;
}

.videoframe {
    vertical-align: top;
    display: block;
    padding: 4px;
    background-color: $color--surface-card;
    border: 1px solid $color--border;
    border-radius: $radius--md;
    width: 100%;
    transition: border-color $motion--fast, box-shadow $motion--fast,
        transform $motion--fast;
}

a:hover .videoframe {
    border-color: $color--border-strong;
    box-shadow: $shadow--sm;
    transform: translateY(-1px);
}

// Frames that mark a paint / interaction milestone get a brand-tint outline
// instead of the neutral border so the eye can scan to them quickly.
.videoframe.blue {
    border: 2px solid $color--blue;
    padding: 3px;
}

a:hover .videoframe.blue {
    border-color: $color--blue-dark;
}

.videoframetime {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 0.95rem;
    font-weight: $font--weight--semibold;
    font-variant-numeric: tabular-nums;
    color: $color--text;
}

.videoframetext {
    display: block;
    text-align: left;
    line-height: 1.35;
    font-size: 0.85rem;
    margin-bottom: 2px;
    color: $color--text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    b {
        color: $color--text;
        font-weight: $font--weight--semibold;
        font-variant-numeric: tabular-nums;
    }
}