/* Block: Tekst met beeld. Text-led row (heading left, text on the rail) or text beside a photo.
 * The tone tints the media area only; the text always stays on the beige base. */
.text-media {
	--tm-bg: var(--beige);
	--tm-c: var(--beige-deep);
}
.text-media.tone-web { --tm-bg: var(--web-tint); --tm-c: var(--web); }
.text-media.tone-dm { --tm-bg: var(--dm-tint); --tm-c: var(--dm); }
.text-media.tone-camp { --tm-bg: var(--camp-tint); --tm-c: var(--camp); }
.text-media.tone-culture { --tm-bg: var(--culture-tint); --tm-c: var(--culture); }

.tm-title { font-size: var(--fs-h2); max-width: 12em; }
.tm-text { display: grid; gap: 28px; justify-items: start; align-content: start; }
.tm-body { display: grid; gap: 16px; color: var(--ink-soft); max-width: 36em; }
.tm-body p, .tm-body ul, .tm-body ol { margin: 0; }
.tm-body ul, .tm-body ol { padding-left: 1.2em; display: grid; gap: 6px; }
.tm-body strong { color: var(--green); font-weight: 400; }
.tm-body a { color: var(--green); text-underline-offset: 3px; }

/* Text only: the .b-split row, with a wider rail so a few paragraphs read comfortably. */
.text-media--none .b-split { --rail: 40%; align-items: start; }
.text-media--none .tm-text { padding-top: 0.6em; }

/* With media: two equal columns, the media spans the height of the text. */
.text-media--image .text-media-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas: ". media" "title media" "text media" ". media";
	column-gap: var(--gap);
}
.text-media--media-left .text-media-inner { grid-template-areas: "media ." "media title" "media text" "media ."; }
.text-media .tm-media { grid-area: media; }
.text-media--image .tm-title { grid-area: title; font-size: clamp(36px, 4.2vw, 60px); margin-bottom: 32px; }
.text-media--image .tm-text { grid-area: text; }
.text-media--media-right .tm-title,
.text-media--media-right .tm-text { padding-right: clamp(0px, 4vw, 64px); }
.text-media--media-left .tm-title,
.text-media--media-left .tm-text { padding-left: clamp(0px, 4vw, 64px); }

.tm-media {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--tm-bg);
}

/* Image: full bleed in the rounded frame; with a tone it sits inset on the tinted area with a band behind it. */
.tm-image img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.tm-image .band { --bc: var(--tm-c); --bl: 38%; --bw: 34%; }
.tone-web .tm-image,
.tone-dm .tm-image,
.tone-camp .tm-image,
.tone-culture .tm-image { padding: clamp(20px, 3vw, 44px); }
.tone-web .tm-image img,
.tone-dm .tm-image img,
.tone-camp .tm-image img,
.tone-culture .tm-image img { border-radius: var(--radius); position: relative; }

@media (max-width: 1180px) {
	.text-media--none .b-split { --rail: 46%; }
}
@media (max-width: 900px) {
	.text-media--image .text-media-inner,
	.text-media--media-left .text-media-inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: "title" "text" "media";
	}
	.text-media .tm-media { margin-top: 40px; }
	.text-media--media-right .tm-title,
	.text-media--media-right .tm-text,
	.text-media--media-left .tm-title,
	.text-media--media-left .tm-text { padding-inline: 0; }
	.text-media--image .tm-title { margin-bottom: 24px; }
}

/* Case label on a photo that comes from a case: a small beige pill with the arrow textlink, bottom left. */
.tone-web .tm-image,
.tone-dm .tm-image,
.tone-camp .tm-image,
.tone-culture .tm-image { --tm-pad: clamp(20px, 3vw, 44px); }
.tm-caption {
	position: absolute;
	left: calc(var(--tm-pad, 0px) + 16px);
	bottom: calc(var(--tm-pad, 0px) + 16px);
	right: calc(var(--tm-pad, 0px) + 16px);
	z-index: 1;
	display: flex;
	pointer-events: none;
}
.tm-caption .textlink {
	pointer-events: auto;
	padding: 6px 18px 6px 6px;
	border-radius: 999px;
	background: var(--beige);
	color: var(--green);
	font-size: 15px;
	gap: 10px;
}
.tm-caption .arrow { width: 30px; height: 30px; }