/* ============================================================================
   GROAH Wszystkie usługi — arkusz komponentu (gsvc-wu-*)
   ----------------------------------------------------------------------------
   ŹRÓDŁO PRAWDY: podglady-html/groah-wszystkie-uslugi.html (bloki
   „CSS KOMPONENTU” i „CSS CTA” przenoszone tu 1:1 skryptem — nie edytować
   wartości tylko tutaj, bo makieta i wtyczka się rozjadą).
   Wszystko zawieszone na body #page-container .gsvc-wu-* (zero et_pb_*),
   tokeny przez var(--gsvc-*, fallback), typografia z mnożnikiem
   var(--gsvc-a11y, 1) — kontrakt z globalnym GSVC v5.4+.
   Jedyny !important: reguła [hidden] (atrybut przegrywa z każdym display).
   ============================================================================ */

/* =========================================================================
   1. CSS KOMPONENTU — 1:1 do wtyczki: assets/css/groah-wszystkie-uslugi.css
      Wszystko zawieszone na body #page-container .gsvc-wu-* (bez et_pb_*).
   ========================================================================= */

/* ---- sekcja-nośnik i wiersz ---------------------------------------------- */
body #page-container .gsvc-wu-pas{
  position:relative;
  background:var(--gsvc-bg,#010209);
}
body #page-container .gsvc-wu{
  color:var(--gsvc-ink,#fff);
  font-size:var(--gsvc-body,clamp(1rem,calc(.22vw * var(--gsvc-a11y,1)) + .94rem,1.12rem));
  line-height:1.62;
  padding:clamp(3.2rem,6vw,5.6rem) 0 clamp(4.2rem,7vw,7rem);
}
/* Katalog rozpycha się szerzej niż standardowy wiersz strony: wychodzi
   z wiersza Divi symetrycznymi ujemnymi marginesami (wiersz jest
   wyśrodkowany w oknie, więc rachunek jest bezpieczny). Tylko desktop —
   niżej wraca do szerokości wiersza. */
@media (min-width:1101px){
  body #page-container .gsvc-wu{
    width:min(97vw,1880px);
    margin-inline:calc((100% - min(97vw,1880px)) / 2);
  }
}
/* Atrybut hidden steruje filtrem — musi wygrywać z każdym display z arkusza. */
body #page-container .gsvc-wu [hidden]{display:none !important}

/* ---- pasek narzędzi: status + filtr + nawigacja obszarów ----------------- */
body #page-container .gsvc-wu-pasek{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:1.15rem clamp(1.4rem,3vw,3rem);
  padding-bottom:clamp(1.5rem,2.6vw,2.4rem);
  border-bottom:1px solid var(--gsvc-line,rgba(255,255,255,.14));
}
body #page-container .gsvc-wu-nadtytul{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  color:var(--gsvc-gold,#e9b13b);
  font-size:.76rem;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:690;
}
body #page-container .gsvc-wu-nadtytul::before{
  content:"";
  width:40px;
  height:1px;
  background:var(--gsvc-gold,#e9b13b);
  opacity:.85;
}
body #page-container .gsvc-wu-status{
  margin:.7rem 0 0;
  color:var(--gsvc-soft,rgba(255,255,255,.86));
  font-size:clamp(1.02rem,calc(.3vw * var(--gsvc-a11y,1)) + .92rem,1.2rem);
  font-weight:560;
}
body #page-container .gsvc-wu-status strong{font-weight:780;color:#fff}

/* pole filtra */
body #page-container .gsvc-wu-filtr{margin:0;justify-self:end}
body #page-container .gsvc-wu-ukryte{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  overflow:hidden;
  white-space:nowrap;
}
body #page-container .gsvc-wu-filtr-pole{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.58rem 1rem;
  border-radius:999px;
  border:1px solid var(--gsvc-line-strong,rgba(255,255,255,.22));
  background:rgba(255,255,255,.04);
  transition:border-color var(--gsvc-motion-base,.24s) ease,background-color var(--gsvc-motion-base,.24s) ease;
}
body #page-container .gsvc-wu-filtr-pole:focus-within{
  border-color:rgba(233,177,59,.56);
  background:rgba(255,255,255,.06);
}
body #page-container .gsvc-wu-filtr-lupka{flex:0 0 auto;color:var(--gsvc-muted,rgba(255,255,255,.66))}
body #page-container .gsvc-wu-filtr-pole input{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  outline:0;
  padding:0;
  width:clamp(150px,20vw,270px);
  color:#fff;
  font:inherit;
  font-weight:500;
}
body #page-container .gsvc-wu-filtr-pole input::placeholder{color:var(--gsvc-faint,rgba(255,255,255,.44))}
body #page-container .gsvc-wu-filtr-pole input::-webkit-search-cancel-button{display:none}
body #page-container .gsvc-wu-filtr-wyczysc{
  flex:0 0 auto;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:15px;line-height:1;
  cursor:pointer;
  transition:background-color var(--gsvc-motion-base,.24s) ease;
}
body #page-container .gsvc-wu-filtr-wyczysc:hover{background:rgba(233,177,59,.4)}

/* pigułki obszarów */
body #page-container .gsvc-wu-chipy{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
body #page-container .gsvc-wu-chip{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .5rem .5rem 1rem;
  border-radius:999px;
  border:1px solid var(--gsvc-line,rgba(255,255,255,.14));
  background:rgba(255,255,255,.03);
  color:var(--gsvc-soft,rgba(255,255,255,.86));
  font-size:.92rem;
  font-weight:600;
  transition:border-color var(--gsvc-motion-base,.24s) ease,color var(--gsvc-motion-base,.24s) ease,background-color var(--gsvc-motion-base,.24s) ease;
}
body #page-container .gsvc-wu-chip-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.7em;
  padding:.12em .5em;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--gsvc-muted,rgba(255,255,255,.66));
  font-size:.78rem;
  font-weight:690;
  font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  body #page-container .gsvc-wu-chip:hover{
    border-color:rgba(233,177,59,.4);
    color:#fff;
    background:rgba(255,255,255,.05);
  }
}
body #page-container .gsvc-wu-chip[aria-current="true"]{
  border-color:rgba(233,177,59,.56);
  color:#fff;
}
body #page-container .gsvc-wu-chip[aria-current="true"] .gsvc-wu-chip-n{
  background:rgba(233,177,59,.16);
  color:var(--gsvc-gold,#e9b13b);
}
body #page-container .gsvc-wu-chip.gsvc-wu-chip--pusty{
  opacity:.35;
  pointer-events:none;
}

/* ---- pasmo obszaru -------------------------------------------------------- */
body #page-container .gsvc-wu-obszar{
  display:grid;
  /* Kolumna nagłówka rośnie razem z tekstem — inaczej przy 125 % długie
     słowo („specjalistyczne") nie mieści się w 300 px i łamie się
     w środku. Od 150 % układ i tak schodzi do jednej kolumny (niżej). */
  /* Kolumna nagłówka musi rosnąć razem z krojem: font pasma liczy się
     z vw, więc stałe 300 px łamało „specjalistyczne" w środku na szerokim
     monitorze, a mnożnik dostępności robił to samo przy 125 %.
     Od 150 % układ i tak schodzi do jednej kolumny (reguła niżej). */
  grid-template-columns:minmax(0,calc(clamp(300px,21vw,460px) * var(--gsvc-a11y,1))) minmax(0,1fr);
  gap:clamp(1.6rem,3vw,4rem);
  padding:clamp(2.6rem,4.6vw,4.4rem) 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  scroll-margin-top:calc(var(--groah-header-clearance,110px) + 14px);
}
body #page-container .gsvc-wu-obszar:last-of-type{border-bottom:0;padding-bottom:0}

body #page-container .gsvc-wu-glowa{align-self:start}
@media (min-width:1101px){
  body #page-container .gsvc-wu-glowa{
    position:sticky;
    top:calc(var(--groah-header-clearance,110px) + 18px);
  }
}
body #page-container .gsvc-wu-obszar-tytul{
  margin:0;
  color:#fff;
  font-size:clamp(1.72rem,calc(2.3vw * var(--gsvc-a11y,1)),2.85rem);
  line-height:1.08;
  letter-spacing:-.015em;
  font-weight:790;
  text-wrap:balance;
  overflow-wrap:break-word;
}
body #page-container .gsvc-wu-obszar-lead{
  margin:clamp(.9rem,1.3vw,1.2rem) 0 0;
  color:var(--gsvc-muted,rgba(255,255,255,.66));
  font-size:var(--gsvc-body,clamp(1rem,calc(.22vw * var(--gsvc-a11y,1)) + .94rem,1.12rem));
  line-height:1.62;
  max-width:44ch;
}
body #page-container .gsvc-wu-obszar-licznik{
  margin:1.1rem 0 0;
  color:var(--gsvc-faint,rgba(255,255,255,.44));
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:690;
  font-variant-numeric:tabular-nums;
}

/* ---- kategoria wewnątrz obszaru ------------------------------------------ */
body #page-container .gsvc-wu-kat + .gsvc-wu-kat{margin-top:clamp(1.9rem,3vw,2.7rem)}
body #page-container .gsvc-wu-kat-tytul{
  display:flex;
  align-items:baseline;
  gap:.65rem;
  margin:0;
  color:var(--gsvc-soft,rgba(255,255,255,.86));
  font-size:clamp(.98rem,calc(.3vw * var(--gsvc-a11y,1)) + .88rem,1.16rem);
  font-weight:690;
  letter-spacing:.01em;
  overflow-wrap:break-word;
}
body #page-container .gsvc-wu-kat-znak{
  flex:0 0 auto;
  width:22px;
  height:2px;
  background:var(--gsvc-gold,#e9b13b);
  align-self:center;
}
body #page-container .gsvc-wu-kat-n{
  color:var(--gsvc-faint,rgba(255,255,255,.44));
  font-size:.82rem;
  font-weight:430;
  font-variant-numeric:tabular-nums;
}

/* ---- siatka kart ---------------------------------------------------------- */
body #page-container .gsvc-wu-siatka{
  list-style:none;
  margin:1.05rem 0 0;
  padding:0;
  display:grid;
  /* W rem, nie w px: panel dostępności ustawia font-size na <html>
     (A+++ = 200 %), więc karta rośnie razem z pismem. min() chroni
     przed przepełnieniem na wąskim ekranie. */
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:clamp(.8rem,1.1vw,1.15rem);
}
body #page-container .gsvc-wu-poz{display:flex}

/* Karta usługi — ten sam język co systemowa .gsvc-service-card i karuzela
   Głównej: pełne zdjęcie, promień 24, scrim od dołu, plakietka „↘” w rogu,
   hover wyłącznie na właściwościach kompozytowanych. */
body #page-container .gsvc-wu-karta{
  position:relative;
  width:100%;
  min-height:clamp(264px,20vw,336px);
  display:grid;
  /* Dwa tory: plakietka „↘" u góry, treść na dole. Plakietka była wcześniej
     pozycjonowana absolutnie i przy powiększeniu tekstu (A+++) tytuł wchodził
     pod nią. Teraz oba elementy są w układzie, więc kolizja jest niemożliwa,
     a karta rośnie, zamiast chować tekst pod overflow:hidden. */
  grid-template-rows:auto 1fr;
  align-content:stretch;
  padding:clamp(1.05rem,1.3vw,1.45rem);
  overflow:hidden;
  isolation:isolate;
  border:2px solid rgba(255,255,255,.12);
  background-clip:padding-box;
  border-radius:24px;
  background-color:rgba(255,255,255,.03);
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  transition:
    transform var(--gsvc-motion-base,.24s) var(--gsvc-ease,cubic-bezier(.22,.61,.36,1)),
    border-color var(--gsvc-motion-base,.24s) ease,
    box-shadow var(--gsvc-motion-base,.24s) ease;
}
body #page-container .gsvc-wu-media{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform var(--gsvc-motion-slow,.5s) var(--gsvc-ease,cubic-bezier(.22,.61,.36,1));
}
/* Scrim — czytelność tytułu i leadu niezależnie od zdjęcia. */
body #page-container .gsvc-wu-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(1,2,9,.78) 0%, rgba(1,2,9,.38) 52%, rgba(1,2,9,.06) 100%),
    radial-gradient(circle at 24% 18%, rgba(233,177,59,.10), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(19,136,255,.10), transparent 34%);
}
/* Zaślepki zdjęć (SVG w CSS) — na stronie nadpisuje je inline style z obrazkiem
   usługi; klasa zostaje jako tło „bez zdjęcia”. */
body #page-container .gsvc-wu-foto-a{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 460'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23071231'/><stop offset='1' stop-color='%2302040d'/></linearGradient><radialGradient id='r' cx='.78' cy='.24' r='.7'><stop offset='0' stop-color='%23e9b13b' stop-opacity='.30'/><stop offset='1' stop-color='%23e9b13b' stop-opacity='0'/></radialGradient></defs><rect width='640' height='460' fill='url(%23g)'/><rect width='640' height='460' fill='url(%23r)'/><g fill='none' stroke='%23f4d58a' stroke-opacity='.18'><circle cx='498' cy='108' r='150'/><circle cx='498' cy='108' r='225'/><circle cx='498' cy='108' r='300'/></g></svg>")}
body #page-container .gsvc-wu-foto-b{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 460'><defs><linearGradient id='g' x1='1' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23081737'/><stop offset='1' stop-color='%2301030a'/></linearGradient><radialGradient id='r' cx='.2' cy='.78' r='.75'><stop offset='0' stop-color='%231388ff' stop-opacity='.26'/><stop offset='1' stop-color='%231388ff' stop-opacity='0'/></radialGradient></defs><rect width='640' height='460' fill='url(%23g)'/><rect width='640' height='460' fill='url(%23r)'/><g fill='none' stroke='%239cc7ff' stroke-opacity='.16'><circle cx='120' cy='380' r='140'/><circle cx='120' cy='380' r='215'/><circle cx='120' cy='380' r='290'/></g></svg>")}
body #page-container .gsvc-wu-foto-c{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 460'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2304122e'/><stop offset='1' stop-color='%23020617'/></linearGradient><radialGradient id='r1' cx='.16' cy='.2' r='.6'><stop offset='0' stop-color='%23e9b13b' stop-opacity='.20'/><stop offset='1' stop-color='%23e9b13b' stop-opacity='0'/></radialGradient><radialGradient id='r2' cx='.86' cy='.82' r='.6'><stop offset='0' stop-color='%231388ff' stop-opacity='.22'/><stop offset='1' stop-color='%231388ff' stop-opacity='0'/></radialGradient></defs><rect width='640' height='460' fill='url(%23g)'/><rect width='640' height='460' fill='url(%23r1)'/><rect width='640' height='460' fill='url(%23r2)'/><g fill='none' stroke='%23e9b13b' stroke-opacity='.15' stroke-width='1.3'><path d='M-20 330 Q 320 230 660 315'/><path d='M-20 375 Q 320 275 660 360'/><path d='M-20 420 Q 320 320 660 405'/></g></svg>")}
body #page-container .gsvc-wu-foto-d{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 460'><defs><linearGradient id='g' x1='0' y1='1' x2='1' y2='0'><stop offset='0' stop-color='%230a0f1f'/><stop offset='1' stop-color='%2303060f'/></linearGradient><radialGradient id='r' cx='.5' cy='.04' r='.8'><stop offset='0' stop-color='%23f4d58a' stop-opacity='.22'/><stop offset='1' stop-color='%23f4d58a' stop-opacity='0'/></radialGradient></defs><rect width='640' height='460' fill='url(%23g)'/><rect width='640' height='460' fill='url(%23r)'/><g fill='none' stroke='%23f4d58a' stroke-opacity='.15'><circle cx='320' cy='560' r='170'/><circle cx='320' cy='560' r='250'/><circle cx='320' cy='560' r='330'/><circle cx='320' cy='560' r='410'/></g></svg>")}

/* Plakietka „przejdź” — jak w karcie usługi na Głównej (bez backdrop-filter:
   plakietek są tu dziesiątki, gęste tło daje tę samą czytelność za zero kosztu). */
body #page-container .gsvc-wu-karta::after{
  content:"↘";
  position:relative;
  grid-row:1;
  justify-self:start;
  z-index:4;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(233,177,59,.56);
  border-radius:999px;
  background:rgba(1,2,9,.62);
  color:var(--gsvc-gold,#e9b13b);
  font-size:18px;
  line-height:1;
}
body #page-container .gsvc-wu-karta-tresc{
  position:relative;
  grid-row:2;
  align-self:end;
  /* Element siatki ma domyślnie min-width:auto = „nie węziej niż najdłuższe
     słowo". Przy powiększonym tekście treść rozpychała się poza kartę
     (zmierzone na instalce: karta 237 px, treść 380 px) i była ucinana
     przez overflow:hidden. Zero pozwala jej dopasować się do karty. */
  min-width:0;
  z-index:2;
  display:grid;
  gap:.5rem;
  /* Karta w niepełnym rzędzie rozciąga się na całą szerokość siatki —
     tekst zostaje przy lewej krawędzi w czytelnej mierze. */
  max-width:620px;
}
body #page-container .gsvc-wu-karta-tytul{
  color:#fff;
  font-size:clamp(1.14rem,calc(1.12vw * var(--gsvc-a11y,1)),1.42rem);
  line-height:1.16;
  letter-spacing:-.012em;
  font-weight:700;
  text-wrap:balance;
  /* anywhere, nie break-word: tylko anywhere zmienia minimalną szerokość
     wyliczaną przez siatkę, więc długie słowo naprawdę pozwala zwęzić kartę. */
  overflow-wrap:anywhere;
  text-shadow:0 2px 16px rgba(0,0,0,.34);
}
body #page-container .gsvc-wu-karta-lead{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  color:rgba(255,255,255,.78);
  font-size:clamp(.9rem,calc(.2vw * var(--gsvc-a11y,1)) + .84rem,1rem);
  line-height:1.5;
  font-weight:430;
  overflow-wrap:anywhere;
}
/* Ograniczenie leadu do 3 wierszy jest decyzją estetyczną przy normalnej
   skali. Gdy użytkownik powiększa tekst, treść NIE MOŻE ginąć (WCAG 1.4.4),
   więc na każdym stopniu panelu dostępności limit znika, a karta rośnie. */
html.groah-a11y-text-1 body #page-container .gsvc-wu-karta-lead,
html.groah-a11y-text-2 body #page-container .gsvc-wu-karta-lead,
html.groah-a11y-text-3 body #page-container .gsvc-wu-karta-lead{
  -webkit-line-clamp:unset;
  overflow:visible;
}
/* Od 150 % w górę wąska kolumna nagłówka pasma (300 px) przestaje mieścić
   nawet pojedyncze słowo („Finansowanie") i łamałoby je w środku. Układ
   schodzi więc do jednej kolumny — dokładnie tak, jak poniżej 1100 px:
   powiększony tekst to ten sam problem co wąski ekran. */
html.groah-a11y-text-2 body #page-container .gsvc-wu-obszar,
html.groah-a11y-text-3 body #page-container .gsvc-wu-obszar{
  grid-template-columns:minmax(0,1fr);
  gap:1.4rem;
}
html.groah-a11y-text-2 body #page-container .gsvc-wu-obszar-lead,
html.groah-a11y-text-3 body #page-container .gsvc-wu-obszar-lead{max-width:62ch}
html.groah-a11y-text-2 body #page-container .gsvc-wu-glowa,
html.groah-a11y-text-3 body #page-container .gsvc-wu-glowa{position:static}
@media (hover:hover) and (pointer:fine){
  body #page-container .gsvc-wu-karta:hover{
    transform:translateY(-6px);
    border-color:rgba(233,177,59,.40);
    box-shadow:0 32px 100px rgba(0,0,0,.34);
  }
  body #page-container .gsvc-wu-karta:hover .gsvc-wu-media{transform:scale(1.045)}
}
body #page-container .gsvc-wu-karta:focus-visible,
body #page-container .gsvc-wu-chip:focus-visible,
body #page-container .gsvc-wu-filtr-wyczysc:focus-visible,
body #page-container .gsvc-wu-brak-reset:focus-visible{
  outline:2px solid var(--gsvc-gold,#e9b13b);
  outline-offset:3px;
}

/* ---- brak wyników filtra -------------------------------------------------- */
body #page-container .gsvc-wu-brak{
  margin-top:clamp(2.2rem,4vw,3.4rem);
  padding:clamp(1.9rem,3.4vw,3rem);
  border:1px dashed var(--gsvc-line-strong,rgba(255,255,255,.22));
  border-radius:18px;
  text-align:center;
}
body #page-container .gsvc-wu-brak-naglowek{
  margin:0;
  color:#fff;
  font-size:clamp(1.1rem,calc(.4vw * var(--gsvc-a11y,1)) + 1rem,1.3rem);
  font-weight:720;
}
body #page-container .gsvc-wu-brak-tekst{
  margin:.55rem 0 0;
  color:var(--gsvc-muted,rgba(255,255,255,.66));
}
body #page-container .gsvc-wu-brak-reset{
  margin-top:1.3rem;
  padding:.72rem 1.5rem;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:none;
  color:#fff;
  font:inherit;
  font-weight:690;
  cursor:pointer;
  transition:border-color var(--gsvc-motion-base,.24s) ease;
}
body #page-container .gsvc-wu-brak-reset:hover{border-color:rgba(233,177,59,.56)}

/* ---- zwężenia ------------------------------------------------------------- */
@media (max-width:1100px){
  body #page-container .gsvc-wu-obszar{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  body #page-container .gsvc-wu-obszar-lead{max-width:62ch}
}
@media (max-width:760px){
  body #page-container .gsvc-wu-pasek{grid-template-columns:minmax(0,1fr)}
  body #page-container .gsvc-wu-filtr{justify-self:stretch}
  body #page-container .gsvc-wu-filtr-pole input{width:100%;flex:1}
  body #page-container .gsvc-wu-filtr-pole{width:100%}
  body #page-container .gsvc-wu-siatka{grid-template-columns:repeat(auto-fit,minmax(min(12.8rem,100%),1fr))}
  body #page-container .gsvc-wu-karta{min-height:clamp(240px,60vw,318px)}
}

/* ---- dostępność ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body #page-container .gsvc-wu *{transition-duration:.01s}
}
html.groah-a11y-reduced-motion body #page-container .gsvc-wu *{transition-duration:.01s}
html.groah-a11y-high-contrast body #page-container .gsvc-wu-media::after{
  background:linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%);
}
html.groah-a11y-high-contrast body #page-container .gsvc-wu-karta{border-color:#fff}
html.groah-a11y-high-contrast body #page-container .gsvc-wu-karta-lead{color:#fff}
html.groah-a11y-high-contrast body #page-container .gsvc-wu-chip{border-color:#fff;color:#fff}
/* Przyciski CTA: złoty ma tło wpisane wprost (var --gsvc-gold), więc globalna
   warstwa kontrastu nie ma czego przestawić — gasimy je tutaj. Pełny border,
   nie samo border-color: złoty wariant nie ma ramki i bez tego byłby czarną
   pigułką na czarnym tle. (Znalezisko sondy WCAG, 17.09.2026.) */
html.groah-a11y-high-contrast body #page-container .gsvc-wu-btn{
  background:#000;
  color:#fff;
  -webkit-text-fill-color:#fff;
  border:1px solid #fff;
}

/* =========================================================================
   2. CSS CTA — TAKŻE w pliku wtyczki (cały gsvc-wu-* w jednym arkuszu:
      assets/css/groah-wszystkie-uslugi.css; dokument DPS nie niesie CSS,
      bo CTA stoi zawsze na tej samej stronie co shortcode)
   ========================================================================= */
body #page-container .gsvc-wu-cta{
  position:relative;
  background:
    radial-gradient(circle at 18% 0%, rgba(233,177,59,.10), transparent 42%),
    radial-gradient(circle at 85% 100%, rgba(19,136,255,.08), transparent 40%),
    var(--gsvc-bg-2,#040611);
  border-top:1px solid var(--gsvc-line,rgba(255,255,255,.14));
}
body #page-container .gsvc-wu-cta-rzad{
  padding-top:clamp(4.2rem,7.5vw,7rem);
  padding-bottom:clamp(4.6rem,8vw,7.6rem);
}
/* Wyśrodkowanie siedzi WEWNĄTRZ modułu tekstowego (div w treści), nie na
   rowie Divi — grid na rowie zgniatałby natywną kolumnę. */
body #page-container .gsvc-wu-cta-wnetrze{
  display:grid;
  justify-items:center;
  text-align:center;
}
body #page-container .gsvc-wu-cta-tytul{
  margin:1.05rem 0 0;
  color:#fff;
  font-size:clamp(1.95rem,calc(2.9vw * var(--gsvc-a11y,1)),3.55rem);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:820;
  text-wrap:balance;
  max-width:22ch;
}
body #page-container .gsvc-wu-cta-lead{
  margin:clamp(1rem,1.4vw,1.35rem) 0 0;
  color:var(--gsvc-muted,rgba(255,255,255,.66));
  font-size:var(--gsvc-lead,clamp(1.04rem,calc(.55vw * var(--gsvc-a11y,1)) + .94rem,1.26rem));
  line-height:1.62;
  max-width:52ch;
}
body #page-container .gsvc-wu-cta-akcje{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.85rem;
  margin-top:clamp(1.7rem,2.6vw,2.4rem);
}
body #page-container .gsvc-wu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.95rem 1.7rem;
  border-radius:999px;
  font-size:.98rem;
  font-weight:760;
  letter-spacing:.01em;
  transition:transform var(--gsvc-motion-base,.24s) var(--gsvc-ease,cubic-bezier(.22,.61,.36,1)),box-shadow var(--gsvc-motion-base,.24s) ease,border-color var(--gsvc-motion-base,.24s) ease,background-color var(--gsvc-motion-base,.24s) ease;
}
body #page-container .gsvc-wu-btn--zloty{
  background:var(--gsvc-gold,#e9b13b);
  color:#080601;
}
body #page-container .gsvc-wu-btn--duch{
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
}
@media (hover:hover) and (pointer:fine){
  body #page-container .gsvc-wu-btn--zloty:hover{
    transform:translateY(-2px);
    background:var(--gsvc-champagne,#f4d58a);
    box-shadow:0 14px 44px rgba(233,177,59,.22);
  }
  body #page-container .gsvc-wu-btn--duch:hover{border-color:rgba(233,177,59,.56)}
}
body #page-container .gsvc-wu-btn:focus-visible{
  outline:2px solid var(--gsvc-gold,#e9b13b);
  outline-offset:3px;
}
@media (max-width:760px){
  body #page-container .gsvc-wu-btn{width:100%}
}