/* Landing: "dwie drogi" - przypięta sekcja przewijania (panel trenera / panel podopiecznego).
   Właściciel: templates/includes/landing_paths.html (ładowane przez landing.html).
   Kolory idą za motywem strony (html[data-theme]). Bez klasy .lpx--js (brak JS) sekcja jest zwykłą listą. */

.lpx{
  --lpx-bg:transparent; /* tło jak na całej stronie (decyzja właściciela) */
  --lpx-line:rgba(17,19,24,.08);
  --lpx-text:#14161B;
  --lpx-muted:#5B616E;
  --lpx-track:rgba(17,19,24,.05);
  --lpx-ember:var(--cp-brand, #E03A06);
  --lpx-ember-ink:var(--cp-brand-deep, #B83405);
  --lpx-frame:#0B0C10;
  --lpx-shadow:0 40px 80px -28px rgba(17,19,24,.35);
  --lpx-top:72px;
  --lpx-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
  background:var(--lpx-bg);
  color:var(--lpx-text);
  isolation:isolate;
  overflow-anchor:none; /* bez korekt przewijania przy zmianie sceny */
}
html[data-theme="dark"] .lpx{
  --lpx-bg:transparent;
  --lpx-line:rgba(255,255,255,.08);
  --lpx-text:#F4F5F7;
  --lpx-muted:#A3A9B5;
  --lpx-track:rgba(255,255,255,.06);
  --lpx-ember-ink:#FF8A5C;
  --lpx-frame:#05060A;
  --lpx-shadow:0 40px 80px -24px rgba(0,0,0,.7);
}

/* ---------- układ ---------- */
.lpx-inner{
  position:relative;
  max-width:1160px;
  margin:0 auto;
  padding:80px 24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"head device" "copy device";
  grid-template-rows:auto 1fr;
  column-gap:96px;
  row-gap:40px;
}
.lpx-head{grid-area:head;display:flex;flex-direction:column;align-items:flex-start;gap:28px;align-self:end}
.lpx-copy{grid-area:copy;display:grid;gap:48px;align-content:start}
.lpx-device{grid-area:device;align-self:center;display:flex;justify-content:center;perspective:1800px}

.lpx .lpx-title{
  margin:0;
  max-width:16ch;
  font-size:clamp(28px,3.4vw,46px) !important;   /* nadpisuje globalne h2 z app_features.css */
  font-weight:700 !important;
  line-height:1.04;
  letter-spacing:-.03em;
  color:var(--lpx-text);
}

/* ---------- przełącznik Trener / Podopieczny ---------- */
.lpx-switch{
  position:relative;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  border-radius:999px;
  background:var(--lpx-track);
  border:1px solid var(--lpx-line);
}
.lpx-switch__btn{
  position:relative;z-index:1;
  appearance:none;border:0;background:none;
  padding:10px 24px;
  border-radius:999px;
  font:inherit;font-size:15px;font-weight:600;
  color:var(--lpx-muted);
  cursor:pointer;
  transition:color .3s var(--lpx-ease);
}
.lpx-switch__btn[aria-pressed="true"]{color:#fff}
.lpx-switch__btn:focus-visible{outline:2px solid var(--lpx-ember);outline-offset:3px}
.lpx-switch__thumb{
  position:absolute;top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);
  border-radius:999px;
  background:var(--lpx-ember);
  box-shadow:0 6px 18px rgba(var(--cp-brand-rgb, 224,58,6),.32);
  transition:transform .5s var(--lpx-ease);
}
.lpx[data-path="client"] .lpx-switch__thumb{transform:translateX(100%)}

/* ---------- treść ---------- */
.lpx-scene h3{
  margin:0 0 12px;
  max-width:22ch;
  font-size:clamp(22px,2.2vw,30px) !important;
  font-weight:650 !important;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--lpx-text);
}
.lpx-scene p{margin:0;max-width:46ch;font-size:17px;line-height:1.6;color:var(--lpx-muted)}
.lpx-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.lpx-points li{position:relative;padding-left:28px;font-size:16px;line-height:1.45;color:var(--lpx-text)}
.lpx-points li::before{
  content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;
  background:rgba(var(--cp-brand-rgb, 224,58,6),.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F15A24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/12px no-repeat;
}
.lpx-cta{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.lpx-link{color:var(--lpx-text);font-weight:600;text-decoration:underline;text-decoration-color:var(--lpx-line);text-underline-offset:4px}
.lpx-link:hover{color:var(--lpx-text);text-decoration-color:var(--lpx-ember)}
.lpx-progress{display:none}

/* ---------- telefon z prawdziwymi zrzutami ---------- */
.lpx-phone{
  --ph:min(640px,calc(100svh - var(--lpx-top) - 140px));
  height:max(440px,var(--ph));
  aspect-ratio:.472;
  position:relative;
}
.lpx-phone__body{
  position:absolute;inset:0;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  transition:transform 1.1s var(--lpx-ease);
  will-change:transform;
}
.lpx[data-path="client"] .lpx-phone__body{transform:rotateY(180deg)}
.lpx-face{
  position:absolute;inset:0;margin:0;
  padding:9px;
  border-radius:48px;
  background:var(--lpx-frame);
  box-shadow:0 0 0 1.5px #2A2E37 inset,var(--lpx-shadow);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  line-height:0;
}
.lpx-face--trainer{transform:rotateY(0deg) translateZ(1px)} /* Safari: bez migania tylnej strony */
.lpx-face--client{transform:rotateY(180deg) translateZ(1px)}
.lpx-face img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  border-radius:40px;
  vertical-align:top;
}

/* ======================================================================
   TRYB PRZYPIĘTY (włączany przez landing_paths.js)
   ====================================================================== */
.lpx--js{height:calc(100svh + 2 * 90svh)}
.lpx--js .lpx-stage{
  position:sticky;
  top:var(--lpx-top);
  height:calc(100svh - var(--lpx-top));
  overflow:hidden;
  display:flex;align-items:center;
}
.lpx--js .lpx-inner{width:100%;padding-top:32px;padding-bottom:40px}
.lpx--js .lpx-copy{display:grid;gap:0}
.lpx--js .lpx-scene{
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility 0s .35s;
}
.lpx--js .lpx-scene.is-active{
  opacity:1;visibility:visible;
  transition:opacity .45s ease .2s,visibility 0s;
}
.lpx--js .lpx-progress{
  display:block;position:absolute;left:24px;right:24px;bottom:0;height:2px;
  border-radius:2px;background:var(--lpx-track);overflow:hidden;
}
.lpx--js .lpx-progress span{
  display:block;height:100%;width:100%;transform-origin:0 50%;
  transform:scaleX(var(--lpx-p,0));background:var(--lpx-ember);
}

/* bez JS przełącznik nic nie robi, a telefon pokazuje tylko panel trenera */
.lpx:not(.lpx--js) .lpx-switch{display:none}

/* ======================================================================
   TABLET / TELEFON
   ====================================================================== */
@media (max-width: 900px){
  .lpx-inner{display:flex;flex-direction:column;padding:56px 20px;gap:28px}
  .lpx-head{align-self:stretch;gap:16px}
  .lpx-device{order:2}
  .lpx-phone{--ph:min(560px,64svh);height:var(--ph)}
  .lpx-scene p{font-size:16px}

  .lpx--js .lpx-inner{padding-top:16px;padding-bottom:20px;gap:14px;height:100%}
  .lpx--js .lpx-head{gap:12px;flex:none}
  .lpx--js .lpx-title{max-width:none;font-size:21px !important;text-align:center;align-self:stretch}
  .lpx--js .lpx-switch{width:100%}
  .lpx--js .lpx-switch__btn{padding:9px 12px;font-size:14px}
  .lpx--js .lpx-device{order:2;flex:1;min-height:0;align-items:center}
  .lpx--js .lpx-phone{--ph:auto;height:100%;max-height:480px;min-height:0}
  .lpx--js .lpx-copy{order:3;flex:none}
  .lpx--js .lpx-scene{text-align:center}
  .lpx--js .lpx-scene h3{max-width:none;font-size:20px !important;margin-bottom:8px}
  .lpx--js .lpx-scene p{display:none}
  .lpx--js .lpx-points{margin:0 auto;gap:4px;width:fit-content;max-width:100%}
  .lpx--js .lpx-points li{font-size:14px;text-align:left}
  .lpx--js .lpx-cta{margin-top:14px;justify-content:center}
  .lpx--js .lpx-cta .lpx-link{display:none}
  .lpx-face{border-radius:36px;padding:7px}
  .lpx-face img{border-radius:30px}
}
@media (max-width: 900px) and (max-height: 720px){
  .lpx--js .lpx-title{display:none}
  .lpx--js .lpx-points{display:none}
}

/* ---------- ograniczony ruch: bez obrotu, tylko przenikanie ---------- */
@media (prefers-reduced-motion: reduce){
  .lpx-phone__body,.lpx[data-path="client"] .lpx-phone__body{transition:none;transform:none}
  .lpx-face--client{transform:none;opacity:0;transition:opacity .3s}
  .lpx[data-path="client"] .lpx-face--client{opacity:1}
  .lpx--js .lpx-scene{transform:none !important}
}