/* Homepage components */
@layer components {
[s-header] {
	--stage-width: minmax(100dvw, 1920px);
	--padding-block: 1.25rem;
	position: relative;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	max-width: var(--stage-width);
	z-index: 10;
	container-type: inline-size;
}

[s-masthead] {
	grid-row: 1;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-self: start;
	align-items: center;
	padding-block-start: 1rem;
	padding-inline: var(--padding-block);
}

/* Breadcrumb placement on the header grid */
[s-header] > [s-breadcrumb] {
	grid-column: 1 / -1;
	grid-row: 3;
	justify-self: center;
	z-index: 1;

}

[s-header-h1] {
	grid-column: 1 / -1;
	grid-row: 4;
	padding-block-end: min(12dvh, 4rem);
	display: grid;
	grid-gap: var(--xs);
	width: max-content;
	justify-self: center;
	text-align: center;
	line-height: 1;
	color: var(--color-white);
	opacity: 0.8;
	border-radius: var(--radius-2);
	text-shadow:
		1px 1px 3px rgb(10 30 50 / 0.7),
		0 0 20px rgb(10 30 50 / 0.4);
	z-index: 1;

	@media (max-width: 767px) {
		padding-block-end: min(6dvh, 2rem);
		width: 90%;
		text-wrap: balance;
	}
}

[s-header-h2] {
	display: block;
	font-family: var(--serif);
	font-size: min(var(--xxxl), 80cqi / var(--chars, 20) / 0.55);
	font-weight: var(--weight-700);

	@media (max-width: 767px) {
		font-size: clamp(var(--xl), 120cqi / var(--chars, 20) / 0.55, var(--xxl));
		line-height: 1.25;
	}
}

}
@layer components {
[s-hero] {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: 100%;
	aspect-ratio: 8/5;
	max-height: 90dvh;
	z-index: -1;

	&[s-hero~="compact"] {
		aspect-ratio: 3/1.55;

		@media (max-width: 767px) {
			aspect-ratio: 1 / 1.2;
		}
	}

	@media (max-width: 767px) {
		aspect-ratio: 1 / 1.2;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, oklch(20% 0.04 230 / 0.45) 0%, transparent 30%), linear-gradient(to top, oklch(20% 0.04 230 / 0.45) 0%, transparent 30%);
		pointer-events: none;
	}

	[s-hero-img] {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
}

}
@layer components {
[s-headline-group] {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: end;
	padding-block-end: min(12dvh, 4rem);
	border-radius: var(--radius-2);
	gap: var(--lg);
	z-index: 1;

	[s-headlines] {
		display: grid;
		grid-gap: var(--xs);
		text-align: center;
		line-height: 1;
		color: var(--color-white);
		opacity: 0.8;
		padding-inline: var(--xl);
		border-radius: var(--radius-2);
		text-shadow:
			1px 1px 3px rgb(10 30 50 / 0.7),
			0 0 20px rgb(10 30 50 / 0.4);

		@media (max-width: 767px) {
			width: 95%;
			padding: var(--md);
			position: absolute;
			top: auto;
			bottom: var(--md);
			left: 0;
			right: 0;
			margin: auto;
		}
	}

	[s-headline-small] {
		display: block;
		font-family: var(--serif);
		font-weight: var(--weight-400);
		font-size: var(--md);
		line-height: 1.5;
		letter-spacing: 1px;
		text-transform: none;
		text-wrap: balance;
		@media (max-width: 767px) {
			font-size: var(--xs);
		}
	}

	[s-headline-large] {
		display: block;
		font-family: var(--serif);
		font-size: var(--xxxl);
		font-weight: var(--weight-700);
	}
}

}
@layer components {
[s-page-name] {
	justify-self: center;
	text-align: center;
	font-family: var(--headline);
	font-weight: var(--weight-800);
	font-size: var(--xxxl);
	line-height: 1.2;
	color: var(--color-blue-dark);
	max-width: 20ch;
}

}
@layer components {
[s-headline] {
	--max-width: min(45ch, 85%);
	text-align: center;
	font-family: var(--serif);
	font-weight: var(--weight-800);
	font-size: var(--md);
	text-wrap: balance;
	max-width: var(--max-width);
	margin-inline: auto;
	color: rgb(0 0 0 / 0.87);

	&[s-headline~="standalone"] {
		margin-block-end: var(--md);
		font-size: var(--lg);

		@media (max-width: 767px) {
			margin-block-end: var(--xs);
		}
	}

	&[s-headline~="outro"] {
		margin-block-start: var(--xxl);
		margin-block-end: var(--sm);
	}

	&[s-headline="hidden"] {
		display: none;
	}

	&[s-headline="sibling"] {
		margin-block-start: var(--lg);
		margin-block-end: var(--xs);

		@media (max-width: 767px) {
			margin-block-end: var(--xs);
		}
	}

	/*&[s-headline="border-top"] {
        padding-top: var(--lg);
        border-top: 1px solid var(--color-cyan);
        border-bottom: 0;
    }*/

	@media (max-width: 767px) {
		font-size: var(--md);
		line-height: 1.2;
		margin-block-start: var(--xxl);
		padding-inline: var(--padding-inline);
	}
}

}
@layer components {
[s-page-text] {
	margin-inline: auto;
	--max-width: min(80ch, 90%);
	--_clamp-height: 205px;
	justify-self: center;
	row-gap: var(--sm);
	font-family: var(--body);
	font-size: var(--base);
	font-weight: var(--weight-regular);
	line-height: var(--body-line-height);
	max-width: var(--max-width);
	color: rgb(0 0 0 / 0.67);

	&:has(+ [s-grid]) {
		margin-block-end: var(--base);
	}

	@media (min-width: 768px) and (max-width: 1024px) {
		--max-width: 60ch;
	}

	[s-text] {
		* + * {
			margin-top: 1rem;
		}
	}
}

}
@layer components {
[s-grid] {
	margin-block-start: 4rem;
	margin-inline: auto;
	max-width: min(2560px, 100%);
	padding-inline: var(--padding-inline);
	display: grid;
	row-gap: 2rem;
}

[s-cards] {
	--gap: 1.25rem;
	--grid-item-width-min: min(420px, 100dvw);
	--grid-item-width-max: 100%;
	--grid-item-height: min(400px, 40vh);

	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	container-type: inline-size;

	@media (min-width: 1600px) {
		--grid-item-width-min: 500px;
	}

	/*@media (max-width: 767px) {
        --grid-item-height: 250px;
    }*/

	[s-card] {
		flex: 1 1 min(var(--grid-item-width-min), var(--grid-item-width-max));
		aspect-ratio: 1 / 0.8;
		max-height: var(--grid-item-height);
		position: relative;
		display: block;
		border-radius: var(--radius-3);
		overflow: hidden;
		transition: transform 400ms ease-out, box-shadow 400ms ease-out;

		&:hover {
			transform: scale(var(--card-lift-scale, 1.04));
			box-shadow:
				0 2px 4px rgba(0, 0, 0, 0.08),
				0 8px 20px rgba(0, 0, 0, 0.12),
				0 24px 48px rgba(0, 0, 0, 0.15);
			z-index: 100;
		}

		&:only-of-type {
			max-height: none;
			height: min(1200px, 80vh);
		}

		[s-badge-img] {
			position: absolute;
			top: var(--sm);
			right: var(--sm);
			width: auto;
			max-width: 80px;
			border-radius: 100%;
			z-index: 10;

			@media (max-width: 767px) {
				max-width: 60px;
			}
		}

		[s-link] {
			position: relative;
			display: block;
			overflow: hidden;
			height: 100%;
			text-decoration: none;

			[s-img] {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 300ms ease-out;

				&:hover {
					transform: scale(1.05);
				}
			}

			[s-caption] {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				display: grid;
				grid-template-columns: 1fr;
				place-items: center;
				font-family: var(--body);
				font-weight: var(--weight-regular);
				font-size: var(--base);
				color: var(--color-white);
				padding: var(--md) var(--xs) var(--xs);
				text-wrap: balance;
				backdrop-filter: blur(2px) saturate(170%) brightness(80%);
				mask-image: linear-gradient(to bottom, transparent, black 35%);
				z-index: 10;

				[s-text] {
					grid-column: 1 / -1;
					grid-row: 1;
					font-weight: inherit;
					text-shadow: 1px 1px 1px var(--color-gray);
					justify-self: start;
					z-index: 10;
					transition: transform 400ms ease-out;
				}

				[s-button] {
					all: unset;
					display: none;
					max-width: 120px;
					font-family: var(--body);
					font-weight: var(--weight-medium);
					font-size: var(--sm);
					color: var(--color-blue-dark);
					background-color: var(--color-white);
					text-align: center;
					padding: 0.75em 1.25em;
					border-radius: var(--radius-card);
					letter-spacing: 1px;
					transition: all var(--duration-normal) var(--ease-out);
					cursor: pointer;
					grid-column: 1 / -1;
					grid-row: 1;
					justify-self: end;
					margin: 0;
					transform: translate3d(0, 100px, 0);
					transition: transform 300ms ease-out;
					transition-delay: 50ms;
					z-index: 20;

					&:hover {
						cursor: pointer;
						color: var(--color-white);
						background-color: var(--color-cyan);
						filter: brightness(1.1) saturate(1.5);
					}
				}
			}

			&:hover [s-button] {
				transform: translate3d(0, 0, 0);
				transition: transform 300ms ease-out;
				transition-delay: 50ms;
			}

			&:hover [s-text] {
				transform: translateX(6px);
			}
		}
	}
}

@container (min-width: 900px) {
	[s-card] { --card-lift-scale: 1.05; }
}

@container (min-width: 1400px) {
	[s-card] { --card-lift-scale: 1.03; }
}

@container (min-width: 2000px) {
	[s-card] { --card-lift-scale: 1.02; }
}

}
@layer components {
[s-testimonials] {
	margin-block-start: 4rem;
	margin-inline: auto;
	max-width: min(2560px, 100%);
	padding-inline: var(--padding-inline);
	display: grid;
	row-gap: 2rem;

	[s-items] {
		display: grid;
		row-gap: 2rem;
	}

	[s-item] {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		border-radius: var(--radius-2);
		overflow: hidden;
	}

	[s-photo] {
		position: relative;
		min-height: 320px;
		overflow: hidden;
		z-index: 1;

		[s-img] {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}

	[s-text] {
		position: relative;
		font-family: var(--body);
		font-size: var(--sm);
		font-weight: var(--weight-regular);
		color: var(--color-white);
		padding: 5rem;
		background-color: var(--color-blue-dark);
		display: grid;
		align-items: start;
		align-content: center;
		gap: 1rem;

		[s-quote] {
			font-family: var(--body);
			font-size: var(--base);
			font-weight: var(--400);
			font-style: italic;
			line-height: 1.75;
		}

		q {
			quotes: none;
			display: grid;
			grid-template-columns: 1fr;
			gap: 1rem;
			align-content: start;
		}

		[s-atrribution] {
			position: relative;
			font-size: var(--base);
			font-weight: var(--weight-regular);
			line-height: 1.25;
			text-wrap: balance;

			&::before {
				content: "\201C";
				position: absolute;
				bottom: -6rem;
				left: -3rem;
				font-size: 4em;
				font-family: var(--serif);
				font-style: normal;
				opacity: 0.3;
				line-height: 1;
				z-index: 1;
			}
		}

		[s-link] {
			font-size: var(--base);
			cursor: pointer;
			color: var(--color-white);
			font-weight: var(--weight-bold);
			text-decoration: none;
			display: block;
			width: max-content;
			border-bottom: 1px solid var(--overlay-light);
			transition: border-bottom var(--duration-normal) var(--ease-out);

			&:hover {
				border-bottom: 1px solid var(--color-white);
			}
		}
	}

	@media (max-width: 767px) {
		[s-item] {
			grid-template-columns: 1fr;
		}

		[s-photo] {
			aspect-ratio: 1.75 / 1;
			min-height: auto;
		}

		[s-text] {
			padding: 2rem;
		}

		[s-atrribution]::before {
			display: none;
		}

		[s-read-more] {
			margin-block-start: 0;
		}
	}
}

}
@layer components {
[s-stack] {
	margin-block-start: 4rem;
	margin-inline: auto;
	max-width: min(2560px, 100%);
	padding-inline: var(--padding-inline);
	display: grid;
	row-gap: 2rem;

	[s-items] {
		display: grid;
		gap: var(--lg);


	}

	[s-item] {
		display: grid;
		grid-template-columns: 1fr 0.95fr;
		align-items: center;
		gap: max(var(--sm), 2vw);

		[s-photo] {
			position: relative;
			display: block;
			align-self: stretch;
			border-radius: var(--radius-card);
			overflow: hidden;

			[s-img] {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			[s-badge-img] {
				position: absolute;
				top: var(--sm);
				right: var(--sm);
				width: auto;
				max-width: 80px;
				border-radius: 100%;
				z-index: 10;

				@media (max-width: 767px) {
					max-width: 60px;
				}
			}
		}

		[s-text] {
			font-family: var(--body);
			font-weight: var(--weight-regular);
			line-height: var(--body-line-height);
			padding-block: 2rem;

			* + * {
				margin-top: 1rem;
			}

			h3 {
				font-size: var(--md);
				font-family: var(--serif);
			}

			[s-description] {
				font-family: var(--body);
				font-size: var(--base);
				font-weight: var(--weight-regular);
				line-height: var(--body-line-height);
			}

			a {
				cursor: pointer;
				color: var(--link-color);
				text-decoration-thickness: var(--link-underline-width);
				text-decoration-style: solid;
				text-decoration-color: var(--link-underline-color);
				transition: var(--link-transition);

				&:hover {
					color: var(--link-color-hover);
					background-color: var(--link-bg-hover);
					text-decoration: none;
				}
			}
		}
	}

	@media (max-width: 767px) {
		[s-item] {
			grid-template-columns: 1fr;
		}

		[s-text] {
			padding-block: 1rem;
			padding-inline: 1rem;
		}

		[s-read-more] {
			margin-block-start: 0;
		}
	}
}

}
@layer components {
[s-about] {
	margin-block-start: 4rem;
	margin-inline: auto;
	max-width: min(2560px, 100%);
	padding-inline: var(--padding-inline);
	display: grid;
	row-gap: 2rem;
	justify-items: center;

	

	[photo] {
		margin: 0;
		justify-self: stretch;
		aspect-ratio: 2/1;
		min-width: 0;

		@media (max-width: 767px) {
			aspect-ratio: 1/1;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top center;
			border-radius: var(--radius-card);
		}
	}

	[caption] {
		font-family: var(--body);
		font-weight: var(--caption-weight);
		font-size: var(--sm);
		color: var(--caption-color);
		text-align: right;

		@media (max-width: 767px) {
			font-size: var(--xs);
			text-align: center;
		}
	}

	[headline] {
		margin-block-start: var(--lg);
		text-align: center;
		font-family: var(--serif);
		font-weight: var(--weight-black);
		font-size: var(--lg);
		text-wrap: balance;

		@media (max-width: 767px) {
			font-size: var(--md);
		}
	}

	[text] {
		font-family: var(--body);
		font-size: var(--base);
		font-weight: var(--weight-regular);
		line-height: var(--body-line-height);
		max-width: min(90ch, 90%);

		* + * {
			margin-top: 1rem;
		}


	}
}

}