/*
 * Beeld en tekst.
 *
 * Full-width block, by default without its own background (the Avada container decides). With a
 * palette colour (--gsf-media-bg / --gsf-media-on) the text follows it, and label and first
 * button become its inverse.
 */
.gsf-block.gsf-media {
	--gsf-head-label-bg: var(--gsf-media-on, var(--gsf-color-text));
	--gsf-head-label-fg: var(--gsf-media-on-inverse, var(--gsf-media-bg, var(--gsf-on-color-text)));
	--gsf-button-bg: var(--gsf-media-on, var(--gsf-color-accent));
	--gsf-button-fg: var(--gsf-media-on-inverse, var(--gsf-media-bg, var(--gsf-on-color-accent)));
	background: var(--gsf-media-bg, transparent);
	color: var(--gsf-media-on, var(--gsf-color-text));
}

/* Title: the site's heading colour, or the readable text colour on a chosen background. */
.gsf-block.gsf-block.gsf-media .gsf-head__title {
	--gsf-head-title-color: var(--gsf-media-on, var(--gsf-head-style-color));
}

.gsf-block.gsf-media .gsf-media__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gsf-space-5);
	max-width: var(--gsf-content-outer);
	margin-inline: auto;
	padding: var(--gsf-space-section) var(--gsf-space-gutter);
}

.gsf-block.gsf-media .gsf-media__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--gsf-radius);
	background: var(--gsf-color-surface-dark);
}

.gsf-block.gsf-media .gsf-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.gsf-block.gsf-media .gsf-media__video {
	overflow: hidden;
	border-radius: var(--gsf-radius);
}

.gsf-block.gsf-block.gsf-media .gsf-media__text + .gsf-media__text {
	margin-top: var(--gsf-space-3);
}

.gsf-block.gsf-block.gsf-media .gsf-head__label + .gsf-media__text,
.gsf-block.gsf-block.gsf-media .gsf-head__title + .gsf-media__text {
	margin-top: var(--gsf-space-4);
}

.gsf-block.gsf-media .gsf-media__text {
	line-height: 1.5;
}

.gsf-block.gsf-media .gsf-media__buttons {
	margin-top: var(--gsf-space-5);
}

@container (min-width: 720px) {
	.gsf-block.gsf-media .gsf-media__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(2.5rem, 6cqi, 5rem);
	}

	.gsf-block.gsf-media .gsf-media__inner--single {
		grid-template-columns: minmax(0, 46rem);
	}

	.gsf-block.gsf-media--media-side-right .gsf-media__inner:not(.gsf-media__inner--single) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}

	.gsf-block.gsf-media--media-side-right .gsf-media__media {
		order: 2;
	}
}

/* An inverse label or button (background = the block's text colour, white or black) gets the
   opposite of that as text colour, so it reads as white on black and black on white. Browsers
   without relative colours keep the block colour as text colour. */
@supports (color: rgb(from red r g b)) {
	.gsf-block.gsf-media {
		--gsf-media-on-inverse: rgb(from var(--gsf-media-on) calc(255 - r) calc(255 - g) calc(255 - b));
	}
}