/*
 * Home page. Figma frame BSGV-home-3 (1512 wide, 108 gutters, 1296 content).
 *
 * y-positions in the design: hero 88–746, intro 815, slider 1062–1735 (end of
 * the sage area), dots 1753, featured 1849, outro 2534 (photo band 170, then
 * the cream cut-out logo), footer on cream.
 */

/* Sage top: header bar, hero, intro and slider share one background. */
.home-top {
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--white);
}

/* Hero: 1296x658 with a darkening gradient at the top for the white logo. */
.home-hero {
	position: relative;
	aspect-ratio: 1296 / 658;
	background: var(--wp--preset--color--olive);

	&::after {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: 39.8%; /* 262 / 658 */
		background: linear-gradient(to bottom, rgb(115 115 115 / 0.64), rgb(255 255 255 / 0));
		pointer-events: none;
	}
}

.home-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Intro: title 618 wide, text 462 wide starting at 697 (columns 618 | 79 | 462 | 137). */
.home-intro {
	display: grid;
	gap: 24px;
	padding-block: clamp(40px, 4.56vw, 69px) clamp(40px, 4.17vw, 63px);

	@media (min-width: 1024px) {
		grid-template-columns: 618fr 79fr 462fr 137fr;
		gap: 0;

		& .home-intro__title { grid-column: 1; }
		& .home-intro__text { grid-column: 3; padding-top: 10px; }
	}
}

.home-intro__title {
	color: inherit;
	line-height: 1;
}

/* Slider: slides are as wide as the container, the next one peeks in on the right. */
.home-slider {
	--slider-offset: max(var(--wp--custom--gutter), (100% - var(--wp--style--global--content-size)) / 2);

	position: relative;
}

.home-slider__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--slider-offset);
	padding-inline: var(--slider-offset);
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}

	&:focus-visible {
		outline-offset: -4px;
	}
}

.home-slider__slide {
	position: relative;
	flex: 0 0 100%; /* Track content box = container width; the padding shows the next slide. */
	aspect-ratio: 1296 / 673;
	scroll-snap-align: start;
	overflow: hidden;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--olive);

	/* The 1296x673 shape is too low on phones for the caption and arrow. */
	@media (max-width: 767px) {
		aspect-ratio: 4 / 3;
	}

	/* Bottom gradient behind the caption: 299 / 673. */
	&::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 44.4%;
		background: linear-gradient(to top, rgb(115 115 115 / 0.8), rgb(255 255 255 / 0));
		pointer-events: none;
	}
}

.home-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);

	@media (hover: hover) {
		.home-slider__slide:hover & {
			transform: scale(1.02);
		}
	}
}

.home-slider__caption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: grid;
	gap: 14px;
	padding: 0 clamp(16px, 1.85vw, 28px) clamp(20px, 3.7vw, 56px);
}

.home-slider__title {
	color: inherit;

	@media (max-width: 767px) {
		font-size: var(--wp--preset--font-size--heading-m);
	}
}

.home-slider__location {
	font-size: var(--wp--preset--font-size--label-l);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* Next arrow sits on the right edge of the current slide, vertically centred. */
.home-slider__controls {
	position: absolute;
	inset: 0;
	margin-inline: auto;
	pointer-events: none;
}

.home-slider__next {
	position: absolute;
	top: 50%;
	right: calc(var(--wp--custom--gutter) - 24px);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	transition: transform 0.2s;

	& svg {
		width: 100%;
		height: 100%;
	}

	&:hover {
		transform: translateY(-50%) scale(1.06);
	}

	@media (max-width: 767px) {
		right: calc(var(--wp--custom--gutter) + 8px);
		width: 40px;
		height: 40px;
	}
}

/* Dots: 7px, 24px apart, right-aligned 18px below the slider. */
.home-slider__dots {
	display: flex;
	justify-content: flex-end;
	gap: 17px;
	padding-top: 18px;
}

.home-slider__dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #70726b;

	/* Larger hit area. */
	&::before {
		content: "";
		position: absolute;
		inset: -10px;
	}

	&[aria-current="true"] {
		background: #e9ecc1;
	}
}

/* Featured: two cards, right one 76px lower, "Alle projecten" top right; 114px below the slider incl. the 25px dots row. */
.home-featured {
	position: relative;
	padding-top: clamp(40px, 5.89vw, 89px);
}

.home-featured__all {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--wp--preset--color--black);
	font-weight: 400;

	@media (min-width: 768px) {
		position: absolute;
		right: var(--wp--custom--gutter);
		top: clamp(40px, 5.89vw, 89px);
		margin: 0;
	}
}

.home-featured__grid {
	display: grid;
	gap: 48px;

	@media (min-width: 768px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 9.57%;
		padding-top: 7px;

		& > :nth-child(2) {
			margin-top: 76px;
		}
	}
}

/* Outro: photo behind a 170px band with the contact bar, then the cream logo cut-out. */
.home-outro {
	position: relative;
	margin-top: clamp(64px, 6.6vw, 100px);
	overflow: hidden;
	background: var(--wp--preset--color--olive);
}

.home-outro__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-outro__cta {
	position: relative;
	padding-bottom: 76px;
}

.home-outro__logo {
	position: relative;
	color: var(--wp--preset--color--cream-dark);

	& svg {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1512 / 776;
	}
}

body.home .site-footer {
	background: var(--wp--preset--color--cream-dark);
}