/* plugins/portfolio/public/assets/css/video.css */
/* /videos/<slug>: one page per video. Cards, cover and lightbox come from home-section.css; grid from portfolio.css. */

.pv-page { padding-top: 40px; }
.pv-crumbs { margin: 0 0 24px; font-size: 0.9rem; color: var(--text-muted); overflow-wrap: anywhere; }
.pv-crumbs a { color: var(--text-muted); text-decoration: none; }
.pv-crumbs a:hover { color: var(--accent); }

.pv-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: start; }
.pv-layout.pv-1x1 { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
.pv-layout.pv-16x9 { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 920px; }
.pv-player { width: 100%; }

.pv-info h1 { margin: 0 0 16px; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; overflow-wrap: anywhere; }
.pv-info .eyebrow { margin-bottom: 12px; }
.pv-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--text-muted); }
.pv-brand img { display: block; width: auto; height: auto; max-width: 110px; max-height: 34px; object-fit: contain; }
.pv-brand a, .pv-brand strong { color: var(--text); font-weight: 600; }
.pv-brand a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.pv-brand a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.pv-desc { max-width: 620px; margin: 0 0 26px; font-size: 1.05rem; color: var(--text-muted); }
.pv-desc p { margin: 0; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pv-note { margin: 22px 0 0; font-size: 0.82rem; color: var(--text-muted); }

.pv-more-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 72px 0 26px; }
.pv-more-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }

@media (max-width: 760px) {
    .pv-page { padding-top: 24px; }
    .pv-layout, .pv-layout.pv-1x1 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pv-layout.pv-9x16 .pv-player { max-width: 300px; margin: 0 auto; }
    .pv-actions .btn { flex: 1 1 100%; }
    .pv-more-head { margin-top: 52px; }
}