/* BZ-42 - mobilne poprawki responsywnosci (bpnt / centroom / epi-centrum).
   Selektory sa unikalne per motyw, wiec jeden arkusz jest bezpieczny w calej sieci.
   Dostarczane jako prawdziwy arkusz (nie inline), bo WP Rocket RUCSS wycina inline <style>. */

/* #1 bpnt /transferownia/: email w bloku "wazny link" (28px, bez zawijania) ucinany przy 320px */
@media (max-width:575.98px) {
	.blok--wazny-link .title,
	.blok--wazny-link .title strong,
	.blok--wazny-link .title a {
		font-size: 20px;
		line-height: 1.3;
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

@media (max-width:767.98px) {

	/* #6 epi-centrum slajd "Doswiadczaj poprzez eksperymentowanie".
	   Wlasciwa przyczyna ucinania: blok .experience_sec ma margin-top:-50px (celowe zachodzenie
	   pod skosny fioletowy pas .news z projektu). Na mobile (kolumny stackowane, tekst pierwszy)
	   naglowek siedzi na samej gorze bloku, wiec skos pasa (najglebszy w lewym dolnym rogu, clip
	   100%) przykrywa jego pierwsza linie o ~50px = wielkosc zachodzenia.
	   UWAGA: wczesniejszy selektor .experience_section byl bledny (realna klasa to .experience_sec),
	   przez co poprzedni fix byl no-opem.
	   Rozwiazanie (zgodne z zyczeniem: ZOSTAWIAMY zachodzenie): margin-top:-50px zostaje, a naglowek
	   przesuwamy w dol paddingiem na bloku (~50px zachodzenia + skos + zapas), zeby ZAWSZE wychodzil
	   spod pasa. Zweryfikowane na prod: clearance +14px na 320/360/412px.
	   Font 24px zostaje, by dlugie "eksperymentowanie!" miescilo sie w waskim kontenerze przy 320px. */
	.informacje-obrazek-ozdobny-block.experience_sec {
		padding-top: 64px !important;
	}

	.informacje-obrazek-ozdobny-block.experience_sec .experience_left h2 {
		font-size: 24px;
		line-height: 1.25;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* #7/#8/#9 centroom koszyk i zamowienie: motyw wylacza responsywne zwijanie shop_table
	   (table-layout:fixed, 992px) - opisy i kwota do zaplaty ucinane. Wymuszamy stack. */
	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tfoot,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		text-align: left !important;
		overflow-wrap: break-word;
	}

	.woocommerce table.shop_table {
		table-layout: auto !important;
	}

	.woocommerce table.shop_table thead {
		display: none !important;
	}
}

/* Wariant 4 baneru epi-centrum (decyzja klienta BZ-42): cale zdjecie 16:9, wysokosc auto, bez
   przycinania. Zakres mobile + tablet (<=1199px), desktop bez zmian.
   Reguly SA TU (a nie w osobnym mu-pluginie nfinity-bz42-banner-variant4), bo ten arkusz jest
   wykluczony z RUCSS i utrzymywany jako zewnetrzny link - dziala od razu, bez czekania na
   asynchroniczna regeneracje used-css (osobny nowy arkusz WP Rocket wycina do czasu regeneracji).
   Zawezone do motywu epi (body.wp-theme-epi-centrum), zeby nie ruszyc banerow centroom/bpnt. */
@media (max-width: 1199.98px) {
	.wp-theme-epi-centrum .banner {
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
	}

	.wp-theme-epi-centrum .banner .carousel,
	.wp-theme-epi-centrum .banner .carousel-inner,
	.wp-theme-epi-centrum .banner .carousel-item {
		height: auto !important;
	}

	.wp-theme-epi-centrum .banner .banner_img {
		height: auto !important;
		width: 100% !important;
		object-fit: fill !important;
		display: block;
	}
}

/* Baner centroom (BZ-42, poprawka po feedbacku klienta 2026-08-05). Wariant 4 (cale zdjecie)
   + elementy slajdera responsywne jak na banerze BPNT. Wczesniejsza wersja (aspect 2.2 + nakladka
   captionu) zbila baner do ~150px, a napis/przycisk/strzalki zostaly w rozmiarach desktopowych ->
   napis olbrzymi i wychodzil poza baner (zgloszenie klienta).
   TERAZ na MOBILE (<=767px): obraz na gorze (cale zdjecie, contain, rozmyte wypelnienie z --bimg),
   a NAPIS + PRZYCISK POD obrazem i przeskalowane, strzalki/kropki mniejsze. Karuzela auto-przewija,
   wiec stala wysokosc item (bez skoku). Slajdy maja rozne proporcje -> contain + blur-fill.
   TABLET/DESKTOP (>=768px): zostaja na oryginalnym ukladzie motywu (tam byl zaakceptowany i klient
   nie zglaszal; restrukturyzacja odslaniala dekoracje motywu). --bimg ustawia JS wtyczki
   nfinity-bz42-banner-variant4. Reguly TU, bo bz42 jest wykluczony z RUCSS. Zawezone do centroom. */
@media (max-width: 767.98px) {
	.wp-theme-centroom .banner {
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		overflow: hidden !important;
	}

	.wp-theme-centroom .banner .carousel,
	.wp-theme-centroom .banner .carousel-inner {
		height: auto !important;
	}

	.wp-theme-centroom .banner .carousel-item {
		position: relative !important;
		height: 340px !important;
	}

	/* obszar obrazu: gora 165px, cale zdjecie, rozmyte wypelnienie letterboxa */
	.wp-theme-centroom .banner .carousel-item::before {
		content: "" !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		height: 165px !important;
		background: var(--bimg) center / cover no-repeat !important;
		filter: blur(22px) brightness(0.55) !important;
		transform: scale(1.15) !important;
		z-index: 0 !important;
	}

	.wp-theme-centroom .banner .banner_img {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		z-index: 1 !important;
		width: 100% !important;
		height: 165px !important;
		object-fit: contain !important;
		object-position: center !important;
	}

	/* napis + przycisk POD obrazem, przeskalowane */
	.wp-theme-centroom .banner .carousel-caption {
		position: absolute !important;
		top: 178px !important;
		bottom: auto !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 2 !important;
		padding: 0 16px !important;
		text-align: center !important;
	}

	.wp-theme-centroom .banner .carousel-caption h2 {
		font-size: 21px !important;
		line-height: 1.25 !important;
		margin: 0 0 12px !important;
	}

	.wp-theme-centroom .banner .carousel-caption a {
		font-size: 14px !important;
		padding: 10px 18px !important;
	}

	/* Strzalki i kropki: WSPOLNY RZAD POD grafika (zgloszenie klienta 2026-08-06: strzalki
	   byly NA grafice i ucinane z prawej). Kropki po lewej, strzalki po prawej z odstepem
	   od krawedzi. Ten sam anchor (height 40 + bottom 12) daje idealne wyrownanie w rzedzie. */
	.wp-theme-centroom .banner .carousel-control-prev,
	.wp-theme-centroom .banner .carousel-control-next {
		top: auto !important;
		bottom: 12px !important;
		left: auto !important;
		width: 40px !important;
		height: 40px !important;
		margin: 0 !important;
	}

	.wp-theme-centroom .banner .carousel-control-prev {
		right: 58px !important;
	}

	.wp-theme-centroom .banner .carousel-control-next {
		right: 10px !important;
	}

	.wp-theme-centroom .banner .carousel-control-prev-icon,
	.wp-theme-centroom .banner .carousel-control-next-icon {
		width: 40px !important;
		height: 40px !important;
		background-size: 40px 40px !important;
	}

	.wp-theme-centroom .banner .carousel-indicators {
		top: auto !important;
		bottom: 12px !important;
		height: 40px !important;
		margin: 0 0 0 16px !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: flex-start !important;
		left: 0 !important;
		right: 110px !important;
	}
}

/* Baner PODSTRON epi-centrum (.page_banner) - zgloszenie klienta 2026-08-13: "w widoku mobilnym
   pod zdjeciem pojawia sie rozowy/czerwony skosny pasek", oczekiwanie: jak na stronie glownej
   i na desktopie, czyli zdjecie przyciete pod skosem, bez paska pod spodem.
   Przyczyna (NIE regresja naszych zmian - podstrony uzywaja .page_banner, nie .banner):
   motyw w @media (max-width:767px) dodaje .page_banner { padding-bottom: 70px }, a poniewaz
   baner ma rozowy gradient w tle i clip-path ze skosem, ten padding renderuje sie jako pasek
   tla pod zdjeciem. Fix: zerujemy padding, wtedy baner konczy sie na dole zdjecia, a skos
   przycina samo zdjecie. Zweryfikowane na /oferta/zajecia-laboratoryjne/ i /kontakt/. */
@media (max-width: 767.98px) {
	.wp-theme-epi-centrum .page_banner {
		padding-bottom: 0 !important;
	}
}

/* Strzalka rozwijania w menu epi-centrum (MaxMegaMenu + custom.css motywu) - zgloszenie
   klienta 2026-08-06 "strzalka przy Oferta jest ucieta".
   Przyczyna: pudelko ::after ma 14x9 px i obrazek strzalki tez 14x9 px, ale motyw ustawia
   background-position z przesunieciem 6px w dol - w 9-pikselowym pudelku widac tylko gorne
   ~3 px obrazka, reszta jest przycieta (tlo nie wychodzi poza swoje pudelko).
   Fix: wysrodkowanie tla w pionie. Rozmiary i odstepy bez zmian. */
.wp-theme-epi-centrum #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after,
.wp-theme-epi-centrum #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {
	background-position: 100% center !important;
}