/* korkizmatmy.online, zakładka „Tablica” (pokaz możliwości tablicy, szkic 24.10.2026). Dokłada się do glowna.css (kolory, przyciski,
   sekcje, nagłówek ze znakami, fale, karta zapisu) i funkcje-tablicy.css (pełna lista funkcji). Telefon najpierw (390 px), potem 640,
   900, 1024. Wygląd wg design.md Karoliny: karty 10 px z cieniem standardowym, kafelki ikon 6 px bez cienia, pastele #DFEBFB / #FDEDE1 /
   #E1F4EE, link ze strzałką granat + #DC7328, ruch 450 ms ease-in-out. Bez stylów w linii (CSP style-src 'self'). */

/* ---------- nagłówek: tekst i klip obok siebie (komputer), klip pod tekstem (telefon) ---------- */
.tb-hero__w{display:grid;gap:clamp(1.75rem,1rem + 3vw,3rem);align-items:center}
.tb-hero h1{max-width:13em}
.tb-hero .naglowek-strony__lead{text-wrap:pretty}
.tb-cechy{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:1.25rem 0 0;padding:0;list-style:none;color:rgba(255,255,255,.86);font-size:.9375rem}
.tb-cechy li{display:inline-flex;align-items:center;gap:.45rem}
.tb-cechy .ikona{width:18px;height:18px;flex:none;color:#4ADE80;stroke-width:2.6}
.tb-hero__przyciski{margin-top:1.6rem}
.tb-hero__klip .tb-klip{border-radius:10px;box-shadow:0 2px 10px 0 rgba(0,0,0,.18);border:4px solid #fff}
.tb-skroty{justify-content:flex-start;margin-top:clamp(1.75rem,1.2rem + 1.5vw,2.5rem)}
@media (min-width:1024px){
  .tb-hero__w{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
  .tb-skroty{justify-content:center}
}

/* ---------- klip: plakat (img) i film na nim (wstawia tablica.js), przycisk pauzy (WCAG 2.2.2) ---------- */
/* wysokość klipu daje plakat (width/height w atrybutach: bez przeskoku), więc każdy klip ma swoje proporcje (montaż dwóch okien jest szerszy) */
.tb-klip{position:relative;margin:0;overflow:hidden;background:#F4F7FB;isolation:isolate}
.tb-klip__plakat{display:block;width:100%;height:auto}
.tb-klip__wideo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.tb-klip__wideo{opacity:0;transition:opacity .45s ease-in-out}
.tb-klip--gra .tb-klip__wideo,.tb-klip__wideo--bez-js{opacity:1}
.tb-klip__przycisk{position:absolute;z-index:2;top:.6rem;right:.6rem;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--granat);color:#fff;cursor:pointer;box-shadow:0 2px 10px 0 rgba(40,72,120,.14);transition:opacity .45s ease-in-out,transform .45s ease-in-out}
.tb-klip__przycisk[hidden]{display:none}
.tb-klip__przycisk .ikona{width:18px;height:18px;fill:currentColor;stroke:none}
.tb-klip--gra .tb-klip__przycisk{opacity:.72}
.tb-klip--gra:hover .tb-klip__przycisk,.tb-klip__przycisk:focus-visible{opacity:1}
.tb-klip__przycisk:focus-visible{outline:3px solid #F69A4F;outline-offset:2px}
/* film stoi (ograniczony ruch, oszczędzanie danych, „Zatrzymaj”): duże kółko „Odtwórz” na środku plakatu */
.tb-klip--stoi .tb-klip__przycisk{top:50%;right:50%;width:64px;height:64px;transform:translate(50%,-50%);background:rgba(0,41,114,.9)}
.tb-klip--stoi .tb-klip__przycisk .ikona{width:24px;height:24px;margin-left:3px}
.tb-ikona-start{display:none}
.tb-klip--stoi .tb-ikona-start{display:block}
.tb-klip--stoi .tb-ikona-pauza{display:none}
@media (prefers-reduced-motion:reduce){.tb-klip__wideo,.tb-klip__przycisk{transition:none}}

/* ---------- wiersze funkcji (Jacek 24.10 15:17): mniejszy film po jednej stronie, obok tytuł, kroki „Do czego służy” i „Na lekcji”;
   jedna funkcja w wierszu, film na zmianę z lewej i z prawej; na telefonie film nad opisem ---------- */
.tb-wiersze{display:grid;gap:clamp(1.25rem,.9rem + 1.2vw,2rem);margin:0;padding:0;list-style:none}
.tb-wiersz{display:grid;gap:1.1rem 2rem;align-items:center;min-width:0;padding:1rem;border-radius:10px;background:#fff;box-shadow:var(--cien);
  scroll-margin-top:calc(var(--naglowek) + 16px)}
.tb-wiersz__film .tb-klip{border-radius:8px;border:1px solid var(--linia)}
.tb-wiersz__tresc{min-width:0;padding:.1rem .35rem .25rem}
.tb-wiersz__znaczniki{margin:0 0 .45rem}
.tb-wiersz__tytul{margin:0 0 .55rem;font-size:clamp(1.25rem,1.1rem + .45vw,1.5rem);line-height:1.22;color:var(--granat)}
.tb-wiersz__opis{margin:0 0 .75rem;color:var(--tekst-2);font-size:.9375rem;line-height:1.58}
.tb-wiersz__etykieta{margin:0 0 .45rem;font:600 .75rem/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-3)}
.tb-kroki{counter-reset:krok;display:grid;gap:.45rem;margin:0 0 .95rem;padding:0;list-style:none}
.tb-kroki li{counter-increment:krok;position:relative;padding-left:2.1rem;color:var(--tekst-2);font-size:.9375rem;line-height:1.5}
.tb-kroki li::before{content:counter(krok);position:absolute;left:0;top:.05em;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;
  background:#DFEBFB;color:var(--granat);font:700 .8125rem/1 var(--font-logo)}
.tb-lekcja{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 .9rem;padding:.7rem .85rem;border-radius:8px;background:#FEF7F2}
.tb-lekcja p{margin:0;color:var(--tekst);font-size:.9375rem;line-height:1.5}
.tb-lekcja strong{color:var(--granat)}
.tb-lekcja__ikona{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:6px;background:#fff;color:#B45A00}
.tb-lekcja__ikona .ikona{width:18px;height:18px;stroke-width:2.25}
.tb-wiersz__dol{margin:0}
.tb-znacznik{display:inline-flex;align-items:center;padding:.12rem .6rem;border-radius:999px;background:#FDEDE1;color:var(--granat);font:600 .75rem/1.45 var(--font);letter-spacing:.01em;white-space:nowrap;vertical-align:.12em}
/* wyróżniony wiersz (design.md 4.6): obrys 1 px #F69A4F, tło #FEF7F2, co 4 s fala od krawędzi */
.tb-wiersz--wyroznione{background:#FEF7F2;box-shadow:0 0 0 1px #F69A4F,var(--cien);animation:tbFala 4s ease-out infinite}
.tb-wiersz--wyroznione .tb-lekcja{background:#fff}
.tb-wiersz--wyroznione .tb-lekcja__ikona{background:#FDEDE1}
@keyframes tbFala{0%{box-shadow:0 0 0 1px #F69A4F,0 0 0 0 rgba(246,154,79,.55),var(--cien)}35%{box-shadow:0 0 0 1px #F69A4F,0 0 0 18px rgba(246,154,79,0),var(--cien)}100%{box-shadow:0 0 0 1px #F69A4F,0 0 0 18px rgba(246,154,79,0),var(--cien)}}
@media (prefers-reduced-motion:reduce){.tb-wiersz--wyroznione{animation:none}}
@media (min-width:900px){
  .tb-wiersz{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);padding:1.1rem 1.5rem 1.1rem 1.1rem}
  /* bardzo szeroki klip (montaż tablicy i drugiego okna): film na całą szerokość wiersza, opis pod nim */
  .tb-wiersze>.tb-wiersz.tb-wiersz--szeroki{grid-template-columns:minmax(0,1fr);padding:1.1rem}
  .tb-wiersze>.tb-wiersz.tb-wiersz--szeroki .tb-wiersz__film{order:0}
  .tb-wiersz--szeroki .tb-wiersz__tresc{max-width:52rem;padding:0 .5rem .25rem}
  .tb-wiersze>.tb-wiersz:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.82fr);padding:1.1rem 1.1rem 1.1rem 1.5rem}
  .tb-wiersze>.tb-wiersz:nth-child(even) .tb-wiersz__film{order:2}
}
/* wiersze na ciemnym pasie: tekst jak na jasnym (globalne reguły ciemnej sekcji robią nagłówki i linki białe/pomarańczowe) */
.sekcja--ciemna .tb-wiersz__tytul{color:var(--granat)}
.sekcja--ciemna .tb-wiersz .link-strzalka{color:var(--granat)}
.sekcja--ciemna .tb-wiersz .link-strzalka .ikona{color:#DC7328}
.sekcja--ciemna .sekcja__naglowek .lead,.sekcja--ciemna .tb-dopisek{color:rgba(255,255,255,.78)}
.tb-dopisek{max-width:46rem;margin:1.5rem auto 0;text-align:center;color:var(--tekst-2);font-size:.9375rem;text-wrap:balance}

/* ---------- „W panelu korepetytora” i „Na prawdziwej lekcji także”: funkcje bez klipu (kafelek ikony + tekst) ---------- */
.tb-panel__tytul{margin:clamp(2rem,1.5rem + 1.5vw,2.75rem) 0 1rem;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);text-align:center}
.tb-panel{display:grid;gap:.9rem;margin:0;padding:0;list-style:none}
.tb-panel__pozycja{display:flex;gap:1rem;align-items:flex-start;min-width:0;padding:1.1rem 1.15rem;border-radius:10px;background:#fff;box-shadow:var(--cien)}
.tb-panel__nazwa{margin:.1rem 0 .3rem;font:700 1.0625rem/1.3 var(--font-n);color:var(--granat);letter-spacing:-.005em}
.tb-panel__opis{margin:0;color:var(--tekst-2);font-size:.9375rem;line-height:1.55}
.tb-kafel{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:6px}
.tb-kafel .ikona{width:24px;height:24px;stroke-width:2.25}
.tb-kafel--niebieski{background:#DFEBFB;color:#0074C2}
.tb-kafel--brzoskwinia{background:#FDEDE1;color:#B45A00}
.tb-kafel--mieta{background:#E1F4EE;color:#008073}
@media (min-width:640px){.tb-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.tb-panel{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* jedna pozycja (lekcja z kilkoma uczniami): wyśrodkowana, nie rozciągnięta na trzy kolumny */
.tb-panel:has(>li:only-child){grid-template-columns:minmax(0,40rem);justify-content:center}

/* ---------- pełna lista funkcji: zwinięta, rozwija się płynnie (design.md 4.14: kółko #DFEBFB ze strzałką, obrót 180°) ---------- */
.tb-lista{margin:0 auto;max-width:72rem}
.tb-lista__przelacz{display:flex;align-items:center;justify-content:center;gap:.9rem;width:fit-content;margin:0 auto;padding:.45rem .45rem .45rem 1.4rem;border-radius:999px;
  background:var(--granat);color:#fff;font:600 1rem/1.3 var(--font);cursor:pointer;list-style:none}
.tb-lista__przelacz::-webkit-details-marker{display:none}
.tb-lista__kolko{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F69A4F;color:var(--granat);transition:transform .45s ease-in-out}
.tb-lista__kolko .ikona{width:20px;height:20px;stroke-width:2.5}
.tb-lista[open] .tb-lista__kolko{transform:rotate(180deg)}
.tb-lista__przelacz:focus-visible{outline:3px solid #F69A4F;outline-offset:3px}
.tb-lista__tresc{margin-top:2rem}
.tb-lista::details-content{block-size:0;opacity:0;overflow-y:clip;transition:block-size .45s ease-in-out,opacity .45s ease-in-out,content-visibility .45s allow-discrete}
.tb-lista[open]::details-content{block-size:auto;opacity:1}
@supports (interpolate-size:allow-keywords){.tb-lista{interpolate-size:allow-keywords}}
@media (prefers-reduced-motion:reduce){.tb-lista::details-content,.tb-lista__kolko{transition:none}}
.tb-lista .ft-grupa{margin-bottom:2.25rem}

/* ---------- zapis ---------- */
.tb-zapis__przyciski{justify-content:center}
.tb-zapis__drobne{margin:1.25rem 0 0;color:rgba(235,243,255,.78);font-size:.9375rem}
.tb-zapis__drobne a{color:#fff}

@media print{.tb-klip__przycisk{display:none}.tb-lista__tresc{display:block}}