/* ai.html: filmy w widokach programu i wejścia sekcji. Kolory, pismo i cień tylko zmiennymi z :root w styl.css. */

/* karty „dla kogo”: fiszkę odwraca film (zdejmuje .f-przod), bez opóźnienia z wejścia karty */
#dla-kogo .mk-fiszka-in{transition-delay:0s}
#dla-kogo .mk-fiszka-in.f-przod{transform:none}

/* karty „dla kogo” stoją po dwie, więc są szersze niż karty wejść: widok programu nie kończy się w 2/3 karty.
   Wąska karta (telefon, dwie kolumny na małym oknie): widok sięga prawej krawędzi i niesie pierwszy panel.
   Szeroka: cały widok z równym marginesem faktury po bokach, pismo liczone z szerokości karty (62em widoku). */
#dla-kogo .karta{--mk-bok:clamp(18px, 4.4cqw, 44px)}
#dla-kogo .karta-widok{left:var(--mk-bok);right:0;width:auto}
#dla-kogo :is(.mk-ocena, .mk-kazus){display:none}
#dla-kogo .mk-art{white-space:nowrap}
#dla-kogo .mk-przeglad{display:flex;flex-direction:column}
#dla-kogo .mk-wiersz:first-child{border-top:0}
#dla-kogo .mk-wiersz{transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1), background-color .35s, box-shadow .35s}
#dla-kogo .mk-wiersz.mk-wyb{background:var(--bursztyn-tlo);box-shadow:-1.1em 0 0 var(--bursztyn-tlo), 1.1em 0 0 var(--bursztyn-tlo)}
#dla-kogo .mk-najw{margin-top:.5em;padding:.8em 0 .2em;border-top:1px solid var(--linia);font-size:.9em}
#dla-kogo .mk-najw p{margin-top:.3em}
#dla-kogo .mk-ocena{width:25em;flex:none;flex-direction:column;gap:.45em;padding:1em 1.2em;font-size:.92em}
#dla-kogo .mk-ocena-gl{display:flex;align-items:center;gap:.7em;padding-bottom:.7em;border-bottom:1px solid var(--linia)}
#dla-kogo .mk-ocena-gl .mk-ryz{margin-left:auto}
#dla-kogo .mk-ocena .mk-et{margin-top:.55em}
#dla-kogo .mk-cytat{padding:.7em .9em;border-left:2px solid var(--linia-ciemna);background:var(--plotno);font-family:var(--serif);font-size:1.08em;line-height:1.35}
#dla-kogo .mk-prop{padding:.6em .9em;border-radius:.6em;background:var(--zielen-jasna);color:var(--zielen);font-weight:500}
#dla-kogo .mk-fiszka{display:flex;flex-direction:column;gap:.6em;min-width:13em}
#dla-kogo .mk-oceny{display:flex;gap:.4em;font-size:.76em;font-weight:500;text-align:center}
#dla-kogo .mk-oceny span{flex:1 1 auto;padding:.55em .5em;border:1px solid var(--linia-ciemna);border-radius:.65em;background:#fff;white-space:nowrap}
#dla-kogo .mk-oceny .wl{background:var(--zielen);border-color:var(--zielen);color:#fff}
#dla-kogo .mk-kazus{width:19em;flex:none;flex-direction:column;gap:.7em;font-size:.92em}
#dla-kogo .mk-ja{align-self:flex-end;max-width:88%;padding:.55em .9em;border-radius:1em 1em .3em 1em;background:var(--kamien)}
#dla-kogo .mk-on{font-family:var(--serif);font-size:1.12em;line-height:1.35}
@container (max-width:679px){
  #dla-kogo .mk-nauka{width:auto;flex:1 1 17em}
  #dla-kogo .mk-fiszka{display:none}
}
/* two cards side by side: the text row is shared (subgrid), so both program views start on one line */
@media (min-width:1101px){
  #dla-kogo .karty{grid-template-rows:auto 1fr}
  #dla-kogo .karta{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
}
@container (min-width:680px){
  #dla-kogo .karta-widok{right:var(--mk-bok);font-size:clamp(10px, calc((100cqw - 2 * var(--mk-bok)) / 62), 13.5px)}
  #dla-kogo .mk{border-right:1px solid color-mix(in srgb, var(--grafit) 22%, transparent);border-radius:.9em .9em 0 0}
  #dla-kogo :is(.mk-ocena, .mk-kazus){display:flex}
  #dla-kogo .mk-nauka{width:19.5em}
}

/* szczegół przepisu: kursor filmu potrzebuje kadru z pozycją */
#przepis .sz-przepis{position:relative}

/* czego nie wiem: plansza z fakturą, na niej fragment odpowiedzi (ok. 86 % szerokości planszy) */
.plansza-cnw{grid-column:6 / span 7;position:relative;display:grid;place-items:center;padding:clamp(32px, 4.4vw, 72px) clamp(20px, 3vw, 44px)}
.plansza-cnw picture{position:absolute;inset:0}
.plansza-cnw .pv{position:relative;width:86%;max-width:620px;box-shadow:var(--cien)}
.pv-cnw .pv-tresc{padding:18px 22px 22px}
.pv-cnw .cnw-pyt{font-size:14px;max-width:80%}
.pv-cnw .pv-et{margin-top:18px}
.pv-cnw .cnw-lista li{font-size:16px;margin-top:8px}
.pv-cnw .cnw-lista b{font-weight:600}
.pv-cnw .cnw-pewnosc{margin-top:16px;padding-top:2px;border-top:1px solid var(--linia)}
.pv-cnw .cnw-pewnosc p:last-child{font-family:var(--serif);font-size:16px;line-height:1.5;margin-top:0}

/* baza: zmiana przepisu na osi świeci zielenią; film gasi ją na początku (.f-cicho) i zapala w swoim takcie */
.pv-os .pv-os-zm::before{border-color:var(--zielen);transition:border-color .4s, background-color .4s}
.pv-os .pv-os-zm b{color:var(--zielen);transition:color .4s}
.pv-os .pv-os-zm.f-cicho::before{border-color:var(--linia-ciemna)}
.pv-os .pv-os-zm.f-cicho b{color:var(--grafit)}

/* wejścia poza widokami programu: skrypt-ai.js dodaje .ai-czeka tylko, gdy strona może się ruszać */
.ai-czeka{opacity:0;transform:translateY(28px)}
.ai-czeka.widac{opacity:1;transform:none;transition:opacity .6s ease, transform .9s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i, 0) * 90ms)}

@media (max-width:1020px){
  .plansza-cnw{grid-column:1 / -1;margin-top:40px}
}
@media (max-width:640px){
  .plansza-cnw{padding:28px 14px}
  .plansza-cnw .pv{width:100%}
  .pv-cnw .pv-tresc{padding:14px 16px 18px}
  .pv-cnw .cnw-lista li, .pv-cnw .cnw-pewnosc p:last-child{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  .ai-czeka{opacity:1;transform:none}
}

/* liczba w „ok. 19 tys.” liczy się w osobnym spanie: ten sam kolor co reszta liczby (styl.css szarzy .liczby span) */
.liczby b span{color:inherit}