/* ============================================================
   RWD - tablet i telefon.
   Baza jest desktop-first (content.css / nf.css / chrome.css).
   Ten plik laduje sie OSTATNI i tylko NADPISUJE uklad ponizej
   progow. Progi: 980 (naglowek/stopka Divi), 900 (tresc), 600 (telefon).
   ============================================================ */

/* ===================== NAGLOWEK i STOPKA (nf.css, <=980) ===================== */
@media (max-width: 980px) {
	/* pasek glowny: logo / menu / telefon jeden pod drugim */
	.nf-barrow {
		grid-template-columns: 1fr !important;
		justify-items: center;
		width: 90% !important;
		gap: 2px;
	}
	.nf-barrow > .et_pb_column { justify-content: center !important; }
	.nf-logo { padding: 16px 0 !important; align-self: center; }

	/* desktopowa lista znika, pokazuje sie hamburger Divi */
	.nf-menu .et_pb_menu__menu { display: none !important; }
	.nf-menu .et_mobile_nav_menu { display: block !important; }
	.nf-menu .et_pb_menu__wrap { justify-content: center !important; width: 100%; }
	.nf-menu .mobile_menu_bar::before { color: var(--kolor-tekst) !important; }

	/* rozwijane menu mobilne Divi - kolory marki */
	.nf-menu .et_mobile_menu {
		background: var(--kolor-tlo) !important;
		border-top-color: var(--kolor-akcent) !important;
		box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
	}
	.nf-menu .et_mobile_menu li a {
		color: var(--kolor-tekst) !important;
		font-family: var(--font-naglowek) !important;
		font-weight: 600 !important;
	}
	.nf-menu .et_mobile_menu li a:hover { color: var(--kolor-akcent) !important; }

	/* przycisk Zadzwon wysrodkowany, bez rozciagania na cala wysokosc */
	.nf-call { justify-content: center !important; align-items: center !important; padding-bottom: 16px !important; }

	/* topbar: wysrodkowany, zawijany */
	.nf-toprow { width: 90%; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }

	/* STOPKA: kolumny i newsletter w pionie */
	.nf-colsrow { grid-template-columns: 1fr !important; gap: 30px; }
	.nf-newsrow { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ===================== TRESC - stackowanie gridow (<=900) ===================== */
@media (max-width: 900px) {
	/* HERO - najwazniejsze: dwie kolumny -> jedna (bez tego tekst zwija sie w pionowy slupek) */
	.content__hero-in {
		grid-template-columns: 1fr !important;
		min-height: 0 !important;
		gap: 0;
	}
	.content__hero-tekst { padding: 54px 0 40px !important; max-width: none; }
	.content__hero-tytul { font-size: 2.1rem; }
	.content__hero-opis { max-width: none; }
	.content__hero-foto { justify-self: center; align-self: start; max-width: 100%; }
	.content__hero-foto img { max-width: 100%; height: auto; }

	/* pojedyncza oferta: galeria + bok -> pion */
	.content__oferta-uklad { grid-template-columns: 1fr !important; }
	.content__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

	/* kontakt: kafle i formularz -> pion */
	.content__kkafle .content__krzad { grid-template-columns: 1fr !important; }
	.content__kform-uklad { grid-template-columns: 1fr !important; }
	.content__kform { grid-template-columns: 1fr !important; }

	/* opinie: roletka z 3 kart na ekran -> 2 karty */
	.opinie-google__tasma { grid-auto-columns: calc((100% - 22px) / 2) !important; }

	/* baner zespolu: karta spod absolute -> normalny flow pod zdjeciem */
	.baner-zespol__karta {
		position: static !important;
		transform: none !important;
		width: 100% !important;
		padding: 26px 22px 30px !important;
	}
	.baner-zespol__foto { aspect-ratio: 16 / 10 !important; }
}

/* ===================== TELEFON (<=600) ===================== */
@media (max-width: 600px) {
	.content__hero-in { padding: 0 18px !important; }
	.content__hero-tytul { font-size: 1.8rem; }
	.content__tytul { font-size: 1.9rem; }
	.content__galeria { grid-template-columns: 1fr !important; }
	.instagram__zdjecia { grid-template-columns: 1fr 1fr !important; }

	/* opinie: 1 karta na ekran */
	.opinie-google__tasma { grid-auto-columns: 100% !important; }
}