.event-clips { padding: 8vw 3.2vw; background: #0a0a0a; color: #fff; }
.event-clips h2 { font-size: clamp(3.5rem,7.7vw,8.5rem); line-height: .92; letter-spacing: -.07em; margin: 0 0 40px; }
.event-clips h2 em { color: #aaa; }
.clips-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #444; padding: 20px 0; }
.clips-heading p { font-size: 20px; margin: 0; font-weight: 700; }
.clips-heading span { font: 14px 'DM Mono', monospace; color: #aaa; }
.clips-controls { display: flex; justify-content: end; gap: 10px; margin-bottom: 16px; }
.clips-controls button { width: 48px; height: 44px; border: 1px solid #777; background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
.clips-strip { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; }
.event-clip { flex: 0 0 clamp(230px,26vw,340px); position: relative; aspect-ratio: 9/16; padding: 0; border: 1px solid #444; background: #181818; color: white; overflow: hidden; scroll-snap-align: start; cursor: pointer; }
.event-clip img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.event-clip .clip-label { position: absolute; inset: auto 0 0; padding: 50px 18px 20px; background: linear-gradient(transparent,rgba(0,0,0,.95)); text-align: left; font: 14px 'DM Mono', monospace; line-height: 1.7; }
.event-clip .clip-play { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid white; border-radius: 50%; background: #0008; font-size: 20px; }
.event-clip:focus-visible,.clips-controls button:focus-visible,.clips-strip:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media(max-width:600px) { .event-clips { padding: 14vw 4vw; } .clips-heading { align-items: start; flex-direction: column; gap: 10px; } .event-clip { flex-basis: 76vw; } }