/* CSSPK Static Hero — fast, theme-typography friendly */

.csspk-static-hero{
  position: relative;
  overflow: hidden;
  /* Use Elementor/Theme global typography if available; otherwise inherit */
  font-family: var(--e-global-typography-text-font-family, var(--e-global-typography-primary-font-family, inherit));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* vh per device via vars */
  min-height: max(var(--minh-desktop, 420px), var(--vh-desktop, 70vh));
  height: auto;

  /* readable default if no image */
  background-color: #0b1220;
}

/* precise device rules */
@media (max-width: 1024px){
  .csspk-static-hero{
    min-height: max(var(--minh-desktop, 420px), var(--vh-tablet, 62vh));
  }
}
@media (max-width: 768px){
  .csspk-static-hero{
    min-height: max(var(--minh-mobile, 280px), var(--vh-mobile, 48vh));
  }
}

/* overlay for readability */
.csspk-static-hero.is-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* gradient tuned for hero text; alpha is variable (auto-dim may adjust) */
  background: linear-gradient(
    90deg,
    rgba(0,0,0,var(--overlay-alpha, .35)) 0%,
    rgba(0,0,0,calc(var(--overlay-alpha, .35) * 0.75)) 55%,
    rgba(0,0,0,calc(var(--overlay-alpha, .35) * 0.20)) 100%
  );
}

/* inner layout */
.csspk-static-hero__inner{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 56px) clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
}

/* kicker */
.csspk-static-hero__kicker{
  font-family: var(--e-global-typography-text-font-family, inherit);
  color: #fff;
  opacity: .95;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

/* Pixel-identical H1 per breakpoint (theme font retained) */
.csspk-static-hero__title{
  font-family: var(--e-global-typography-primary-font-family, var(--e-global-typography-text-font-family, inherit));
  color: #fff;
  margin: 0 0 14px 0;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: var(--h1-desktop, 78px);
}

@media (max-width: 1024px){
  .csspk-static-hero__title{
  font-family: var(--e-global-typography-primary-font-family, var(--e-global-typography-text-font-family, inherit));
    font-size: var(--h1-tablet, 56px);
  }
}
@media (max-width: 768px){
  .csspk-static-hero__title{
  font-family: var(--e-global-typography-primary-font-family, var(--e-global-typography-text-font-family, inherit));
    font-size: var(--h1-mobile, 40px);
  }
}

/* Subhead per breakpoint */
.csspk-static-hero__subhead{
  font-family: var(--e-global-typography-text-font-family, inherit);
  color: #fff;
  margin: 6px 0 18px 0;
  max-width: 64ch;
  line-height: 1.45;
  font-weight: 400;
  opacity: 0.95;
  font-size: var(--sub-desktop, 18px);
}

@media (max-width: 1024px){
  .csspk-static-hero__subhead{
  font-family: var(--e-global-typography-text-font-family, inherit);
    font-size: var(--sub-tablet, 17px);
  }
}
@media (max-width: 768px){
  .csspk-static-hero__subhead{
  font-family: var(--e-global-typography-text-font-family, inherit);
    font-size: var(--sub-mobile, 16px);
  }
}

/* buttons */
.csspk-static-hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.csspk-static-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  transition: transform .15s ease, opacity .15s ease;
}

.csspk-static-hero__btn:hover{
  transform: translateY(-1px);
}

/* Keep colors neutral; theme may override */
.csspk-static-hero__btn.is-primary{
  background: rgba(255,255,255,.92);
  color: #111;
}
.csspk-static-hero__btn.is-secondary{
  background: rgba(0,0,0,.25);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}

/* If no background-image set, keep dark */
.csspk-static-hero[style*="background-image:url()"]{
  background-image: none !important;
}