/* ============================================================
   KONZEPT – HERO v16
   Hovery: wyłącznie CSS. GSAP: wejście, pętla haseł, karuzela.
   namespace: .kzt-   |   scoped + !important pod Elementor
   ============================================================ */

.kzt-hero,
.kzt-hero *,
.kzt-hero *::before,
.kzt-hero *::after { box-sizing: border-box !important; }

.kzt-hero {
  --kzt-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --kzt-wide: 104;
  --kzt-narrow: 82;

  --kzt-ink: #ffffff;
  --kzt-ink-dim: rgba(255,255,255,0.72);
  --kzt-ink-faint: rgba(255,255,255,0.48);
  --kzt-line: rgba(255,255,255,0.26);
  --kzt-bg: #0d0d0c;

  --kzt-glass-bg: rgba(255,255,255,0.08);
  --kzt-glass-edge: rgba(255,255,255,0.22);
  --kzt-glass-blur: 24px;

  --kzt-btn-bg: rgba(255,255,255,0.10);
  --kzt-btn-edge: rgba(255,255,255,0.60);
  --kzt-btn-blur: 18px;

  --kzt-gut: clamp(18px, 3.2vw, 52px);
  --kzt-safe-l: max(var(--kzt-gut), env(safe-area-inset-left));
  --kzt-safe-r: max(var(--kzt-gut), env(safe-area-inset-right));

  --kzt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--kzt-height-desktop, 100dvh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: var(--kzt-bg) !important;
  color: var(--kzt-ink) !important;
  font-family: var(--kzt-font) !important;
  font-optical-sizing: auto !important;
  -webkit-font-smoothing: antialiased !important;
  isolation: isolate !important;
}

.kzt-hero__claim { font-variation-settings: 'wdth' var(--kzt-wide) !important; }

.kzt-btn,
.kzt-hero__gl-eyebrow,
.kzt-hero__gl-name,
.kzt-hero__gl-meta,
.kzt-hero__gl-count,
.kzt-hero__gl-open { font-variation-settings: 'wdth' var(--kzt-narrow) !important; }

/* dostępne dla czytnika, niewidoczne w kadrze */
.kzt-sr {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- TŁO ---------- */

.kzt-hero__media { position: absolute !important; inset: 0 !important; z-index: 0 !important; overflow: hidden !important; }
.kzt-hero__stage { position: absolute !important; inset: -4% !important; }

.kzt-hero__video {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: var(--kzt-video-x,50%) var(--kzt-video-y,50%) !important; transform: scale(var(--kzt-video-scale,1));
  will-change: transform !important;
}

/* góra przyciemniona mocniej, żeby biały navbar nie zniknął
   na jasnym kadrze filmu */
.kzt-hero__scrim {
  position: absolute !important; inset: 0 !important; z-index: 3 !important;
  background:
    linear-gradient(to bottom,
      var(--kzt-overlay-top,rgba(13,13,12,0.62)) 0%,
      var(--kzt-overlay-top2,rgba(13,13,12,0.34)) 9%,
      var(--kzt-overlay-mid,rgba(13,13,12,0.02)) 30%,
      var(--kzt-overlay-low,rgba(13,13,12,0.16)) 54%,
      var(--kzt-overlay-bottom,rgba(13,13,12,0.84)) 100%),
    linear-gradient(to right, var(--kzt-overlay-left,rgba(13,13,12,0.30)) 0%, rgba(13,13,12,0.00) 58%) !important;
  pointer-events: none !important;
}

.kzt-hero__curtain {
  position: absolute !important; inset: 0 !important; z-index: 9 !important;
  background: var(--kzt-bg) !important;
  pointer-events: none !important;
}

/* ---------- PASEK FILMU ---------- */

.kzt-hero__track {
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 7 !important;
  height: 1px !important; background: rgba(255,255,255,0.14) !important;
  transform: scaleX(0);
  transform-origin: left center !important;
}

.kzt-hero__progress {
  position: absolute !important; inset: 0 auto 0 0 !important;
  width: 100% !important; height: 1px !important;
  background: var(--kzt-ink) !important;
  transform: scaleX(0);
  transform-origin: left center !important;
  will-change: transform !important;
}

/* ---------- UKŁAD ---------- */

.kzt-hero__inner {
  position: relative !important; z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
  padding: clamp(96px, 16vh, 190px) var(--kzt-safe-r) max(clamp(30px, 4vh, 50px), calc(env(safe-area-inset-bottom) + 22px)) var(--kzt-safe-l) !important;
}

.kzt-hero__row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: clamp(24px, 4vw, 64px) !important;
}

.kzt-hero__col { min-width: 0 !important; }

/* ============================================================
   HASŁA
   wysokość ustala JS z najwyższego wariantu, żeby zmiana hasła
   nie przesuwała klawiszy
   ============================================================ */

.kzt-hero__claim {
  position: relative !important;
  display: block !important;
  min-height: 3.4em !important;
  margin: 0 0 clamp(32px, 5vh, 58px) !important;
  max-width: 30ch !important;
  font-size: clamp(12px, 1.15vw, var(--kzt-claim-size-desktop,15px)) !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--kzt-ink) !important;
}

.kzt-hero__claim-item {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  margin: 0 !important;
}

.kzt-hero__w {
  display: inline-block !important;
  overflow: hidden !important;
  vertical-align: bottom !important;
  padding: 0.12em 0 0.3em !important;
  margin: -0.12em 0.34em -0.3em 0 !important;
}

.kzt-hero__w > i {
  display: block !important;
  font-style: normal !important;
  will-change: transform !important;
}

/* ============================================================
   KLAWISZE – HOVER W CZYSTYM CSS
   ============================================================ */

.kzt-hero__acts { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }

.kzt-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--kzt-btn-edge) !important;
  border-radius: 0 !important;
  background: var(--kzt-btn-bg) !important;
  -webkit-backdrop-filter: blur(var(--kzt-btn-blur)) saturate(140%) !important;
  backdrop-filter: blur(var(--kzt-btn-blur)) saturate(140%) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  transition:
    color 240ms var(--kzt-ease) 0ms,
    border-color 420ms var(--kzt-ease),
    transform 480ms var(--kzt-ease) !important;
}

.kzt-fill {
  position: absolute !important;
  inset: -1px !important;
  background: #ffffff !important;
  transform: scaleY(0);
  transform-origin: center bottom !important;
  transition: transform 480ms var(--kzt-ease) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.kzt-btn > span:not(.kzt-fill),
.kzt-btn > svg { position: relative !important; z-index: 1 !important; }

.kzt-ico {
  display: block !important;
  width: 1em !important; height: 1em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1 !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
  vector-effect: non-scaling-stroke !important;
  overflow: visible !important;
  transition: transform 480ms var(--kzt-ease) !important;
}

/* dotyk: brak hovera, wiec wypelnienie odpala sie na wcisniecie */
@media (hover: none), (pointer: coarse) {
  .kzt-btn:active {
    color: #0d0d0c !important;
    border-color: #ffffff !important;
    transition: color 120ms var(--kzt-ease) 90ms, border-color 200ms var(--kzt-ease) !important;
  }
  .kzt-btn:active .kzt-fill { transform: scaleY(1); transition-duration: 260ms !important; }
  .kzt-hero__gl-btn:active .kzt-fill { transform: scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .kzt-btn:hover {
    color: #0d0d0c !important;
    border-color: #ffffff !important;
    transform: translateY(-4px);
    transition:
      color 200ms var(--kzt-ease) 200ms,
      border-color 420ms var(--kzt-ease),
      transform 480ms var(--kzt-ease) !important;
  }
  .kzt-btn:hover .kzt-fill { transform: scaleY(1); }
  .kzt-hero__cta:hover .kzt-ico { transform: translate(4px, -4px); }
}

.kzt-btn:active { transform: translateY(-1px); }

.kzt-hero__cta {
  height: clamp(52px, 5.8vh, 62px) !important;
  padding: 0 clamp(20px, 2.2vw, 32px) !important;
  gap: clamp(16px, 1.8vw, 28px) !important;
  font-size: clamp(9px, 0.82vw, 11px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.kzt-hero__cta .kzt-ico { font-size: 15px !important; }

.kzt-hero a:focus-visible,
.kzt-hero button:focus-visible { outline: 1px solid #ffffff !important; outline-offset: 4px !important; }

/* ============================================================
   KARUZELA
   ============================================================ */

.kzt-hero__gl { width: clamp(258px, 27vw, var(--kzt-card-width,360px)) !important; margin: 0 !important; }

.kzt-hero__gl-nav {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}

.kzt-hero__gl-btn {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  border-color: var(--kzt-line) !important;
  background: rgba(255,255,255,0.07) !important;
  padding: 0 !important;
}

.kzt-hero__gl-btn .kzt-fill {
  border-radius: 50% !important;
  transform: scale(0);
  transform-origin: center center !important;
}

@media (hover: hover) and (pointer: fine) {
  .kzt-hero__gl-btn:hover .kzt-fill { transform: scale(1); }
}

.kzt-hero__gl-btn .kzt-ico { font-size: 15px !important; }

.kzt-hero__gl-card {
  position: relative !important;
  padding: 12px !important;
  border: 1px solid var(--kzt-glass-edge) !important;
  border-radius: 0 !important;
  background: var(--kzt-glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--kzt-glass-blur)) saturate(145%) !important;
  backdrop-filter: blur(var(--kzt-glass-blur)) saturate(145%) !important;
  overflow: hidden !important;
}

.kzt-hero__gl-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: rgba(0,0,0,0.24) !important;
  text-decoration: none !important;
  touch-action: pan-y !important;
  -webkit-tap-highlight-color: transparent !important;
}

.kzt-hero__slide {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: var(--kzt-video-x,50%) var(--kzt-video-y,50%) !important; transform: scale(var(--kzt-video-scale,1));
  opacity: 0;
  will-change: opacity, transform !important;
}

.kzt-hero__gl-veil {
  position: absolute !important; inset: 0 !important; z-index: 2 !important;
  background: rgba(13,13,12,0.62) !important;
  opacity: 0;
  transition: opacity 420ms var(--kzt-ease) !important;
  pointer-events: none !important;
}

.kzt-hero__gl-open {
  position: absolute !important;
  left: 0 !important; right: 0 !important; top: 50% !important;
  z-index: 3 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 9px !important; font-weight: 600 !important;
  letter-spacing: 0.3em !important; text-transform: uppercase !important;
  color: #ffffff !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--kzt-ease), transform 480ms var(--kzt-ease) !important;
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .kzt-hero__gl-frame:hover .kzt-hero__gl-veil { opacity: 1; }
  .kzt-hero__gl-frame:hover .kzt-hero__gl-open { opacity: 1; transform: translateY(0); }
}

/* segmenty jako realne klawisze */
.kzt-hero__gl-seg { display: flex !important; gap: 3px !important; margin-top: 10px !important; }

.kzt-hero__gl-seg button {
  position: relative !important;
  flex: 1 1 0 !important;
  height: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.24) !important;
  overflow: visible !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 240ms var(--kzt-ease) !important;
}

/* powiększone pole trafienia bez zmiany wyglądu */
.kzt-hero__gl-seg button::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  top: -9px !important; bottom: -9px !important;
}

@media (hover: hover) and (pointer: fine) {
  .kzt-hero__gl-seg button:hover { background: rgba(255,255,255,0.5) !important; }
}

.kzt-hero__gl-seg button i {
  position: absolute !important; inset: 0 !important;
  display: block !important;
  background: var(--kzt-ink) !important;
  transform: scaleX(0);
  transform-origin: left center !important;
  will-change: transform !important;
}

.kzt-hero__gl-cap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: baseline !important;
  column-gap: 12px !important;
  row-gap: 5px !important;
  margin: 12px 0 0 !important;
}

.kzt-hero__gl-eyebrow {
  grid-column: 1 !important;
  font-size: 8px !important; font-weight: 600 !important;
  letter-spacing: 0.28em !important; text-transform: uppercase !important;
  color: var(--kzt-ink-faint) !important;
}

.kzt-hero__gl-count {
  grid-column: 2 !important; justify-self: end !important;
  font-size: 8px !important; font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: var(--kzt-ink-faint) !important;
  font-variant-numeric: tabular-nums !important;
}

.kzt-hero__gl-count b { font-weight: 600 !important; color: var(--kzt-ink) !important; }

.kzt-hero__gl-name {
  grid-column: 1 !important;
  margin: 0 !important;
  font-size: clamp(12px, 1.05vw, 14px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--kzt-ink) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.kzt-hero__gl-meta {
  grid-column: 2 !important; justify-self: end !important;
  margin: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--kzt-ink-faint) !important;
  white-space: nowrap !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kzt-hero__gl-card { background: rgba(20,20,19,0.84) !important; }
  .kzt-btn { background: rgba(20,20,19,0.72) !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .kzt-hero__gl-card, .kzt-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .kzt-hero__gl-card { background: rgba(20,20,19,0.94) !important; }
  .kzt-btn { background: rgba(20,20,19,0.8) !important; }
}

.kzt-hero.kzt-pending .kzt-hero__acts,
.kzt-hero.kzt-pending .kzt-hero__gl { opacity: 0; }

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {
  /* dvh zmienia sie przy chowaniu paska adresu i layout podskakuje.
     svh to najmniejsza stabilna wysokosc - hero stoi nieruchomo. */
  .kzt-hero { height: var(--kzt-height-mobile,100svh) !important; }

  .kzt-hero__inner { min-height: var(--kzt-height-mobile,100svh) !important; }

  .kzt-hero {
    --kzt-wide: 100;
    --kzt-narrow: 84;
    --kzt-gut: clamp(16px, 4.5vw, 26px);
  }

  .kzt-hero__inner {
    padding-top: clamp(78px, 13vh, 116px) !important;
    padding-bottom: max(clamp(24px, 3.4vh, 34px), calc(env(safe-area-inset-bottom) + 20px)) !important;
  }

  .kzt-hero__gl { display: none !important; }
  .kzt-hero__row { grid-template-columns: 1fr !important; gap: 0 !important; }

  .kzt-hero__claim {
    max-width: none !important;
    min-height: 4.4em !important;
    font-size: clamp(13px, 3.8vw, var(--kzt-claim-size-mobile,17px)) !important;
    line-height: 1.46 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: clamp(30px, 4.4vh, 42px) !important;
    text-align: center !important;
  }

  /* wyśrodkowanie działa na maskach słów, bo są inline-block;
     ostatni margines prawy trzeba skasować, inaczej blok jest
     przesunięty o pół spacji w lewo */
  .kzt-hero__w:last-child { margin-right: 0 !important; }

  .kzt-hero__acts { flex-direction: row-reverse !important; flex-wrap: nowrap !important; gap: 9px !important; }

  .kzt-hero__cta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 60px !important;
    padding: 0 12px !important;
    gap: 0 !important;
    justify-content: center !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }

  /* na dotyku ikona nic nie wnosi, a zjada miejsce na tekst */
  .kzt-hero__cta .kzt-ico { display: none !important; }


  .kzt-hero__scrim {
    background: linear-gradient(to bottom,
      rgba(13,13,12,0.58) 0%,
      rgba(13,13,12,0.30) 8%,
      rgba(13,13,12,0.02) 26%,
      rgba(13,13,12,0.62) 58%,
      rgba(13,13,12,0.93) 100%) !important;
  }
}

@media (max-width: 380px) {
  .kzt-hero__acts { gap: 8px !important; }
  .kzt-hero__cta {
    height: 58px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 340px) {
  .kzt-hero__cta { font-size: 10px !important; padding: 0 8px !important; letter-spacing: 0.02em !important; }
}

@media (max-width: 900px) and (max-height: 700px) {
  .kzt-hero__inner { padding-top: 68px !important; }
  .kzt-hero__claim { font-size: clamp(12px, 3.3vw, 15px) !important; min-height: 3.2em !important; margin-bottom: 22px !important; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .kzt-hero__inner { padding-top: 52px !important; }
  .kzt-hero__claim { min-height: 3em !important; font-size: 12px !important; margin-bottom: 16px !important; }
  .kzt-hero__cta { flex: 0 1 auto !important; height: 46px !important; padding: 0 18px !important; font-size: 10px !important; gap: 14px !important; }
  .kzt-hero__cta .kzt-ico { display: block !important; font-size: 13px !important; }
  .kzt-hero__claim { text-align: left !important; }
}

/* ---------- REDUKCJA RUCHU ---------- */

@media (prefers-reduced-motion: reduce) {
  .kzt-hero.kzt-pending .kzt-hero__acts,
  .kzt-hero.kzt-pending .kzt-hero__gl { opacity: 1; }
  .kzt-hero__curtain { display: none !important; }
  .kzt-hero__track { transform: scaleX(1); }
  .kzt-hero__gl-seg { display: none !important; }
  .kzt-btn, .kzt-fill, .kzt-ico,
  .kzt-hero__gl-veil, .kzt-hero__gl-open { transition-duration: 1ms !important; }
}

/* ===== KONZEPT HERO PLUGIN EXTENSIONS ===== */
.kzt-hidden { display:none !important; }
.kzt-no-carousel .kzt-hero__row { grid-template-columns: minmax(0,1fr) !important; }
.kzt-hero__poster { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:var(--kzt-video-x,50%) var(--kzt-video-y,50%)!important; transform:scale(var(--kzt-video-scale,1)); }
.kzt-hero__video--mobile,.kzt-hero__poster--mobile { display:none!important; }
.kzt-hero__slide--empty { background:rgba(0,0,0,.24)!important; }

@media (max-width:900px) {
  .kzt-hero__video,.kzt-hero__poster { object-position:var(--kzt-video-x-mobile,50%) var(--kzt-video-y-mobile,50%)!important; transform:scale(var(--kzt-video-scale-mobile,1)); }
  .kzt-hero__video--mobile,.kzt-hero__poster--mobile { display:block!important; }
  .kzt-mobile-video-separate .kzt-hero__video:not(.kzt-hero__video--mobile) { display:none!important; }
  .kzt-mobile-video-poster .kzt-hero__video { display:none!important; }
  .kzt-mobile-carousel-show .kzt-hero__gl { display:block!important; width:100%!important; max-width:var(--kzt-card-width,360px)!important; margin:28px 0 0 auto!important; }
  .kzt-mobile-carousel-show .kzt-hero__row { grid-template-columns:1fr!important; }
  .kzt-mobile-claim-left .kzt-hero__claim { text-align:left!important; }
  .kzt-mobile-cta-row .kzt-hero__acts { flex-direction:row!important; }
  .kzt-mobile-cta-stack .kzt-hero__acts { flex-direction:column!important; flex-wrap:nowrap!important; }
  .kzt-mobile-cta-stack .kzt-hero__cta { width:100%!important; flex:0 0 auto!important; }
}