#featured-projects, #all-projects {
	h2 {
		color: var(--color-blue);
		font-size: clamp(1.5em, 3vw, 64px);
		margin: 0;
	}

	& article {
		border-radius: 8px;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		cursor: pointer;
		padding: 8px;
		transition: all 0.3s ease;

		&:hover {
			box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		}

		& h3 span {
			color: var(--color-grey);
			font-size: smaller;
		}

		& div > *:last-child div {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 16px;

			& img {
				width: 32px;
			}
		}
	}
}

@media (min-width: 425px) {
	#featured-projects, #all-projects {
		& article div > *:last-child div img {
			width: 48px;
		}
	}
}


/* === Featured Projects === */

#featured-projects {
	display: flex;
	flex-direction: column;
	gap: 32px;

	& article {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;

		&:nth-child(2n) {
			flex-direction: row-reverse;
		}

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

		& > *:first-child {
			aspect-ratio: 16 / 9;
			border-radius: 8px;
			object-fit: contain;
			width: 40%;
		}

		& > div {
			display: flex;
			flex-direction: column;
			justify-content: center;

			& h3 {
				font-size: 2rem;
				margin: 0 0 16px 0;
			}

			& > div * {
				margin-top: 0;
			}
		}
	}
}

@media (max-width: 768px) {
	#featured-projects {
		display: none;
	}
}


/* === All Projects === */

#all-projects {
	& > div:nth-child(1) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 16px 0;

		form {
			user-select: none;
			display: flex;
			gap: 32px;

			fieldset {
				border-radius: 4px;
				margin: 0;

				label {
					border-radius: 4px;
					cursor: pointer;
					display: inline-block;
					padding: 8px;

					&:hover {
						background-color: var(--color-light-grey);
						transition: all 0.2s ease;
					}

					&:has(input:checked) {
						background-color: var(--color-blue);
						color: var(--color-light);
						transition: all 0.2s ease;
					}

					input {
						display: none;
					}
				}
			}
		}
	}

	& > div:nth-child(2) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-gap: 16px;

		& article {
			&:hover {
				transform: scale(1.02);
			}

			h3 {
				margin: 0 0 8px 0;
				text-align: center;
			}

			& > div > *:first-child {
				border-radius: 8px;
				width: 100%;
				object-fit: cover;
				aspect-ratio: 4/3;
			}
		}
	}

	& > div:nth-child(3) {
		margin: 32px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 32px;

		button {
			background-color: var(--color-blue);
			border: none;
			border-radius: 4px;
			color: var(--color-light);
			cursor: pointer;
			padding: 8px;

			&:disabled {
				background-color: var(--color-light-grey);
				cursor: not-allowed;
			}
		}
	}
}

@media (max-width: 768px) {
	#all-projects div:first-child form {
		display: none;
	}
}


/* === Details === */

main > button {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 1;
}

#details {
	position: fixed;
	top: max(5vw, 79px);
	right: 5vw;
	left: 5vw;
	max-height: calc(100vh - max(5vw, 79px) - 5vw);
	background-color: var(--color-light);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 2;

	header {
		border-radius: 10px 10px 0 0;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem;

		h2 {
			margin: 0;

			span {
				color: var(--color-grey);
				font-size: smaller;
			}
		}

		button {
			background: none;
			border: none;
			cursor: pointer;
			margin: 0;
			padding: 0;
		}
	}

	main {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		overflow-y: hidden;
		padding: 1em;
		max-height: calc(100vh - max(5vw, 79px) - 5vw - 3em - 51px);

		section:first-child {
			position: relative;
			margin: 0 auto;
			height: fit-content;
			min-width: 50%;
			max-width: 70%;

			div {
				aspect-ratio: 16 / 9;
				display: flex;
				overflow-x: auto;
				scroll-snap-type: x mandatory;
				scroll-behavior: smooth;
				border-radius: 0.5rem;

				/* Hide scrollbar */
				-ms-overflow-style: none;
				scrollbar-width: none;
				&::-webkit-scrollbar {
					display: none;
				}

				& img, & video {
					flex: 1 0 100%;
					scroll-snap-align: start;
					object-fit: contain;
					object-position: center;
					width: 100%;
					height: calc(100% - 2em);
				}
			}

			nav {
				display: flex;
				column-gap: 1rem;
				position: absolute;
				bottom: 1.25rem;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;

				& button {
					width: 0.6rem;
					height: 0.6rem;
					background-color: var(--color-blue);
					border-radius: 50%;
					box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 8px;
					opacity: 0.75;
					transition: opacity ease 250ms;

					border: none;
					cursor: pointer;
					padding: 0;

					&:hover {
						box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px;
						opacity: 1;
					}
				}
			}
		}

		section:last-child {
			& a {
				color: var(--color-blue);
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}

			& > a {
				display: block;
				margin: 0.5rem 0;

				&:first-of-type {
					margin-top: 2rem;
				}
			}

			& > div {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 0.5rem;
				margin-top: 2rem;

				& > * {
					width: 48px;
				}
			}
		}
	}
}

@media (max-width: 1024px) {
	#details main {
		flex-direction: column;

		& section:first-child {
			max-width: none;

			div {
				aspect-ratio: auto;
			}
		}
	}
}

@media (max-width: 425px) {
	#details main {
		overflow-y: auto;
	}
}