@import '../../scss/mixins';

.section {
	background: var(--background-dim);
    border-bottom: 1px solid var(--primary-dark);
}

.container {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.profile {
	display: flex;
	flex-direction: row;
	gap: 2rem;

	img {
		border-radius: 99rem;
	}

	a {
		font-size: .875rem;
		font-weight: 400;
	}
}

.projects {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	row-gap: 1rem;
}

.project {
	display: flex;
	flex-direction: column;
	flex-basis: calc(100% / 2 - 1rem);
	justify-content: space-between;
	gap: 1rem;
	border: 1px solid var(--primary-dark);
	background-color: var(--background-dim2);
	border-radius: 1rem;
	padding: 1rem;
	overflow: hidden;

	&:hover {
		.featuredImage img {
			filter: brightness(var(--brightness-high));
		}	
	}

	.featuredImage {
		margin: -1rem;
		margin-bottom: 0;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	
		.homepage {
			font-size: .8rem;
		}
	}

	.topicsContainer {
		position: relative;
		display: flex;
		flex-direction: row;
		margin-left: -1rem;
		margin-right: -1rem;
		margin-bottom: -1rem;
		padding: 1rem;
		gap: .5rem;
		background: var(--background-dim);

		&:before {
			content: '';
			border-top: 1px solid var(--primary-dark);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.topics {
			margin: auto 0;
			display: flex;
			flex-direction: row;
			gap: 0.35rem;
			align-items: center;
			max-width: fit-content;
			font-size: 0.7rem;
			font-weight: 400;
			font-family: var(--font-accent);
			color: var(--primary-dim);
			padding: 0.125rem 0.5rem;
			border-radius: 99rem;
			border: 1px solid var(--primary-dark);
			background: var(--primary-dark);
		}
	}

	.descriptionContainer {
		display: flex;
		flex-direction: column;
		gap: 1rem;

		.description {
			font-size: .75rem;
			font-family: var(--font-accent);
		}
	}
	
	.details {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		gap: 3rem;

		p {
			line-height: 1;
		}

		.pushedAt {
			flex-grow: 1;
			font-family: var(--font-accent);
			font-size: .6rem;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			line-height: 1;
		}
	}
}

@include media($max: $mobile) {
	.project {
		flex-basis: 100%;

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