/* «Фотогалерея» и «Видеообзоры» (inc/media-pages.php, 01.10.2026) — грузится только на этих страницах. */

/* ===== Фотогалерея: штатный блок «Галерея» с классом vp-pins — плиткой «как в Pinterest» ===== */
.vp-pins__lead { max-width: 760px; margin: 0 0 28px !important; font-size: 18px; line-height: 26px; color: var(--vp-brown-70); }
:root .wp-block-gallery.vp-pins { display: block; column-count: 4; column-gap: 16px; margin: 0; }
:root .wp-block-gallery.vp-pins > .wp-block-image,
:root .wp-block-gallery.vp-pins.has-nested-images figure.wp-block-image:not(#individual-image) { display: block; width: 100% !important; max-width: none; margin: 0 0 16px !important; break-inside: avoid; border-radius: 12px; overflow: hidden; background: #F0EBE2; }
:root .wp-block-gallery.vp-pins.has-nested-images figure.wp-block-image img,
:root .wp-block-gallery.vp-pins.is-cropped figure.wp-block-image img { display: block; width: 100%; height: auto !important; object-fit: initial; border-radius: 12px; transition: transform .25s, filter .25s; }
:root .wp-block-gallery.vp-pins figure.wp-block-image:hover img { transform: scale(1.03); filter: brightness(.94); }
:root .wp-block-gallery.vp-pins figure.wp-block-image figcaption { position: static; padding: 8px 12px 10px; background: #fff; color: var(--vp-brown); font-size: 14px; line-height: 18px; text-align: left; }
@media (max-width: 1199px) { :root .wp-block-gallery.vp-pins { column-count: 3; } }
@media (max-width: 999px) {
	.vp-pins__lead { margin-bottom: 20px !important; font-size: 16px; line-height: 22px; }
	:root .wp-block-gallery.vp-pins { column-count: 2; column-gap: 10px; }
	:root .wp-block-gallery.vp-pins > .wp-block-image,
	:root .wp-block-gallery.vp-pins.has-nested-images figure.wp-block-image:not(#individual-image) { margin-bottom: 10px !important; }
}

/* ===== Видеообзоры: страница канала «как на YouTube» (блок vp/videos) ===== */
.vp-videos, .vp-videos * { box-sizing: border-box; }
.vp-videos__top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.vp-videos__ava { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--vp-honey); }
.vp-videos__ava img { display: block; width: 72px; height: 72px; object-fit: cover; }
.vp-videos__chan { min-width: 0; }
.vp-videos__chan p { margin: 0; }
.vp-videos__name { font-size: 28px; line-height: 34px; font-weight: 700; }
.vp-videos__count { margin-top: 4px !important; font-size: 14px; line-height: 18px; color: var(--vp-brown-70); }
.vp-videos__empty { color: var(--vp-brown-70); }

/* «Подпишитесь на наши каналы»: три видеоканала с числом подписчиков (как в подвале) — в одну строку */
.vp-videos__follow { margin-bottom: 20px; }
.vp-videos__follow-title { margin: 0 0 12px !important; font-size: 18px; line-height: 22px; font-weight: 700; }
.vp-videos__chans { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.vp-videos__chans li { flex: 0 0 200px; margin: 0; min-width: 0; }
.vp-vchan { display: flex; align-items: center; gap: 10px; height: 100%; padding: 4px 16px 4px 4px; border-radius: 26px; background: rgba(93, 66, 52, .08); color: var(--vp-brown); text-decoration: none; transition: background-color .2s; }
.vp-vchan:hover { background: rgba(93, 66, 52, .16); color: var(--vp-brown); }
.vp-vchan .vp-slist__icon { flex: 0 0 40px; height: 40px; background: var(--vp-brown); box-shadow: none; }
.vp-vchan:hover .vp-slist__icon { background: var(--vp-honey); }
.vp-vchan__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vp-vchan__name, .vp-vchan__count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-vchan__name { font-size: 14px; line-height: 17px; font-weight: 700; }
.vp-vchan__count { font-size: 12px; line-height: 14px; color: var(--vp-brown-70); }

/* вкладки */
.vp-videos__tabs { display: flex; gap: 28px; margin: 0 0 24px; border-bottom: 1px solid rgba(93, 66, 52, .14); overflow-x: auto; scrollbar-width: none; scroll-margin-top: calc(var(--vp-head-h, 80px) + 8px); }
.vp-videos__tabs::-webkit-scrollbar, .vp-videos__chans::-webkit-scrollbar { display: none; }
.vp-videos__tab { flex: none; position: relative; height: 48px; padding: 0; border: 0; background: none; color: var(--vp-brown-70); font: 700 16px/20px var(--wp--preset--font-family--primary); cursor: pointer; }
.vp-videos__tab:hover, .vp-videos__tab[aria-selected="true"] { color: var(--vp-brown); }
.vp-videos__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--vp-brown); }
.vp-videos__tab-n { font-weight: 400; font-size: 13px; opacity: .75; }
.vp-videos__panel[hidden] { display: none; }

/* сортировка */
.vp-videos__sort { display: flex; gap: 8px; margin: 0 0 20px; }
.vp-videos__chip { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: rgba(93, 66, 52, .08); color: var(--vp-brown); font: 700 14px/17px var(--wp--preset--font-family--primary); cursor: pointer; }
.vp-videos__chip:hover { background: rgba(93, 66, 52, .16); }
.vp-videos__chip[aria-pressed="true"] { background: var(--vp-brown); color: #fff; }

/* сетки и карточки */
.vp-videos__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
.vp-videos__grid--vert { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 12px; }
.vp-videos__grid[aria-busy="true"]:empty::before { content: "Загружаем…"; grid-column: 1 / -1; padding: 24px 0; color: var(--vp-brown-70); }
.vp-video { display: block; color: var(--vp-brown); text-decoration: none; }
.vp-video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #3D322C; }
.vp-video__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.vp-video:hover .vp-video__img { transform: scale(1.04); }
.vp-video--pillar .vp-video__thumb { background: #2B2320; }
.vp-video--pillar .vp-video__img { object-fit: contain; } /* вертикальный ролик в обычной сетке — с полями, как Shorts в плейлисте */
.vp-video--pillar:hover .vp-video__img { transform: none; }
.vp-video--vert .vp-video__thumb { aspect-ratio: 9 / 16; }
.vp-video__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 54% 50% / 26px no-repeat; opacity: 0; transition: opacity .2s; pointer-events: none; }
.vp-video:hover .vp-video__thumb::after, .vp-video:focus-visible .vp-video__thumb::after { opacity: 1; }
.vp-video__dur { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; }
/* предпросмотр при наведении: плеер площадки поверх обложки, без звука; нажатие по-прежнему открывает окно плеера */
.vp-video__prev { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; pointer-events: none; opacity: 0; transition: opacity .3s; }
.vp-video__prev.is-on { opacity: 1; }
.vp-video__thumb:has(.vp-video__prev.is-on)::after, .vp-video__thumb:has(.vp-video__prev.is-on) .vp-video__dur { opacity: 0; }
.vp-video__text { display: block; }
.vp-video__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 12px; font-size: 16px; line-height: 21px; font-weight: 700; }
.vp-video:hover .vp-video__title { color: var(--vp-honey); }
.vp-video__meta { display: block; margin-top: 4px; font-size: 14px; line-height: 18px; color: var(--vp-brown-70); }
.vp-video--vert .vp-video__title { margin-top: 8px; font-size: 14px; line-height: 18px; }
.vp-video--vert .vp-video__meta { font-size: 12px; line-height: 16px; }
.vp-videos__more { display: block; width: 100%; height: 48px; margin-top: 32px; border: 0; border-radius: 24px; background: rgba(93, 66, 52, .08); color: var(--vp-brown); font: 700 16px/19px var(--wp--preset--font-family--primary); cursor: pointer; }
.vp-videos__more:hover { background: var(--vp-honey); color: #fff; }
.vp-videos__more[hidden] { display: none; }

/* «Главная»: свежий ролик крупно и подборки */
.vp-video--big { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 24px; align-items: start; }
.vp-video--big .vp-video__title { margin-top: 0; font-size: 24px; line-height: 30px; -webkit-line-clamp: 4; line-clamp: 4; }
.vp-video--big .vp-video__meta { margin-top: 10px; font-size: 15px; line-height: 20px; }
.vp-video--big .vp-video__text::after { content: "Смотреть"; display: inline-flex; align-items: center; height: 44px; margin-top: 20px; padding: 0 24px; border-radius: 22px; background: var(--vp-honey); color: #fff; font-size: 16px; line-height: 19px; font-weight: 700; }
.vp-vshelf { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(93, 66, 52, .1); }
.vp-vshelf__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vp-vshelf__title { margin: 0; font-size: 22px; line-height: 27px; font-weight: 700; text-transform: none; text-align: left; }
.vp-vshelf__all, .vp-videos__back { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: rgba(93, 66, 52, .08); color: var(--vp-brown); font: 700 14px/17px var(--wp--preset--font-family--primary); cursor: pointer; }
.vp-vshelf__all:hover, .vp-videos__back:hover { background: var(--vp-honey); color: #fff; }

/* плейлисты */
.vp-vlist { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--vp-brown); font: inherit; text-align: left; cursor: pointer; }
.vp-vlist__thumb { position: relative; display: block; aspect-ratio: 16 / 9; margin-top: 7px; border-radius: 12px; background: #3D322C; }
.vp-vlist__thumb::before { content: ""; position: absolute; left: 5%; right: 5%; top: -6px; height: 6px; border-radius: 8px 8px 0 0; background: rgba(93, 66, 52, .35); } /* «стопка» роликов */
.vp-vlist__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.vp-vlist__n { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; }
.vp-vlist__title { display: block; margin-top: 12px; font-size: 16px; line-height: 21px; font-weight: 700; }
.vp-vlist__go { display: block; margin-top: 4px; font-size: 14px; line-height: 18px; color: var(--vp-brown-70); }
.vp-vlist:hover .vp-vlist__title { color: var(--vp-honey); }
.vp-videos__listhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px; margin-bottom: 16px; }
.vp-videos__back { flex: 0 0 auto; margin-right: 100%; }
.vp-videos__back::before { content: "← "; }
.vp-videos__listname { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; text-transform: none; text-align: left; }
.vp-videos__listcount { font-size: 14px; line-height: 18px; color: var(--vp-brown-70); }

/* плеер */
.vp-modal.vp-vplayer { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .86); }
.vp-modal.vp-vplayer[hidden] { display: none; }
.vp-vplayer__box { position: relative; width: min(1100px, 100%, calc((100vh - 140px) * 16 / 9)); }
.vp-vplayer__frame { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.vp-vplayer--vert .vp-vplayer__box { width: min(420px, 100%, calc((100vh - 150px) * 9 / 16)); }
.vp-vplayer--vert .vp-vplayer__frame { aspect-ratio: 9 / 16; }
.vp-vplayer__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vp-vplayer__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 14px 0 0; color: #fff; font-size: 18px; line-height: 24px; font-weight: 700; }
.vp-vplayer__close { position: absolute; right: 0; top: -44px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.vp-vplayer__close:hover { background: var(--vp-honey); }
/* листание коротких роликов: стрелки справа от плеера, как у Shorts */
.vp-vplayer__nav { position: absolute; left: calc(100% + 16px); top: 50%; display: flex; flex-direction: column; gap: 12px; transform: translateY(-50%); }
.vp-vplayer__nav[hidden] { display: none; }
.vp-vplayer__arrow { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; }
.vp-vplayer__arrow:hover { background: var(--vp-honey); }
.vp-vplayer__arrow:disabled { background: rgba(255, 255, 255, .15); opacity: .35; cursor: default; }

@media (max-width: 1199px) {
	.vp-videos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-videos__grid--vert { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
	.vp-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.vp-videos__grid--vert { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 10px; }
	.vp-videos__grid--shelf.vp-videos__grid--vert > :nth-child(n+5) { display: none; }
	.vp-video--big { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.vp-video--big .vp-video__title { font-size: 20px; line-height: 25px; }
	.vp-video--big .vp-video__text::after { display: none; }
}
@media (max-width: 599px) {
	.vp-videos__ava, .vp-videos__ava img { width: 56px; height: 56px; }
	.vp-videos__name { font-size: 22px; line-height: 27px; }
	.vp-videos__chans li { flex: none; }
	.vp-videos__tabs { gap: 20px; margin-bottom: 20px; }
	.vp-videos__tab { font-size: 15px; }
	.vp-videos__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.vp-videos__grid--vert { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
	.vp-videos__grid--shelf:not(.vp-videos__grid--vert) > :nth-child(n+5), .vp-videos__grid--shelf2 > :nth-child(n+3) { display: none; }
	.vp-vshelf { margin-top: 28px; padding-top: 24px; }
	.vp-vshelf__title, .vp-videos__listname { font-size: 20px; line-height: 25px; }
	.vp-vplayer__title { margin-top: 10px; font-size: 15px; line-height: 20px; }
	.vp-vplayer--feed .vp-vplayer__box { width: min(100%, calc((100vh - 200px) * 9 / 16)); }
	.vp-vplayer__nav { position: static; flex-direction: row; justify-content: center; gap: 16px; margin-top: 10px; transform: none; }
	.vp-vplayer__arrow { width: 48px; height: 48px; }
}