/* Video player styles — all selectors scoped under .vp-shell to avoid the
   .vp-head / .vp-title / .vp-close class collision with views-pages.css
   (which uses the same names for view-page tab strips). */

.vp-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--shade-2) 85%, transparent);
  color: var(--ink-on-dark);
}
.vp-shell .vp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.30);
  border-bottom: 1px solid color-mix(in srgb, var(--hi) 10%, transparent);
}
.vp-shell .vp-title {
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  color: var(--ink-on-dark);
}
.vp-shell .vp-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mix-light) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--foil) 30%, transparent);
  color: var(--ink-on-dark);
  cursor: pointer;
  display: grid; place-items: center;
}
.vp-shell .vp-close:hover { background: color-mix(in srgb, var(--mix-light) 16%, transparent); }
.vp-shell .vp-frame {
  position: relative;
  width: 100%;
  background: var(--black);
  aspect-ratio: var(--project-aspect, 21 / 9);
  display: grid;
  place-items: center;
}
.vp-shell .vp-video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--black); }
.vp-shell .vp-error { padding: 32px; text-align: center; color: var(--ink-on-dark-muted); }
.vp-shell .vp-error-title { font-family: var(--font-display); font-size: var(--fs-18); color: var(--ink-on-dark); margin-bottom: 8px; }
.vp-shell .vp-error-sub { font-size: var(--fs-12); line-height: 1.5; }
.vp-shell .vp-error code {
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--mix-light) 6%, transparent);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Full-screen video modal */
.vp-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: var(--z-video);
  padding: 32px;
}
.vp-modal {
  width: 100%;
  max-width: 1200px;
}