/* Drobne uzupełnienia szablonu Slate dla strony gabinetu. */

/* Mapa dojazdu na stronie kontaktowej. */
.map-wrapper {
	position: relative;
	padding-bottom: 50%;
	height: 0;
	margin: 0 0 2em 0;
	overflow: hidden;
	border: solid 1px #e6e6e6;
}

	.map-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

@media screen and (max-width: 736px) {
	.map-wrapper {
		padding-bottom: 75%;
	}
}

/* Tytuły kart artykułów są linkami – zachowują kolor nagłówka. */
.posts .post h3 a,
.features .content h3 a {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}

/* Etykieta zgody pod formularzem – mniejszy, zwykły tekst zamiast wersalików. */
#contact label[for="consent"] {
	text-transform: none;
	letter-spacing: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 0.85em;
	line-height: 1.6;
}

/* Gdy pełne menu ledwo się mieści (981–1200 px) albo ekran telefonu jest bardzo wąski,
   chowamy podpis „psycholog i logopeda” obok imienia, żeby nie nachodził na nawigację. */
@media screen and (min-width: 981px) and (max-width: 1200px) {
	#header h1 span {
		display: none;
	}
}

@media screen and (max-width: 359px) {
	#header h1 span {
		display: none;
	}
}

/* Paginacja listy artykułów – na środku. */
ul.pagination {
	text-align: center;
}

/* Niepełny ostatni wiersz kart wyrównany do lewej, zamiast rozpychania kart do krawędzi.
   Odstęp między kolumnami odpowiada szerokościom kart z main.css. */
.posts {
	-moz-justify-content: flex-start;
	-webkit-justify-content: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
	column-gap: 1.875em;
}

@media screen and (max-width: 1280px) {
	.posts {
		column-gap: 2em;
	}
}

/* Oferta ma więcej niż 3 usługi – układamy je po 3 w wierszu (szablon zakłada jeden wiersz).
   Odstępy i linie podziału odpowiadają szerokościom kolumn z main.css. */
@media screen and (min-width: 981px) {
	.features.wrap {
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: flex-start;
		-webkit-justify-content: flex-start;
		-ms-justify-content: flex-start;
		justify-content: flex-start;
		column-gap: 7.5em;
		row-gap: 4em;
	}

		.features.wrap > section {
			position: relative;
		}

			.features.wrap > section:before {
				left: 0;
			}

			.features.wrap > section:nth-child(3n+1):before {
				display: none;
			}
}

@media screen and (min-width: 981px) and (max-width: 1280px) {
	.features.wrap {
		column-gap: 3.75em;
	}

		.features.wrap > section:before {
			margin-left: -1.875em;
		}
}

/* Pułapka na boty w formularzu Netlify – pole niewidoczne dla ludzi. */
.hidden-field {
	display: none;
}

/* Ikony profili (Instagram, ZnanyLekarz) w stopce – bez podkreślenia linku. */
#footer .menu a.icon {
	border-bottom: 0;
}

/* Cytat przewodni na stronie głównej – ciemny pas (style1) z dużym, wyśrodkowanym cytatem. */
.cytat {
	padding: 4em 0 4em 0;
	text-align: center;
}

	.cytat figure {
		margin: 0 auto;
		max-width: 46em;
	}

	.cytat blockquote {
		border-left: 0;
		margin: 0;
		padding: 0;
	}

		.cytat blockquote p {
			color: #fff;
			font-size: 1.6em;
			line-height: 1.5;
			margin: 0;
		}

	.cytat figcaption {
		color: rgba(255, 255, 255, 0.65);
		font-size: 0.9em;
		letter-spacing: 0.1em;
		margin-top: 1.5em;
		text-transform: uppercase;
	}

@media screen and (max-width: 736px) {
	.cytat {
		padding: 3em 0 3em 0;
	}

		.cytat blockquote p {
			font-size: 1.25em;
		}
}

/* Mniejszy odstęp między nagłówkiem strony (tytuł + podtytuł) a treścią. Szablon: 6em / 4em / 2.5em. */
#main > .inner > header.major:first-child {
	margin-bottom: 3.5em;
}

@media screen and (max-width: 1280px) {
	#main > .inner > header.major:first-child {
		margin-bottom: 2.5em;
	}
}

@media screen and (max-width: 736px) {
	#main > .inner > header.major:first-child {
		margin-bottom: 2em;
	}
}

/* Mapa pod tekstem ze zdjęciem (strona Kontakt) – trochę oddechu. */
.spotlight + .map-wrapper {
	margin-top: 2em;
}

/* Tekst ze zdjęciem obok na zwykłych stronach (np. Kontakt): pół na pół zamiast 1/3 + 2/3,
   żeby zdjęcie nie dominowało nad tekstem. */
@media screen and (min-width: 981px) {
	.spotlight.pol-na-pol {
		-moz-align-items: flex-start;
		-webkit-align-items: flex-start;
		-ms-align-items: flex-start;
		align-items: flex-start;
	}

		.spotlight.pol-na-pol .content,
		.spotlight.pol-na-pol .image {
			width: calc(50% - 1.5em);
		}
}