/* ==========================================================================
   Problemy (#problemy): wybór miejsca bólu (logika z wp-theme-rhfizjo/parts/problemy.php).
   Układ: .sec-head → duża karta: sylwetka na mglistym panelu (pomarańczowe punkty =
   przyciski aria-pressed, zoom na obszar) | opis z ceną i CTA → rozwijane „Nie tego szukasz?”.
   2026-09-27 (właściciel): siatka 6 kafli z ilustracjami usunięta, punkty na pomarańcz.
   Ruch: tylko transform/opacity. Zoom sylwetki .75 s, przenikanie paneli ok. 300 ms.
   Stan bez JS (brak .is-ready): sylwetka ukryta, wszystkie panele widoczne w siatce.
   Pomarańcz: .btn--primary oraz (decyzja właściciela) punkty i pierścień na sylwetce;
   etykiety „Boli mnie …” zostają w atramencie.
   ========================================================================== */

/* ---- Nagłówek: koniec zdania uzupełnia wybór pacjenta („…bo boli Cię kolano”) ---- */
.problemy .problemy__fill {
  display: inline-block;
  min-width: 1.2em;
  font-style: normal;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  line-height: 1.02;
}
.problemy .problemy__fill.is-filled { color: var(--ink-strong); }
.problemy .problemy__fill.is-swap { animation: problemy-swap 0.42s var(--ease-out) both; }
@keyframes problemy-swap {
  from { opacity: 0; transform: translateY(0.2em); }
  to { opacity: 1; transform: none; }
}

/* ---- Duża karta: sylwetka | opis ---- */
.problemy .problemy__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  padding: 12px;
}

/* Mglisty panel z sylwetką (jak makieta UI w kartach funkcji Dialogu) */
.problemy .problemy__stage {
  position: relative;
  display: flex;
  justify-content: center;
  height: clamp(300px, 80vw, 440px);
  border-radius: var(--radius-cardinner);
  background: var(--color-fog);
  overflow: hidden;
  isolation: isolate;
}

/* Zoom: translate(%) scale() na figurze; procenty względem samej figury, więc bez
   przeliczania przy zmianie szerokości. Figura 2:3 wyśrodkowana w szerszym panelu:
   ten sam wzór co w źródle (punkt zx, zy ląduje na środku panelu). */
.problemy .problemy__fig {
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: 2 / 3;
  transform-origin: 0 0;
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.1, 1);
  /* bez will-change: z nim Chrome rasteryzuje warstwę w skali 1 i po zoomie obraz oraz
     etykieta są rozmyte; animacja i tak dostaje własną warstwę na czas przejścia */
}
.problemy .problemy__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Aktywny obszar: cienki atramentowy pierścień (grubość kompensuje skalę zoomu) */
.problemy .problemy__glow {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border: calc(1.5px / var(--s, 1)) solid var(--accent);
  border-radius: 50%;
  background: rgba(246, 146, 81, 0.14);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
  pointer-events: none;
}
.problemy .problemy__glow.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Punkty na sylwetce: jedyna droga wyboru (w tabulacji). Cel 44 px, kropka 14 px.
   Skala 1/--s trzyma ich rozmiar stały przy zoomie. Kropka pomarańczowa z białym pierścieniem
   i cienką ciemną obwódką (krawędź czytelna także na jasnym tle sylwetki). */
.problemy .problemy__spot {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1)));
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.problemy .problemy__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(28, 23, 20, 0.16), 0 2px 6px rgba(28, 23, 20, 0.18);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease;
}
/* Po wejściu punktów dwie spokojne fale wokół kropek (raz, nie w pętli): podpowiedź „kliknij”. */
.problemy .problemy__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.problemy .problemy__card.is-in .problemy__dot::after {
  animation: problemy-ripple 1.6s var(--ease-out) calc(var(--d, 0.3s) + 0.7s) 2;
}
@keyframes problemy-ripple {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}
.problemy .problemy__spot.is-active .problemy__dot { background: #e8773a; transform: scale(1.15); }
.problemy .problemy__spot:focus-visible { outline: none; }
.problemy .problemy__spot:focus-visible .problemy__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--focus); }
.problemy .problemy__spot:focus-visible .problemy__spot-label { opacity: 1; }
.problemy .problemy__spot-label {
  position: absolute;
  top: 50%;
  right: calc(100% - 6px);
  padding: 7px 12px;
  border-radius: var(--radius-badges);
  background: var(--color-midnight-ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small);
  white-space: nowrap;
  box-shadow: var(--shadow-subtle);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.25s ease;
  pointer-events: none;
}
/* Wejście punktów: raz, po kolei z góry na dół, gdy karta wjedzie w ekran ([data-reveal] daje .is-in).
   backwards, nie both: po animacji wraca zwykły styl, więc działa powiększenie na hover. */
.js .problemy .problemy__card:not(.is-in) .problemy__dot { opacity: 0; transform: scale(0.4); }
.problemy .problemy__card.is-in .problemy__dot { animation: problemy-dot-in 0.5s var(--ease-out) 0.3s backwards; }
.problemy .problemy__spot:nth-of-type(2) .problemy__dot { animation-delay: 0.39s; --d: 0.39s; }
.problemy .problemy__spot:nth-of-type(3) .problemy__dot { animation-delay: 0.48s; --d: 0.48s; }
.problemy .problemy__spot:nth-of-type(4) .problemy__dot { animation-delay: 0.57s; --d: 0.57s; }
.problemy .problemy__spot:nth-of-type(5) .problemy__dot { animation-delay: 0.66s; --d: 0.66s; }
.problemy .problemy__spot:nth-of-type(6) .problemy__dot { animation-delay: 0.75s; --d: 0.75s; }
/* Telefon: mniejsza kropka na małej sylwetce (cel dotyku zostaje 44 px), jak w źródle */
@media (max-width: 767px) {
  .problemy .problemy__dot { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(28, 23, 20, 0.16), 0 2px 4px rgba(28, 23, 20, 0.16); }
}
@keyframes problemy-dot-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}
.problemy .problemy__spot--right .problemy__spot-label { right: auto; left: calc(100% - 6px); }
.problemy .problemy__spot.is-active .problemy__spot-label { opacity: 1; }
.problemy.is-zoomed .problemy__spot:not(.is-active) { opacity: 0.4; }
@media (hover: hover) {
  .problemy .problemy__spot:hover .problemy__dot { transform: scale(1.2); }
  .problemy .problemy__spot:hover .problemy__spot-label { opacity: 1; }
}

/* ---- Opis: stan spoczynku + 6 paneli ---- */
.problemy .problemy__side {
  position: relative;
  padding: 24px 12px 12px;
}

.problemy .problemy__label {
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.problemy .problemy__empty .problemy__label { margin-bottom: 16px; }

.problemy .problemy__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.problemy .problemy__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -4px -10px 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease;
}
.problemy .problemy__close:hover { border-color: var(--ink); }
.problemy .problemy__close:focus-visible { border-radius: 50%; }

/* Pytanie panelu i tekst spoczynku: głos display (lekki), ta sama wielkość, bo się przenikają */
.problemy .problemy__title,
.problemy .problemy__empty-text {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  color: var(--ink-strong);
}
.problemy .problemy__title { margin-bottom: 20px; text-wrap: balance; }
.problemy .problemy__title em { font-style: normal; color: var(--ink-3); }
.problemy .problemy__empty-text { margin-bottom: 24px; font-size: clamp(22px, 2.6vw, 30px); text-wrap: pretty; }

.problemy .problemy__lead {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small);
  color: var(--ink-strong);
}
.problemy .problemy__list {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.problemy .problemy__list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.problemy .problemy__list li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
}

/* Uwaga o lędźwiach: mglista wstawka 12 px zamiast bursztynowego paska ze źródła */
.problemy .problemy__flag {
  margin: -8px 0 24px;
  padding: 12px 16px;
  border-radius: var(--radius-cardinner);
  background: var(--color-fog);
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small);
  color: var(--ink-strong);
  text-wrap: pretty;
}

.problemy .problemy__meta {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: var(--tracking-small);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.problemy .problemy__meta strong { color: var(--ink-strong); }

/* Przenikanie warstw (tylko z JS): wychodząca gaśnie szybciej, wchodząca z lekkim opóźnieniem */
.problemy.is-ready .problemy__layer {
  transition: opacity 0.3s var(--ease-out) 0.08s, transform 0.36s var(--ease-out) 0.08s;
}
.problemy.is-ready .problemy__layer:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* Telefon/tablet: w przepływie tylko aktywna warstwa, pozostałe leżą na niej od góry */
@media (max-width: 1023px) {
  .problemy.is-ready .problemy__layer:not(.is-active) { position: absolute; top: 24px; left: 12px; right: 12px; }
  .problemy.is-zoomed .problemy__spot:not(.is-active) { opacity: 0; pointer-events: none; }
}

/* Desktop: dwie kolumny; warstwy w jednej komórce siatki, więc wysokość karty się nie zmienia */
@media (min-width: 1024px) {
  .problemy .problemy__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 540px;
    margin-top: 24px;
  }
  /* contain: size = scena nie wnosi własnej wysokości do rzędu (inaczej rozpycha ją obraz
     w rozmiarze z sizes); rozciąga się do wysokości karty/opisu, a figura liczy 100% od niej */
  .problemy .problemy__stage { height: auto; contain: size; }
  .problemy .problemy__side {
    display: grid;
    align-items: center;
    padding: 40px clamp(32px, 4vw, 56px);
  }
  .problemy.is-ready .problemy__layer { grid-area: 1 / 1; }
}

/* ---- „Nie tego szukasz?” (rozwijany kafel) ---- */
.problemy .problemy__more {
  margin-top: 16px;
  padding: 0;
}
.problemy .problemy__more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 14px 16px 14px 24px;
  border: 0;
  border-radius: var(--radius-cards);
  background: none;
  color: var(--ink-strong);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.problemy .problemy__more-toggle:focus-visible { border-radius: var(--radius-cards); outline-offset: -2px; }
.problemy .problemy__more-q {
  font-size: 17px;
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small);
}
.problemy .problemy__more-icon {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--color-fog);
  transition: transform 0.45s var(--ease-out), border-color var(--dur-fast) ease;
}
.problemy .problemy__more-icon::before,
.problemy .problemy__more-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  border-radius: 2px;
  background: var(--color-midnight-ink);
}
.problemy .problemy__more-icon::after { transform: rotate(90deg); }
.problemy .problemy__more-toggle:hover .problemy__more-icon { border-color: var(--ink); }
.problemy .problemy__more.is-open .problemy__more-icon { transform: rotate(135deg); }

.problemy .problemy__more-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 0 24px 24px;
}
.problemy .problemy__more-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* Zwinięty tylko, gdy JS przejął kafel (.is-js); rozwinięcie: treść wjeżdża opacity + transform */
.problemy .problemy__more.is-js:not(.is-open) .problemy__more-panel { display: none; }
.problemy .problemy__more.is-js.is-open .problemy__more-panel { animation: problemy-more-in 0.35s var(--ease-out) both; }
@keyframes problemy-more-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 479px) {
  .problemy .problemy__more-toggle { padding-left: 20px; }
  .problemy .problemy__more-panel { padding: 0 20px 20px; }
}

/* ---- Bez JS (albo gdy problemy.js nie ruszył): wszystkie panele czytelne, bez sylwetki ---- */
.problemy:not(.is-ready) .problemy__stage,
.problemy:not(.is-ready) .problemy__close { display: none; }
.problemy:not(.is-ready) .problemy__card { display: block; }
.problemy:not(.is-ready) .problemy__side {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: 32px;
  padding: 12px;
}

/* ---- Mniej ruchu: stan końcowy bez animacji ---- */
@media (prefers-reduced-motion: reduce) {
  .problemy .problemy__fig,
  .problemy .problemy__glow,
  .problemy .problemy__spot,
  .problemy .problemy__layer,
  .problemy .problemy__more-icon { transition: none !important; }
  .problemy .problemy__fill.is-swap,
  .problemy .problemy__card.is-in .problemy__dot,
  .problemy .problemy__card.is-in .problemy__dot::after,
  .problemy .problemy__more.is-js.is-open .problemy__more-panel { animation: none; }
}

/* Wstawka „A fala?” w panelach podstrony Fala (29.09): mglista karta z pomarańczową kropką,
   odpowiada, kiedy fala ma sens przy danym miejscu. Stoi między objawami a ceną. */
.problemy .problemy__note {
  margin: -6px 0 22px;
  padding: 14px 16px 15px;
  border-radius: var(--radius-cardinner);
  background: var(--color-fog);
  border: 1px solid var(--line);
}
.problemy .problemy__note-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small);
  color: var(--ink-strong);
}
.problemy .problemy__note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.problemy .problemy__note-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.problemy .problemy__note-text strong { color: var(--ink-strong); font-weight: var(--font-weight-medium); }

/* Kwalifikacja (podstrona Fala, 29.09): lista „Czy fala uderzeniowa jest dla Ciebie?” ze starej strony
   fali jako kawowa karta (jak karty bio), pomarańczowe znaczniki; pod nią nagłówek mapy z wypełnieniem. */
.problemy .problemy__h2-lite { color: var(--ink-3); }
.problemy .problemy__check {
  margin-bottom: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 4vw, 40px);
  background: radial-gradient(120% 140% at 0% 0%, #4a3a2e 0%, #2a211b 55%, #211a16 100%);
  border-color: transparent;
}
.problemy .problemy__check-list {
  display: grid;
  gap: 14px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .problemy .problemy__check-list { grid-template-columns: 1fr 1fr; } }
.problemy .problemy__check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.45;
  font-weight: var(--font-weight-medium);
  color: #f7f2ec;
  text-wrap: pretty;
}
.problemy .problemy__check-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border-radius: 50%;
  background: rgba(246, 146, 81, 0.18);
  color: #f69251;
}
.problemy .problemy__map-h { margin-bottom: 10px; color: var(--ink-3); }
.problemy .problemy__map-lead { max-width: 62ch; margin-bottom: 24px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.problemy .problemy__map-h .problemy__fill { color: var(--ink-strong); }

/* Podstrona fali (29.09): bez wielokropka; dwukropek i podkreślenie tylko, gdy wybrano miejsce. */
.problemy .problemy__fill:empty { display: none; }
.problemy .problemy__map-h:has(.problemy__fill:empty) .problemy__fill-sep { display: none; }

/* 1.10: link do podstrony (np. ból pięty) pod przyciskiem w panelu okolicy */
.problemy .problemy__more-link { display: inline-block; margin-top: 12px; font-size: 15px; }