/* Poprawki widoku na telefonie. Klasy spk-* dopisuje includes/class-spp-responsywnosc.php. */

/* elementy siatki mogą się zwężać, zamiast rozpychać stronę w bok */
.spk-siatka > * { min-width: 0; }

@media (max-width: 600px) {
	/* węższe marginesy boczne sekcji: więcej miejsca na treść */
	.spk-kontener {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* przyciski: mniejsze boki, tekst wyśrodkowany także po złamaniu linii */
	a.spk-przycisk {
		padding-left: 22px !important;
		padding-right: 22px !important;
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 480px) {
	/* wiersz z ceną w pigułce: cena pod tytułem zamiast poza ekranem */
	.spk-rzad:has(> .spk-staly) {
		flex-direction: column;
		align-items: flex-start;
	}

	/* karty „Dla kogo” w dwóch kolumnach: przycisk w jednej linii */
	.spk-kadr-karta ~ a.spk-przycisk {
		padding: 9px 14px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}
}

@media (max-width: 400px) {
	/* karty „Dla kogo” na małym telefonie: mniej wcięcia i mniejsze litery, słowa nie łamią się w połowie */
	.spk-siatka:has(> * > .spk-kadr-karta) { gap: 12px !important; }
	.gb-element:has(> .spk-kadr-karta) {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	.spk-kadr-karta {
		margin-left: -14px !important;
		margin-right: -14px !important;
	}
	.spk-kadr-karta ~ h3 { font-size: 16px !important; }
	.spk-kadr-karta ~ p { font-size: 13px !important; }
}

@media (max-width: 420px) {
	/* przyciski na małym telefonie w jednej linii */
	a.spk-przycisk {
		font-size: 14px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
		gap: 8px !important;
	}
}

@media (max-width: 380px) {
	a.spk-przycisk {
		font-size: 13.5px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}