/* 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;
  /* Same contract as kit_hero: do not overflow-clip the outer band.
     Theme radius/block + overflow:hidden made mobile show a fake section radius
     when __container goes edge-to-edge. Clip media on inner stages/wrappers. */
  overflow: visible;
  --kit-video-padding-y: 3rem;
  --kit-video-padding-x: 1.5rem;
  /* Default none — Theme radius/* / PE radius_token own paint (not a hardcoded 8px). */
  --kit-video-radius: var(--semantic-radius-none, 0px);
  --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(--layout-container-gutter, var(--kit-video-padding-x, 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-border-strong, var(--semantic-text-secondary, currentColor)) 75%,
    var(--semantic-border-subtle, transparent) 25%
  );
  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 {
  color: var(--kit-video-text-muted, var(--semantic-text-secondary));
  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;
}

.kit-video__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--kit-video-radius, var(--semantic-radius-none));
  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;
}

/* HTML5 /static uploads — contain so letterboxing beats crop on portrait clips */
.kit-video__native {
  object-fit: contain;
  background: var(--semantic-surface-bg-dark);
}

.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: var(--semantic-state-warning);
  --kit-video-chrome-bg: color-mix(in srgb, var(--semantic-surface-bg-black) 72%, transparent);
}

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

.kit-video--layout-cases_slider .kit-video__subtitle {
  color: var(--kit-video-text-muted, var(--semantic-text-secondary));
}

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

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

.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, var(--semantic-radius-none));
  background: var(--semantic-surface-bg-card);
  border: 1px solid color-mix(in srgb, var(--semantic-accent-contrast) 8%, transparent);
}

/* Day-1 / empty seed: no giant black 16:9 void when video_url is absent. */
.kit-video__stage--empty {
  padding-bottom: 28%;
  max-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 7rem;
}

.kit-video__stage--empty .kit-video__placeholder {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  font-size: 1.5rem;
}

/* Centered layout empty path uses wrapper+placeholder (not stage--empty).
   Must reset padding-bottom 56.25% aspect hack from .kit-video__wrapper. */
.kit-video__wrapper:has(> .kit-video__placeholder) {
  height: auto;
  min-height: 7rem;
  max-height: 12rem;
  padding-bottom: 0;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kit-video-radius, var(--semantic-radius-none));
  background: var(--semantic-surface-bg-card);
  border: 1px solid color-mix(in srgb, var(--semantic-accent-contrast) 8%, transparent);
}

.kit-video__wrapper:has(> .kit-video__placeholder) .kit-video__placeholder {
  opacity: 0.55;
  font-size: 1.5rem;
  position: static;
}

.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, var(--semantic-state-warning));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-surface-bg-black) 35%, transparent);
  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 var(--semantic-surface-on-media);
}

.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: color-mix(in srgb, var(--semantic-accent-contrast) 92%, transparent);
  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 var(--semantic-accent-contrast);
  flex-shrink: 0;
}

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

.kit-video__chrome-bar {
  flex: 1;
  height: 3px;
  background: color-mix(in srgb, var(--semantic-accent-contrast) 25%, transparent);
  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, var(--semantic-state-warning));
}

.kit-video__chrome-actions {
  width: 52px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.75;
  background:
    radial-gradient(circle at 20% 50%, var(--semantic-accent-contrast) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--semantic-accent-contrast) 1.5px, transparent 2px),
    radial-gradient(circle at 80% 50%, var(--semantic-accent-contrast) 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: color-mix(in srgb, var(--semantic-accent-contrast) 22%, transparent);
  cursor: pointer;
}

.kit-video__dot.is-active {
  background: var(--kit-video-accent, var(--semantic-state-warning));
}

.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;
  }
}