.rk-video-hero {
  position: relative;
  min-height: var(--rk-hero-min-height, calc(100vh - 90px));
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: var(--rk-hero-bg, #ffffff);
  color: var(--rk-hero-text, #171717);
  font-family: var(--rk-hero-font-family, Inter, Arial, sans-serif);
}

.rk-video-hero__media,
.rk-video-hero__overlay {
  position: absolute;
  inset: 0;
}

.rk-video-hero__media {
  z-index: -2;
  background: var(--rk-hero-bg, #ffffff);
}

.rk-video-hero__video,
.rk-video-hero__poster {
  width: 100%;
  height: 100%;
  display: block;
}

.rk-video-hero__overlay {
  z-index: -1;
  background: linear-gradient(90deg, var(--rk-hero-overlay-start, rgba(255, 255, 255, 0.82)) 0%, var(--rk-hero-overlay-end, rgba(255, 255, 255, 0.08)) 58%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.rk-video-hero--align-center .rk-video-hero__overlay {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), var(--rk-hero-overlay-start, rgba(255, 255, 255, 0.76)) 50%, rgba(255, 255, 255, 0.12));
}

.rk-video-hero--align-right .rk-video-hero__overlay {
  background: linear-gradient(270deg, var(--rk-hero-overlay-start, rgba(255, 255, 255, 0.82)) 0%, var(--rk-hero-overlay-end, rgba(255, 255, 255, 0.08)) 58%, rgba(255, 255, 255, 0) 100%);
}

.rk-video-hero__content {
  width: min(var(--rk-hero-content-width, 360px), calc(100% - 40px));
  margin-inline: clamp(20px, 3.2vw, 62px);
  padding-block: 58px;
}

.rk-video-hero--align-left {
  justify-content: flex-start;
  text-align: left;
}

.rk-video-hero--align-center {
  justify-content: center;
  text-align: center;
}

.rk-video-hero--align-right {
  justify-content: flex-end;
  text-align: right;
}

.rk-video-hero--vertical-top {
  align-items: flex-start;
}

.rk-video-hero--vertical-center {
  align-items: center;
}

.rk-video-hero--vertical-bottom {
  align-items: flex-end;
}

.rk-video-hero__eyebrow {
  margin: 0 0 16px;
  color: var(--rk-hero-accent, #7b5136);
  font-size: var(--rk-hero-eyebrow-size, 12px);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.rk-video-hero__title {
  margin: 0;
  color: var(--rk-hero-text, #171717);
  font-size: var(--rk-hero-title-size, clamp(42px, 7vw, 118px));
  font-weight: var(--rk-hero-title-weight, 500);
  line-height: 0.95;
  letter-spacing: 0;
}

.rk-video-hero__body {
  margin-top: 22px;
  color: var(--rk-hero-muted, #4f4f4f);
  font-size: var(--rk-hero-body-size, 18px);
  line-height: 1.55;
}

.rk-video-hero__body p {
  margin: 0 0 12px;
}

.rk-video-hero__body p:last-child {
  margin-bottom: 0;
}

.rk-video-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.rk-video-hero--align-center .rk-video-hero__actions {
  justify-content: center;
}

.rk-video-hero--align-right .rk-video-hero__actions {
  justify-content: flex-end;
}

.rk-video-hero__button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid transparent;
  font-size: var(--rk-hero-button-size, 13px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms ease, opacity 160ms ease;
}

.rk-video-hero__button:hover {
  transform: translateY(-1px);
  opacity: 0.86;
}

.rk-video-hero__button--primary {
  background: var(--rk-hero-primary-bg, #171717);
  color: var(--rk-hero-primary-text, #ffffff);
  border-color: var(--rk-hero-primary-border, #171717);
}

.rk-video-hero__button--secondary {
  background: var(--rk-hero-secondary-bg, transparent);
  color: var(--rk-hero-secondary-text, #171717);
  border-color: var(--rk-hero-secondary-border, #171717);
}

@media (max-width: 760px) {
  .rk-video-hero {
    min-height: max(640px, var(--rk-hero-min-height, 100vh));
    align-items: flex-end;
  }

  .rk-video-hero__content {
    width: calc(100% - 40px);
    margin-inline: 20px;
    margin-bottom: 0;
    padding-top: 44px;
    padding-bottom: clamp(118px, 16vh, 172px);
    align-self: flex-end;
  }

  .rk-video-hero__overlay,
  .rk-video-hero--align-center .rk-video-hero__overlay,
  .rk-video-hero--align-right .rk-video-hero__overlay {
    background: linear-gradient(180deg, var(--rk-hero-overlay-start, rgba(255, 255, 255, 0.88)) 0%, var(--rk-hero-overlay-end, rgba(255, 255, 255, 0.42)) 72%, rgba(255, 255, 255, 0.18) 100%);
  }

  .rk-video-hero--align-right,
  .rk-video-hero--align-center {
    text-align: left;
    justify-content: flex-start;
  }

  .rk-video-hero--align-right .rk-video-hero__actions,
  .rk-video-hero--align-center .rk-video-hero__actions {
    justify-content: flex-start;
  }
}
