/* Wirtualny Pacjent — style symulacji i strony wpisu. Ładowane RAZ na stronę z motywu;
   wpis niesie już tylko konfigurację. Poprawka tutaj obowiązuje we wszystkich symulacjach. */


/* Wszystko pod .icase — materiał dzieli dokument z resztą portalu.
   Bez bibliotek z zewnątrz, bez fontów z sieci.
   Hierarchia budowana światłem i jasnością tła, nie ramkami. */
.icase{
  --nv:#0D4B5C; --tl:#14A085; --rs:#CC3266;
  --tx:#152238; --mu:#5f7078; --tlo:#eef2f3;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--tx); max-width:1080px; margin:0 auto; padding:28px 20px 56px;
}
.icase *{box-sizing:border-box}
.icase h1{font-size:clamp(23px,3.6vw,34px);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 8px;color:var(--nv)}
.icase .sub{color:var(--mu);margin:0 0 20px;max-width:62ch}

/* ——— ekran ——— */
.icase .ekran{position:relative;background:#05171d;border-radius:6px;overflow:hidden;
  aspect-ratio:16/9}
.icase video,.icase #wid-vimeo{width:100%;height:100%;display:block;background:#05171d}
.icase video{object-fit:cover}
.icase #wid-vimeo iframe{width:100%;height:100%;display:block;border:0}
/* Vimeo doklada wlasny padding-bottom przy responsywnosci - kadr trzyma .ekran */
.icase #wid-vimeo>div{width:100%!important;height:100%!important;padding:0!important}

/* dyskretny pasek postępu — cienka kreska u dołu obrazu */
.icase .postep{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.16)}
.icase .postep i{display:block;height:100%;width:0;background:var(--tl);
  transition:width .2s linear}
.icase .postep .etapy{position:absolute;inset:0;display:flex;pointer-events:none}
.icase .postep .etapy span{flex:1;border-right:2px solid #05171d}
.icase .postep .etapy span:last-child{border-right:0}

/* ——— modal z pytaniem, na obrazie ——— */
.icase .modal{position:absolute;inset:0;display:none;z-index:6;
  background:linear-gradient(to bottom,rgba(15,76,84,.62),rgba(15,76,84,.80));
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:clamp(14px,3.5vh,32px);overflow-y:auto}
.icase .modal.on{display:grid;place-items:center}
.icase .modal-in{width:min(700px,100%)}
.icase .etap-nr{font-size:clamp(11px,1.3vw,13px);color:#8fc9be;margin:0 0 6px;
  text-align:center}
.icase .pyt{font-size:clamp(16px,2.3vw,23px);font-weight:650;color:#fff;line-height:1.3;
  margin:0 0 clamp(10px,2vh,18px);text-align:center;text-wrap:balance}
.icase .odp{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  padding:clamp(10px,1.6vh,15px) clamp(12px,1.7vw,18px);margin:0 0 clamp(7px,1.1vh,11px);
  border:0;border-radius:4px;background:rgba(255,255,255,.11);cursor:pointer;
  font:inherit;font-size:clamp(13px,1.55vw,16px);line-height:1.42;color:#fff;
  transition:background .13s}
.icase .odp:hover:not(:disabled){background:rgba(20,160,133,.5)}
.icase .odp:focus-visible{outline:2px solid var(--tl);outline-offset:3px}
.icase .odp .lit{flex:0 0 auto;width:23px;height:23px;line-height:23px;text-align:center;
  border-radius:3px;background:rgba(255,255,255,.9);color:var(--nv);font-weight:700;font-size:12px}
.icase .odp.zla{background:rgba(204,50,102,.24);color:rgba(255,255,255,.62);cursor:default}
.icase .odp.zla .lit{background:rgba(204,50,102,.85);color:#fff}
.icase .odp.zla .tt::after{content:" — sprawdzone";opacity:.7;font-size:.86em}
.icase .info{margin-top:clamp(8px,1.4vh,14px);padding:11px 15px;border-radius:4px;
  font-size:clamp(12px,1.45vw,15px);background:rgba(204,50,102,.3);color:#fff;text-align:center}
.icase .info[hidden]{display:none}

/* zasłona startowa i końcowa */
.icase .zaslona{position:absolute;inset:0;display:none;z-index:7;place-items:center;
  background:rgba(15,76,84,.72);padding:26px;text-align:center}
.icase .zaslona.on{display:grid}
.icase .zaslona p{color:#fff;font-size:clamp(15px,2vw,20px);max-width:38ch;margin:0 0 18px;
  line-height:1.4}

/* ——— sterowanie: bez pudełka, bez ramki ——— */
.icase .ster{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.icase .ster button{border:0;background:none;padding:6px;cursor:pointer;color:var(--nv);
  display:grid;place-items:center;flex:0 0 auto;border-radius:3px;line-height:0}
.icase .ster button:hover{background:var(--tlo)}
.icase .ster button:focus-visible{outline:2px solid var(--tl);outline-offset:1px}
.icase .ster svg{display:block}
.icase .czas{font-variant-numeric:tabular-nums;font-size:13px;color:var(--mu);
  min-width:82px;letter-spacing:.01em}
.icase .glos{display:flex;align-items:center;gap:7px;margin-left:auto}
.icase .glos input[type=range]{width:88px;accent-color:var(--tl)}

.icase .stopka{margin-top:20px;font-size:13px;color:var(--mu);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.icase .licznik b{color:var(--nv);font-variant-numeric:tabular-nums}
.icase .btn{display:inline-block;padding:11px 22px;border:0;border-radius:4px;
  background:var(--tl);color:#fff;font:650 15px/1 inherit;cursor:pointer}
.icase .btn:hover{background:#118a72}
@media (max-width:560px){.icase .glos{margin-left:0;width:100%}}

/* Pełny ekran obejmuje CAŁĄ kartę, nie sam znacznik wideo — inaczej modal z pytaniem
   i pasek postępu zostałyby pod natywnym odtwarzaczem i gracz nie zobaczyłby pytania. */
#icase:fullscreen{max-width:none;width:100%;height:100%;margin:0;padding:0;
  background:#0b1418;display:flex;flex-direction:column;justify-content:center}
#icase:fullscreen h1,
#icase:fullscreen .sub,
#icase:fullscreen .stopka{display:none}
#icase:fullscreen .ekran{flex:0 1 auto;max-height:100vh;border-radius:0}
#icase:fullscreen .ster{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 22px;
  background:linear-gradient(180deg,rgba(11,20,24,0) 0%,rgba(11,20,24,.82) 55%);
  opacity:0;transition:opacity .2s}
#icase:fullscreen:hover .ster,
#icase:fullscreen .ster:focus-within{opacity:1}
#icase:fullscreen .ster button,
#icase:fullscreen .ster span{color:#fff}

/* Znak na środku obrazu. Bez niego zatrzymany materiał wygląda jak zerwane połączenie
   i widz nie wie, że ma tapnąć. Przy pauzie ikona ZOSTAJE, przy wznowieniu mruga i gaśnie. */
.icase .wskaznik{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.82);
  width:88px;height:88px;border-radius:50%;background:rgba(10,20,25,.55);color:#fff;
  display:grid;place-items:center;opacity:0;pointer-events:none;z-index:3;
  transition:opacity .22s ease, transform .22s ease}
.icase .wskaznik.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.icase .wskaznik.gasnie{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
.icase .wskaznik svg{width:38px;height:38px;margin-left:3px}
.icase .wskaznik.stoi svg{margin-left:5px}

/* Tryb osadzony: gra siedzi w szablonie wpisu, który niesie już tytuł, metadane i tekst.
   Własny nagłówek byłby wtedy drugim tytułem tej samej rzeczy, a ograniczenie szerokości
   walczyłoby z układem strony. Włącza go klasa na korzeniu, nie osobny plik. */
.icase.osadzony{max-width:none;margin:0;padding:0}
.icase.osadzony > h1,
.icase.osadzony > .sub,
.icase.osadzony > .stopka{display:none}
.icase.osadzony .ekran{border-radius:0}


/* Wirtualny Pacjent — symulacja rozmowy przy pierwszym stole.
   Układ odwrócony wobec zwykłego wpisu: symulacja NA PEŁNEJ SZEROKOŚCI nad tytułem,
   tytuł i tekst pod nią. Szablon ustawia of_island, więc <main> nie ma .main i nie
   ogranicza szerokości — tu tylko domykamy kolumnę tekstu pod symulacją. */

.wp-symulacja {
  width: 100%;
  background: #0b2027;
}

/* Kod symulacji przychodzi z pola redakcyjnego i niesie własne style. Tu tylko zdejmujemy
   margines, który ma sens na stronie samodzielnej, a nie wewnątrz wpisu. */
.wp-symulacja .icase {
  max-width: none;
  margin: 0;
  padding: 0;
}

.wp-brak {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted, #5c7580);
  background: #f3f6f6;
}

.wp-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 20px 64px;
}

.wp-wrap .crumbs-row {
  font-size: 12.5px;
  margin: 0 0 18px;
}

.wp-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent2, #cc3266);
}

.wp-tytul {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.16;
  letter-spacing: -.02em;
}

.wp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted, #5c7580);
}

.wp-lead {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
  color: #33474f;
}

.wp-tresc {
  font-size: 16px;
  line-height: 1.72;
}

.wp-marka {
  margin: 34px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line, #dbe6e7);
  font-size: 12.5px;
  color: var(--muted, #5c7580);
}

@media (max-width: 720px) {
  .wp-wrap { padding: 18px 16px 56px; }
  .wp-tytul { font-size: 25px; }
  .wp-lead { font-size: 15.5px; }
  .wp-tresc { font-size: 15.5px; }
}

/* Piśmiennictwo — szarawe, spójne z blokiem źródeł Q&A (.ans-src): kreska przerywana,
   --ink-3 na pozycjach, --ink-4 na etykiecie i numerach. Nie ma być drugim czytaniem,
   tylko dowodem pod ręką dla tego, kto go szuka. */
.wp-src { margin-top: 28px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--body); font-size: 12px; }
.wp-src .k { font-family: var(--ui); font-weight: 700; font-size: 11px; color: var(--ink-4); display: block; margin-bottom: 3px; letter-spacing: .02em; }
.wp-src ol { margin: 6px 0 0; padding-left: 20px; }
.wp-src li { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; margin: 0 0 5px; }
.wp-src li::marker { color: var(--ink-4); }
.wp-src a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }

/* Wezwanie i przycisk odtwarzania idą kolorem `--accent` (#14a085), nie malinowym z makiety:
   w tym motywie #cc3266 to `--warn`, czyli kolor ostrzeżenia — zachęta w barwie alertu
   kłóciłaby się z resztą portalu.
   ——— Lista symulacji (archiwum) ———————————————————————————————————————————————
   Kafel na pełną szerokość, bo symulacji jest kilka, a wiersz siatki z jedną kartą
   i dwiema dziurami wygląda na stronę, która się nie doładowała.
   ⚠️ Kolumna okładki MUSI być szersza niż wysokość kafla razy 16/9. Element z
   `aspect-ratio` w za wąskim słupku rozpycha się POZA swój słupek i wchodzi na tekst —
   wygląda to jak brak odstępu, a padding nic nie daje (zmierzone 29.08.2026: kadr
   potrzebował 498 px w kolumnie 460 px i nachodził o 6 px). `align-self: start`
   trzyma okładkę na miejscu, gdy treść jest wyższa. */
.vp-list { display: flex; flex-direction: column; gap: 16px; }
.vp-card { display: grid; grid-template-columns: 500px 1fr; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,76,84,.08); text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease; }
.vp-card:hover { box-shadow: 0 6px 18px rgba(15,76,84,.14); transform: translateY(-1px); }

.vp-cover { position: relative; width: 100%; align-self: start; aspect-ratio: 16 / 9;
  background-color: #0d2b33; background-size: contain; background-repeat: no-repeat;
  background-position: center; display: flex; align-items: flex-end; }
.vp-veil { position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, rgba(8,36,42,0), rgba(8,36,42,.9)); }
.vp-tag { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 7px;
  font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--primary);
  padding: 5px 11px 5px 9px; border-radius: 999px; }
.vp-tri { width: 0; height: 0; border-left: 8px solid var(--accent, #14a085);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; flex: none; }
.vp-row { position: relative; display: flex; align-items: flex-end; gap: 11px;
  padding: 13px 14px 14px; width: 100%; }
.vp-play { width: 32px; height: 32px; border-radius: 50%; background: var(--accent, #14a085);
  flex: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 9px rgba(20,160,133,.35); }
.vp-play::after { content: ''; border-left: 10px solid #fff; border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent; margin-left: 3px; }
.vp-quote { flex: 1; color: #fff; }
.vp-said { display: block; font-family: var(--ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; opacity: .82; margin-bottom: 3px; }
.vp-line { display: block; font-family: var(--body); font-size: 13.5px; font-weight: 600;
  line-height: 1.32; font-style: italic; }

/* odstęp od okładki — treść nie może się jej trzymać */
.vp-body { padding: 20px 24px 20px 32px; display: flex; flex-direction: column; gap: 10px; }
.vp-title { font-family: var(--ui); font-size: 19px; font-weight: 700; color: var(--ink);
  margin: 0; line-height: 1.25; }
.vp-q { font-family: var(--body); font-size: 13.5px; color: var(--ink); line-height: 1.4; margin: 0; }
.vp-opts { display: flex; flex-direction: column; gap: 7px; }
/* odpowiedzi bez obramowań: pole niesie samo tło, więc kafel nie konkuruje kreskami z ramką karty */
.vp-opt { display: block; font-family: var(--body); font-size: 12.5px; color: var(--ink);
  background: #eef4f4; border-radius: 8px; padding: 9px 13px; }
.vp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 4px; }
.vp-hint { font-family: var(--ui); font-size: 11.5px; color: var(--ink-3); }
.vp-cta { display: block; font-family: var(--ui); font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--accent, #14a085); border-radius: 8px; padding: 9px 16px; }

/* Ukończona: gaśnie kolorem, nie ramkami. `is-done` to ta sama klasa co w Szkoleniach. */
.vp-card.is-done { opacity: .62; }
.vp-card.is-done:hover { opacity: .9; }
.vp-card.is-done .vp-cover { filter: grayscale(.85); }
.vp-card.is-done .vp-tag { background: rgba(255,255,255,.9); color: var(--ink-3); }
.vp-card.is-done .vp-tri { border-left-color: var(--ink-3); }
.vp-card.is-done .vp-play { background: var(--ink-3); box-shadow: none; }
.vp-card.is-done .vp-opt { background: #f0f2f3; color: var(--ink-3); }
.vp-card.is-done .vp-cta { background: #e6eaec; color: var(--ink-2); }
.vp-card.is-done .vp-title { color: var(--ink-2); }

@media (max-width: 900px) {
  /* poniżej tej szerokości okładka obok tekstu robi się paskiem — schodzi nad treść */
  .vp-card { grid-template-columns: 1fr; }
  .vp-body { padding: 16px 18px 18px; }
  .vp-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .vp-cta { text-align: center; }
}

/* Transkrypt — zwinięty, ale obecny w HTML (bez tego strona jest dla wyszukiwarek pusta,
   bo cała treść merytoryczna siedzi w nagraniu). Stonowany: to zapis do doczytania,
   nie druga wersja artykułu. */
.wp-trans { margin-top: 26px; border-top: 1px dashed var(--line); padding-top: 12px; }
.wp-trans > summary { font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--primary); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; }
.wp-trans > summary::-webkit-details-marker { display: none; }
.wp-trans > summary::before { content: '▸'; font-size: 11px; transition: transform .15s ease; }
.wp-trans[open] > summary::before { transform: rotate(90deg); }
/* Jeden ciąg szarego tekstu — celowo nieatrakcyjny, bo to zapis nagrania, nie treść do czytania. */
.wp-trans-tresc { margin-top: 12px; font-family: var(--body); font-size: 13px; line-height: 1.65; color: var(--ink-3); }
.wp-trans-tresc h3:first-child { margin-top: 0; }

/* Brama na decyzji — gość obejrzał scenę i widzi pytanie, ale wybór wymaga konta.
   Wygląda jak odpowiedzi, żeby było jasne, CO zastępuje. */
.wp-brama { padding: 4px 2px 2px; }
/* Biały, bo brama siedzi w modalu NAD nagraniem — ciemne, rozmyte tło. `--ink-2` to kolor
   tekstu na białej stronie i tutaj dawał kontrast nie do czytania. */
.wp-brama-txt { font-family: var(--body); font-size: 14.5px; line-height: 1.55; color: #fff; margin: 0 0 14px; }
.wp-brama-btny { display: flex; gap: 10px; flex-wrap: wrap; }
.wp-brama-btn { display: inline-block; font-family: var(--ui); font-size: 13.5px; font-weight: 700;
  color: #fff; background: var(--accent, #14a085); border-radius: 9px; padding: 11px 20px; text-decoration: none; }
.wp-brama-btn.druga { background: transparent; color: var(--accent, #14a085); box-shadow: inset 0 0 0 1.5px currentColor; }
.wp-brama-btn:hover { filter: brightness(1.06); }