/*
 * Mobiele correcties voor /woning/{slug}/ bovenop bricks-child/style.css.
 * Die huisstijl is geschreven voor de Tussendoor-opmaak; een paar regels kloppen
 * op de telefoon niet (meer). Alleen onder 768px, desktop blijft ongewijzigd.
 */
@media (max-width: 767px) {

	/* Vangnet: niets op de woningpagina mag de pagina breder maken dan het scherm. */
	article.woning { overflow-x: clip; }

	/* Titelblok: "left: 40%" stamt uit de oude absolute positionering en duwde
	   adres, titel en prijs buiten beeld. */
	.single-header header {
		left: 0;
		padding: 0 20px;
		box-sizing: border-box;
		max-width: 100%;
	}
	.single-header header h1 {
		font-size: 28px;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}

	/* De vier tabs onder elkaar in plaats van naast elkaar. */
	.single-tab {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 0 25px;
		box-sizing: border-box;
		margin: 60px auto 40px;
	}
	.single-tab .single-tab-subject {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 12px 16px;
		box-sizing: border-box;
	}
	.single-tab .single-tab-subject > div { flex: 0 0 auto; }
	.single-tab .single-tab-subject .brxe-icon {
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
		margin: 0;
	}
	.single-tab .single-tab-subject .brxe-icon,
	.single-tab .single-tab-subject .brxe-icon.fa-newspaper,
	.single-tab .single-tab-subject .brxe-icon.ion-md-camera,
	.single-tab .single-tab-subject .brxe-icon.ion-ios-folder-open { font-size: 22px; }
	.single-tab .single-tab-subject .brxe-icon.ion-md-information { font-size: 30px; }
	.single-tab .single-tab-subject h5 { text-align: left; margin: 0; }

	/* Tab-inhoud: binnen de schermrand en minder binnenruimte. */
	#kenmerken,
	#omschrijving,
	#media,
	#brochures {
		margin-left: 25px;
		margin-right: 25px;
		padding: 20px;
		box-sizing: border-box;
	}
	#kenmerken .kenmerk {
		padding: 20px;
		box-sizing: border-box;
	}

	/* Kenmerken: label boven de waarde in plaats van ernaast. */
	#kenmerken .kenmerk dl dt,
	#kenmerken .kenmerk dl dd {
		float: none;
		width: auto;
	}
	#kenmerken .kenmerk dl dt {
		padding: 12px 0 2px;
		border-bottom: 0;
	}
	#kenmerken .kenmerk dl dd {
		padding: 0 0 12px;
		overflow-wrap: anywhere;
	}

	/* Foto's onder het Media-tabblad: volle breedte, niet hoger dan nodig. */
	article.woning #media-content img {
		width: 100%;
		height: auto;
		max-height: 300px;
		object-fit: cover;
	}
}