/* Joh Clothing v2: groep Sectoren. Alleen wat 10-basis.css en 20-componenten.css niet dekken.
 * joh-sector-cases (vc_row class="joh-sector-cases" id="cases"): kop links (4/12), raster met casebeelden rechts (8/12).
 * Elk case-item = image_with_animation (el_class="joh-rond", lightbox) + tekstblok <h4>titel</h4><p class="joh-klein">bijschrift</p>.
 * (joh-sector-tekst staat nu in 20-componenten.css, samen met joh-tekstblok.)
 */

/* Casebeelden: vaste verhouding 4:5, ronde hoeken ook op de Salient-wrappers, zachte zoom bij hover */
body .main-content .joh-sector-cases .img-with-aniamtion-wrap,
body .main-content .joh-sector-cases .img-with-aniamtion-wrap .inner,
body .main-content .joh-sector-cases .img-with-aniamtion-wrap .hover-wrap,
body .main-content .joh-sector-cases .img-with-aniamtion-wrap .hover-wrap-inner {
	border-radius: var(--joh-radius);
	overflow: hidden;
}
body .main-content .joh-sector-cases .img-with-aniamtion-wrap img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: 0;
	border-radius: var(--joh-radius);
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
body .main-content .joh-sector-cases .img-with-aniamtion-wrap a:hover img { transform: scale(1.04); }

/* Bijschrift onder het beeld */
body .main-content .joh-sector-cases .img-with-aniamtion-wrap + .wpb_text_column { margin-top: 18px; }
body .main-content .joh-sector-cases .joh-raster h4 { margin-bottom: 4px; }
body .main-content .joh-sector-cases .joh-raster .joh-klein { margin: 0; padding: 0; }

/* Tablet: 3 cases blijven naast elkaar (geen derde beeld over de volle breedte) */
@media only screen and (max-width: 999px) and (min-width: 691px) {
	body .main-content .joh-sector-cases .joh-raster-3 { --joh-kol: 3; }
	body .main-content .joh-sector-cases .joh-raster > .row_col_wrap_12_inner > .wpb_column:last-child:nth-child(odd) { grid-column: auto; }
}

/* Gsm: één kolom, vierkant beeld zodat de pagina niet te lang wordt */
@media only screen and (max-width: 690px) {
	body .main-content .joh-sector-cases .img-with-aniamtion-wrap img { aspect-ratio: 1 / 1; }
}

/* Cases op gsm: meer lucht tussen bijschrift en het volgende beeld */
@media only screen and (max-width: 690px) {
	body .main-content .joh-sector-cases .joh-raster > .row_col_wrap_12_inner { row-gap: 40px; }
}