/* ============================================================================
   VIDEO LIBRARY — /resources/videos/ and /resources/videos/<slug>/
   Loaded by those routes alone, via `pageCss` in layouts/base.njk. See the
   note there for why this is not appended to home.css.

   EVERY COLOUR, FONT, RADIUS AND SHADOW HERE IS A TOKEN FROM main.css, on the
   same rule the calculator's stylesheet states: a page that drifts half a
   shade from the rest of the site is the thing visitors notice without being
   able to name it.

   HOW LITTLE IS IN HERE IS THE POINT. The cards are .card.postcard with the
   existing .pc-img / .pc-gen image system, the toolbar is the article
   indexes' .ixtools, and the grid is .listgrid. This file adds the two things
   a video card has that an article card does not - a play badge and a run
   time - and then the watch page, which has no equivalent anywhere else.

   Prefixes: .vid- grid, .vc- card additions, .vw- watch page. Nothing bare is
   declared that main.css or home.css also declares; `npm run css:check`
   enforces it and this file is registered in the `public` bundle there.

   THE RED RULE. --red (#c30017) carries headings and large marks. --red-3
   (#ff3b52) is for SMALL TEXT ON DARK ONLY - eyebrows, labels, the run-time
   chip. Neither is used the other way round. See the brand note in main.css.

   Sections: 1 Cards · 2 Watch hero and player · 3 Chapters · 4 Transcript
             5 Responsive · 6 Reduced motion
   ============================================================================ */

/* ---------- 1. CARDS ---------- */

/* The grid itself is .listgrid. This only loosens the minimum card width,
   because a 16:9 poster at a third of 1240px is already small and the article
   grid was tuned for a 3:2 image with more text under it. */
.vidgrid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* The play badge sits on the poster, centred, and grows on hover. It is
   DECORATION: the whole card is the link, so this is never focusable and
   carries aria-hidden in the markup. */
.vc-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(8,10,16,.62);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:#fff;transition:transform .3s var(--ease),background .3s,border-color .3s;z-index:2}
.vc-play svg{width:26px;height:26px;margin-left:3px}
.postcard:hover .vc-play{transform:scale(1.08);background:var(--red);border-color:var(--red-2)}

/* The run time, bottom right of the poster. Mono because it is a measurement,
   and --red-3 because it is small text on a dark overlay. */
.vc-dur{position:absolute;right:10px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;
  background:rgba(8,10,16,.74);color:var(--dk-fg);border:1px solid rgba(255,255,255,.16)}

/* A card whose video is not built yet keeps the generated tile but loses the
   play badge, because there is nothing to play. The markup still renders it;
   hiding it here keeps the decision in one place rather than adding a second
   branch to two templates. */
.vidcard .pc-img.is-gen .vc-play{display:none}

/* ---------- 2. WATCH HERO AND PLAYER ---------- */

.vwback{margin-bottom:22px}

.vwhero .sec-head{max-width:860px}

.vwplayer{margin-top:34px;max-width:1040px}

.vwvid{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--void);border:1px solid var(--dk-line);
  border-radius:var(--radius);box-shadow:var(--shadow)}

/* The honest empty state, for a video that is written and recorded but not
   yet cut. Same proportions as the player it replaces, so the page does not
   reflow when the media lands. */
.vwsoon{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:28px;
  background:linear-gradient(135deg,var(--bd-1),var(--bd-2));
  border:1px solid var(--dk-line);border-radius:var(--radius)}
.vwsoon-mark{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-.01em;color:var(--dk-fg)}
.vwsoon-mark em{font-style:normal;font-weight:500;color:var(--red-3)}
.vwsoon-t{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.4vw,24px);color:var(--dk-fg)}
.vwsoon-p{color:var(--dk-soft);font-size:15px;max-width:48ch}
.vwsoon .btn{margin-top:8px}

.vwmeta{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px}
.vwm{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dk-mut)}
.vwm svg{width:15px;height:15px;color:var(--red-3)}

/* ---------- 3. CHAPTERS ---------- */

.vwcols{display:grid;grid-template-columns:320px 1fr;gap:clamp(28px,4vw,56px);align-items:start}

.vwh{font-size:clamp(20px,2.4vw,26px);margin-bottom:18px}

.vwchaps{position:sticky;top:96px}

.vwchaplist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}

.vwchap{border-bottom:1px solid var(--line)}

/* WITHOUT JAVASCRIPT the row is two spans of text and this is all it gets.
   videos.js wraps the spans in a button, which inherits the same grid, so the
   enhanced and unenhanced versions are the same size and in the same place. */
.vwchap,.vwchap-b{display:grid;grid-template-columns:52px 1fr;gap:12px;
  width:100%;text-align:left;padding:11px 2px;
  background:none;border-left:0;border-right:0;border-top:0;
  font-family:inherit;font-size:15px;color:var(--fg)}
.vwchap-b{border-bottom:0;padding:0;cursor:pointer;transition:color .2s}
.vwchap.is-b{display:block;padding:0}
.vwchap-b:hover{color:var(--red)}
.vwchap-b:hover .vwchap-t{color:var(--red)}
.vwchap-b:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:var(--radius-sm)}
.vwchap-b .vwchap-t,.vwchap-b .vwchap-n{padding:11px 2px}

.vwchap-t{font-family:var(--mono);font-size:12px;color:var(--fg-mut);transition:color .2s}
.vwchap-n{font-weight:500}

/* The chapter the video is inside. A left rule rather than a background,
   because the list sits on the page's own background and a filled row at this
   width reads as a button that has been pressed and stuck. */
.vwchap.on{box-shadow:inset 2px 0 0 var(--red)}
.vwchap.on .vwchap-t{color:var(--red)}
.vwchap.on .vwchap-n{font-weight:600;color:var(--ink)}

.vwsvc{margin-top:22px;width:100%;justify-content:center}

/* ---------- 4. TRANSCRIPT ---------- */

/* NOT COLLAPSED, unlike the transcript on a service page. On a watch page the
   words are the page's text content - see the note at the top of
   video-watch.njk. */
.vwtrans{max-width:70ch}
.vwtr-h{font-size:17px;font-weight:600;margin:26px 0 8px;display:flex;align-items:baseline;gap:12px}
.vwtr-h:first-of-type{margin-top:0}
.vwtr-time{font-family:var(--mono);font-size:12px;color:var(--red);flex:none}
.vwtr-p{color:var(--fg-soft);font-size:16px;line-height:1.75}
.vwtr-none{color:var(--fg-mut);font-style:italic}

/* ---------- 5. RESPONSIVE ---------- */

@media (max-width:980px){
  .vwcols{grid-template-columns:1fr}
  .vwchaps{position:static}
  .vwsvc{width:auto}
}

@media (max-width:640px){
  .vidgrid{grid-template-columns:1fr}
  .vc-play{width:48px;height:48px;margin:-24px 0 0 -24px}
  .vc-play svg{width:21px;height:21px}
  .vwmeta{gap:12px}
}

/* ---------- 6. REDUCED MOTION ---------- */

/* The play badge is the only thing here that moves on its own account. The
   site-wide .reveal animations are already handled in main.css; this covers
   what this file adds. */
@media (prefers-reduced-motion:reduce){
  .vc-play{transition:none}
  .postcard:hover .vc-play{transform:none}
}