/*
 * ===============
 * Home Page
 * ===============
 */



/* -- Project Listing Section (.ongoing & .completed) -- */
.project-listing-section.ongoing {}

.pair-toggle .pair-toggle-button {
	position: relative;
	font-size: 0;
	width: 100%;
}
.pair-toggle .pair-toggle-button label {
	position: relative;
	z-index: 2;
	width: 50%;
	background-color: transparent;
	color: var(--hue-neutral-60);
	transition: var(--transition-speed) var(--transition-ease);
}
.pair-toggle .pair-toggle-button label:hover { filter: none; }
.pair-toggle .pair-toggle-button label:nth-child(1) { color: var(--hue-light); }
.pair-toggle .pair-toggle-button .button-bg {
	position: absolute;
	z-index: 1;
	left: var(--space-25);
	width: calc(50% - var(--space-25));
	transition: var(--transition-speed) var(--transition-ease);
}

.pair-list .pair-content:nth-child(2) { display: none; }

.pair-toggle-input:nth-of-type(2):checked ~ .pair-toggle .pair-toggle-button label:nth-child(1) { color: var(--hue-neutral-60); }
.pair-toggle-input:nth-of-type(2):checked ~ .pair-toggle .pair-toggle-button label:nth-child(2) { color: var(--hue-light); }
.pair-toggle-input:nth-of-type(2):checked ~ .pair-toggle .pair-toggle-button .button-bg { left: 50%; }

.pair-toggle-input:nth-of-type(2):checked ~ .pair-list .pair-content:nth-child(1) { display: none; }
.pair-toggle-input:nth-of-type(2):checked ~ .pair-list .pair-content:nth-child(2) { display: block; }


.project-listing-section.ongoing .projects .project {
	border-bottom: var(--border-width) dashed var(--hue-neutral-20);
}
.project-listing-section.ongoing .projects .project:last-child {
	border-bottom: 0;
}

.project-listing-section.ongoing .project-meta {
	margin-top: var(--space-25);
	line-height: 2;
}
.project-listing-section .project-meta .metadata {
	display: flex;
	align-items: center;
	gap: calc(var(--small)/2);
}

@media( min-width: 500px ) {
	.project-listing-section.ongoing .project-meta {
		margin-top: 0;
		text-align: right;
	}
	.project-listing-section.ongoing .project-meta .metadata {
		flex-direction: row-reverse;
	}
}
@media( min-width: 1000px ) {
	.project-listing-section.ongoing .project-title .name {
		font-size: var(--h3);
	}
	.project-listing-section.ongoing .project-title .heading {
		font-size: var(--h5);
	}
}