.popular-videos { min-width: 0; }
.popular-videos .popular-intro { max-width: 52rem; margin: 1.5rem 0 2rem; }
.popular-controls { display: flex; justify-content: flex-end; gap: .75rem; margin-bottom: 1rem; }
.popular-controls button { width: 48px; height: 48px; border: 1px solid var(--line-dark); background: transparent; color: var(--forest); font: inherit; font-size: 1.5rem; cursor: pointer; }
.popular-controls button:disabled { opacity: .35; cursor: default; }
.popular-videos :focus-visible { outline: 3px solid var(--vermilion); outline-offset: 4px; }
.popular-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 3); gap: 1.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: .3rem .1rem 1.25rem; margin: 0; list-style: none; }
.popular-card { min-width: 0; scroll-snap-align: start; border-bottom: 1px solid var(--line-dark); padding-bottom: 1.5rem; }
.popular-image { display: block; position: relative; }
.popular-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #152a21; }
.popular-duration { position: absolute; bottom: .5rem; right: .5rem; padding: .15rem .4rem; color: #fff; background: #152a21; font-size: .875rem; }
.popular-card h3 { font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; margin: 1rem 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.popular-card h3 a { color: inherit; text-decoration: none; }
.popular-watch { color: var(--vermilion); font-size: 1rem; }
.popular-videos .popular-footer { margin-top: 2rem; }
@media (max-width: 1023px) { .popular-track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (max-width: 639px) { .popular-track { grid-auto-columns: 90%; gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .popular-track { scroll-behavior: auto; } }