/* ==========================================================================
   Responsive correcties - wordt als laatste stylesheet geladen.
   ========================================================================== */

/* ---- Paginatitel (H1 in de hero) -----------------------------------------
   Was op mobiel/tablet 60px met 38px regelhoogte: regels overlapten en lange
   woorden liepen buiten beeld. Schaalt nu mee met de schermbreedte:
   ~26px op telefoon, ~40px op tablet, max 60px op desktop.
   (Homepage en cases houden hun eigen !important-groottes op mobiel.) */
body .theme-hero .inner h1,
body .theme-hero .inner > h1 {
	font-size: clamp(26px, 3.6vw + 12px, 60px);
	line-height: 1.15;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* ---- Blogs en kennisbank: witruimte aan de zijkant -----------------------
   De .row trok met -15px de padding van #content weg en de kolommen hebben
   daar geen eigen padding, waardoor tekst en foto tegen de schermrand stonden. */
@media (max-width: 1199px) {
	#content.big-wrapper > .row:not(.wrapper) {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---- Breadcrumb in de hero op tablet --------------------------------------
   Staat absoluut op 119px van de onderkant van de hero en botste met titels
   van twee regels. Extra ruimte onder de titel houdt ze uit elkaar. */
@media (min-width: 768px) and (max-width: 1199px) {
	.theme-hero .inner {
		padding-bottom: 56px;
	}
}

/* ---- Overzichtspagina's (blogs, cases): filter ----------------------------
   De filter stond op mobiel/tablet tegen de titel en de schermrand aan en
   bedekte op tablet de breadcrumb. */
@media (max-width: 1199px) {
	.blog .portfolio-filter,
	.post-type-archive .portfolio-filter {
		margin: 28px 0 0;
		padding-right: 0;
	}
	.post-type-archive-case .cases-archive__subtitle {
		margin-top: 28px;
	}
}

/* ---- Overzichten: kaartafbeeldingen even hoog -----------------------------
   Afbeeldingen kregen de hoogte van hun eigen beeldverhouding, waardoor de
   kaarten in een rij verschillend hoog waren. Nu overal 16:9, netjes bijgesneden
   (16:9 zodat ook tekstafbeeldingen zoals de php2shell-afbeelding heel blijven). */
.archive-portfolio-content .archive-portfolio-image img {
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ---- Blog single: headerafbeelding -----------------------------------------
   Was op brede schermen 1400x500 (heel laag en breed), waardoor afbeeldingen
   bovenaan en onderaan zwaar werden bijgesneden. Nu 16:9 met een maximale
   breedte; de breadcrumb lijnt mee uit. Zachte schaduw zodat afbeeldingen met
   een witte achtergrond niet in de pagina verdwijnen. */
.single-post .post-hero-container img {
	display: block;
	width: 100%;
	max-width: 1100px;
	height: auto;
	max-height: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0 auto;
	box-shadow: 0 20px 60px rgba(27, 54, 104, .10);
}
.single-post .post-single-breadcrumbs > nav {
	max-width: 1100px;
	margin: 0 auto;
}

/* ---- Overzichten: kaarten gelijk uitlijnen ---------------------------------
   Titel altijd 2 regels hoog, samenvatting 3 regels, "Bekijk bericht" onderaan.
   Alleen opmaak: de volledige tekst blijft in de HTML staan (geen SEO-effect). */
.archive-portfolio-entry {
	display: flex;
	flex-direction: column;
}
.archive-portfolio-entry .archive-portfolio-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.archive-portfolio-content .archive-portfolio-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: auto;
}
.archive-portfolio-content .archive-portfolio-text h4 {
	min-height: 2lh;
}
.archive-portfolio-content .archive-portfolio-text p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3lh;
}
.archive-portfolio-content .archive-portfolio-text .leading-line {
	margin-top: auto;
}