/* =========================================================
   PS: Career Split (Morze / Ląd)
   Desktop: left/right, height shorter (fits screen)
   Mobile: top/bottom (kept as before)
   Fix: no white seams / flashes during slide
   ========================================================= */

:root{
  --ps-primary: var(--polsteam-primary, #00357d);
  --ps-accent: var(--polsteam-accent, #dd291b);
  --ps-text: #ffffff;

  --ps-line: rgba(255,255,255,.18);
  --ps-base: #0b0f16;

  /* overlap to hide 1-2px seams on transforms */
  --ps-overlap: 2px;
}

.ps-career-split{
  /*
    WPBakery/VC często dodaje padding na .vc_column-inner.
    Ten moduł ma być „full width”, więc wybijamy go poza kolumnę.
  */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* MAIN CONTAINER */
.ps-career-split__inner{
  position: relative;
  width: 100%;
  height: auto;

  /* było 130vh: na desktop za wysoko -> skracamy */
  min-height: 105vh;

  display: grid;
  grid-template-columns: 1fr 1fr;

  overflow: hidden;
  border-radius: 0;

  background: var(--ps-base);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);

  /* stabilniej przy animacjach */
  contain: paint;
}

/* Divider always on top */
.ps-career-split__inner::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--ps-line);
  transform: translateX(-1px);
  z-index: 20;
  pointer-events: none;
}

/* MOBILE STACK */
@media (max-width: 767px){
  .ps-career-split__inner{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;

    /* mobile masz idealnie -> zostawiamy */
    min-height: 115vh;
  }

  .ps-career-split__inner::before{
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: translateY(-1px);
  }
}

/* PANEL */
.ps-career-split__panel{
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ps-text);

  isolation: isolate;
  overflow: hidden;           /* klucz: tło nie wylewa się na środek */
  background: var(--ps-base); /* klucz: nawet jak coś “mrugnie”, nie pokaże białego */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* BACKGROUND IMAGE */
.ps-career-split__bg{
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  transform: scale(1.05);
  transition: transform .7s ease;
  will-change: transform;
  z-index: 0;

  backface-visibility: hidden;
}

/* OVERLAY */
.ps-career-split__shade{
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(1200px 600px at 20% 40%, rgba(0,0,0,.15), rgba(0,0,0,.65) 55%, rgba(0,0,0,.85)),
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15));

  opacity: .96;
  transition: opacity .4s ease;
}

/* TONE DIFFERENCES */
.ps-career-split__panel.is-sea .ps-career-split__shade{
  background:
    radial-gradient(1200px 600px at 20% 40%, rgba(0,53,125,.18), rgba(0,0,0,.65) 55%, rgba(0,0,0,.85)),
    linear-gradient(90deg, rgba(0,53,125,.35), rgba(0,0,0,.12));
}
.ps-career-split__panel.is-land .ps-career-split__shade{
  background:
    radial-gradient(1200px 600px at 80% 40%, rgba(221,41,27,.14), rgba(0,0,0,.65) 55%, rgba(0,0,0,.85)),
    linear-gradient(90deg, rgba(0,0,0,.12), rgba(221,41,27,.32));
}

/* CONTENT */
.ps-career-split__content{
  position: relative;
  z-index: 2;

  height: 100%;
  display: grid;
  align-content: center;
  gap: 12px;

  padding: clamp(28px, 4vw, 56px);

  /* delikatnie w dół (mniej niż kiedyś) */
  transform: translateY(6%);
}

@media (max-width: 767px){
  .ps-career-split__content{
    transform: translateY(5%);
  }
}

/* TYPO */
.ps-career-split__eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
}

.ps-career-split__title{
  font-family: "Teko", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .92;
  font-size: clamp(46px, 6vw, 88px);
  text-shadow: 0 12px 34px rgba(0,0,0,.45);
}

.ps-career-split__desc{
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.45;
  opacity: .92;
}

/* CTA */
.ps-career-split__cta{
  padding-top: 10px;
}

.ps-career-split__btn{
  display: inline-flex;
  align-items: center;

  height: 46px;
  padding: 0 22px;

  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-weight: 600;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

/* HOVER */
.ps-career-split__panel:hover .ps-career-split__bg{
  transform: scale(1.12);
}
.ps-career-split__panel:hover .ps-career-split__shade{
  opacity: .9;
}
.ps-career-split__panel:hover .ps-career-split__btn{
  transform: translateY(-2px);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}

/* Keyboard focus */
.ps-career-split__panel:focus-visible .ps-career-split__btn{
  box-shadow: 0 0 0 4px rgba(0,53,125,.28);
}

/* ANIMATION LOCK (JS adds this) */
.ps-career-split__inner.is-animating{
  pointer-events: none;
}

/* Podczas animacji chowamy divider (żeby nie “mrugał” na krawędziach) */
.ps-career-split__inner.is-animating::before{
  opacity: 0;
}

/* ACTIVE PANEL */
.ps-career-split__panel.is-active{
  z-index: 10;
}

/* 🔒 Zamrożenie wyglądu aktywnego panelu podczas przejazdu
      (hover może zniknąć przez pointer-events i powodować “mrugnięcie”) */
.ps-career-split__panel.is-active .ps-career-split__bg{
  transform: scale(1.12);
}
.ps-career-split__panel.is-active .ps-career-split__shade{
  opacity: .9;
}

/* COVER ANIMATION DESKTOP (z overlapem, żeby nie było szczeliny) */
@media (min-width: 768px){
  .ps-career-split__panel.is-active{
    transition: transform .75s cubic-bezier(.2,.85,.2,1);
  }

  .ps-career-split__inner.go-sea .ps-career-split__panel.is-sea.is-active{
    transform: translateX(calc(50% + var(--ps-overlap)));
  }
  .ps-career-split__inner.go-land .ps-career-split__panel.is-land.is-active{
    transform: translateX(calc(-50% - var(--ps-overlap)));
  }
}

/* COVER ANIMATION MOBILE (też z overlapem) */
@media (max-width: 767px){
  .ps-career-split__panel.is-active{
    transition: transform .75s cubic-bezier(.2,.85,.2,1);
  }

  .ps-career-split__inner.go-sea .ps-career-split__panel.is-sea.is-active{
    transform: translateY(calc(50% + var(--ps-overlap)));
  }
  .ps-career-split__inner.go-land .ps-career-split__panel.is-land.is-active{
    transform: translateY(calc(-50% - var(--ps-overlap)));
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .ps-career-split__bg,
  .ps-career-split__shade,
  .ps-career-split__btn,
  .ps-career-split__panel.is-active{
    transition: none !important;
  }
}


/* =========================================================
   HERO (MORZE + LAD) � tlo/overlay bez padding�w z kontenera
   Full-bleed sekcja + bezpieczny padding tylko dla contentu
   ========================================================= */

/* 1) Sekcja wychodzi poza paddingi WPBakery (100vw) */
.ps-mch-hero.ps-sea-hero,
.ps-mch-hero.ps-land-hero{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}

/* 2) Overlay zawsze od krawedzi do krawedzi */
.ps-mch-hero.ps-sea-hero .ps-sea-hero__overlay,
.ps-mch-hero.ps-land-hero .ps-sea-hero__overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 3) Tresc nadal ma �oddech� (padding) wewnatrz, nie na tle */
.ps-mch-hero.ps-sea-hero .ps-sea-hero__wrap,
.ps-mch-hero.ps-land-hero .ps-sea-hero__wrap{
  position: relative;
  padding-left: clamp(16px, 4vw, 72px);
  padding-right: clamp(16px, 4vw, 72px);
}