/* Public video pages, the bottom-of-post player and the homepage strip. Colours follow the surrounding site (inherit). */
.vids-page { width: 90%; max-width: 1280px; margin: 0 auto; padding: 100px 0 40px; box-sizing: border-box; } /* 100px clears the fixed header, same as .top-ad-wrapper on posts */
.vids-title { margin: 12px 0 6px; font-size: 1.8rem; line-height: 1.2; }
.vids-lead, .vids-empty { margin: 0 0 18px; opacity: 0.8; }
.vids-subtitle { margin: 28px 0 12px; font-size: 1.25rem; }
.vids-crumbs { font-size: 13px; opacity: 0.8; margin-top: 4px; }
.vids-crumbs a, .vids-all a, .vids-source a, .vid-bottom__links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vids-desc { margin: 14px 0 6px; line-height: 1.55; }
.vids-source, .vids-all { margin: 8px 0 16px; font-weight: 600; }
.vids-ad { margin: 14px auto; display: flex; justify-content: center; overflow: hidden; }
.vids-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
@media (min-width: 1200px) { .vids-grid { grid-template-columns: repeat(3, 1fr); } }
.vids-grid--short { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
@media (min-width: 1200px) { .vids-grid--short { grid-template-columns: repeat(5, 1fr); } }
.vids-grid__ad { grid-column: 1 / -1; }
.vid-card { display: block; min-width: 0; color: inherit; text-decoration: none; text-align: left; background: #fff; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; transition: box-shadow 0.3s ease; }
.vid-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.vid-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(128, 128, 128, 0.25); }
.vid-card--short .vid-card__thumb { aspect-ratio: 9 / 16; }
.vid-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.vid-card:hover .vid-card__thumb img { transform: scale(1.04); }
.vid-card:focus-visible { outline: 3px solid #f3ba22; outline-offset: 3px; }
.vid-card__dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 12px; line-height: 1.4; }
.vid-card__title, .vid-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* title stays for screen readers and search engines; the picture already carries it */
.vid-bottom { margin: 32px 0 16px; padding-top: 20px; border-top: 1px solid rgba(128, 128, 128, 0.3); clear: both; }
.vid-bottom__title { margin: 0 0 8px; font-size: 1.2rem; }
.vid-bottom__links { margin: 8px 0 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
/* Play icon over a picture (hub cards, homepage strip) */
.vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vid-card:hover .vid-play svg, .recent-card:hover .vid-play svg { transform: scale(1.1); }
.vid-play svg { transition: transform 0.2s ease; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
/* Homepage strip: layout comes from the article card classes (.recent-section / .recent-grid / .recent-card); the width is stated here too so it always matches the article section */
.recent-section.vid-strip { width: 90%; max-width: none; padding: 0; margin: 60px auto; }
.vid-strip__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vid-strip__head h2 { margin-bottom: 25px; }
.vid-strip__head a { flex: none; margin-bottom: 25px; color: #fff; background: var(--color-primary, #2b2b2b); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; padding: 9px 16px; border-radius: 999px; transition: filter 0.2s ease, transform 0.2s ease; }
.vid-strip__head a:hover, .vid-strip__head a:focus-visible { filter: brightness(1.12); transform: translateX(2px); }
.vid-strip__thumb { position: relative; }
.vid-strip__tag { background-color: #2E2B28; color: #fff; }
.vids-watch .video-embed { margin-top: 14px; }
@media (max-width: 520px) { .vids-page { width: 92%; } .vids-grid--short { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .vids-title { font-size: 1.5rem; } .vid-card__title { font-size: 16px; padding: 12px 14px 16px; } }
/* A portrait short sitting in a landscape grid is cropped to 16:9 instead of towering over its neighbours */
.vids-grid:not(.vids-grid--short) .vid-card--short .vid-card__thumb { aspect-ratio: 16 / 9; }

/* Row heading with an "All shorts" link, and a shorts row that scrolls sideways on narrow screens instead of wrapping */
.vids-rowhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 12px; }
.vids-rowhead .vids-subtitle { margin: 0; text-align: left; }
.vids-rowhead a { flex: none; color: #fff; background: var(--color-primary, #2b2b2b); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; padding: 9px 16px; border-radius: 999px; transition: filter 0.2s ease, transform 0.2s ease; }
.vids-rowhead a:hover, .vids-rowhead a:focus-visible { filter: brightness(1.12); transform: translateX(2px); }
.vids-grid + .vids-rowhead, .pagination-wrapper + .vids-rowhead { margin-top: 36px; }
.vids-grid + .vids-grid, .vids-rowhead + .vids-grid { margin-top: 0; }
.vids-page > .vids-grid { margin-bottom: 8px; }
@media (max-width: 899px) {
  .vids-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .vids-row .vid-card { flex: 0 0 150px; scroll-snap-align: start; }
}
/* Homepage strip: picture-only cards (the title is on the picture), sized to match the article cards */
.vid-strip .recent-img-wrap img { height: 400px; }
@media (max-width: 600px) { .vid-strip .recent-img-wrap img { height: 260px; } }
.vids-page > .vids-row { margin-bottom: 44px; }
.vids-row + .vids-grid { margin-top: 0; }