/* Videos: library, cards, pop-up player, single video */
.vfilters { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-bottom: 30px; }
.vsearch { flex: 1 1 240px; max-width: 340px; }
.vsearch input, .vsource select { width: 100%; font: inherit; font-size: 15px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); }
.vsearch input:focus, .vsource select:focus { outline: none; border-color: var(--red); }
.vfilters .filters { margin: 0; flex: 1 1 auto; }

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px 22px; }
.vcard { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.vcard.is-hidden { display: none; }
.v-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.v-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.vcard:hover .v-th img { transform: scale(1.05); opacity: .9; }
.v-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--charcoal), var(--ink) 55%, var(--red-deep)); }
.v-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: transform .3s var(--ease); }
.vcard:hover .v-play { transform: scale(1.12); }
.v-dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.v-body { display: grid; gap: 6px; }
.v-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.v-title { font-size: 1.06rem; line-height: 1.3; color: var(--ink); }
.vcard:hover .v-title { color: var(--red); }
.v-sub { font-size: 14px; color: var(--muted); }
.vmore { text-align: center; margin: 40px 0 0; }
.vnone { text-align: center; color: var(--muted); margin: 30px 0; }

/* pop-up player */
html.vmodal-open { overflow: hidden; }
.vmodal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(12, 13, 14, .88); }
.vmodal.open { display: flex; }
.vmodal-box { position: relative; width: min(1040px, 100%); }
.vmodal-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.vmodal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal-close { position: absolute; right: 0; top: -46px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.vmodal-close:hover { background: var(--red); }
.vmodal-cap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; margin-top: 14px; color: #fff; }
.vmodal-cap b { font-size: 1.05rem; }
.vmodal-cap span { display: inline-flex; gap: 18px; font-size: 14px; font-weight: 700; }
.vmodal-cap a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.vmodal-cap a:hover { color: #fff; }

/* single video */
.vplayer { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); margin-bottom: 30px; }
.vplayer img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vplay-btn { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.vplay-btn .v-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; background-size: 34px; }
.vplay-btn:hover .v-play { transform: scale(1.1); }
.vprivacy { position: absolute; left: 16px; bottom: 12px; margin: 0; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .85); font-size: 12px; }
.vplayer.playing .vprivacy { display: none; }
.js .vcard.is-hidden { display: none; }

@media (max-width: 720px) {
	.vgrid { grid-template-columns: 1fr; }
	.vsearch { max-width: none; }
	.vmodal { padding: 12px; }
	.vmodal-close { top: -44px; }
}