/* sytuacje.css — „Trzy sytuacje z jednego tygodnia” jako 3 ekrany telefonu w stylu strony (02.10).
   Nadpisuje s/nowa.css (karty .sytuacja) i s/ruch-nowa.css (poziomy tor na desktopie). Klasy ekranu: prefiks .sy- */

.sy-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ───────── karta = podpis + telefon + stopka (bez ramki karty) ───────── */
.sytuacje{align-items:stretch;padding-bottom:30px}
.sytuacja{flex-basis:min(90%,360px);gap:14px;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.syt-glowa{display:grid;grid-template-columns:auto 1fr;align-items:center;align-content:start;gap:8px 12px;padding:0 2px;border:0}
.syt-nr{font:600 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--tusz2)}
.syt-tag{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;font-size:11px}
.syt-glowa .syt-tag .ik{width:15px;height:15px}
.syt-glowa h3{grid-column:1/-1;font:500 19px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.005em;color:var(--tusz);text-wrap:balance}
.syt-glowa h3 .nw{white-space:nowrap}
.syt-stopka{padding:0 2px;border:0;font-size:14.5px;line-height:1.5;color:var(--tusz2)}

/* ───────── telefon ───────── */
.sy-tel{position:relative;flex:1;display:flex;width:100%;max-width:340px;min-height:560px;margin-inline:auto;padding:8px;border-radius:46px;background:linear-gradient(150deg,#2B2B2F,#151517 42%,#1E1E21);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1px #050506,0 28px 44px -32px rgba(17,17,17,.6)}
.sy-ekran{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:38px;background:var(--papier);color:var(--tusz);font-family:var(--f-tekst);line-height:1.35;text-align:left;isolation:isolate}
.sy-status{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;height:40px;padding:6px 22px 0 28px;font:700 13px/1 var(--f-tekst)}
.sy-wyspa{position:absolute;left:50%;top:10px;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0A0A0B}
.sy-bat{width:23px;height:11.5px;padding:1.5px;border:1.5px solid currentColor;border-radius:4px;opacity:.85}
.sy-bat i{display:block;width:70%;height:100%;border-radius:1px;background:currentColor}

/* wspólne: liczba, plakietka, zakreślacz */
.sy-liczba{display:block;font:700 40px/1 var(--f-display);letter-spacing:-.005em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sy-plak{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:7px;background:var(--linia2);color:var(--tusz2);font:500 11px/1.1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sy-plak .ik{width:13px;height:13px;stroke-width:2}
.sy-plak.czerw{background:var(--czerwony-tlo);color:var(--czerwony)}
.sy-plak.zloto{background:var(--zloto-tlo);color:var(--zloto)}
.sy-plak.ziel{background:var(--zielony-tlo);color:var(--zielony)}
.sy-zakr{padding:0 3px;margin:0 -1px;border-radius:3px;background:linear-gradient(transparent 50%,var(--zolty) 50%,var(--zolty) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;font-weight:700}

/* ───────── 1: rozmowa telefoniczna z transkrypcją ───────── */
.sy-dzwoni{flex:none;display:flex;align-items:center;gap:12px;margin:2px 10px 0;padding:12px 14px;border-radius:20px;background:var(--tusz);color:#fff}
.sy-logo{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--zolty);color:var(--tusz);font:700 22px/1 var(--f-display)}
.sy-kto{flex:1;min-width:0;display:grid;gap:6px}
.sy-kto b{font:600 22px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.sy-kto span{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--zolty)}
.sy-fala{flex:none;display:flex;align-items:center;gap:3px;height:26px;padding-right:2px}
.sy-fala i{width:3px;height:100%;border-radius:2px;background:var(--zolty);transform:scaleY(.45)}
.sy-fala i:nth-child(2){transform:scaleY(.9)}.sy-fala i:nth-child(3){transform:scaleY(.6)}.sy-fala i:nth-child(4){transform:scaleY(1)}.sy-fala i:nth-child(5){transform:scaleY(.35)}
@media (prefers-reduced-motion:no-preference){
  .sy-fala i{animation:sy-fala 1s ease-in-out infinite alternate}
  .sy-fala i:nth-child(2){animation-delay:-.4s}.sy-fala i:nth-child(3){animation-delay:-.75s}.sy-fala i:nth-child(4){animation-delay:-.2s}.sy-fala i:nth-child(5){animation-delay:-.6s}
}
@keyframes sy-fala{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

.sy-czat{flex:1;display:flex;flex-direction:column;gap:7px;padding:12px 12px 8px}
.sy-d{max-width:90%;padding:9px 14px 10px;border-radius:20px;font:500 15.5px/1.35 var(--f-tekst)}
.sy-d.ty{align-self:flex-end;border-bottom-right-radius:6px;background:var(--tusz);color:#fff}
.sy-d.kier{align-self:flex-start;border-bottom-left-radius:6px;background:var(--karta);box-shadow:0 1px 0 var(--linia)}
.sy-d.kier .sy-liczba{margin:6px 0 10px}
.sy-wyslane{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:7px 11px;border-radius:999px;background:var(--zielony-tlo);color:var(--zielony);font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sy-wyslane .ik{width:14px;height:14px;stroke-width:2.4}
.sy-przyc{flex:none;display:flex;justify-content:center;gap:24px;padding:4px 0 16px}
.sy-przyc span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--linia);background:var(--karta);color:var(--tusz)}
.sy-przyc .ik{width:22px;height:22px}
.sy-przyc .kon{border-color:var(--czerwony);background:var(--czerwony);color:#fff}
.sy-przyc .kon .ik{transform:rotate(135deg)}

/* ───────── 2: WhatsApp ───────── */
.sy-wa .sy-status{background:var(--karta)}
.sy-wa-glowa{flex:none;display:flex;align-items:center;gap:10px;padding:4px 16px 12px 8px;border-bottom:1px solid var(--linia);background:var(--karta)}
.sy-wa-glowa>.ik{width:22px;height:22px;color:var(--tusz2)}
.sy-wa-glowa>.ik:last-child{color:var(--tusz)}
.sy-logo.okr{width:38px;height:38px;border-radius:50%;background:var(--tusz);color:var(--zolty);font-size:20px}
.sy-wa .sy-kto{gap:5px}
.sy-wa .sy-kto b{font:700 16px/1 var(--f-tekst);text-transform:none;letter-spacing:0}
.sy-wa .sy-kto span{color:var(--zielony)}
.sy-wa .sy-czat{gap:9px;padding-top:12px}
.sy-dzien{align-self:center;padding:6px 10px;border-radius:8px;background:var(--karta);font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tusz2)}
.sy-m{position:relative;align-self:flex-start;max-width:94%;padding:10px 13px 9px 17px;border-radius:16px;border-top-left-radius:5px;background:var(--karta);font:500 15px/1.35 var(--f-tekst);box-shadow:0 1px 0 var(--linia)}
.sy-m::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:4px;border-radius:0 3px 3px 0;background:var(--linia)}
.sy-m.ziel::before{background:var(--zielony)}
.sy-m.pilne::before{background:var(--czerwony)}
.sy-m.termin::before{background:var(--zloto)}
.sy-m b{font-weight:800}
.sy-m time{flex:none;margin-left:auto;font:500 11px/1 var(--f-mono);color:var(--tusz2)}
.sy-m-n{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tusz2)}
.sy-m-n .sy-plak{margin-right:auto}
.sy-m-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 4px}
.sy-m-r b:first-child{font:500 18px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.sy-m .sy-kwota{font:600 22px/1 var(--f-display);letter-spacing:.005em;white-space:nowrap}
.sy-wa .sy-czat{justify-content:flex-end}
.sy-m .sy-liczba{margin:2px 0 10px}
.sy-wa-pole{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px 18px}
.sy-wa-pole span{flex:1;padding:13px 16px;border-radius:999px;background:var(--karta);font:500 14px/1 var(--f-tekst);color:#8A8A83}
.sy-wa-pole i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tusz);color:var(--zolty)}
.sy-wa-pole .ik{width:21px;height:21px}

/* ───────── 3: aplikacja na budowie ───────── */
.sy-app-glowa{flex:none;padding:4px 16px 12px}
.sy-nad{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tusz2)}
.sy-dane{flex:none;padding:5px 7px;border:1px solid var(--linia);border-radius:999px;background:var(--karta);letter-spacing:.04em}
.sy-tytul{font:600 28px/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.sy-blok{flex:none;margin:0 10px;padding:14px 16px 16px;border-radius:18px;background:var(--tusz);color:rgba(255,255,255,.72)}
.sy-blok-r{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px}
.sy-blok .sy-liczba{font-size:50px;color:var(--zolty)}
.sy-blok .sy-liczba small{font-size:30px;color:#fff}
.sy-blok-r span{padding-bottom:4px;font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-align:right}
.sy-pasek{height:8px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.16)}
.sy-pasek i{display:block;height:100%;border-radius:4px;background:var(--zolty);transform:scaleX(.28);transform-origin:0 50%}
.sy-lista{display:grid;gap:8px;padding:8px 10px 0}
.sy-lista li{position:relative;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--karta)}
.sy-lista li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 3px 3px 0;background:var(--linia)}
.sy-lista li.ok::before{background:var(--zielony)}
.sy-lista li.nast::before{background:var(--zloto)}
.sy-lista li>div{flex:1;min-width:0;display:grid;justify-items:start;gap:6px}
.sy-lista b{font:500 18px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.sy-slot{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1.5px dashed #BDBDB4;color:var(--tusz2)}
.sy-slot .ik{width:22px;height:22px}
.sy-slot.ok{border:0;background:var(--zielony-tlo);color:var(--zielony)}
.sy-slot.ok .ik{stroke-width:2.4}
.sy-slot.teraz{border:0;background:var(--tusz);color:var(--zolty)}
.sy-wiecej{flex:none;padding:10px 16px 12px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tusz2)}
.sy-tab{flex:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:auto;padding:8px 2px 18px;border-top:1px solid var(--linia);background:var(--karta)}
.sy-tab span{display:grid;justify-items:center;gap:4px;font:700 11px/1 var(--f-tekst);letter-spacing:-.01em;color:var(--tusz2);white-space:nowrap}
.sy-tab .ik{width:40px;height:24px;padding:2px 10px;border-radius:999px}
.sy-tab .on{color:var(--tusz)}
.sy-tab .on .ik{background:var(--zolty)}

/* ───────── tablet: bez zmian w układzie, tylko szersze karty ───────── */
/* telefon: ostatnia karta też dosuwa się do lewego marginesu (jak 1 i 2) */
@media (max-width:767.98px){
  .sytuacje::after{content:"";flex:0 0 calc(100% - min(90%,360px) - 14px)}
}
@media (min-width:768px){
  .sytuacja{flex-basis:360px}
  .syt-glowa h3{min-height:2.2em}
}

/* ───────── desktop bez JS / reduced: siatka 3 kolumn, podpis nad telefonem ───────── */
@media (min-width:1024px){
  .sytuacje{align-items:stretch}
  .sytuacja{gap:18px}
  .syt-glowa h3{font-size:24px}
  /* bez JS / reduced: telefony w jednej linii (podpis, telefon, stopka jako wspólne wiersze siatki) */
  @supports (grid-template-rows:subgrid){
    .przyklady:not(.poziomo) .sytuacje{grid-template-rows:auto 1fr auto;row-gap:18px}
    .przyklady:not(.poziomo) .sytuacja{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:inherit}
    .przyklady:not(.poziomo) .syt-glowa h3{min-height:0}
  }

  /* desktop z ruchem: poziomy tor, karta = telefon + podpis obok */
  /* odstęp między kartami ≥ 3× odstęp telefon–podpis, żeby podpis nie „należał” do sąsiedniego telefonu */
  .przyklady.poziomo .sytuacje{align-items:stretch;gap:clamp(112px,9vw,150px)}
  .przyklady.poziomo .sytuacja{flex:0 0 clamp(580px,50vw,720px);display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(28px,2.6vw,40px);row-gap:0}
  .przyklady.poziomo .sy-tel{grid-column:1;grid-row:1/-1;width:320px;max-width:none;min-height:600px}
  .przyklady.poziomo .syt-glowa{grid-column:2;grid-row:2;gap:16px 14px;padding:0}
  .przyklady.poziomo .syt-stopka{grid-column:2;grid-row:3;max-width:32ch;margin-top:22px;padding:18px 0 0;border-top:1px solid var(--linia);font-size:17px;line-height:1.55}
  .przyklady.poziomo .syt-nr{grid-column:1/-1;font:700 clamp(64px,6vw,96px)/.9 var(--f-display);letter-spacing:-.01em;color:var(--tusz)}
  .przyklady.poziomo .syt-tag{grid-column:1/-1;padding:7px 12px 7px 10px;font-size:12px}
  .przyklady.poziomo .syt-glowa h3{min-height:0;font:600 clamp(28px,2.6vw,40px)/1.02 var(--f-display);text-transform:uppercase}
}