/* Shared Hero Patterns: generic structure, typography, actions and gradients */

.hero,
.uc-hero,
.kb-hero {
  position: relative;
}

.hero__container,
.uc-hero .uc-container,
.kb-hero__container {
  max-width: clamp(320px, 90vw, var(--container-max, 1400px));
  margin: 0 auto;
}

.hero__title,
.uc-hero__title,
.kb-hero__title {
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text, #1F1F1F);
  font-family: var(--font-sans);
}

.hero__subtitle,
.uc-hero__subtitle,
.kb-hero__subtitle {
  color: var(--color-text, #1F1F1F);
  line-height: clamp(24px, 4.5vw, 27px);
  font-weight: 400;
  font-family: var(--font-sans);
}

.hero__actions,
.uc-hero__actions,
.kb-hero__actions {
  display: flex;
  gap: clamp(10px, 2.5vw, 14px);
  flex-wrap: wrap;
}

/* Common gradient wrappers (left/right) */
.hero__gradient-left,
.uc-hero__gradient-left,
.kb-hero__gradient-left,
.hero__gradient-right,
.uc-hero__gradient-right,
.kb-hero__gradient-right {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(100px);
}