/** General Template Styles **/
.template-about .page-footer {
	margin-top: var(--spacing-tiny);
}

/** Section: Intro **/
.about-intro .center-text {
	p {
		margin-bottom: var(--spacing-base);

		strong {
			all: unset;
			font-weight: bold;
		}
	}
}

.about-intro-content {
	margin-bottom: var(--spacing-large);
}

.about-intro-board-additional {
	margin-top: var(--spacing-large);
}

.about-board-list {
	padding: 0;
	list-style: none;
	text-align: left;
	display: flex;
	gap: var(--spacing-base);
	flex-flow: row wrap;
	justify-content: center;

	li, li strong {
		display: block;
		margin-bottom: var(--spacing-medium);

		svg {
			display: inline-block;
			vertical-align: bottom;
			width: var(--icon-size-small);
			height: var(--icon-size-small);
		}
	}
}

/** Section: History **/
.about-history-intro {
	margin-bottom: var(--spacing-large);
}

.about-history ul {
	--graph-border-color: var(--color-beige-mid);

	display: flex;
	flex-direction: column;
	position: relative;
	list-style: none;
	padding-top: var(--spacing-huge);
	padding-left: 0;

	[data-theme='dark'] & {
		--graph-border-color: var(--color-darkgrey);
	}

	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		left: -50%;
		top: 0;
		border-top-right-radius: 80px;
		border: var(--border-width) solid var(--graph-border-color);
		border-bottom: none;
		border-left: none;
	}

	li {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: center;
		gap: var(--spacing-medium);
		text-align: center;

		@media screen and (width >= 760px) {
			display: grid;
			align-self: flex-start;
			grid-template: min-content 1fr / min-content 1fr;
			gap: 0;
			grid-template-areas:
				'milestone milestone date'
				'description description date';
			width: 50%;
			text-align: right;

			&:nth-child(odd) {
				grid-template-areas:
					'date milestone milestone'
					'date description description';
				align-self: flex-end;
				align-items: flex-start;
				text-align: left;

				.history-marker {
					margin-left: -50%;
					margin-right: 50%;
				}
			}

			&:hover .history-marker {
				transform: scale(1.2);
			}

			.history-marker {
				grid-area: date;
				align-self: flex-start;
				margin-left: 50%;
				margin-right: -50%;
				transition: transform var(--animation-speed-base) var(--animation-easing-base);
			}

			h2 {
				grid-area: milestone;
			}

			.history-description {
				grid-area: description;
			}
		}

		&:not(:last-child) {
			margin-bottom: var(--spacing-base);
		}

		&:last-child {
			text-align: center;
			background-color: var(--theme-background);
			margin-top: var(--spacing-large);
			display: flex;
			flex-direction: column;
			align-items: center;
			align-self: center;
			gap: var(--spacing-medium);

			.history-marker {
				margin: 0;
				align-self: unset;
			}
		}
	}

	h2 {
		margin-bottom: var(--spacing-small);
		background-color: var(--theme-background);
	}

	.history-description {
		background-color: var(--theme-background);
	}

	.history-date {
		border: var(--border-width) solid var(--graph-border-color);
		background-color: var(--theme-input-background);
		border-radius: var(--border-radius);
		padding-inline: var(--spacing-medium);
		font-family: var(--font-family-headings);
		font-weight: 400;
		font-size: var(--font-size-headings);
	}
}

/** Section: Activities **/
.activities-grid {
	margin-top: var(--spacing-large);
	row-gap: var(--spacing-large);
	
	.about-activity-item {
		row-gap: var(--spacing-small);
		align-items: flex-start;

		a.btn {
			margin-top: var(--spacing-medium);
		}
	}

	.activity-icon {
		color: var(--color-yellow);
		margin-bottom: var(--spacing-small);
		
		svg {
			width: var(--icon-size-giga);
			height: var(--icon-size-giga);
		}
	}
}

/** Section: Membership **/
.about-membership-logo {
	width: 18rem;
	margin-top: var(--spacing-large);

	@media screen and (width <= 860px) {
		display: none;
	}
}

.about-membership-content {
	h2:not(:first-of-type) {
		margin-top: var(--spacing-base);
	}

	ul, ol {
		margin-top: var(--spacing-medium);

		li {
			margin-bottom: var(--spacing-medium);
		}
	}
}

/** Section: Interactive Portraits **/
.about-portraits-interactive {
	padding-block: var(--spacing-large);
}

.portraits-interactive-wrapper {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--spacing-large);
	margin-top: var(--spacing-large);
	align-items: start;
}

@media (width <= 768px) {
	.portraits-interactive-wrapper {
		grid-template-columns: 1fr;
		gap: var(--spacing-base);
	}
}

/* Left side: Portrait list */
.portraits-list {
	list-style: none;
	margin: 0;
	padding: 0;
	
	li {
		display: flex;
		margin-bottom: var(--spacing-tiny);

		&:not(.is-active) .member-display-avatar {
			opacity: 0.75;
			transition: opacity var(--animation-speed-base) var(--animation-easing-base);
		}

		&:hover .member-display-avatar {
			opacity: 1;
		}

		&.is-active {
			background: var(--theme-input-background);
    	border-radius: var(--border-radius);
		}

		&.portrait-list-item-join svg {
			color: var(--theme-font-color-base);
		}
	}
}

.portrait-list-button {
	width: 100%;
	cursor: pointer;
	padding: 0;
	background-color: transparent;
	border: none;
	font-weight: 400;
	color: currentcolor;

	&:hover, &:focus {
		transform: none;
		box-shadow: none;
	}

	.is-active & .member-display-info p:first-of-type {
		font-weight: 700;
	}
}

/* Right side: Gallery */
.portraits-gallery-wrapper {
	min-height: 400px;
}

.portrait-gallery-container {
	position: relative;
}

.portrait-gallery-item {
	display: none;
	opacity: 0;
	transition: opacity var(--animation-speed-base) var(--animation-easing-base);
}

.portrait-gallery-item.is-active {
	display: block;
	opacity: 1;
}

.portrait-gallery-empty {
	min-height: 300px;
}

.portrait-gallery-empty-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-small);
	padding: var(--spacing-large);
	color: var(--theme-font-color-muted);
	text-align: center;

	svg {
		width: var(--icon-size-mega);
		height: var(--icon-size-mega);
	}

	p {
		margin: 0;
		font-style: italic;
	}
}

/* Mobile adjustments for portraits */
@media (width <= 768px) {
	.portraits-list {
		order: -1;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.portraits-list-items {
		display: flex;
		gap: var(--spacing-tiny);
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.portrait-list-item {
		flex-shrink: 0;
		width: 30vw;

		.member-display-avatar {
			--avatar-size: 40px;
		}

		&.portrait-list-item-join {
			width: fit-content;
		}
	}
	
	.portrait-list-button {
		flex-direction: column;
		text-align: center;
		padding: var(--spacing-small);
		gap: var(--spacing-tiny);
	}
}

@media (width <= 420px) {
	.portrait-list-item {
		width: 40vw;
	}
}