/* VideoVault: video-page module (loaded only when it renders; tokens and shared parts are in base.css). */
.vvault-front .vvault-cols{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@container vv (min-width:700px){.vvault-front .vvault-cols--main-aside{grid-template-columns:minmax(0,1.7fr) minmax(15rem,1fr);align-items:start}}
.vvault-front .vvault-cols aside>.vvault-section:first-child{margin-top:0}
/* ---- Phase 2b Task 5: video and event pages, event article (Task 3b) ---- */
@container vv (min-width:700px){.vvault-front .vvault-cols--aside-first>:first-child{grid-column:2;grid-row:1}.vvault-front .vvault-cols--aside-first>:nth-child(2){grid-column:1;grid-row:1}}
/* ---- Editorial video page (Bart's board of 2026-10-31; supersedes the full-width player) ----
   Modules rendered in the Editorial appearance on the video's own page (Modules::on_page()) and the
   page grid from VideoLayout::render_editorial() / templates/block/single-video-editorial.html.
   Theme colours and fonts throughout; structure only. The grid queries the page's own container
   (vvpage), never the window. A module may arrive bare (classic layout) or inside its block's
   wrapper, so page rules match both: :is(.x,:has(>.x)). */
.vvault-front .vvault-vpage{container:vvpage/inline-size;display:flex;flex-direction:column;gap:var(--vv-s6);--vv-vp-line:var(--vv-card-line,color-mix(in srgb,currentColor 17%,transparent));--vv-vp-tint:color-mix(in srgb,currentColor 4%,var(--vv-paper));--vv-vp-chip:color-mix(in srgb,currentColor 5%,var(--vv-vp-card));--vv-vp-accent:var(--vv-strong);--vv-vp-card:var(--wp--custom--videovault--card,var(--vv-paper));--vv-vp-sticky:var(--wp--custom--videovault--sticky-top,var(--vv-s5));--vv-vp-h2:clamp(1.5rem,1.2rem + 1.4cqi,2rem)}
.vvault-front .vvault-vpage>*,.vvault-front .vvault-vpage__top>*,.vvault-front .vvault-vpage .vvault-page__head>*,.vvault-front .vvault-vpage__main>*,.vvault-front .vvault-vpage__aside>*,.vvault-front .vvault-vside>*{margin:0}
.vvault-front .vvault-vpage .vvault-page__head{display:flex;flex-direction:column;gap:var(--vv-s3);margin:0}
.vvault-front .vvault-vpage .vvault-page__head h1{margin:0;max-width:24em;font-family:var(--vv-font-display);font-size:clamp(2rem,1.25rem + 3cqi,3.25rem);line-height:1.08;letter-spacing:-.015em;font-weight:var(--vv-title-weight);text-wrap:balance}
/* One column on a narrow page: the two column boxes step aside (display:contents) and the modules
   line up as player, key moments, short version, event card, topics, contents, article. */
.vvault-front .vvault-vpage__top{display:flex;flex-direction:column;gap:var(--vv-s6)}
.vvault-front .vvault-vpage__main,.vvault-front .vvault-vpage__aside{display:contents}
.vvault-front .vvault-vpage__main:not(:has(*)),.vvault-front .vvault-vpage__aside:not(:has(*)){display:none}
.vvault-front .vvault-vpage__top :is(.vvault-player--page,:has(>.vvault-player--page)){order:1}
.vvault-front .vvault-vpage__top :is(.vvault-kmoments,:has(>.vvault-kmoments)){order:2}
.vvault-front .vvault-vpage__top :is(.vvault-short,:has(>.vvault-short)){order:3}
.vvault-front .vvault-vpage__top .vvault-vside{order:4}
.vvault-front .vvault-vpage__top :is(.vvault-vtopics,:has(>.vvault-vtopics)){order:5}
.vvault-front .vvault-vpage__top :is(.vvault-relguides,:has(>.vvault-relguides)){order:6}
.vvault-front .vvault-vpage__top :is(.vvault-atoc,:has(>.vvault-atoc)){order:7}
.vvault-front .vvault-vpage__top :is(.vvault-varticle,:has(>.vvault-varticle)){order:8}
/* Two columns when the page is 56rem wide: the player and the reading column (about 62%) beside a
   sidebar; the sidebar stretches to the article's height so "In this account" can stay in view. */
@container vvpage (min-width:56rem){
	.vvault-front .vvault-vpage__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,23.5rem);gap:var(--vv-s6) var(--vv-s5);align-items:start}
	.vvault-front .vvault-vpage__main,.vvault-front .vvault-vpage__aside{display:flex;flex-direction:column;min-width:0;container:vv/inline-size}
	.vvault-front .vvault-vpage__main{gap:var(--vv-s6)}
	.vvault-front .vvault-vpage__aside{gap:var(--vv-s5);align-self:stretch}
	.vvault-front .vvault-vpage__main :is(.vvault-varticle .vvault-prose,.vvault-short .vvault-summary){font-size:clamp(1.125rem,.75rem + 1.6cqi,1.1875rem)}
	.vvault-front .vvault-vpage__aside>:is(.vvault-atoc,:has(>.vvault-atoc)){position:sticky;top:var(--vv-vp-sticky);z-index:1}
	.vvault-front .vvault-vpage__aside :is(.vvault-atoc){max-height:calc(100vh - 2 * var(--vv-vp-sticky));overflow:auto}
}
/* The player fills its column at 16:9; "View on YouTube" sits under it. */
.vvault-front .vvault-vpage .vvault-player--page{width:100%}
/* Sidebar cards: key moments, the event context (event link and facts), topics, contents. */
.vvault-front .vvault-vpage.vvault-vpage :is(.vvault-module.vvault-kmoments,.vvault-vside,.vvault-module.vvault-vtopics,.vvault-module.vvault-relguides){padding:var(--vv-s5);border:1px solid var(--vv-vp-line);border-radius:var(--vv-radius);background:var(--vv-vp-card)}
.vvault-front .vvault-vside{display:flex;flex-direction:column;gap:var(--vv-s4)}
.vvault-front .vvault-vpage .vvault-relguides .vvault-mod-title,.vvault-front .vvault-vpage :is(.vvault-kmoments,.vvault-vtopics) .vvault-page-h2,.vvault-front .vvault-vpage .vvault-vtopics .vvault-side__title{margin:0;font-family:var(--vv-font-display);font-size:1.5rem;line-height:1.2;font-weight:var(--vv-title-weight)}
.vvault-front .vvault-vpage .vvault-vtopics .vvault-side__title{margin-bottom:var(--vv-s4)}
/* Key moments: six (three on a narrow page) until "Show all"; JavaScript folds them, all show without it. */
@container vvpage (max-width:55.99rem){.vvault-front .vvault-kmoments.is-folded .vvault-kmoment:nth-child(n+4){display:none}}
/* Reading column: section headings sit under a rule, not in a box. */
.vvault-front .vvault-vpage.vvault-vpage :is(.vvault-module.vvault-short,.vvault-module.vvault-varticle,.vvault-module.vvault-vfaq,.vvault-module.vvault-vrel){padding:var(--vv-s5) 0 0;border:0;border-top:1px solid var(--vv-vp-line);border-radius:0;background:transparent}
.vvault-front .vvault-vpage.vvault-vpage :is(.vvault-short,.vvault-varticle,.vvault-vfaq,.vvault-vrel) h2.vvault-page-h2,.vvault-front .vvault-vpage .vvault-vfaq>.vvault-section__head h2{margin:0;font-family:var(--vv-font-display);font-size:var(--vv-vp-h2);line-height:1.15;letter-spacing:-.01em;font-weight:var(--vv-title-weight)}
.vvault-front .vvault-vpage>:is(.vvault-vfaq,:has(>.vvault-vfaq)){margin-top:0}
/* The article's own Contents strip shows when the page is wide; on a narrow page the "Contents" disclosure above the article takes its place. */
@container vvpage (max-width:55.99rem){.vvault-front .vvault-vpage .vvault-acstrip{display:none}}
/* "In this account": a card in the wide sidebar (open, no toggle, without JavaScript too), a closed "Contents" disclosure on a narrow page. */
@container vvpage (min-width:56rem){
	.vvault-front .vvault-vpage .vvault-atoc__fold{padding:var(--vv-s5)}
	.vvault-front .vvault-vpage .vvault-atoc__fold::details-content{content-visibility:visible;display:contents}
	.vvault-front .vvault-vpage .vvault-atoc__sum{min-height:0;padding:0 0 var(--vv-s3);cursor:default;pointer-events:none;font-size:1.5rem;line-height:1.2;font-weight:var(--vv-title-weight)}
	.vvault-front .vvault-vpage .vvault-atoc__title{display:inline}
	.vvault-front .vvault-vpage :is(.vvault-atoc__short,.vvault-atoc__chev){display:none}
	.vvault-front .vvault-vpage .vvault-atoc__list{padding:0}
}
/* Jump links land below the top edge, and glide there only for readers who have not asked for less motion. */
.vvault-front .vvault-vpage .vvault-prose :is(h2,h3)[id]{scroll-margin-top:var(--vv-s5)}
@media (prefers-reduced-motion:no-preference){html:has(.vvault-atoc,.vvault-acstrip){scroll-behavior:smooth}}