/* video-page.css — shared component for the /video page on both Dynamis sites.
   Prefix every selector .vp- ; palette switches on the wrapper class.
   Delivered as a real file (uploads/) and referenced with <link>, never inline. */

.vp {
  --navy: #0f0f2d;
  --ink: #3b3f5c;
  --muted: #565b7a;
  --line: #e3e5ee;
  --paper: #ffffff;
  --wash: #f5f5f7;
  --yellow: #ffd400;
  --accent: #3b56d6;        /* text-safe blue, 12px bold on white */
  --accent-bright: #5070ff; /* non-text: rules, marks */
  font-family: Satoshi, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.vp.site--ph { --accent: #1450b8; --accent-bright: #1863dc; }
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
.vp p { margin: 0 0 1em; }
.vp a { text-decoration: none; }
.vp ol, .vp ul { list-style: none; margin: 0; padding: 0; }

/* ---- hero ---- */
.vp-hero { background: var(--navy); color: #fff; padding: 52px 24px 44px; }
.vp-wrap { max-width: 1080px; margin: 0 auto; }
.vp .vp-kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 16px;
}
.vp .vp-h1 {
  font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 16px; color: #fff;
}
.vp .vp-standfirst { font-size: 18px; line-height: 1.6; color: #cdcfe3; max-width: 62ch; margin: 0; }
.vp-hero-rule { width: 64px; height: 4px; background: var(--yellow); margin: 24px 0 0; }

/* ---- group bands ---- */
.vp-band { padding: 52px 24px 40px; }
.vp-band--wash { background: var(--wash); }
.vp-group-head { margin-bottom: 10px; }
.vp .vp-num {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 8px;
}
.vp .vp-h2 {
  font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--navy);
  letter-spacing: -.01em; margin: 0 0 10px;
}
.vp .vp-intro { font-size: 16px; color: var(--ink); max-width: 64ch; margin: 0; }

/* ---- ranked rows ---- */
.vp-list { margin-top: 26px; }
.vp-item {
  display: grid; grid-template-columns: 52px 320px minmax(0, 1fr);
  gap: 22px; align-items: start; padding: 24px 0;
  border-top: 1px solid var(--line);
}
.vp-item:last-child { border-bottom: 1px solid var(--line); }
.vp .vp-rank {
  font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .06em;
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.vp-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; background: #d8dae6;
  border-radius: 12px; overflow: hidden;
}
.vp-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  display: block; transition: transform .25s ease;
}
.vp-thumb:hover img { transform: scale(1.03); }
.vp-dur {
  position: absolute; right: 8px; bottom: 8px; background: rgba(15,15,45,.9);
  color: #fff; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.vp-play {
  position: absolute; left: 9px; bottom: 8px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--yellow); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; padding-left: 3px; box-shadow: 0 1px 4px rgba(15,15,45,.35);
}
.vp .vp-h3 { font-size: 19px; line-height: 1.3; font-weight: 700; margin: 0 0 7px; color: var(--navy); }
.vp-h3 a { color: inherit; }
.vp-h3 a:hover { color: var(--accent); }
.vp .vp-blurb { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0 0 10px; max-width: 62ch; }
.vp .vp-meta {
  margin: 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.vp-meta strong { color: var(--navy); font-weight: 700; }

/* ---- closing ---- */
.vp-close { background: var(--navy); color: #fff; padding: 52px 24px; }
.vp-close .vp .vp-h2 { color: #fff; }
.vp-close p { color: #cdcfe3; font-size: 16px; max-width: 62ch; }
.vp-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.vp-btn {
  display: inline-block; padding: 13px 22px; border-radius: 10px; font-size: 15px;
  font-weight: 700; border: 1px solid transparent;
}
a.vp-btn--primary { background: var(--yellow); color: var(--navy); }
a.vp-btn--primary:hover { background: #ffe45c; }
a.vp-btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
a.vp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.vp-small { font-size: 12px; color: var(--muted); padding: 16px 24px 36px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .vp-item { grid-template-columns: 40px 240px minmax(0, 1fr); gap: 16px; }
  .vp .vp-h1 { font-size: 36px; }
  .vp .vp-h2 { font-size: 26px; }
  .vp .vp-h3 { font-size: 17px; }
}
@media (max-width: 640px) {
  .vp-hero { padding: 40px 18px 34px; }
  .vp-band { padding: 38px 18px 28px; }
  .vp .vp-h1 { font-size: 30px; }
  .vp .vp-h2 { font-size: 23px; }
  .vp .vp-standfirst { font-size: 16px; }
  .vp-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .vp .vp-rank { padding-top: 0; }
  .vp-thumb { max-width: none; }
}

/* ---- cross-link under the closing buttons ---- */
/* qualified with the element: `.vp p` (0,1,1) otherwise beats `.vp-cross` (0,1,0) */
.vp p.vp-cross {
  margin: 28px 0 0; padding-top: 22px; font-size: 14px; color: #cdcfe3;
  border-top: 1px solid rgba(255,255,255,.16); max-width: none;
}
.vp-cross a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vp-cross a:hover { color: var(--yellow); }