/* KWNY Hero widget — every rule is scoped to .kwny-hero, nothing else on the site is touched. */

.kwny-hero{
  --kh-green: var(--e-global-color-primary, #035E39);
  --kh-deep:  var(--e-global-color-5aa2f98, #023822);
  --kh-ink:   var(--e-global-color-secondary, #00140E);
  --kh-serif: var(--e-global-typography-primary-font-family, "Test Financier"), Georgia, serif;
  --kh-sans:  var(--e-global-typography-text-font-family, "Inter"), Arial, sans-serif;
  --kh-ov-a: rgba(4,20,14,.78);
  --kh-ov-b: rgba(4,20,14,.55);
  --kh-ov-c: rgba(4,20,14,0);
  --kh-ov-m: rgba(4,20,14,.62);

  position: relative;
  display: flex;
  align-items: center;
  min-height: 680px;
  padding: 110px 0;
  background-color: #1B2420;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: var(--kh-sans);
  color: #FFFFFF;
  overflow: hidden;
  box-sizing: border-box;
}
.kwny-hero *,
.kwny-hero *::before,
.kwny-hero *::after{ box-sizing: border-box; }

/* full-width breakout (switch in the Background section) — scrollbar-safe */
.kwny-hero-full-yes .kwny-hero{
  width: calc(100vw - var(--kwny-sb, 0px));
  max-width: calc(100vw - var(--kwny-sb, 0px));
  margin-left: calc(50% - 50vw + (var(--kwny-sb, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--kwny-sb, 0px) / 2));
}

/* tint over the photo so the white text stays readable */
.kwny-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--kh-ov-a) 0%, var(--kh-ov-b) 40%, var(--kh-ov-c) 80%);
  pointer-events: none;
}

.kwny-hero__inner{
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.kwny-hero__content{ max-width: 620px; }

/* ---------- badges ---------- */
/* one frosted pill; items separated by a thin vertical line */
.kwny-hero .kwny-hero__badges{
  --kh-div: rgba(255,255,255,.35);
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  max-width: 100%;
  margin: 0 0 24px;
  padding: .45em .4em;
  list-style: none;
  overflow: hidden;              /* never paint past the screen edge */
  border-radius: 999px;
  background-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kwny-hero .kwny-hero__badge{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .45em;                    /* em-based, so spacing shrinks with the text */
  margin: 0;
  padding: .05em .8em;
  background-color: transparent;
  font-size: 15px;
  line-height: 1.2;
  color: #FFFFFF;
  white-space: nowrap;
}
.kwny-hero .kwny-hero__badge + .kwny-hero__badge{
  border-left: 1px solid var(--kh-div);
}
.kwny-hero__badge i{ font-size: .9em; line-height: 1; opacity: .9; }
.kwny-hero__badge svg{ width: 1em; height: 1em; flex: none; fill: currentColor; opacity: .9; }

/* ---------- heading ---------- */
.kwny-hero .kwny-hero__title{
  margin: 0 0 22px;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 1.2019rem + 2.0192vw, 3.5rem);
  line-height: 1.25em;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.kwny-hero__title em{ font-style: italic; }
.kwny-hero__sub{
  display: block;
  font-style: italic;
  font-size: .9em;
}

/* ---------- text ---------- */
.kwny-hero .kwny-hero__text{
  margin: 0 0 34px;
  max-width: 54ch;
  font-size: clamp(.9375rem, .9087rem + .1282vw, 1.0625rem);
  line-height: 1.65em;
  color: rgba(255,255,255,.9);
}

/* ---------- buttons ---------- */
.kwny-hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; }
.kwny-hero .kwny-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.kwny-hero .kwny-hero__btn--primary{ background-color: var(--kh-green); border-color: var(--kh-green); color: #FFFFFF; }
.kwny-hero .kwny-hero__btn--primary:hover,
.kwny-hero .kwny-hero__btn--primary:focus{ background-color: var(--kh-deep); border-color: var(--kh-deep); color: #FFFFFF; }
.kwny-hero .kwny-hero__btn--light{ background-color: #FFFFFF; border-color: #FFFFFF; color: var(--kh-ink); }
.kwny-hero .kwny-hero__btn--light:hover,
.kwny-hero .kwny-hero__btn--light:focus{ background-color: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); color: var(--kh-ink); }
.kwny-hero .kwny-hero__btn:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ---------- tablet ---------- */
@media (max-width: 1024px){
  .kwny-hero{ min-height: 580px; }
  .kwny-hero__content{ max-width: 560px; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px){
  .kwny-hero{
    min-height: 0;
    padding: 56px 0;
    background-position: 70% center;
  }
  .kwny-hero::before{ background: var(--kh-ov-m); }
  .kwny-hero__inner{ padding: 0 16px; }
  .kwny-hero__content{ max-width: none; }
  /* badges stay on ONE line: size scales with the screen width */
  /* (the script also shrinks the text if a custom font size still doesn't fit) */
  .kwny-hero .kwny-hero__badges{ padding: .5em .2em; }
  .kwny-hero .kwny-hero__badge{
    padding: 0 .5em;
    gap: .3em;
    font-size: clamp(9px, 2.6vw, 12px);
  }
  .kwny-hero .kwny-hero__title{ font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); }
  .kwny-hero .kwny-hero__text{ max-width: none; }

  .kwny-hero-stack-yes .kwny-hero__cta{ flex-direction: column; gap: 10px; }
  .kwny-hero-stack-yes .kwny-hero .kwny-hero__btn{ width: 100%; padding: 15px 18px; }
}
@media (prefers-reduced-motion: reduce){
  .kwny-hero .kwny-hero__btn{ transition: none; }
}