/* ==========================================================================
   De kaarten Packaging en Processing op de homepage.

   Het thema zet hier een raster neer: foto links, tekstpaneel rechts. Daardoor
   werd de foto een strookje naast de tekst, stonden er drie koppen boven
   elkaar (het label op de foto, de kop in het paneel en de knoptekst) en zag
   de ene kaart er donker uit en de andere licht.

   Hier wordt de foto de kaart. De titel en een korte regel staan eroverheen,
   het hele verhaal staat al op /verpakken/ en /verwerken/ zelf. Dezelfde taal
   als de branche- en projectkaarten.

   Alles hangt aan body.home, zodat hetzelfde blok op de capabilities-pagina
   blijft zoals het is.
   ========================================================================== */

body.home section.blocks .block {
	position: relative;
	display: block;
	height: 100%;
	padding: 0;
	background: transparent;
	border-radius: 30px;
	overflow: hidden;
}

body.home section.blocks .block.block--secondary {
	background: transparent;
	color: #ffffff;
}

body.home section.blocks .block .block-image {
	height: auto;
	padding-bottom: 0;
	aspect-ratio: 4 / 3;
	border-radius: 30px;
}

/* Bij een staande foto zou een gecentreerde uitsnede de machine er bovenaf
   snijden. Iets hoger uitsnijden houdt het onderwerp in beeld; bij een liggende
   foto verandert dit niets. */
body.home section.blocks .block .block-image img {
	object-position: center 28%;
}

/* Een verloop over de onderste helft, zodat de witte tekst op elke foto
   leesbaar blijft — ook op een lichte. */
body.home section.blocks .block .block-image:before {
	background: linear-gradient(180deg, rgba(0, 57, 77, 0) 34%, rgba(0, 57, 77, 0.55) 64%, rgba(0, 22, 30, 0.88) 100%);
}

body.home section.blocks .block .block-image .block-image__title {
	left: var(--smallmedium, 24px);
	right: var(--smallmedium, 24px);
	bottom: var(--smallmedium, 24px);
	font-size: clamp(24px, 2.4vw, 34px);
}

/* De ondersteunende regel staat bóven de titel. Zo mag hij uitlopen naar twee
   regels zonder tegen de titel aan te lopen, op elke schermbreedte. */
body.home section.blocks .block .block-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 78px;
	z-index: 2;
	height: auto;
	padding: 0 var(--smallmedium, 24px);
	color: #ffffff;
	/* Klikken gaat door naar de link eronder, zodat de hele kaart klikbaar is. */
	pointer-events: none;
}

body.home section.blocks .block .block-content h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 12px rgba(0, 22, 30, 0.45);
}

/* Het lange verhaal hoort op de pagina zelf, niet op de kaart. */
body.home section.blocks .block .block-content p {
	display: none;
}

@media (max-width: 767px) {
	body.home section.blocks .block .block-image {
		aspect-ratio: 3 / 2;
	}

	body.home section.blocks .block .block-content {
		bottom: 72px;
	}
}