/* =====================================================================================================================
   Mały Inżynier Jasny: zajęcia online (/online/, szablon mi-oferta/online.php). Tylko strona online: korzeń .mio-of.onl-b
   z data-mio-onl. Nagłówek (film, wiek) bierze wygląd z czesci/hero.php (jasny-miasto.css), tu poprawki widoku grup na telefonie
   (uwaga właściciela, runda 3). Wygląd kafli i szczegółów terminów jest w jasny-terminy.css i jasny-miasto.css.
   ===================================================================================================================== */

@media (max-width:767px){
	/* Nagłówek: zdjęcie zajęć online ma twarz dziecka po lewej stronie kadru, na wąskim ekranie nie ucinamy jej. */
	html body.mij .mio-of.onl-b[data-mio-onl] .mij-hero .f-film img{object-position:30% 30%}

	/* „Ile lat ma dziecko?” nad filtrami: było przewijane w bok i ostatni przycisk („13+ lat”) wystawał za ekran.
	   Przycisków jest najwyżej pięć, więc na telefonie zawijają się do drugiego wiersza. */
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .wk-pas{flex-wrap:wrap;overflow:visible;row-gap:8px}
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .wk-pas > b{flex:0 0 100%;margin:0}

	/* Kafle grup: wszystkie mają to samo zdjęcie zajęć online, w wąskim pasku zdjęcia była widoczna tylko połowa twarzy. */
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .pzf-kf-img img{object-position:30% 50%}
	/* Widok „Według terminu”: wiek i kategoria w jednym wierszu nie mieściły się („Programowanie” wychodziło na krawędź kafla).
	   Kategoria w osobnym wierszu pod wiekiem, jak w widoku „Według programu”. */
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .mij-kafel .pzf-kf-tx > .mij-wiek + .mij-katy{grid-column:1 / -1}

	/* Tabela: kolumna ceny była za wąska (ok. 90 px), więc „od 150 zł/mies.” nachodziło na „Ostatnie miejsca” i przycisk.
	   Cena dostaje cały wiersz, pod nią (do prawej) oznaczenie miejsc i „Zapisz”. */
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .mtb tr.mtb-r{grid-template-areas:"d n n" "d m m" "d c c" "d z z"}
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .mtb .mtb-c{white-space:normal}
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .mtb .mtb-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;align-self:auto}
	html body.mij .mio-of.onl-b[data-mio-onl] #strona .mtb .mtb-b .mtb-zn{flex:1 1 100%;justify-content:flex-end;width:auto;margin:0}
}
@media (max-width:640px){
	/* „Inne zajęcia Małego Inżyniera”: pigułka „Zajęcia pozalekcyjne w Poznaniu, Szczecinie i Warszawie” była szersza
	   niż ekran i tekst się ucinał. Na telefonie dopisek przechodzi do drugiej linii w tej samej pigułce. */
	html body.mij .mio-of.onl-b[data-mio-onl] .inne:not(#q) a{flex:0 1 auto;flex-wrap:wrap;max-width:100%;gap:2px 8px;padding-top:8px;padding-bottom:8px}
}

/* Karta „Dane kontaktowe” pod formularzem lekcji próbnej (uwaga właściciela, runda 5): biała karta pzf-fk-k jak
   „Masz więcej pytań?”, pod nią telefon i e-mail jako duże niebieskie linki z ikonami. Żółtej plakietki
   „Bezpłatnie, bez zobowiązań” nad formularzem już nie ma (mi-oferta/czesci/formularz-online.php motywu). */
html body.mij .mio-of .mij-onl-kt{padding-block:0 56px}
html body.mij .mio-of .mij-onl-kt .pzf-fk-k{max-width:760px}
html body.mij .mio-of .mij-onl-kt .pzf-fk-l{margin:0 0 16px;max-width:60ch}
html body.mij .mio-of .mij-onl-kt .mij-onl-kt-l{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin:0}
html body.mij .mio-of .mij-onl-kt .pzf-tel{display:inline-flex;align-items:center;gap:10px;text-decoration:none;max-width:100%;word-break:break-word}
html body.mij .mio-of .mij-onl-kt .pzf-tel:hover,html body.mij .mio-of .mij-onl-kt .pzf-tel:focus-visible{text-decoration:underline}
html body.mij .mio-of .mij-onl-kt .pzf-tel svg.i{flex:0 0 auto;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body.mij .mio-of .mij-onl-kt .mij-onl-kt-m{font-size:19px;line-height:1.25}
@media (max-width:560px){
	/* Na telefonie telefon i e-mail jeden pod drugim, e-mail mniejszy, żeby zmieścił się w jednej linii. */
	html body.mij .mio-of .mij-onl-kt{padding-block:0 40px}
	html body.mij .mio-of .mij-onl-kt .mij-onl-kt-l{flex-direction:column;align-items:flex-start;gap:12px}
	html body.mij .mio-of .mij-onl-kt .mij-onl-kt-m{font-size:16.5px}
	html body.mij .mio-of .mij-onl-kt .pzf-tel svg.i{width:22px;height:22px}
}