@media (max-width: 1770px) {
	.customDropdownWrapper {
		width: 470px;
	}

	.directionsPanel {
		width: 100%;
		margin-left: 0;
		margin-top: 0;
	}

	.googleMapsWrapper {
		width: 100%;
	}
}
@media (max-width: 1700px) {
	.customDropdownWrapper {
		width: 430px;
	}
}
@media (max-width: 1660px) {
	.articleSearch .articleCategories {
		padding-bottom: 15px;
		width: 100%;
	}
	.customDropdownWrapper {
		margin-left: 0;
	}
}
@media (max-width: 1200px) {
	.article-layout-1 {
		grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr 0;
	}

	.blockContainer .blockCenter {
		width: 90%;
	}

	.article-layout-4 {
		grid-template-columns: 80px 1fr 80px 0 1fr 80px 0 1fr 80px;
	}

	.article-layout-4 .article-spacer {
		margin: 0 39px;
	}
}
@media (max-width: 1024px) {

	.mobileMenu,
	.mobileMenuToggle {
		display: block;
	}

	.mobileMenuToggle {
		margin-top: 15px;
	}

	nav ul {
		display: none;
	}

	header p {
		right: 50px;
		bottom: 50px;
		font-size: 3em;
	}

	.blockContainer div.blockCenter {
		width: 100%;
	}

	.blockContainer > div .leafs {
		display: none;
	}

	.article-layout-1 {
		grid-template-columns: 1fr 32px 1fr 32px 1fr 0;
	}

	.article-layout-2 {
		grid-template-columns: repeat(3, 1fr);
	}

	main {
		padding-bottom: 50px;
	}

	.blockContainer {
		padding-top: 50px;
		padding-bottom: 45px;
	}

	footer .delft {
		margin-top: 20px;
	}

	.article-layout-4 {
		grid-template-columns: 60px 1fr 60px 0 1fr 60px 0 1fr 60px;
	}

	.article-layout-4 .article-spacer {
		margin: 0 29px;
	}
	.contentDiv {
		padding-top: 120px;
	}

	.blockContainer.blockMobile {
		display: block;
	}
	.card {
		grid-template-columns: repeat(1, 1fr);
	}
	.card .desktopImage {
		display: none;
	}
	.card .mobileImage {
		display: block;
	}
	.article-detail .googleMapsWrapper {
		padding-bottom: 120%;
	}
	.articleSearch.layout7 .articleCategories {
		width: 100%;
	}
}

@media (max-width: 860px) {
	header p {
		font-size: 2em;
	}

	.article-layout-1 {
		grid-template-columns: 1fr 32px 1fr 0;
	}

	.article-layout-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.article-layout-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.blockContainer {
		padding-top: 40px;
		padding-bottom: 35px;
	}

	.article-layout-4 {
		grid-template-columns: 60px 1fr 60px 0 1fr 60px;
	}

	.article-layout-4 .article-spacer {
		margin: 0 29px;
	}
	.article-layout-7 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 840px) {
	.articleSearch .articleCategories {
		padding-bottom: 15px;
		width: 100%;
	}

	.customDropdownWrapper {
		margin-left: 0;
		margin-bottom: 10px;
	}

	.customDropdownWrapper,
	.articleSearch .searchWrapper {
		width: 100%;
	}
	/* De bibliotheek-filter zet de vak-dropdown op desktop op een vaste
	   width:430px (.articleSearch.bibliotheek-filter .customDropdownWrapper,
	   specificiteit 0-3-0). Die overschrijft de mobiele width:100% hierboven
	   (0-1-0), waardoor de dropdown 430px breed bleef en de hele encyclopedie-
	   uitvoer — een grid-item met min-width:auto — buiten het scherm duwde.
	   Daarom hier met gelijke specificiteit terugzetten naar volledige breedte. */
	.articleSearch.bibliotheek-filter .customDropdownWrapper {
		width: 100%;
	}
	.grandGoogleMapsWrapper {
		display: block !important;
	}
	.directionsPanel {
		margin-top: 20px;
	}
	.article-layout6,
	.article-layout8 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.customDropdownWrapper.travelModeWrapper,
	.directionsForm input[type="text"] {
		width: 100%;
	}
	.directionsForm input[type="text"] {
		margin-bottom: 10px;
	}
	.taxonomy .row {
		border-bottom: 1px dotted #033946;
		/*margin-bottom: 13px;*/
	}
	.taxonomy {
		border-bottom: 0;
	}

	.googleMapsWrapper.watZieIk {
		/*padding-bottom: 150%;*/
	}
}
@media (max-width: 640px) {
	.mainDiv {
		padding: 0 10px;
	}

	nav {
		padding: 0 10px;
		height: 40px;
	}

	.contentDiv {
		padding-top: 40px;
	}

	nav img.logo {
		left: 20px;
		top: 19px;
		width: 42px;
	}

	.mobileMenuToggle {
		margin-top: 5px;
	}

	.blockContainer.blockColor-2,
	.blockContainer.blockColor-3 {
		padding-left: 10px;
		padding-right: 10px;
	}

	header {
		padding-bottom: 110%;
		background-position: center;
	}

	header p {
		display: none;
	}

	header img.logo {
		top: 50px;
		width: 160px;
	}

	.article-layout-1 {
		grid-template-columns: repeat(1, 1fr);
	}

	.article-layout-2 {
		grid-template-columns: repeat(1, 1fr);
	}

	.article-layout-3 {
		grid-template-columns: repeat(1, 1fr);
	}

	.article-layout-4 {
		grid-template-columns: 60px 1fr 60px;
	}

	.article-layout-4 .article-spacer {
		margin: 0 29px;
	}

	.blockContainer {
		padding-top: 30px;
		padding-bottom: 25px;
	}
	.article-layout6,
	.article-layout8 {
		grid-template-columns: repeat(1, 1fr);
	}

	.blockContainer .blockitem {
		margin: 0 0 20px 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	.taxonomy .details {
		grid-template-columns: repeat(1, 1fr);
		font-size: 1em;
	}
	.taxonomy .details .row:nth-child(2n) {
		border-left: none;
		padding-left: 0;
	}
	.taxonomy .row {
		margin-bottom: 0;
	}
	.taxonomy > .row:nth-child(1) {
		border-bottom: 0;
	}
	.taxonomy .row:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 500px) {
	.article-layout-7 {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media (max-width: 460px) {
	.customDropdownWrapper > div,
	.searchWrapper > div,
	.customDropdownWrapper > label,
	.searchWrapper > label,
	.articleSearch .searchWrapper .searchText {
		width: 100%;
	}

	/* Op mobiel staat het label "ZOEK" boven het zoekveld (eigen regel), waardoor
	   de searchWrapper hoger wordt dan alleen het invoerveld. Het magnifier-icoon
	   (::after, met bottom:0/top:0 op desktop) viel daardoor met een vaste 22px
	   onderin half buiten het veld. Verankeren aan de onderkant en op de hoogte
	   van het zoekveld (33px) zetten, met het glyph gecentreerd — net als de
	   knop van de "Toon alle in vak"-dropdown erboven. */
	.articleSearch .searchWrapper::after {
		top: auto;
		bottom: 0;
		height: 33px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 0;
		padding-bottom: 0;
	}
	.customDropdownWrapper .items {
		top: 66px;
		width: 100%;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Heempark mobiele correcties (2026-06-08)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

	/* Werkend uitschuif-menu rechts (zie public/js/app/heempark-mobile.js).
	   nav is position:fixed z-index:10 → paneel eronder (z-index 9), top-padding
	   houdt de inhoud onder de navbalk; de hamburger/kruis blijft klikbaar. */
	.mobileMenu {
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		width: 260px;
		max-width: 82%;
		box-sizing: border-box;
		padding: 80px 20px 24px;
		background-color: #fff;
		border-left: 2px solid #033946;
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 9;
		overflow-y: auto;
	}
	body.mobileMenuOpen .mobileMenu {
		transform: translateX(0);
	}
	/* Logo boven in het menu — gecentreerd, halve menubreedte (net als Kohana). */
	.mobileMenu .logo {
		width: 100%;
		text-align: center;
		margin-bottom: 24px;
	}
	.mobileMenu .logo img {
		width: 50%;
		height: auto;
		max-width: 100%;
	}
	.mobileMenu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.mobileMenu li {
		padding: 10px 0;
		border-bottom: 1px solid rgba(3, 57, 70, 0.1);
	}
	.mobileMenu a {
		color: #033946;
		text-decoration: none;
		font-size: 1.1em;
	}
	.mobileMenu a:hover,
	.mobileMenu .active > a {
		color: #008755;
	}

	/* Hamburger: groene "menu"-tekst links, daarnaast het icoon. Het icoon is
	   met pure CSS getekend (3 streepjes) i.p.v. een fontello-glyph — die glyph
	   (icon-menu / \f0c9) ontbreekt in het lettertype en bleef onzichtbaar. */
	.mobileMenuToggle {
		/* Absoluut rechts t.o.v. de fixed, full-width navbalk → blijft altijd in
		   beeld (float:right hing aan de rechterrand van de soms bredere nav-inhoud,
		   waardoor de hamburger buiten het scherm viel). */
		position: absolute;
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
		float: none;
		margin: 0;
		display: flex;
		align-items: center;
		gap: 8px;
		width: max-content;   /* anders krimpt de abs.-flexbox naar alleen het label en valt het icoon eruit */
		line-height: 1;
		cursor: pointer;
	}
	.mobileMenuLabel {
		color: #008755;
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 1px;
		text-transform: uppercase;
		line-height: 1;
	}
	.mobileMenuIcon {
		position: relative;
		display: inline-block;
		flex: 0 0 26px;           /* niet krimpen als (lege) flex-item → breedte blijft 26px */
		width: 26px;
		height: 4px;              /* dikte van de strepen */
		margin: 8px 0;            /* ruimte voor de boven/onder-streep */
		background: #39aa61;      /* middelste streep — groen, net als het origineel */
	}
	.mobileMenuIcon::before,
	.mobileMenuIcon::after {
		content: '';
		position: absolute;
		left: 0;
		width: 26px;
		height: 4px;
		background: #39aa61;
		transition: transform 0.25s ease, top 0.25s ease;
	}
	.mobileMenuIcon::before { top: -8px; }
	.mobileMenuIcon::after  { top: 8px; }

	/* Geopend: middelste streep weg, boven/onder draaien tot een kruis. */
	body.mobileMenuOpen .mobileMenuIcon {
		background: transparent;
	}
	body.mobileMenuOpen .mobileMenuIcon::before {
		top: 0;
		transform: rotate(45deg);
	}
	body.mobileMenuOpen .mobileMenuIcon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* Gekleurde content-blokken: 10px i.p.v. 20px zijmarge op mobiel. */
	.blockContainer.blockColor-2,
	.blockContainer.blockColor-3 {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (max-width: 640px) {

	/* Titels (h-tags) erfden een vaste, te krappe regelhoogte (≈22px uit body
	   line-height:1.4em); bij het afbreken op mobiel plakten de regels op elkaar.
	   Unitless line-height schaalt weer mee met de eigen tekstgrootte. */
	h1, h2, h3, h4, h5, h6,
	.blockItemTitle, .blockTitle, .article-label,
	h1.pageTitle, .pageTitle h1 {
		line-height: 1.25;
	}

	/* "Intro"-tekst kleiner op mobiel (1.25em → 1.1em) met passende regelhoogte. */
	.introText {
		font-size: 1.1em;
		line-height: 1.4;
	}

	/* Reviews: 10px ruimte tussen de letter-cirkel en de naam/inhoud. */
	.review .col-xs-21 {
		padding-left: 10px;
	}
}