/* MasażPiła.pl — page layout.
   Breakpoints match the source pages exactly:
     narrow  = max-width: 900px
     tablet  = 901px – 1199px
     wide    = min-width: 1200px */

/* Płynne przewijanie obsługuje Lenis (initSmoothScroll w site.js) — natywne
   scroll-behavior:smooth zostało stąd usunięte, bo biłoby się z lenis.scrollTo()
   przy skoku do kotwicy. Kto prosi o ograniczenie ruchu, ten Lenisa nie dostaje
   w ogóle i zostaje przy natywnym, natychmiastowym przewijaniu.

   Reguły poniżej pochodzą z lenis.css 1.3.11 — wklejone tutaj zamiast osobnego
   arkusza, żeby nie dokładać zapytania do serwera. Klasy .lenis* na <html>
   ustawia sama biblioteka. */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* Kotwice trafiały pod przyklejony .site-header — teraz mają zapas. JS mierzy
   wysokość nagłówka dokładnie (initSmoothScroll), a ta wartość to zaokrąglenie
   w górę na wypadek braku JS-u: ~102px na desktopie, ~106px na telefonie. */
:target{scroll-margin-top:112px}
body{margin:0;background:#F7FAFB}
*{box-sizing:border-box}
a{color:#1F6474;text-decoration:none}
a:hover{color:#2B7E92}

.page{font-family:'Inter Tight',system-ui,sans-serif;font-weight:500;color:var(--color-text-primary);background:var(--color-background)}
.container{max-width:1360px;margin:0 auto}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Link „Przejdź do treści” musi być widoczny, gdy dostanie focus z klawiatury —
   inaczej osoba nawigująca Tabem skacze na niewidzialny element i nie wie gdzie jest. */
a.visually-hidden:focus,a.visually-hidden:focus-visible{position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;margin:0;padding:12px 20px;clip:auto;overflow:visible;background:var(--color-surface);color:var(--color-primary-dark);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);font-size:15px;font-weight:600;box-shadow:0 10px 30px -12px rgba(16,40,46,0.35)}

/* ---------- Header shell ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;padding:16px clamp(20px,4vw,64px);
  transform:translateY(0);opacity:1;will-change:transform,opacity;
  /* coming back: soft ease-out, no snap at the start */
  transition:transform 340ms cubic-bezier(0.32,0.72,0.28,1),opacity 240ms linear}
/* JS adds .is-hidden while scrolling down and removes it on any scroll up */
.site-header.is-hidden{transform:translateY(-100%);opacity:0;
  /* going away: slower and eased in, so it drifts out instead of snapping */
  transition:transform 460ms cubic-bezier(0.4,0,0.25,1),opacity 300ms linear}
@media (prefers-reduced-motion:reduce){
  .site-header,.site-header.is-hidden{transition:none}
}
.site-header .ds-nav-mobile{display:none}
@media (max-width:900px){
  .site-header .ds-nav-desktop{display:none}
  .site-header .ds-nav-mobile{display:block}
}

/* ---------- Generic grid splits ---------- */
.grid{display:grid;min-width:0}
.split-5-7{grid-template-columns:5fr 7fr}
.split-7-5{grid-template-columns:7fr 5fr}
.split-8-4{grid-template-columns:8fr 4fr}
.split-4-8{grid-template-columns:4fr 8fr}
.split-11-13{grid-template-columns:11fr 13fr}
.split-1-1{grid-template-columns:1fr 1fr}
.split-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.area-left{grid-area:1 / 1 / 2 / 2}
.area-right{grid-area:1 / 2 / 2 / 3}

@media (max-width:1199px){
  .split-8-4,.split-4-8{grid-template-columns:1fr}
  .split-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .split-5-7,.split-7-5,.split-11-13,.split-1-1,
  .split-2,.split-3,.split-4{grid-template-columns:1fr}
  .area-left,.area-right{grid-area:auto}
}

/* ---------- / (strona główna) — hero ---------- */
.hero-home{grid-template-columns:5fr 7fr;align-items:start}
.hero-home__text{grid-area:1 / 1 / 2 / 2;align-self:center}
.hero-home__register{grid-area:2 / 1 / 3 / 2}
.hero-home__media{grid-area:1 / 2 / 3 / 3}
@media (max-width:900px){
  .hero-home{grid-template-columns:1fr}
  .hero-home__text,.hero-home__register,.hero-home__media{grid-area:auto}
}

/* ---------- / (strona główna) — „Jak wygląda wizyta" ---------- */
.visit-intro{max-width:50%}
@media (max-width:900px){.visit-intro{max-width:34ch}}

/* ---------- /oferta/ — specialist section ---------- */
.specialist-grid{grid-template-columns:8fr 4fr;column-gap:clamp(40px,5vw,80px);row-gap:clamp(40px,5vw,64px);align-items:start}
.specialist-fdm{grid-template-columns:5fr 6fr}
.specialist-support{display:flex;flex-direction:column;border-left:1px solid var(--color-border);padding-left:clamp(32px,4vw,56px);padding-top:8px}
@media (max-width:1199px){
  .specialist-grid{grid-template-columns:1fr}
  .specialist-fdm{grid-template-columns:6fr 6fr}
  .specialist-support{border-left:none;padding-left:0;padding-top:0}
}
@media (max-width:900px){
  .specialist-grid{column-gap:0}
  .specialist-fdm{grid-template-columns:1fr}
}
/* ---------- /oferta/ — kafelki kategorii ---------- */
.tile-tags{display:flex;flex-wrap:wrap;gap:6px}
.tile-tags .ds-tag{scroll-margin-top:104px}

/* ---------- /oferta/<kategoria>/ ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;line-height:22px;color:var(--color-text-secondary);margin:0 0 20px}
.crumbs a{color:var(--color-primary-dark);font-weight:600}
.technique{padding-top:clamp(40px,5vw,64px);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--color-border);scroll-margin-top:104px}
.technique:first-child,p+.technique{padding-top:0;margin-top:0;border-top:0}
.technique__text{max-width:60ch;min-width:0}
.price-line{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:20px 0 0;font-size:16px;line-height:26px}
.price-line__label{color:var(--color-text-secondary)}
.price-line__value{font-weight:600;font-variant-numeric:tabular-nums}
.price-line__link{font-size:14px;font-weight:600;color:var(--color-primary-dark)}
.technique-actions{margin-top:16px}

/* ---------- /o-nas/ — approach cards ---------- */
.sticky-col{position:sticky;top:30%}
@media (max-width:900px){.sticky-col{position:static}}
.approach-card{min-height:300px;justify-content:flex-start}
@media (max-width:900px){.approach-card{min-height:0}}

/* ---------- /refleksoterapia/ ---------- */
.benefit-row{grid-template-columns:64px minmax(0,1fr)}
.benefit-inner{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}
.contra-row{grid-template-columns:48px minmax(0,1fr)}
@media (max-width:1199px){
  .benefit-row{grid-template-columns:48px minmax(0,1fr)}
  .benefit-inner{grid-template-columns:1fr}
}
@media (max-width:900px){
  .benefit-row{grid-template-columns:40px minmax(0,1fr)}
  .contra-row{grid-template-columns:32px minmax(0,1fr)}
}

/* ---------- /cennik/ ---------- */
.hero-cta-mobile{display:none}
@media (max-width:900px){.hero-cta-mobile{display:flex;flex:1 1 100%;min-width:0}}
.price-list{max-width:880px;margin:0 auto;background:var(--color-background);border-radius:var(--radius-lg);padding:clamp(24px,4vw,56px) clamp(20px,4vw,56px)}
.price-group{padding:clamp(28px,3.5vw,44px) 0;border-top:1px solid var(--color-border)}
.price-group:first-child{border-top:0;padding-top:0}
.price-group__head{display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,40px);align-items:flex-end;justify-content:space-between;margin:0 0 clamp(14px,1.8vw,22px)}
.price-group__head h2{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-0.02em;font-weight:600;margin:0}
.price-group__desc{font-size:15px;line-height:24px;color:var(--color-text-secondary);margin:4px 0 0;max-width:48ch}
.price-group__links{display:flex;flex-wrap:wrap;gap:6px 20px;padding-bottom:2px}
.price-group__links--below{margin-top:12px;padding-bottom:0;flex-direction:column;align-items:flex-start;gap:8px}
.price-item{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(6.5ch,auto);column-gap:clamp(16px,3vw,40px);align-items:baseline;padding:10px 0}
.price-item--tier{padding-top:0;margin-top:-4px}
.price-item__text{min-width:0}
.price-item__name{font-size:17px;line-height:26px;font-weight:600;margin:0}
.price-item__note{font-size:14px;line-height:22px;color:var(--color-text-secondary);margin:2px 0 0;max-width:44ch}
.price-item__dur{font-size:15px;line-height:26px;color:var(--color-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;margin:0;min-width:5ch}
.price-item__value{font-size:19px;line-height:26px;font-weight:600;color:var(--color-primary-dark);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;margin:0}
.quicknav{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--color-border);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.quicknav a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);font-size:15px;font-weight:600;color:var(--color-primary-dark);transition:border-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}
.quicknav a:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-background);padding:clamp(48px,7vw,80px) clamp(20px,4vw,64px) clamp(24px,4vw,40px)}
.site-footer__top{border-bottom:1px solid var(--color-border)}
.site-footer__grid{display:grid;grid-template-columns:1fr 0.6fr;column-gap:clamp(32px,6vw,96px);row-gap:clamp(32px,4vw,48px);align-items:start;margin-bottom:clamp(48px,7vw,80px)}
.site-footer__links{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;align-items:start}
.site-footer__links ul{display:flex;flex-direction:column;gap:4px}
.site-footer__links li{padding:6px 0;font-size:14px;line-height:22px;font-weight:500}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer__credit{opacity:.5;transition:opacity var(--motion-fast) var(--motion-ease)}
.site-footer__credit:hover,.site-footer__credit:focus-visible{opacity:1}
@media (prefers-reduced-motion:reduce){.site-footer__credit{transition:none}}

/* /refleksoterapia/ — hero (11/13 wide, 6/6 tablet) and price grid (collapses on tablet) */
.hero-reflex{grid-template-columns:11fr 13fr}
.price-grid{grid-template-columns:1fr 1fr}
@media (max-width:1199px){
  .hero-reflex{grid-template-columns:6fr 6fr}
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero-reflex{grid-template-columns:1fr}
}

/* ---------- / (strona główna) — animacja hero (GSAP) ---------- */
/* Ręcznie ustawione łamanie nagłówka na cztery linie. padding-bottom został
   z poprzedniej wersji z maskami (robił miejsce na descendery: ą, ę, j) —
   teraz to już tylko odrobina światła między wierszami. Usunięcie go wraca
   do czystego line-height:1.04 z szablonu. */
.hero-title-line{display:block;padding-bottom:0.08em}

.hero-media{transform-origin:center}

/* Stan startowy ustawiany zanim GSAP zdąży wystartować — inaczej hero mignie
   w pełni widoczne przed pierwszą klatką. Klasę dodaje inline'owy skrypt w <head>
   (tylko gdy JS działa i użytkownik nie prosi o ograniczenie ruchu), a zdejmuje ją
   hero-anim.js w momencie budowania osi czasu. Nagłówka .hero-title celowo
   tu nie ma - ukryty opóźniał LCP, więc jest widoczny od razu. */
html.hero-anim-pending .site-header .container,
html.hero-anim-pending .hero-kicker,
html.hero-anim-pending .hero-description,
html.hero-anim-pending .hero-actions>*,
html.hero-anim-pending .registration>*{visibility:hidden}
html.hero-anim-pending .hero-media{clip-path:inset(0 0 100% 0 round var(--radius-xl))}

/* will-change tylko na czas trwania animacji — nie trzymamy warstw kompozytora
   przez całe życie strony. */
html.hero-anim-running .hero-media{will-change:transform,clip-path}

/* ---------- /polityka-prywatnosci/ — blok tekstu prawnego ---------- */
/* Dokument to długi ciąg akapitów i wyliczeń — zamiast powtarzać style inline
   przy każdym <p>, cała kolumna dostaje jedną klasę. Szerokość 68ch pilnuje
   długości wiersza; bez niej na szerokim ekranie tekst rozjeżdża się na całą
   kolumnę i staje się nieczytelny. */
.legal{min-width:0;max-width:68ch;font-size:16px;line-height:26px;color:var(--color-text-body)}
.legal>*+*{margin-top:14px}
.legal p{margin:0}
.legal strong{font-weight:600;color:var(--color-text-primary)}
.legal a{color:var(--color-primary-dark);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--color-primary)}
.legal h3{font-size:17px;line-height:27px;font-weight:600;color:var(--color-text-primary);margin:0}
.legal>h3+*{margin-top:6px}
.legal>*+h3{margin-top:24px}
/* Własne punktory zamiast list-style — domyślny znacznik siada na baseline
   pierwszego wiersza i przy line-height 26px wisi za wysoko. */
.legal ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.legal li{position:relative;padding-left:22px}
.legal li::before{content:"";position:absolute;left:4px;top:10px;width:6px;height:6px;border-radius:var(--radius-pill);background:var(--color-primary)}

/* Miejsca do uzupełnienia danymi gabinetu. Mają rzucać się w oczy podczas
   uzgadniania treści — po wpisaniu prawdziwych danych znacznik <span> znika
   razem z tekstem zastępczym. */
.legal-todo{background:var(--color-accent-soft);color:var(--color-primary-dark);border-radius:var(--radius-sm);padding:1px 6px;font-weight:600}

/* ---------- /o-nas — sylwetki: na mobile imię, zdjęcie, opis ---------- */
.person{grid-template-rows:auto 1fr;row-gap:24px}
.person--media-left{grid-template-columns:5fr 7fr;grid-template-areas:"media head" "media body"}
.person--media-right{grid-template-columns:7fr 5fr;grid-template-areas:"head media" "body media"}
.person__head{grid-area:head}
.person__media{grid-area:media}
.person__body{grid-area:body}
@media (max-width:900px){
  .person--media-left,.person--media-right{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"head" "media" "body";row-gap:28px}
  .person__media .ds-image-frame--hero{aspect-ratio:4 / 3}
}

/* ---------- /oferta/ — na mobile bez zdjęcia w hero (karty mają własne zdjęcia) ---------- */
@media (max-width:900px){.hero-oferta__media{display:none}}

/* ---------- /oferta/<kategoria>/ — technika ze zdjęciem: na mobile tytuł, zdjęcie, opis ---------- */
.technique--media-left{grid-template-columns:5fr 7fr;grid-template-rows:1fr auto auto 1fr;grid-template-areas:"media ." "media head" "media body" "media .";row-gap:0}
.technique__head{grid-area:head}
.technique__media{grid-area:media}
.technique__body{grid-area:body;padding-top:16px}
@media (max-width:900px){
  .technique--media-left{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"head" "media" "body";row-gap:24px}
  .technique__body{padding-top:0}
}

/* ---------- / — wysokie zdjęcia niższe na mobile ---------- */
@media (max-width:900px){
  .frame-mobile-4-3{aspect-ratio:4 / 3}
  .frame-mobile-4-3>img{object-position:var(--img-pos-mobile,center)}
}