/* || SECTION */
.section__title {
	display: flex;
	flex-direction: column;
	gap: 12px;
	> div {
		width: 64px;
		height: 2px;
		background-color: var(--text-secondary);
	}
}


/* || PROJECT BANNER */
.banner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex: 100%;
	gap: 24px;
	padding-top: 32px;
	padding-bottom: 128px;
	max-width: 1056px;
	> img {
		width: 48%;
		height: auto;
		align-self: center;
		border-radius: 16px;
	}
}

.banner__trailing {
	display: flex;
	flex-direction: column;
	flex: 100%;
	justify-content: center;
	gap: 20px;
	max-width: 42%;
}

.banner__trailing__app-name {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	> img {
		max-width: 48px;
		max-height: 48px;
		border: 0.5px solid #E2E2E2;
		border-radius: 8px;
	}
	> h1 {
		font-size: 2.25rem;
		line-height: 3rem;
	}
}

.banner__trailing__year {
	display: flex;
	flex-direction: column;
	gap: 0px;
	> h4, p {
		font-size: 1.25rem !important;
		line-height: 2rem !important;
	}
	> p {
		color: var(--text-secondary);
	}
}


/* || PROJECT WRAPPER AND DETAILS */
.wrapper__project {
	display: flex;
	flex-direction: column;
	flex: 100%;
	width: 100%;
	padding: 0px;
}

.project__section {
	padding: 80px 0px;
}

.look-and-feel {
	padding-top: 24px;
	gap: 48px;
}

.project__details {
	display: flex;
	flex-direction: row;
	flex: 100%;
	max-width: var(--content-max-width);
	justify-content: space-between;
	align-items: center;
	margin: 0px auto;
	padding: 0px 64px;
	max-width: calc(var(--content-max-width) + 128px);
}

.project__details__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 47.5%;
}

.project__details__asset {
	display: flex;
	flex: 100%;
	flex-direction: column;
	gap: 12px;
	padding: 0px 40px;
	max-width: calc(40% - 80px);
	min-width: 40%;
	> p {
		cursor: pointer;
		font-size: 0.875rem;
		line-height: 1.25rem;
		color: var(--text-secondary);
		text-decoration: underline;
		text-underline-offset: 0.25rem;
	}
	> img, video {
		max-width: 100%;
		height: auto;
		border-radius: 20px;
		box-shadow: 0px 4px 20px 0px rgba(85, 85, 85, 0.25);
	}
}

/* Dark theme */
.project__section--dark {
	padding: 80px 0px;
	background-color: #303030;
	color: white;
	.project__details__text h2, p {
		color: white;
	}
	.project__details__asset p {
		color: #DEDEDB; /* "Pause video" style */
	}
}

/* Full-width project section */
.full-width {
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	.project__details__text {
		max-width: 62.5%;
	}
	.project__details__asset {
		max-width: 100%;
		padding: 0px;
	}
}

#image--full-width {
	box-shadow: none;
}

.image--padding-bottom {
	padding-bottom: 24px;
}

/* Image and video as assets */
.image-video {
	padding: 0px;
	> div {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;

		> img, video {
			max-width: 47.5%;
			height: auto;
			border-radius: 16px;
			box-shadow: 0px 2px 16px 0px rgba(85, 85, 85, 0.25);
		}
		> img:nth-child(1) {
			margin-top: 48px;
		}
		>img:nth-child(2) {
			margin-bottom: 48px;
		}
		> video {
			margin-bottom: 48px;
		}
	}
}

/* Development section */
.development {
	display: flex;
	flex-direction: row;
	flex: 100%;
	justify-content: space-between;
}

.development__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 62.5%;	
}

.development__icons {
	display: flex;
	flex-direction: row;
	gap: 24px;
}

.development__note {
	display: flex;
	flex-direction: column;
	max-width: 27.5%;
	height: fit-content;
	gap: 8px;
	padding: 16px;
	background-color: #F4EFEA;
	border-radius: 8px;
}

/* List */
.list--points {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style-position: outside;
	list-style-type: square;
	padding-left: 1.25rem;
}


/* || MEDIA QUERIES */

/* Width less than 760px */
@media (width <= 760px) {
	.banner {
		flex-direction: column;
		padding-bottom: 80px;
		> img {
			width: 100%;
		}
	}

	.banner__trailing {
		max-width: 100%;
	}

	/* Project section and details */
	.project__section {
		padding: 48px 0px; /* Decrease spacing between paragraphs */
	}

	.project__details {
		flex-direction: column;
		padding: 0px 64px;
		gap: 48px;
	}

	.project__details__text {
		max-width: 100%;
		padding: 0px 48px;
		order: 1;
	}

	.project__details__asset {
		max-width: 412px;
		padding: 0px 64px;
		order: 2;
	}

	.project__details__asset.image-video {
		max-width: 412px;
		padding: 0px 48px;
	}

	.full-width {
		.project__details__text {
			max-width: 100%;
			padding: 0px 48px;
		}
		.project__details__asset {
			padding: 0px 64px;
		}
	}

	/* Development */
	.development {
		flex-direction: column;
		gap: 20px;
	}

	.development__text {
		max-width: 100%;
	}

	.development__note {
		max-width: 100%;
		gap: 2px;
		padding: 8px;
	}
}

/* Width less than 480px */
@media (width <= 480px) {
	.project__details {
		padding: 0px 24px;
	}

	.project__details__text {
		padding: 0px 48px;
		order: 1;
	}

	.project__details__asset {
		padding: 0px 64px;
	}

	.full-width {
		.project__details__text {
			max-width: 100%;
			padding: 0px 48px;
		}
		.project__details__asset {
			padding: 0px 64px;
		}
	}

	#image--full-width {
		border-radius: 8px !important;
	}

	.development__icons {
		gap: 8px;
		> img {
			scale: 0.75;
		}
	} 
}