/**
 * Kalkulator jest szerszy niż kolumna tekstu, w której siedzi.
 *
 * Motyw daje podstronom `max-width:820px`, a konfigurator potrzebuje dwóch kolumn
 * (karty + panel wyniku) i poniżej 1080 px zwija się do jednej. W kolumnie tekstowej
 * wyglądał przez to jak wąski pasek.
 *
 * Wyjście z kontenera przez left:50% i ujemny margines — działa niezależnie od tego,
 * jak szeroka jest kolumna motywu, więc wtyczka nie musi nic o nim wiedzieć.
 */
ph-kalkulator {
	display: block;
	position: relative;
	left: 50%;
	width: min(1240px, calc(100vw - 48px));
	margin-left: calc(min(1240px, 100vw - 48px) / -2);
	margin-top: 34px;
	margin-bottom: 34px;
}

/* Poniżej progu dwóch kolumn komponent i tak jest jednokolumnowy —
   wtedy lepiej, żeby trzymał się szerokości tekstu niż rozpychał stronę. */
@media (max-width: 900px) {
	ph-kalkulator {
		left: auto;
		width: auto;
		margin-left: 0;
	}
}