/*
 * Fototegels.
 *
 * Full-width block without its own background (the Avada container decides). The content sits
 * within the site width; the tile row runs on to the right edge of the screen. Slider behaviour
 * is the shared one (core/base.css): narrow = 85% tiles + dots, wide = 330px tiles + buttons.
 */
.gsf-block.gsf-tiles {
	--gsf-slider-item: clamp(260px, 30cqi, 330px);
	--gsf-slider-gap: 18px;
}

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

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

/* Head: heading on the left, slider buttons at the bottom right. */
.gsf-block.gsf-tiles .gsf-tiles__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--gsf-space-4);
	margin-bottom: var(--gsf-space-5);
}

.gsf-block.gsf-tiles .gsf-tiles__head .gsf-slider-nav {
	margin-left: auto;
}

.gsf-block.gsf-tiles .gsf-tiles__list {
	list-style: none;
}

/*
 * Tiles: 3:4. Photo tiles get a dark scrim under the text, so white text is readable on any
 * photo. Flat tiles (no photo) alternate through the site's colours, like Kaarten.
 */
.gsf-block.gsf-tiles .gsf-tiles__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4;
	margin: 0;
	overflow: hidden;
	border-radius: var(--gsf-radius);
	isolation: isolate;
}

.gsf-block.gsf-tiles .gsf-tiles__tile--photo {
	background: var(--gsf-color-surface-dark);
	color: #ffffff;
}

.gsf-block.gsf-tiles .gsf-tiles__tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgb(8 12 10 / 0.92) 0%, rgb(8 12 10 / 0.6) 38%, rgb(8 12 10 / 0.08) 72%);
	transition: opacity 0.35s ease;
}

.gsf-block.gsf-tiles .gsf-tiles__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	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-tiles .gsf-tiles__tile--flat:nth-child(4n + 1) {
	--gsf-tile-auto-bg: var(--gsf-color-primary);
	--gsf-tile-auto-on: var(--gsf-on-color-primary);
}

.gsf-block.gsf-tiles .gsf-tiles__tile--flat:nth-child(4n + 2) {
	--gsf-tile-auto-bg: var(--gsf-color-accent);
	--gsf-tile-auto-on: var(--gsf-on-color-accent);
}

.gsf-block.gsf-tiles .gsf-tiles__tile--flat:nth-child(4n + 3) {
	--gsf-tile-auto-bg: var(--gsf-color-secondary);
	--gsf-tile-auto-on: var(--gsf-on-color-secondary);
}

.gsf-block.gsf-tiles .gsf-tiles__tile--flat:nth-child(4n + 4) {
	--gsf-tile-auto-bg: var(--gsf-color-surface-dark);
	--gsf-tile-auto-on: var(--gsf-on-color-surface-dark);
}

.gsf-block.gsf-tiles .gsf-tiles__tile--flat {
	background: var(--gsf-tile-bg, var(--gsf-tile-auto-bg));
	color: var(--gsf-tile-on, var(--gsf-tile-auto-on));
}

.gsf-block.gsf-tiles .gsf-tiles__body {
	padding: var(--gsf-space-4) 20px 20px;
}

.gsf-block.gsf-tiles .gsf-tiles__tile-title {
	margin: 0 0 var(--gsf-space-1);
	color: inherit;
	font-family: var(--gsf-font-heading);
	font-weight: 400;
	font-size: calc(var(--gsf-text-h3) * 1.05);
	line-height: 1.15;
	letter-spacing: var(--gsf-text-h3-letter-spacing);
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

.gsf-block.gsf-tiles .gsf-tiles__tile-title sup {
	font-size: 0.46em;
	line-height: 0;
	vertical-align: 0.62em;
	letter-spacing: 0.03em;
}

.gsf-block.gsf-tiles .gsf-tiles__tile-title a {
	color: inherit;
	text-decoration: none;
}

/* The whole tile is the link target. */
.gsf-block.gsf-tiles .gsf-tiles__tile-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gsf-block.gsf-tiles .gsf-tiles__text {
	margin: 0;
	color: inherit;
	font-size: calc(var(--gsf-text-body) * 0.82);
	line-height: 1.45;
	opacity: 0.88;
}

/* Hover and focus: the photo comes forward, the scrim lightens, the title underlines. */
.gsf-block.gsf-tiles .gsf-tiles__tile--link:hover .gsf-tiles__img,
.gsf-block.gsf-tiles .gsf-tiles__tile--link:has(a:focus-visible) .gsf-tiles__img {
	transform: scale(1.06);
}

.gsf-block.gsf-tiles .gsf-tiles__tile--link:hover::before,
.gsf-block.gsf-tiles .gsf-tiles__tile--link:has(a:focus-visible)::before {
	opacity: 0.75;
}

.gsf-block.gsf-tiles .gsf-tiles__tile--link:hover .gsf-cue svg {
	transform: translateX(5px);
}

.gsf-block.gsf-tiles .gsf-tiles__tile--link:hover .gsf-tiles__tile-title a {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.gsf-block.gsf-tiles .gsf-tiles__tile-title a:focus-visible {
	outline: none;
}

.gsf-block.gsf-tiles .gsf-tiles__tile--link:has(a:focus-visible) {
	outline: 3px solid var(--gsf-color-text);
	outline-offset: 3px;
}