/* Video Guides (/videos), built by scripts/build-videos.js. Colours come from the theme
   variables in theme-green.css so light and dark mode both work. */
.vid-hero { padding: 48px 0 36px; }
.vid-hero-compact { padding: 36px 0 20px; }
.vid-hero-compact h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.vid-hero-ctas, .vid-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.vid-actions { margin-top: 18px; }
.vid-narrow { width: min(900px, calc(100% - 32px)); margin-inline: auto; }
.vid-index { padding: 8px 0 64px; }

.vid-series { margin-top: 28px; }
.vid-series h2 { margin: 0 0 6px; font-size: 1.5rem; color: var(--ps-ink); }
.vid-series-desc { margin: 0 0 18px; color: var(--ps-muted); }
.vid-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vid-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.vid-card a:hover, .vid-card a:focus-visible { transform: translateY(-2px); border-color: var(--ps-primary); box-shadow: var(--ps-shadow); }
.vid-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b1f16; overflow: hidden; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .78); color: #fff; font-size: .78rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.vid-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.vid-card-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ps-primary); }
.vid-card-title { font-weight: 700; color: var(--ps-ink); line-height: 1.35; }
.vid-card-desc { font-size: .92rem; color: var(--ps-muted); line-height: 1.5; }

.vid-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--ps-radius); overflow: hidden; box-shadow: var(--ps-shadow); }
.vid-player img, .vid-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.vid-play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; padding: 0; }
.vid-play svg { width: 72px; height: 51px; opacity: .9; transition: opacity .15s ease, transform .15s ease; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4)); }
.vid-play:hover svg, .vid-play:focus-visible svg { opacity: 1; transform: scale(1.06); }
.vid-play:focus-visible { outline: 3px solid var(--ps-primary); outline-offset: -3px; }

.vid-summary { margin: 22px 0 0; font-size: 1.05rem; line-height: 1.65; color: var(--ps-body); }
.vid-block { margin-top: 30px; }
.vid-block h2 { font-size: 1.2rem; margin: 0 0 12px; color: var(--ps-ink); }
.vid-covers { margin: 0; padding-left: 20px; color: var(--ps-body); line-height: 1.7; }
.vid-chapters { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ps-line); border-radius: var(--ps-radius); overflow: hidden; background: var(--ps-card); }
.vid-chapters li + li { border-top: 1px solid var(--ps-line); }
.vid-chapter { width: 100%; display: flex; gap: 14px; align-items: baseline; padding: 11px 16px; background: transparent; border: 0; text-align: left; font: inherit; color: var(--ps-body); cursor: pointer; }
.vid-chapter:hover, .vid-chapter:focus-visible { background: var(--ps-soft); color: var(--ps-ink); }
.vid-chapter-t { flex: none; min-width: 3.6em; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ps-primary); }
.vid-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.vid-related a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; text-decoration: none; background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); color: var(--ps-ink); }
.vid-related a:hover, .vid-related a:focus-visible { border-color: var(--ps-primary); }
.vid-related span { font-size: .9rem; color: var(--ps-muted); }
.vid-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; }
.vid-pager a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--ps-line); border-radius: var(--ps-radius); text-decoration: none; color: var(--ps-ink); background: var(--ps-card); }
.vid-pager a[rel="next"] { text-align: right; }
.vid-pager span { font-size: .85rem; color: var(--ps-muted); }
.vid-back { margin: 30px 0 64px; }
.vid-back a { color: var(--ps-primary); font-weight: 600; }
@media (max-width: 560px) {
  .vid-pager { grid-template-columns: 1fr; }
  .vid-pager a[rel="next"] { text-align: left; }
  .vid-hero-ctas .ps-button, .vid-actions .ps-button { flex: 1 1 100%; justify-content: center; text-align: center; }
}