/* ==========================================================================
   Fizjoterapia (/rehabilitacja/), WERSJA 2 (1.10). Strona edukacyjna na tablet i do domu, w stylu strony głównej:
   ciemne hero ze zdjęciem (komponent hero, .hero--pw .hero--fz), spis treści jako kafle z cieniem, sekcje: nagłówek
   z lewej (przyklejony od 1024 px), treść z prawej; grafiki zamiast ścian tekstu (skala bólu, wspólny wykres gojenia,
   tydzień), kafle z ikonami, ciemna sekcja dla rytmu, animacje przy przewijaniu (bez ruchu przy reduced-motion).
   Pomarańcz: przyciski, paski gojenia, kropka gorszego dnia, ikony czynników, dni w tygodniu. Wersja 1: scratchpad fizjo-v1.css.
   ========================================================================== */

/* ---- Hero: dłuższy opis niż na innych stronach, więc mniejszy stopień ---- */
.hero--fz .hero__sub--fz { font-family: var(--font-body); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; max-width: 560px; color: var(--ink-2); }
.hero--fz .hero__photo img { object-position: 45% 25%; }

/* ---- Układ sekcji ---- */
.fz-grid { display: grid; }
.fz-body { min-width: 0; }
.fz-body > :first-child { margin-top: 0; }
.fz-lite { color: var(--ink-3); }
.fz-head__sec { margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 1024px) {
  .fz-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .fz-grid > .sec-head { position: sticky; top: calc(var(--nav-h) + 40px); margin-bottom: 0; }
}

/* ---- Tekst ---- */
.fz-h3 { margin-top: 40px; font-size: 20px; line-height: 1.3; font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-small); color: var(--ink-strong); }
.fz-h3--big { font-size: clamp(22px, 2.4vw, 28px); scroll-margin-top: 24px; }
.fz-h3 a { color: inherit; text-decoration-color: var(--line-strong); }
.fz-p { margin-top: 16px; max-width: 64ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.fz-ref { font-size: 12px; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.fz-ref a { color: inherit; text-decoration: none; }
.fz-ref a:hover { text-decoration: underline; }
p.fz-ref { margin-top: 8px; }
.fz-chk { display: inline-flex; flex: none; color: var(--accent-text); margin-top: 0.35em; }
.fz-quote {
  margin-top: 40px; padding-left: 20px; border-left: 2px solid var(--ink-strong);
  font-family: var(--font-display); font-weight: var(--font-weight-display);
  font-size: clamp(24px, 3vw, 32px); line-height: 1.25; color: var(--ink-strong); text-wrap: balance;
}
.fz-quote--sm { font-size: clamp(20px, 2.2vw, 24px); }
.is-dark .fz-quote { border-left-color: var(--accent); }

/* „Co mówią badania”: zdania o pojedynczych badaniach zwinięte */
.fz-study { margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fz-study summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-study summary::-webkit-details-marker { display: none; }
.fz-study summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 14px; }
.fz-study[open] summary::before { content: '−'; }
.fz-study ul { display: grid; gap: 10px; padding-bottom: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ---- Kafle spisu treści ---- */
.fz-tiles { display: grid; gap: 16px; }
.fz-tile {
  position: relative; display: grid; align-content: start; gap: 8px; height: 100%;
  padding: 24px 24px 22px; text-decoration: none; color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.fz-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-subtle-2); border-color: var(--line-strong); }
.fz-tile__n { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: 34px; line-height: 1; color: var(--ink-3); }
.fz-tile__t { margin-top: 8px; font-size: 19px; font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-small); color: var(--ink-strong); }
.fz-tile__d { font-size: 15px; line-height: 1.5; color: var(--ink-2); padding-right: 28px; }
.fz-tile__go { position: absolute; right: 20px; top: 22px; color: var(--ink-3); transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.fz-tile:hover .fz-tile__go { color: var(--accent-text); transform: translate(2px, -2px); }
@media (min-width: 640px) { .fz-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fz-tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* ---- Piramida schodkowa (1.10, właściciel: „piramida jest brzydka”): trzy bloki od podstawy, klikalne do sekcji,
   wjeżdżają po kolei od dołu (data-reveal, --i). ---- */
.fz-pyr { display: grid; justify-items: center; gap: 10px; }
.fz-pyr__l {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  width: var(--w, 100%); padding: 20px 24px 22px; border-radius: 20px;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-subtle-2);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.fz-pyr__l:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(28, 23, 20, 0.35); }
.fz-pyr__l--top { --w: 62%; background: linear-gradient(180deg, #f8a56f, #f69251); }
.fz-pyr__l--mid { --w: 81%; background: #ead9c5; }
.fz-pyr__l--base { --w: 100%; background: #f4ede5; border: 1px solid #e6dccf; }
.fz-pyr__k { font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(28, 23, 20, 0.55); }
.fz-pyr__t { font-size: 18px; line-height: 1.3; font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-small); color: var(--ink-strong); }
.fz-pyr__d { max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.fz-pyr__l--top .fz-pyr__d { color: #3a2416; }
.fz-pyr__l--top .fz-ref { color: rgba(28, 23, 20, 0.6); }
.fz-pyr__cap { margin-top: 16px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 639px) {
  .fz-pyr__l--top { --w: 84%; }
  .fz-pyr__l--mid { --w: 92%; }
  .fz-pyr__l { padding: 18px 18px 20px; }
}

/* ---- Zdjęcia ---- */
.fz-photo { margin: 28px 0 0; border-radius: var(--radius-cards); overflow: hidden; aspect-ratio: 16 / 10; background: #2a221d; box-shadow: var(--shadow-subtle-2); }
.fz-photo img { width: 100%; height: 100%; object-fit: cover; }
.fz-body > .fz-photo:first-child { margin-top: 0; }
.fz-photo--tall { aspect-ratio: 4 / 3; }

/* ---- Strefy obciążenia (animacja: „Twoja strefa” wjeżdża od lewej) ---- */
.fz-zones { margin: 0; }
.fz-zones svg { width: 100%; height: auto; border-radius: var(--radius-cardinner); overflow: hidden; box-shadow: var(--shadow-subtle); }
.fz-zones__hi { fill: #f3e2d6; }
.fz-zones__mid { fill: #f6b78c; }
.fz-zones__lo { fill: #ece9e5; }
.fz-zones text { font-family: var(--font-body); font-size: 15px; fill: var(--ink-2); }
.fz-zones .fz-zones__strong { font-weight: 600; fill: var(--ink-strong); }
.fz-zones figcaption { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.js .fz-zones[data-reveal] .fz-zones__mid { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out) 0.15s; }
.js .fz-zones.is-in .fz-zones__mid { clip-path: inset(0 0 0 0); }

/* ---- Skala bólu 0–10 ---- */
.fz-scale { margin: 22px 0 0; padding: 22px 22px 18px; }
.fz-scale__row { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.fz-scale__c {
  display: grid; place-items: center; aspect-ratio: 1 / 1.15; border-radius: 10px;
  background: #e9f0e6; color: #2f4a2c; font-size: 15px; font-weight: var(--font-weight-medium);
}
.fz-scale__c.is-th { background: #cfe1c9; box-shadow: inset 0 0 0 2px #5f8a57; }
.fz-scale__c.is-hi { background: #fbe1cf; color: #8a3f10; }
.fz-scale__c.is-hi:nth-child(n + 9) { background: #f7c3a0; }
.fz-scale__legend { display: grid; gap: 4px; margin-top: 14px; font-size: 15px; line-height: 1.45; }
.fz-scale__ok { color: #3c5e36; font-weight: var(--font-weight-medium); }
.fz-scale__hi { color: var(--accent-text-strong); font-weight: var(--font-weight-medium); }
.fz-scale figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.js .fz-scale[data-reveal] .fz-scale__c { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s var(--ease-out); transition-delay: calc(var(--i) * 45ms + 0.15s); }
.js .fz-scale.is-in .fz-scale__c { opacity: 1; transform: none; }
@media (min-width: 640px) { .fz-scale__legend { grid-template-columns: 1fr 1fr; } .fz-scale__hi { text-align: right; } }

/* ---- Kroki ---- */
.fz-steps { display: grid; gap: 12px; margin-top: 22px; }
.fz-step { padding: 20px 22px; }
.fz-step__v, .fz-step__n { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: 32px; line-height: 1; color: var(--ink-3); }
.fz-step__v { color: #3c5e36; }
.fz-step__t { margin-top: 10px; font-size: 17px; line-height: 1.35; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-step p:not(.fz-step__n):not(.fz-step__v) { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 640px) { .fz-steps { grid-template-columns: 1fr 1fr; } }

/* ---- Ramki ---- */
.fz-callout { margin-top: 24px; padding: 22px 24px; border-radius: var(--radius-cardinner); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-subtle); }
.section--white .fz-callout { background: var(--color-fog); border-color: transparent; box-shadow: none; }
.fz-callout--strong { border-color: var(--line-strong); }
.fz-callout__t { font-size: 17px; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-callout p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.fz-callout p + p, .fz-callout__t + p { margin-top: 6px; }
ul.fz-callout__list[role='list'], ul.fz-alert__list[role='list'] { list-style: disc; }
.fz-callout__list { margin-top: 10px; display: grid; gap: 6px; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.fz-callout a[href^="tel"] { color: var(--ink-strong); white-space: nowrap; }
#kiedy-dzwonic { scroll-margin-top: 24px; }
.fz-alert { scroll-margin-top: 24px; margin-top: 0; padding: 24px 26px; border-radius: var(--radius-cards); box-shadow: var(--shadow-subtle-2); }
.fz-alert__t { font-size: 20px; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-alert p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.fz-alert__list { margin-top: 12px; display: grid; gap: 8px; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--ink); }

/* ---- Gojenie: pasek 8–12 + jeden wykres ze wspólną osią ---- */
.fz-bar { margin: 0; }
.fz-bar__track { position: relative; height: 14px; border-radius: 99px; background: var(--color-fog); overflow: hidden; }
.fz-bar__fill { position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent) 78%, transparent); }
.fz-bar figcaption { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.fz-nocebo { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ink-strong); font-weight: var(--font-weight-medium); }

.fz-heal { --lab: 0px; position: relative; margin: 28px 0 0; padding: 22px 22px 18px; }
.fz-heal__axis { position: relative; height: 18px; margin-left: var(--lab); font-size: 12px; color: var(--ink-3); }
.fz-heal__axis span { position: absolute; left: var(--x); transform: translateX(-50%); }
.fz-heal__axis span:first-child { transform: none; }
.fz-heal__axis span:nth-last-child(2) { transform: translateX(-100%); }
.fz-heal__axis em { display: none; }
.fz-heal__plot { position: relative; margin-top: 6px; }
.fz-heal__band {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--lab) + (100% - var(--lab)) * 0.4); width: calc((100% - var(--lab)) * 0.2);
  border-radius: 8px; background: rgba(246, 146, 81, 0.09);
  border-left: 1px dashed rgba(246, 146, 81, 0.6); border-right: 1px dashed rgba(246, 146, 81, 0.6);
  pointer-events: none;
}
.fz-heal__key { display: inline-block; width: 18px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; background: rgba(246, 146, 81, 0.18); border: 1px dashed rgba(246, 146, 81, 0.7); }
.fz-heal__rows { position: relative; display: grid; }
.fz-heal__row { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fz-heal__row:last-child { border-bottom: 0; }
.fz-heal__t { font-size: 16px; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-heal__track { position: relative; height: 12px; border-radius: 99px; background: var(--color-fog); }
.fz-heal__track span {
  position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--z)); border-radius: 99px;
  background: linear-gradient(90deg, rgba(246, 146, 81, 0.4), var(--accent) 25%, var(--accent) 75%, rgba(246, 146, 81, 0.4));
}
.js .fz-heal[data-reveal] .fz-heal__track span { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--ease-out); transition-delay: calc(var(--i) * 120ms + 0.2s); }
.js .fz-heal.is-in .fz-heal__track span { transform: scaleX(1); }
.fz-heal__more summary { cursor: pointer; list-style: none; font-size: 14px; color: var(--ink-2); }
.fz-heal__more summary::-webkit-details-marker { display: none; }
.fz-heal__more summary::after { content: ' +'; color: var(--ink-3); }
.fz-heal__more[open] summary::after { content: ' −'; }
.fz-heal__more p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.fz-heal__more .fz-heal__src { font-size: 13px; color: var(--ink-3); }
.fz-heal figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
@media (min-width: 768px) {
  .fz-heal { --lab: 190px; }
  .fz-heal__row { grid-template-columns: 190px minmax(0, 1fr); column-gap: 0; row-gap: 6px; align-items: center; }
  .fz-heal__t { grid-row: span 2; padding-right: 16px; font-size: 15px; }
}
@media (max-width: 767px) { .fz-heal__band, .fz-heal__key { display: none; } }

/* ---- Czynniki: kafle z ikonami + zwarta lista ---- */
.fz-factors__list { display: grid; gap: 12px; margin-top: 16px; }
.fz-factor { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; padding: 18px 20px; }
.fz-factor__ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fbeee4; color: var(--accent-text-strong); }
.fz-factor__t { font-size: 16px; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-factor p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 640px) { .fz-factors__list { grid-template-columns: 1fr 1fr; } }
.fz-cons { margin: 16px 0 0; display: grid; border-top: 1px solid var(--line); }
.fz-cons__row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fz-cons dt { font-size: 15px; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-cons dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 768px) { .fz-cons__row { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; } }

/* ---- Wykres gorszych dni (animacja: linia się rysuje) ---- */
.fz-chart { margin: 28px 0 0; padding: 20px 20px 16px; }
.fz-chart svg { width: 100%; height: auto; overflow: visible; }
.fz-chart__area { fill: rgba(28, 23, 20, 0.05); }
.fz-chart__line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.js .fz-chart[data-reveal] .fz-chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) 0.2s; }
.js .fz-chart.is-in .fz-chart__line { stroke-dashoffset: 0; }
.js .fz-chart[data-reveal] .fz-chart__dot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.45s var(--ease-out) 1.1s; }
.js .fz-chart.is-in .fz-chart__dot { transform: scale(1); }
.fz-chart__base { stroke: var(--line-strong); stroke-width: 1; }
.fz-chart__pt { fill: var(--ink); }
.fz-chart__dot { fill: var(--accent); }
.fz-chart__lbl { font-family: var(--font-body); font-size: 14px; fill: var(--ink-2); }
.fz-chart__lbl--dip { fill: var(--accent-text-strong); font-weight: 500; }
.fz-chart__axis { font-family: var(--font-body); font-size: 12px; fill: var(--ink-3); }
.fz-chart__labels, .fz-chart__num { display: none; }
.fz-chart__num { font-family: var(--font-body); font-weight: 600; fill: var(--ink-strong); }
.fz-chart figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 559px) {
  .fz-chart__lbl { display: none; }
  .fz-chart__num { display: inline; font-size: 24px; }
  .fz-chart__axis { font-size: 20px; }
  .fz-chart__labels { display: grid; gap: 6px; margin-top: 10px; counter-reset: c; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
  .fz-chart__labels li { counter-increment: c; display: flex; gap: 8px; }
  .fz-chart__labels li::before { content: counter(c) '.'; color: var(--ink-3); }
  .fz-chart__labels .is-dip { color: var(--accent-text-strong); font-weight: var(--font-weight-medium); }
  .fz-zones text { font-size: 24px; }
  .fz-pir__fig text { font-size: 19px; }
}

/* ---- Systematyczność: ciemna sekcja ---- */
.fz-sec--dark .fz-study { border-color: var(--line); }
.fz-stat { margin-top: 20px; padding: 26px 26px 22px; border-radius: var(--radius-cards); background: var(--surface); border: 1px solid var(--line); }
.fz-stat__v { font-family: var(--font-display); font-weight: var(--font-weight-display); font-size: clamp(56px, 7vw, 84px); line-height: 1; color: var(--ink-strong); }
.fz-stat__v span { font-size: 0.42em; color: var(--ink-3); letter-spacing: 0; }
.fz-stat__l { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.fz-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 18px; }
.fz-week li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line-strong); font-size: 14px; color: var(--ink-3); }
.fz-week li.is-on { background: var(--accent); border-color: var(--accent); color: #1c1714; font-weight: var(--font-weight-medium); }
.js .fz-stat[data-reveal] .fz-week li.is-on { background: transparent; color: var(--ink-3); transition: background-color 0.35s ease, color 0.35s ease; transition-delay: calc(var(--i) * 140ms + 0.3s); }
.js .fz-stat.is-in .fz-week li.is-on { background: var(--accent); color: #1c1714; }
.fz-tips { display: grid; gap: 12px; margin-top: 16px; }
.fz-tips li { display: flex; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.is-dark .fz-chk { color: var(--accent); }

/* ---- Autor i źródła ---- */
.fz-author { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.fz-srcbox { margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fz-srcbox summary { display: flex; align-items: center; gap: 10px; padding: 16px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: var(--font-weight-medium); color: var(--ink-strong); }
.fz-srcbox summary::-webkit-details-marker { display: none; }
.fz-srcbox summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 14px; }
.fz-srcbox[open] summary::before { content: '−'; }
.fz-sources { margin: 0 0 20px; display: grid; gap: 8px; counter-reset: z; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.fz-sources li { counter-increment: z; display: grid; grid-template-columns: 28px minmax(0, 1fr); scroll-margin-top: 24px; }
.fz-sources li::before { content: counter(z) '.'; color: var(--ink-3); }
.fz-sources li:target { background: rgba(246, 146, 81, 0.12); border-radius: 6px; }
.fz-sources a { word-break: break-all; }

/* ---- Bez ruchu ---- */
@media (prefers-reduced-motion: reduce) {
  .fz-tile, .fz-tile__go { transition: none; }
  .js .fz-pir__fig polygon, .js .fz-pir__fig text, .js .fz-scale__c, .js .fz-heal__track span, .js .fz-chart__line, .js .fz-chart__dot { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .js .fz-zones .fz-zones__mid { clip-path: none !important; }
  .js .fz-stat .fz-week li.is-on { background: var(--accent) !important; color: #1c1714 !important; transition: none !important; }
}