/* =========================================================
   PS ARC BLOCKS – V8 (fix)
========================================================= */

.ps-arc{
  --ps-arc-max: 980px;
  --ps-arc-rail: clamp(120px, 19vw, 230px);

  /* większe kółka */
  --ps-arc-pin: clamp(52px, 5.2vw, 64px);
  --ps-arc-step: clamp(18px, 3.2vw, 30px);

  --ps-arc-line: rgba(255,255,255,.62);
  --ps-arc-line-soft: rgba(255,255,255,.16);

  --ps-arc-text: #fff;

  /* PODTEKSTY MAJĄ BYĆ BIAŁE */
  --ps-arc-muted: rgba(255,255,255,.92);

  /* białe koła */
  --ps-arc-dot-bg: rgba(255,255,255,.98);
  --ps-arc-dot-fg: rgba(0,0,0,.82);

  /* stabilny tor (JS) */
  --ps-arc-path-x0: 34;
  --ps-arc-bend-px: 44;

  /* przerwa między linią a ikoną */
  --ps-arc-icon-gap: 18px;

  /* cap */
  --ps-arc-cap: 40px;

  /* hover/spacing */
  --ps-arc-card-pad: clamp(10px, 1.4vw, 14px);

  /* divider dla lewej strony: gdzie ma stać pionowa linia */
  --ps-arc-divider-x: 34%;

  position: relative;
  width: 100%;
}

.ps-arc--dark{
  --ps-arc-line: rgba(0,0,0,.55);
  --ps-arc-line-soft: rgba(0,0,0,.14);

  --ps-arc-text: #171718;
  --ps-arc-muted: rgba(23,23,24,.72);

  --ps-arc-dot-bg: #fff;
  --ps-arc-dot-fg: #171718;
}

.ps-arc__inner{
  position: relative;
  max-width: var(--ps-arc-max);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) clamp(14px, 2.2vw, 22px);
}

/* RAIL: JS ustawia top + height */
.ps-arc__rail{
  position: absolute;
  top: 0;
  height: 100px;
  width: var(--ps-arc-rail);
  pointer-events: none;
}

/* LEFT: łuk odsunięty w lewo i “odklejony” od ikon */
.ps-arc--left{
  --ps-arc-path-x0: 14;      /* mniejsza wartość = bliżej lewej krawędzi raila */
  --ps-arc-bend-px: 56;      /* lekko większe wygięcie żeby wyglądało jak łuk */
  --ps-arc-icon-gap: 34px;   /* większy odstęp ikony od łuku */
}
.ps-arc--left .ps-arc__path{ opacity: .92; }

.ps-arc--right .ps-arc__rail{ right: 0; }

.ps-arc__svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ps-arc__path{
  fill: none;
  stroke: var(--ps-arc-line);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .95;
}

/* =========================================================
   1) LEWA STRONA: zamiast łuku robimy divider
   - ukrywamy path (jak było)
========================================================= */

.ps-arc--left .ps-arc__path{
  opacity: 0;
}

/* Lista */
.ps-arc__list{
  position: relative;
  display: grid;
  gap: var(--ps-arc-step);
  padding: clamp(6px, 1vw, 10px) 0;
}

/* Item */
.ps-arc__item{
  position: relative;
  display: grid;
  align-items: start;
  grid-template-columns: var(--ps-arc-rail) 1fr;
  column-gap: clamp(14px, 2.2vw, 22px);
  min-height: var(--ps-arc-pin);

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .85s ease, transform .85s ease;
  will-change: opacity, transform;
}

.ps-arc__item.is-in{
  opacity: 1;
  transform: translateY(0);
}

.ps-arc--right .ps-arc__item{
  grid-template-columns: 1fr var(--ps-arc-rail);
}

/* Pin */
.ps-arc__pin{
  position: relative;
  width: var(--ps-arc-rail);
  height: var(--ps-arc-pin);
  display: block;
}

/* Kółko ikony */
.ps-arc__dot{
  position: absolute;
  top: 50%;
  left: calc(var(--ps-arc-icon-x, 0px) - (var(--ps-arc-pin) / 2));
  transform: translateY(-50%);
  width: var(--ps-arc-pin);
  height: var(--ps-arc-pin);
  border-radius: 999px;
  background: var(--ps-arc-dot-bg);
  color: var(--ps-arc-dot-fg);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  z-index: 2;
}

.ps-arc__dot i{
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1;
}

/* Pozioma linia 1px: od ikony do treści */
.ps-arc__pin::after{
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.65);

  left: calc(var(--ps-arc-icon-x, 0px) + (var(--ps-arc-pin) / 2));
  width: calc(100% - (var(--ps-arc-icon-x, 0px) + (var(--ps-arc-pin) / 2)));
}

.ps-arc--dark .ps-arc__pin::after{
  background: rgba(0,0,0,.45);
}

.ps-arc--right .ps-arc__pin::after{
  left: 0;
  width: calc(var(--ps-arc-icon-x, 0px) - (var(--ps-arc-pin) / 2));
}

/* Treść */
.ps-arc__content{
  color: var(--ps-arc-text);
  padding: var(--ps-arc-card-pad) calc(var(--ps-arc-card-pad) + 2px);
  border-radius: 16px;
  transform: translateX(0);
  transition: transform .24s ease, box-shadow .24s ease;

  /* eliminuje dziwne „podkreślenia” z globali (link underline / shadows) */
  text-decoration: none;
}

/* jeśli w treści są linki, też nie mogą robić czarnej kreski */
.ps-arc__content a,
.ps-arc__content a:visited{
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
  background-image: none;
}
.ps-arc__content a:hover,
.ps-arc__content a:focus{
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
}

/* H3: lekko większe */
.ps-arc__title{
  margin: 0 0 6px 0;
  font-weight: 600;
  font-size: clamp(16.5px, 1.75vw, 20px);
  line-height: 1.18;
}

.ps-arc__text{
  margin: 0;
  color: var(--ps-arc-muted);
  font-size: clamp(12.25px, 1.25vw, 13.6px);
  line-height: 1.55;

  /* na wypadek, gdyby temat dawał underline/shadow na <p> */
  text-decoration: none;
  box-shadow: none;
  background-image: none;
}

/* Separatory */
.ps-arc__item + .ps-arc__item .ps-arc__content{
  border-top: 1px solid var(--ps-arc-line-soft);
  padding-top: calc(var(--ps-arc-card-pad) + 10px);
  margin-top: 2px;
}

/* =========================================================
   3) Hover: większy zoom + pulse „radar” (1x)
========================================================= */

.ps-arc--left  .ps-arc__item:hover .ps-arc__content{ transform: translateX(-12px); }
.ps-arc--right .ps-arc__item:hover .ps-arc__content{ transform: translateX(12px); }

.ps-arc__item:hover .ps-arc__content{
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.ps-arc__item:hover .ps-arc__dot,
.ps-arc__item:focus-within .ps-arc__dot{
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
  filter: saturate(1.06);
}

/* pulse class doklejany JS */
.ps-arc__dot.is-pulse{
  animation: ps-arc-pulse 0.78s ease-out 1;
}

/* „radar”: jedna fala */
@keyframes ps-arc-pulse{
  0%{
    box-shadow:
      0 16px 44px rgba(0,0,0,.28),
      0 0 0 0 rgba(255,255,255,.45);
  }
  65%{
    box-shadow:
      0 16px 44px rgba(0,0,0,.28),
      0 0 0 18px rgba(255,255,255,0);
  }
  100%{
    box-shadow:
      0 16px 44px rgba(0,0,0,.28),
      0 0 0 0 rgba(255,255,255,0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ps-arc *{ transition: none !important; animation: none !important; }
  .ps-arc__item{ opacity: 1; transform: none; }
}

/* SR-only */
.sr-only{
  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;
  white-space:nowrap !important;
  border:0 !important;
}

/* =========================================================
   1) Rail znika wcześniej na węższych ekranach (divider też)
========================================================= */
@media (max-width: 980px){
  .ps-arc__rail{ display:none; }
}

/* =========================================================
   Wąski ekran: skracamy trochę linie ::after, żeby tekst miał więcej miejsca
========================================================= */
@media (max-width: 860px){
  .ps-arc__pin::after{
    width: calc(100% - (var(--ps-arc-icon-x, 0px) + (var(--ps-arc-pin) / 2)) - 14px);
  }
  .ps-arc--right .ps-arc__pin::after{
    width: calc(var(--ps-arc-icon-x, 0px) - (var(--ps-arc-pin) / 2) - 14px);
  }
}

/* Mobile fallback */
@media (max-width: 720px){
  .ps-arc__rail{ display:none; }

  .ps-arc__list{
    gap: 16px;
    padding-left: 0;

    /* USUWAMY pionową linię na mobile */
    border-left: 0;
  }

  .ps-arc__item{
    grid-template-columns: var(--ps-arc-pin) 1fr !important;
    column-gap: 12px;
    opacity: 1;
    transform: none;
  }

  .ps-arc__pin{ width: var(--ps-arc-pin); }

  .ps-arc__dot{
    position: relative;
    left: 0;
    top: 0;
    transform: none !important;
  }

  .ps-arc__pin::after{ display:none; }
  .ps-arc__content{
    transform: none !important;
    box-shadow: none !important;
    padding: 0;
  }
}


/* =========================================================
   PS ARC – HARD FIX: usuwa underline z linków (a) które "ciągną" podkreślenie na dzieci
========================================================= */
.ps-arc [data-ps-arc-item] a,
.ps-arc [data-ps-arc-item] a:link,
.ps-arc [data-ps-arc-item] a:visited,
.ps-arc [data-ps-arc-item] a:hover,
.ps-arc [data-ps-arc-item] a:focus,
.ps-arc [data-ps-arc-item] a:active{
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 0 !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;

  /* często theme robi underline przez "fake line" */
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* jak underline "przechodzi" na tekst w środku */
.ps-arc [data-ps-arc-item] a *,
.ps-arc [data-ps-arc-item] a *::before,
.ps-arc [data-ps-arc-item] a *::after{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* na wypadek gdyby WPBakery/tema doklejał kreskę pseudo-elementem do nagłówków */
.ps-arc .ps-arc__title::after,
.ps-arc .ps-arc__title::before,
.ps-arc .ps-arc__text::after,
.ps-arc .ps-arc__text::before{
  content: none !important;
  display: none !important;
}


/* =========================================================
   PS ARC – FINAL UNDERLINE KILL (gdy .ps-arc__content jest <a>)
========================================================= */

/* jeśli cały boks jest linkiem */
.ps-arc a.ps-arc__content,
.ps-arc a.ps-arc__content:link,
.ps-arc a.ps-arc__content:visited,
.ps-arc a.ps-arc__content:hover,
.ps-arc a.ps-arc__content:focus,
.ps-arc a.ps-arc__content:active{
  text-decoration: none !important;
  text-decoration-line: none !important;

  /* popularne "underline" z theme: gradient na tle */
  background: transparent !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;

  /* inne sztuczki */
  box-shadow: none !important;
  border-bottom: 0 !important;
  outline: none;
}

/* tekst w środku też bez żadnych "kreskowych" efektów */
.ps-arc a.ps-arc__content .ps-arc__title,
.ps-arc a.ps-arc__content .ps-arc__text,
.ps-arc a.ps-arc__content .ps-arc__title *,
.ps-arc a.ps-arc__content .ps-arc__text *{
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* jeśli theme dorysowuje linię pseudo-elementem */
.ps-arc a.ps-arc__content .ps-arc__title::before,
.ps-arc a.ps-arc__content .ps-arc__title::after,
.ps-arc a.ps-arc__content .ps-arc__text::before,
.ps-arc a.ps-arc__content .ps-arc__text::after{
  content: none !important;
  display: none !important;
}


/* =========================================================
   PS ARC – REAL FIX: item = <a>, więc underline siedzi na .ps-arc__item
========================================================= */

/* sam link-item */
.ps-arc a.ps-arc__item,
.ps-arc a.ps-arc__item:link,
.ps-arc a.ps-arc__item:visited,
.ps-arc a.ps-arc__item:hover,
.ps-arc a.ps-arc__item:focus,
.ps-arc a.ps-arc__item:active{
  color: inherit;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  text-decoration-color: transparent !important;

  border-bottom: 0 !important;
  box-shadow: none !important;

  /* najczęstszy "underline" z motywów: gradient jako tło linka */
  background-image: none !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
}

/* wszystko wewnątrz linka też bez kreskowych sztuczek */
.ps-arc a.ps-arc__item *{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* gdyby motyw dorysowywał kreskę pseudo-elementem */
.ps-arc a.ps-arc__item *::before,
.ps-arc a.ps-arc__item *::after{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}