/* „Witaj w parafii” — opowieść krok po kroku (styl jak „Poznaj parafię”) */
.pr1.wj{--g1:#E9CF8E;--g2:#C9A45A;padding-top:0!important;border-top:0!important;overflow:clip}
html[data-theme=light] .pr1.wj{--g1:#9a7425;--g2:#b8913f}

/* 1. Zdjęcie na całą szerokość z tytułem */
.pr1.wj .sp-head{position:relative;isolation:isolate;overflow:hidden;margin:0 calc(50% - 50vw) clamp(40px,7vw,90px)!important;padding:clamp(150px,30vh,300px) max(var(--gutter,24px),calc(50vw - 580px)) clamp(48px,9vh,96px)!important;min-height:min(86vh,820px);display:flex;flex-direction:column;justify-content:flex-end;text-align:left!important;max-width:none!important;color:#F4F6FC}
.pr1.wj .sp-head::before{content:"";position:absolute;inset:-4% 0 0;z-index:-2;background:url(/img/hero-kosciol.jpg) 50% 28%/cover no-repeat;transform:scale(calc(1.06 + var(--p,0)*.12)) translateY(calc(var(--p,0)*6%));filter:saturate(1.05) brightness(calc(.82 - var(--p,0)*.3));will-change:transform}
.pr1.wj .sp-head::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 20% 100%,rgba(5,11,24,.92),rgba(5,11,24,.35) 60%,transparent 85%),linear-gradient(180deg,rgba(5,11,24,.55),rgba(5,11,24,.05) 35%,rgba(5,11,24,.55) 78%,var(--bg) 100%)}
.pr1.wj .sp-head>*{max-width:760px}
.pr1.wj .sp-eyebrow{color:#E9CF8E!important;letter-spacing:.22em;text-transform:uppercase;font-weight:700;font-size:13px;margin:0 0 14px!important}
.pr1.wj .sp-head h1{font-family:var(--display);font-size:clamp(44px,7.4vw,104px)!important;line-height:.94!important;font-weight:800;letter-spacing:-.025em;margin:0 0 22px!important;color:#fff!important;text-wrap:balance}
.pr1.wj .sp-lead{font-size:clamp(17px,1.6vw,21px)!important;line-height:1.55;color:rgba(232,238,250,.86)!important;max-width:620px}
.pr1.wj .sp-head .kp-poznaj{display:none}
.pr1.wj .wj-cue{display:inline-flex;align-items:center;gap:10px;margin-top:30px;color:rgba(233,207,142,.9);font-size:14px;font-weight:600;letter-spacing:.04em}
.pr1.wj .wj-cue i{width:22px;height:34px;border:1.5px solid currentColor;border-radius:12px;position:relative}
.pr1.wj .wj-cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:wjCue 1.8s ease-in-out infinite}
@keyframes wjCue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* 2. Kroki na osi czasu */
html body .pr1.wj .pr1-steps{display:block!important;position:relative;max-width:1040px;margin:0 auto 34px!important;padding:0 0 0 64px!important;--fill:0}
.pr1.wj .pr1-steps::before,.pr1.wj .pr1-steps::after{content:"";position:absolute;left:21px;top:22px;bottom:40px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.pr1.wj .pr1-steps::after{background:linear-gradient(180deg,var(--g1),var(--g2));transform-origin:top;transform:scaleY(var(--fill));box-shadow:0 0 14px rgba(233,207,142,.55)}
html body .pr1.wj .pr1-steps>li{position:relative;margin:0 0 clamp(26px,4vw,44px)!important;padding:clamp(22px,3vw,34px)!important;border-radius:22px}
.pr1.wj .pr1-steps>li h3{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.015em;margin:0 0 12px}
html body .pr1.wj .pr1-n{left:-64px!important;top:clamp(20px,3vw,30px)!important;width:44px!important;height:44px!important;font:800 17px/1 var(--display)!important;background:var(--bg)!important;color:var(--g1)!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g1) 45%,transparent)!important;transition:background .5s,color .5s,box-shadow .5s,transform .5s cubic-bezier(.2,.8,.2,1);z-index:1}
html body .pr1.wj li.on .pr1-n{background:linear-gradient(145deg,#F3DFA6,#C9A45A)!important;color:#1b1406!important;box-shadow:0 0 0 6px color-mix(in srgb,var(--g1) 18%,transparent),0 0 26px rgba(233,207,142,.6)!important;transform:scale(1.06)}
.pr1.wj .wj-ph{display:block;width:calc(100% + 2*clamp(22px,3vw,34px));max-width:none;height:clamp(170px,24vw,260px);object-fit:cover;object-position:50% 62%;margin:calc(-1*clamp(22px,3vw,34px)) calc(-1*clamp(22px,3vw,34px)) 22px;border-radius:22px 22px 0 0}

/* Pojawianie się przy przewijaniu */
.pr1.wj.wj-js .pr1-steps>li,.pr1.wj.wj-js .pr1-help,.pr1.wj.wj-js .wj-invite{opacity:0;transform:translateY(46px) scale(.985);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.pr1.wj.wj-js .in{opacity:1!important;transform:none!important}

/* Komputer: oś na środku, karty na przemian */
@media (min-width:1000px){
  html body .pr1.wj .pr1-steps{padding:0!important}
  .pr1.wj .pr1-steps::before,.pr1.wj .pr1-steps::after{left:50%;margin-left:-1px}
  html body .pr1.wj .pr1-steps>li{width:calc(50% - 56px);margin-bottom:-60px!important}
  html body .pr1.wj .pr1-steps>li:nth-child(even){margin-left:auto!important}
  html body .pr1.wj .pr1-steps>li:last-child{margin-bottom:0!important}
  html body .pr1.wj .pr1-steps>li:nth-child(odd) .pr1-n{left:auto!important;right:-78px!important}
  html body .pr1.wj .pr1-steps>li:nth-child(even) .pr1-n{left:-78px!important}
  .pr1.wj.wj-js .pr1-steps>li:nth-child(odd){transform:translateX(-50px)}
  .pr1.wj.wj-js .pr1-steps>li:nth-child(even){transform:translateX(50px)}
}

/* 3. Sprawy i zaproszenie do „Poznaj parafię” */
html body .pr1.wj .pr1-help{max-width:1040px;margin:0 auto 26px!important}
.pr1.wj .wj-invite{position:relative;isolation:isolate;display:flex;align-items:flex-end;max-width:1040px;min-height:clamp(320px,42vw,460px);margin:0 auto;border-radius:28px;overflow:hidden;text-decoration:none!important;color:#fff!important;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.pr1.wj .wj-invite::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/galeria/DSC_7137.jpg) 50% 34%/cover no-repeat,#050b18;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pr1.wj .wj-invite::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,11,24,.95),rgba(5,11,24,.7) 45%,rgba(5,11,24,.15)),linear-gradient(0deg,rgba(5,11,24,.6),transparent 50%)}
.pr1.wj .wj-invite:hover::before{transform:scale(1.05)}
.pr1.wj .wj-inv{padding:clamp(28px,5vw,56px);max-width:600px;display:flex;flex-direction:column;gap:10px}
.pr1.wj .wj-inv small{color:#E9CF8E;letter-spacing:.2em;text-transform:uppercase;font-weight:700;font-size:12.5px}
.pr1.wj .wj-inv strong{font-family:var(--display);font-size:clamp(34px,5vw,62px);line-height:.98;letter-spacing:-.02em;font-weight:800}
.pr1.wj .wj-inv span{color:rgba(232,238,250,.85);font-size:clamp(16px,1.5vw,19px);line-height:1.5}
.pr1.wj .wj-inv em{font-style:normal;align-self:flex-start;margin-top:12px;padding:13px 22px;border-radius:999px;background:linear-gradient(145deg,#F3DFA6,#C9A45A);color:#1b1406;font-weight:800;font-size:15px;transition:transform .3s,box-shadow .3s}
.pr1.wj .wj-invite:hover em{transform:translateX(4px);box-shadow:0 10px 30px -8px rgba(233,207,142,.7)}
.pr1.wj .wj-invite:focus-visible{outline:3px solid #E9CF8E;outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .pr1.wj .sp-head::before{transform:none}
  .pr1.wj.wj-js .pr1-steps>li,.pr1.wj.wj-js .pr1-help,.pr1.wj.wj-js .wj-invite{opacity:1;transform:none;transition:none}
  .pr1.wj .wj-cue i::after{animation:none}
}
@media (min-width:900px){
  .pr1.wj .sp-head{background:radial-gradient(60% 80% at 75% 40%,rgba(59,111,216,.18),transparent 70%),#050b18}
  .pr1.wj .sp-head::before{left:40%;inset-block:0;background-size:cover;background-position:50% 30%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 34%,#000 88%,transparent)}
  .pr1.wj .sp-head::after{background:linear-gradient(90deg,rgba(5,11,24,.9),rgba(5,11,24,.55) 38%,transparent 62%),linear-gradient(180deg,transparent 70%,var(--bg) 100%)}
}