/* =========================================================================
   Powołania - RWD (media queries)
   Breakpointy: 1024px (tablet poziomo), 782px (tablet), 600px (telefon)
   ====================================================================== */

/* --- do 1024px ---------------------------------------------------------- */
@media (max-width: 1024px) {

	.content-wrapper {
		gap: 24px;
	}

	.site-main {
		flex-basis: 100%;
	}

	.widget-area {
		flex-basis: 100%;
	}

	/* Rekolekcje: kafle po dwa w rzędzie. */
	.rek-warunki {
		flex-wrap: wrap;
	}

	.rek-warunki .wp-block-column {
		flex-basis: calc(50% - var(--gap) / 2) !important;
	}
}

/* --- do 782px (menu mobilne) -------------------------------------------- */
@media (max-width: 782px) {

	body {
		font-size: 15px;
	}

	h1 { font-size: 2.5rem; }
	h2 { font-size: 2.1rem; }
	h3 { font-size: 1.8rem; }

	.site-header__inner {
		flex-wrap: nowrap;
		padding-top: 16px!important;
		padding-bottom: 16px!important;
	}

	.site-logo__mark { height: 54px; }
	.site-logo__text { height: 50px; }

	.main-navigation a {
		font-size: 1.6rem;
	}

	.footer-menu {
		columns: 2;
	}

	.footer-col--kontakt,
	.footer-col--zobacz,
	.footer-col--onas {
		flex-basis: 100%;
	}

	.menu-toggle {
		display: block;
	}

	.main-navigation .menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		flex-direction: column;
		gap: 0;
		padding: 10px 20px 20px;
		background: #fff;
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
	}

	.main-navigation.is-open .menu {
		display: flex;
	}

	.main-navigation {
		position: static;
	}

	/* Nagłówek pozostaje przyklejony; sticky tworzy kontekst
	   pozycjonowania dla rozwijanego menu. */
	.site-header.is-scrolled .site-logo__mark { height: 40px; }
	.site-header.is-scrolled .site-logo__text { height: 36px; }

	.site-header.is-scrolled .main-navigation a {
		font-size: 1.6rem;
	}

	.main-navigation .menu > li + li {
		border-top: 1px solid var(--color-border);
	}

	/* Przycisk w menu mobilnym: bez kreski oddzielającej, na całą szerokość. */
	.main-navigation .btn-spec {
		margin-top: 14px;
		border-top: 0 !important;
	}

	.main-navigation .btn-spec > a,
	.site-header.is-scrolled .main-navigation .btn-spec > a {
		padding: 12px 20px;
		font-size: 1.5rem;
		text-align: center;
	}

	.main-navigation a {
		padding: 10px 0;
	}

	.main-navigation .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
	}

	.entry--teaser {
		flex-direction: column;
	}

	.entry--teaser .entry-thumb {
		flex-basis: auto;
	}
}

/* --- do 600px ----------------------------------------------------------- */
@media (max-width: 600px) {

	:root {
		--gap: 20px;
	}

	.container {
		padding: 0 16px;
	}

	h1 { font-size: 2.2rem; }
	h2 { font-size: 1.9rem; }

	.alignleft,
	.alignright {
		float: none;
		margin: 0 auto var(--gap);
	}

	.search-form {
		flex-direction: column;
	}

	.site-logo--composed {
		gap: 10px;
	}

	.site-logo__mark { height: 42px; }
	.site-logo__text { height: 40px; }

	.footer-menu {
		columns: 1;
	}

	.wp-block-details > summary {
		padding: 14px 44px 14px 16px;
		font-size: 1.5rem;
	}

	/* Kontakt: kolumny jedna pod drugą, logo nad danymi. */
	.kontakt-kolumny {
		flex-wrap: wrap;
	}

	.kontakt-kolumny .wp-block-column {
		flex-basis: 100% !important;
	}

	.kontakt-logo img {
		max-width: 220px;
	}

	/* Kroki: ikona nad tekstem, wyśrodkowane. */
	.krok {
		flex-wrap: wrap;
		text-align: center;
	}

	.krok .wp-block-column {
		flex-basis: 100% !important;
	}

	.krok-ikona {
		width: 76px;
		height: 76px;
		margin-bottom: 12px;
		font-size: 2.1rem;
	}

	/* Rekolekcje: mniejsze hasło, nagłówek i ikony. */
	.rek-haslo {
		font-size: 1.4rem;
	}

	.rek-warunki-tytul {
		font-size: 1.6rem;
	}

	.rek-ikona {
		width: 72px;
		height: 72px;
		font-size: 2rem;
	}

	.rek-cta {
		padding: 24px 16px;
	}

	.home-box img {
		height: 38vh;
	}

	/* Zdjęcie przestaje oblewać tekst na wąskich ekranach. */
	.kim-foto {
		float: none;
		max-width: 100%;
		margin: 0 0 20px;
	}

	.wp-block-details > *:not(summary) {
		margin-left: 16px;
		margin-right: 16px;
	}

	.site-footer {
		padding: 40px 0 30px;
	}
}

/* --- druk --------------------------------------------------------------- */
@media print {

	.site-header,
	.site-footer,
	.widget-area,
	.post-navigation,
	.pagination,
	.menu-toggle {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}
}