/*
 * Doorverwijzers.
 *
 * In a normal Avada container (no own background). Each item is a soft tint of its colour
 * (--gsf-link-color, default the house colour), with a photo or an icon on the left (on top
 * when narrow) and the text and a button on the right.
 */
/* Content within the site width, with the same vertical spacing as every full-width block. */
.gsf-block.gsf-links .gsf-links__inner {
	max-width: var(--gsf-content-outer);
	margin-inline: auto;
	padding: var(--gsf-space-section) var(--gsf-space-gutter);
}

.gsf-block.gsf-links .gsf-links__head {
	margin-bottom: var(--gsf-space-5);
}

/* No own background: the title takes the site's colour for its heading style. */
.gsf-block.gsf-block.gsf-links .gsf-head__title {
	--gsf-head-title-color: var(--gsf-head-style-color);
}

.gsf-block.gsf-links .gsf-links__list {
	list-style: none;
}

.gsf-block.gsf-links .gsf-links__item {
	--gsf-l-color: var(--gsf-link-color, var(--gsf-color-primary));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	overflow: hidden;
	border-radius: var(--gsf-radius);
	--gsf-l-bg: color-mix(in srgb, var(--gsf-l-color) 9%, var(--gsf-color-surface));
	background: var(--gsf-l-bg);
	color: var(--gsf-color-text);
	transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease;
}

.gsf-block.gsf-links .gsf-links__media {
	position: relative;
	min-height: 8rem;
}

.gsf-block.gsf-links .gsf-links__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gsf-block.gsf-links .gsf-links__media--icon {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--gsf-l-color) 18%, var(--gsf-color-surface));
}

.gsf-block.gsf-links .gsf-links__icon {
	color: var(--gsf-color-surface-dark);
	font-size: clamp(2rem, 6cqi, 3rem);
	line-height: 1;
}

.gsf-block.gsf-links .gsf-links__icon:has(> .gsf-icon-img) {
	width: 4.5rem;
	height: 4.5rem;
}

.gsf-block.gsf-links .gsf-links__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--gsf-space-4);
}

.gsf-block.gsf-links .gsf-links__title {
	margin: 0 0 var(--gsf-space-2);
	color: var(--gsf-color-heading-3);
	font-family: var(--gsf-font-heading);
	font-size: var(--gsf-text-h3);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--gsf-text-h3-letter-spacing);
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

.gsf-block.gsf-links .gsf-links__text {
	margin: 0;
	font-size: calc(var(--gsf-text-body) * 0.9);
	line-height: 1.45;
}

.gsf-block.gsf-links .gsf-links__action {
	margin: auto 0 0;
	padding-top: var(--gsf-space-4);
}

/* Narrow: photo or icon on top. From 520px: beside the text. */
@container (min-width: 520px) {
	.gsf-block.gsf-links .gsf-links__item:not(.gsf-links__item--text) {
		grid-template-columns: minmax(0, clamp(7.5rem, 38%, 18rem)) minmax(0, 1fr);
	}

	.gsf-block.gsf-links .gsf-links__media {
		min-height: 9rem;
	}

	.gsf-block.gsf-links .gsf-links__list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gsf-space-3);
		margin: 0;
		padding: 0;
	}
}

@container (min-width: 880px) {
	.gsf-block.gsf-links .gsf-links__list:has(> :nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gsf-block.gsf-links .gsf-links__list:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Beside the text (from 520px) the arc is the right edge of the photo or icon panel. */
@container (min-width: 520px) {
	.gsf-block.gsf-links .gsf-links__media.gsf-arc {
		--gsf-arc-mask: radial-gradient(12% 75% at 100% 60%, transparent 97%, #000000 100%);
	}
}

/*
 * Hover and focus, as on Kaarten: the whole item is the link target (the button stretches over
 * it), the item lifts with a shadow, the photo zooms and the button's arrow moves.
 */
.gsf-block.gsf-links .gsf-links__item--link {
	position: relative;
}

.gsf-block.gsf-links .gsf-links__item--link .gsf-links__action .gsf-button::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
}

.gsf-block.gsf-links .gsf-links__item--link:hover,
.gsf-block.gsf-links .gsf-links__item--link:has(.gsf-button:focus-visible) {
	transform: translateY(-4px);
	box-shadow: 0 18px 50px -24px rgb(0 0 0 / 0.35);
}

.gsf-block.gsf-links .gsf-links__item--link:hover .gsf-links__img {
	transform: scale(1.05);
}

.gsf-block.gsf-links .gsf-links__item--link:hover .gsf-button svg {
	transform: translateX(4px);
}

/* The button darkens with a colour, not with a filter: a filter would make the button the
   containing block of its stretched ::after, which then shrinks to the button on hover. */
.gsf-block.gsf-block .gsf-links__item--link .gsf-button:hover {
	filter: none;
}

.gsf-block.gsf-block .gsf-links__item--link:hover .gsf-button {
	background: color-mix(in srgb, var(--gsf-button-bg, var(--gsf-color-accent)) 88%, #000000);
}

/* Focus ring on the item instead of the (stretched) button. */
.gsf-block.gsf-links .gsf-links__item--link .gsf-button:focus-visible {
	outline: none;
}

.gsf-block.gsf-links .gsf-links__item--link:has(.gsf-button:focus-visible) {
	outline: 3px solid var(--gsf-color-text);
	outline-offset: 3px;
}