/* =========================================================================
   Виджет фотоальбома — handoff «Фотоальбомы мероприятий», «Виджет фотоальбома.dc.html».
   Разметка: template-parts/components/photo-album-widget.php · подключение: vb_photo_album_widget() / [vb_photo_album]
   Состояния: после мероприятия (облако фото вокруг афиши) / до (.vb-pw--before, «Фотоальбом готовится»).
   ========================================================================= */

.vb-pw-sec { background: #fff; padding: clamp(32px, 5vw, 72px) 0; }
.vb-pw-sec__wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 clamp(16px, 5vw, 80px); }

.vb-pw { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); overflow: hidden; border-radius: 26px; background: var(--vb-panel-ink); color: var(--vb-cream-paper); text-decoration: none; box-shadow: 0 24px 50px -24px rgba(26, 26, 26, .45); isolation: isolate; }
.vb-pw:hover, .vb-pw:focus-visible { color: var(--vb-cream-paper); }
.vb-pw:focus-visible { outline: 3px solid var(--vb-gold); outline-offset: 3px; }
.vb-pw__bar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 5px; background: var(--vb-gold); }

/* Коллаж */
.vb-pw__media { position: relative; min-height: clamp(300px, 34vw, 460px); overflow: hidden; background: #161514 radial-gradient(circle, rgba(245, 244, 239, .08) 1px, transparent 1.4px) 0 0 / 28px 28px; }
.vb-pw--right .vb-pw__media { order: 2; }
.vb-pw__threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vb-pw__threads path { fill: none; stroke: var(--vb-gold); vector-effect: non-scaling-stroke; }
.vb-pw__tile { position: absolute; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.vb-pw__poster { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(120px, 15vw, 190px); height: auto; aspect-ratio: .726; object-fit: cover; border-radius: 12px; box-shadow: 0 24px 50px rgba(0, 0, 0, .6); transform: translate(-50%, -50%) rotate(-2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.vb-pw:hover .vb-pw__tile, .vb-pw:focus-visible .vb-pw__tile { transform: translate(var(--dx), var(--dy)) scale(1.04); }
.vb-pw:hover .vb-pw__poster, .vb-pw:focus-visible .vb-pw__poster { transform: translate(-50%, -50%) rotate(0deg) scale(1.05); }
.vb-pw__count { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(27, 27, 27, .86); border: 1px solid rgba(255, 255, 255, .14); font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--vb-cream-paper); }
.vb-pw__count b { font-family: var(--font-brand); font-weight: 900; font-size: 16px; letter-spacing: 0; color: var(--vb-gold); }

/* «Фотоальбом готовится» */
.vb-pw__blur { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(36px) saturate(1.2); opacity: .35; }
.vb-pw__soon { position: absolute; inset: clamp(16px, 2.4vw, 28px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; border: 1.5px dashed rgba(208, 182, 57, .5); border-radius: 20px; text-align: center; }
.vb-pw__soon .vb-pw__poster { position: static; width: clamp(110px, 12vw, 150px); transform: none; box-shadow: 0 20px 40px rgba(0, 0, 0, .55); }
.vb-pw--before:hover .vb-pw__poster, .vb-pw--before:focus-visible .vb-pw__poster { transform: none; }
.vb-pw__soon-k { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--vb-gold); }
.vb-pw__soon-t { max-width: 300px; font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: rgba(245, 244, 239, .8); }

/* Текст */
.vb-pw__body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 3.6vw, 56px) clamp(20px, 3vw, 48px); overflow: hidden; }
.vb-pw__ring { position: absolute; right: -110px; bottom: -130px; width: 320px; height: 320px; border-radius: 999px; border: 1px solid rgba(208, 182, 57, .22); pointer-events: none; }
.vb-pw__k { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--vb-gold); }
.vb-pw__h { position: relative; font-family: var(--font-display); font-weight: 200; font-size: clamp(32px, 3.6vw, 56px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.vb-pw__rule { display: block; width: 66px; height: 4px; background: var(--vb-gold); }
.vb-pw__t { position: relative; font-family: var(--font-brand); font-weight: 900; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; color: #fff; overflow-wrap: break-word; }
.vb-pw__p { position: relative; max-width: 460px; font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: rgba(245, 244, 239, .78); text-wrap: pretty; }
.vb-pw__cta { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 6px; padding: 0 26px; border-radius: 999px; background: var(--vb-gold); color: var(--vb-ink); font-family: var(--font-body); font-weight: 700; font-size: 17px; transition: background-color .2s; }
.vb-pw__cta span { font-size: 20px; }
.vb-pw:hover .vb-pw__cta, .vb-pw:focus-visible .vb-pw__cta { background: var(--vb-gold-soft); }
.vb-pw__note { position: relative; font-family: var(--font-body); font-size: 14px; color: rgba(245, 244, 239, .55); }
@media (max-width: 759.98px) {
	.vb-pw__cta { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.vb-pw__tile, .vb-pw__poster { transition: none; }
}