:root {
	--color-primary: rgb(227 36 21);
	--color-background: rgb(19 45 54);
	--color-text: rgb(240 240 240);
	--border-radius: 5px;
	--image-aspect-ratio: 3 / 2;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
	position: relative;
}

body {
	background-color: var(--color-background);
	font-family: sans-serif;
	font-size: 1rem;
	padding: 0 20px 20px 20px;
}

main {
	display: block;
	margin: auto;
	max-width: 1000px;
}

button {
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	font-size: inherit;
}

header {
	display: flex;
	margin-bottom: 15px;

	a {
		aspect-ratio: 50 / 79;
		background: url('./100jaar.png') no-repeat 50% 0 / contain;
		display: block;
		margin: auto;
		width: 80px;
	}
}

.gallery {
	display: flex;
	flex-direction: column;
	gap: 6px;

	/* Carousel element, container the steppers and fullscreen button */
	.carousel {
		.carousel-inner {
			aspect-ratio: var(--image-aspect-ratio);

			button,
			.original {
				aspect-ratio: 1;
				cursor: pointer;
				display: block;
				opacity: 0;
				position: absolute;
				transition: opacity 0.3s;
				width: 60px;
			}

			.stepper {
				background-color: var(--color-background);
				border: 1px solid white;
				border-radius: 3em;
				top: calc(50% - 20px);

				&::after {
					background-color: white;
					content: '';
					display: block;
					height: 100%;
					mask: url('./chevron-left.svg') no-repeat center / 70%;
					width: 100%;
				}
			}

			.prev {
				left: -20px;
			}

			.next {
				right: -20px;

				&::after {
					rotate: 180deg;
				}
			}

			.fullscreen,
			.original {
				border-radius: var(--border-radius);
				bottom: 10px;
			}

			.fullscreen {
				background: black url('./fullscreen.svg') no-repeat center / 60%;
				right: 10px;
			}

			.original {
				background: black url('./download.svg') no-repeat center / 60%;
				display: none;
				left: 10px;
			}

			&:hover {
				button,
				.original {
					opacity: 1;
				}
			}
		}

		.big-image {
			margin: 0;
			padding: 0;

			img {
				aspect-ratio: var(--image-aspect-ratio);
				border-radius: var(--border-radius);
				display: block;
				object-fit: cover;
				width: 100%;
			}

			iframe {
				background-color: var(--color-background);
				border: 0;
				display: block;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
			}
		}

		/* Full screen mode. */
		&.fullscreen {
			align-items: center;
			background-color: rgb(10 10 10);
			display: flex;
			height: 100%;
			justify-content: center;
			left: 0;
			padding: 10px;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 10;

			.big-image {
				img {
					object-fit: contain;
				}
			}

			.stepper.next {
				right: 10px;
			}

			.stepper.prev {
				left: 10px;
			}
		}

		&:has(iframe) {
			.fullscreen {
				display: none;
			}
		}
	}

	/* Thumbnails below the carousel */
	.thumbnails {
		/* display: grid; */
		/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: center;

		a {
			display: block;
			flex: 1;
			max-width: 11%;

			img {
				aspect-ratio: var(--image-aspect-ratio);
				border-radius: var(--border-radius);
				display: block;
				object-fit: cover;
				pointer-events: none;
				transition: box-shadow 0.2s ease-out, transform ease-in-out 0.2s;
				width: 100%;
			}

			&.active {
				&::after {
					border: 3px solid white;
					border-radius: var(--border-radius);
					content: '';
					height: calc(100% - 6px);
					left: 0;
					pointer-events: none;
					position: absolute;
					top: 0;
					transition: transform ease-in-out 0.2s;
					width: calc(100% - 6px);
				}
			}

			&:hover {
				z-index: 2;

				img {
					box-shadow: 0 20px 30px -10px black;
				}

				img,
				&::before,
				&::after {
					transform: translateY(-4px);
				}
			}

			&.video {
				flex: 1 1 100%;

				&::before {
					background-color: rgb(0 0 0 / 0.5);
					border-radius: 100%;
					color: white;
					content: '▶';
					display: grid;
					height: 40px;
					left: calc(50% - 20px);
					place-content: center;
					position: absolute;
					top: calc(50% - 20px);
					transition: transform ease-in-out 0.2s;
					width: 40px;
					z-index: 1;
				}
			}
		}
	}

	/* Page indicators for navigation */
	.pages {
		align-items: center;
		display: flex;
		gap: 10px;
		justify-content: center;
		margin: 1em 0;

		a {
			align-items: center;
			aspect-ratio: 1;
			border: 1px solid color-mix(in srgb, var(--color-text), transparent 80%);
			border-radius: 2em;
			color: var(--color-text);
			display: flex;
			justify-content: center;
			text-decoration: none;
			width: 2.5em;

			&:hover {
				border-color: var(--color-text);
			}

			&.active {
				background-color: var(--color-text);
				color: var(--color-background);
				cursor: default;
				/* opacity: 0.5; */
			}

			&.prev,
			&.next {
				&::before {
					background-color: var(--color-text);
					content: '';
					display: block;
					height: 100%;
					mask: url('./chevron-left.svg') no-repeat center / 50%;
					width: 100%;
				}
			}

			&.next {
				rotate: 180deg;
			}
		}
	}
}

@media (min-width: 1200px) {
	header {
		position: absolute;
		right: calc(100% + 20px);
		top: 0;

		a {
			width: 100px;
		}
	}

	main {
		padding-top: 20px;
	}
}