@layer components {

.kn-video { margin: 24px 0; max-width: var(--content-max); }
.kn-video__wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-card); background: var(--bg-card2); }
.kn-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kn-video__caption { margin-top: 8px; font-size: 0.8125rem; color: var(--text-muted); }
.kn-video__facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.kn-video__facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 45%); pointer-events: none; }
.kn-video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kn-video__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 0; background: var(--border-strong); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.kn-video__facade:hover .kn-video__play { transform: scale(1.08); }
.kn-video__facade:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kn-video__alt { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: var(--accent-ink); font-weight: 600; }
.kn-video--shorts { max-width: 360px; margin-inline: 0 auto; }
.kn-video--shorts .kn-video__wrap { aspect-ratio: 9 / 16; }

@media (max-width: 900px) {
  .kn-video--shorts { margin-inline: auto; }
}

.kn-video__wrap--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kn-blog-content .wp-block-embed-youtube { margin: 24px 0; max-width: var(--content-max); }
.kn-blog-content .wp-block-embed-youtube .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.kn-blog-content .wp-block-embed-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-card); }

}