/* kit-video — Reference Kit block */
.kit-video,
.kit-video *,
.kit-video *::before,
.kit-video *::after {
  box-sizing: border-box;
}

.kit-video {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  --kit-video-padding-y: 3rem;
  --kit-video-padding-x: 1.5rem;
  --kit-video-radius: 0.5rem;
  --kit-video-shadow: none;
  --kit-video-text: var(--semantic-text-primary);
  background: var(--kit-video-band-bg, var(--theme-kit-band-bg, transparent));
  color: var(--kit-video-text, var(--semantic-text-primary));
  font-family: var(--kit-video-font-family, inherit);
  isolation: isolate;
}

.kit-video__decorative-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.kit-video__container {
  background: var(--kit-video-bg, var(--semantic-surface-bg-elevated));
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--layout-container-max-width, var(--semantic-layout-container-max-width, 1120px));
  margin-inline: auto;
  padding-block: var(--kit-video-padding-y);
  padding-inline: var(--kit-video-padding-x, var(--layout-container-gutter, 24px));
  border-radius: var(--kit-video-radius, var(--semantic-radius-none));
  box-shadow: var(--kit-video-shadow, none);
}

.kit-video__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.kit-video__header--title-center { align-items: center; }
.kit-video__header--title-left { align-items: flex-start; }
.kit-video__header--title-right { align-items: flex-end; }

.kit-video__header-rule {
  width: 3.25rem;
  height: 2px;
  margin: 0 0 0.15rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--semantic-accent-primary, #c9a227) 88%,
    #f0d78c 12%
  );
  flex: 0 0 auto;
}

.kit-video__title {
  margin: 0;
  max-width: 36rem;
  flex: 0 0 auto;
  font-size: var(
    --kit-video-title-size-fluid,
    var(--kit-video-title-size-mobile, var(--semantic-typography-display-section-size))
  );
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.kit-video__subtitle {
  margin: 0;
  max-width: 40rem;
  flex: 0 0 auto;
  font-size: var(
    --kit-video-subtitle-size-fluid,
    var(--kit-video-subtitle-size-mobile, var(--semantic-typography-body-l-size))
  );
  line-height: 1.55;
  opacity: 0.78;
}

.kit-video__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--kit-video-radius);
  box-shadow: var(--kit-video-shadow);
  background: var(--semantic-surface-on-media);
}

.kit-video--layout-centered .kit-video__wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.kit-video--layout-full_width .kit-video__wrapper {
  max-width: 100%;
}

.kit-video__frame,
.kit-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.kit-video__frame:focus,
.kit-video__frame:focus-visible {
  outline: var(--semantic-a11y-focus-ring-width) solid var(--semantic-a11y-focus-ring-color);
  outline-offset: var(--semantic-a11y-focus-ring-offset);
}

.kit-video__wrapper:focus-within {
  outline: var(--semantic-a11y-focus-ring-width) solid var(--semantic-a11y-focus-ring-color);
  outline-offset: var(--semantic-a11y-focus-ring-offset);
}

.kit-video__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  font-size: 0.9rem;
  opacity: 0.6;
}

.kit-video__placeholder-icon {
  font-size: 2.5rem;
}

@media (max-width: 480px) {
  .kit-video {
    --kit-video-padding-x: 1rem;
    --kit-video-padding-y: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kit-video *,
  .kit-video *::before,
  .kit-video *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- cases_slider (biz-page mockup) --- */
.kit-video--layout-cases_slider {
  --kit-video-accent: #facc15;
  --kit-video-chrome-bg: rgba(0, 0, 0, 0.72);
}

.kit-video--layout-cases_slider .kit-video__header {
  margin-bottom: 2rem;
}

.kit-video--layout-cases_slider .kit-video__subtitle {
  opacity: 0.72;
}

.kit-video__slider {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.kit-video__viewport {
  overflow: hidden;
  border-radius: var(--kit-video-radius, 12px);
}

.kit-video__track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

.kit-video__slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.kit-video__player {
  position: relative;
  width: 100%;
}

.kit-video__stage {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--kit-video-radius, 12px);
  background: var(--semantic-surface-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kit-video__poster-wrap,
.kit-video__stage--playing .kit-video__frame,
.kit-video__poster--solo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kit-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kit-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: var(--kit-video-accent, #facc15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.kit-video__play:disabled {
  opacity: 0.85;
  cursor: default;
}

.kit-video__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #111;
}

.kit-video__chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: var(--kit-video-chrome-bg);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem;
  z-index: 3;
}

.kit-video__chrome-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  flex-shrink: 0;
}

.kit-video__chrome-time {
  white-space: nowrap;
  flex-shrink: 0;
}

.kit-video__chrome-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  position: relative;
}

.kit-video__chrome-progress {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kit-video-accent, #facc15);
}

.kit-video__chrome-actions {
  width: 52px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.75;
  background:
    radial-gradient(circle at 20% 50%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 80% 50%, #fff 1.5px, transparent 2px);
}

.kit-video__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.kit-video__dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
}

.kit-video__dot.is-active {
  background: var(--kit-video-accent, #facc15);
}

.kit-video__editor-label {
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  font-size: 0.7rem;
  opacity: 0.65;
  z-index: 4;
}

.kit-video__empty {
  text-align: center;
  opacity: 0.7;
  margin: 0;
}

@media (max-width: 480px) {
  .kit-video__play {
    width: 56px;
    height: 56px;
  }

  .kit-video__play-icon {
    border-width: 10px 0 10px 16px;
    margin-left: 4px;
  }
}