/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

.profile .profile-header {
	background: var(--profile-bg);
	border-radius: var(--br);
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

/*
		Link to open media in slide
		should fill entire media wrapper.
	*/

.profile .profile-header a.photoswipe-slide {
		display: inline-block;
		height: 100%;
		width: 100%;
	}

.profile .profile-header a.photoswipe-slide:focus-visible {
			outline: var(--button-focus-outline);
		}

.profile .profile-header .moved-to {
		padding: 1rem;
		text-align: center;
	}

.profile .profile-header .header-image-wrapper {
		position: relative;
		aspect-ratio: 3;
		height: 100%;
		width: 100%;
	}

.profile .profile-header .header-image-wrapper img {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

.profile .profile-header {
	--avatar-size: 8.5rem;
	--name-size: 3rem;
	--username-size: 2rem;
	--overlap: calc(var(--avatar-size) - var(--name-size) - var(--username-size));
}

/* 
		Basic info container has the user's avatar, display- and username, and role
		It's partially overlapped over the header image, by a negative margin-top.
	*/

.profile .profile-header .basic-info {
		position: relative;
		display: grid;
		gap: 0 1rem;
		box-sizing: border-box;
		grid-template-columns: var(--avatar-size) auto 1fr;
		grid-template-rows: var(--overlap) var(--name-size) auto;
		grid-template-areas:
			"avatar . ."
			"avatar namerole namerole"
			"avatar namerole namerole";

		/*
			Margin top to inset profile pic into
			header image, margin sides to inset
			basic info from header wrapper.
		*/
		margin: calc(-1 * var(--overlap)) 1rem 0 1rem;
	}

.profile .profile-header .basic-info .avatar-image-wrapper {
			grid-area: avatar;
			
			border: 0.2rem solid var(--avatar-border);
			border-radius: var(--br);
			
			/*
				Wrapper always same
				size + proportions no
				matter image inside.
			*/
			height: var(--avatar-size);
			width: var(--avatar-size);
		}

/*
				Offset to avoid clashing with
				thick border around avatars.
			*/

.profile .profile-header .basic-info .avatar-image-wrapper a.photoswipe-slide:focus-visible {
				outline-offset: 0.25rem;
			}

.profile .profile-header .basic-info .avatar-image-wrapper .avatar {
				/*
					Fit 100% of the wrapper.
				*/
				height: 100%;
				width: 100%;

				/*
					Normalize non-square images.
				*/
				object-fit: cover;

				/*
					Prevent image extending
					beyond rounded borders.
				*/
				border-radius: var(--br-inner);
			}

.profile .profile-header .basic-info .namerole {
			grid-area: namerole;

			display: grid;
			gap: 0 1rem;
			box-sizing: border-box;
			grid-template-columns: 1fr auto;
			grid-template-rows: var(--name-size) auto;
			grid-template-areas:
				"displayname displayname"
				"username role";
		}

.profile .profile-header .basic-info .namerole .displayname {
				grid-area: displayname;
				line-height: var(--name-size);
				font-size: 1.5rem;
				font-weight: bold;
			}

.profile .profile-header .basic-info .namerole .bot-username-wrapper {
				display: flex;
				gap: 0.5rem;
				grid-area: username;
				align-items: center;
			}

.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
					display: flex;
					gap: 0.25rem;
					align-items: center;
					
					background: var(--bg);
					color: var(--fg);
		
					border-radius: var(--br);
					padding: 0.1rem 0.4rem 0.2rem 0.4rem;
					
					font-variant: small-caps;
					font-weight: bold;

					cursor: default;
				}

.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper .bot-icon {
						/*
							FA icon is weirdly
							aligned so tweak it
						*/
						margin-top: 0.25rem;
					}

.profile .profile-header .basic-info .namerole .bot-username-wrapper .username {
					min-width: 0;
					line-height: var(--username-size);
		
					font-size: 1rem;
					font-weight: bold;
					color: var(--fg-accent);
					-webkit-user-select: all;
					        user-select: all;
				}

.profile .profile-header .basic-info .namerole .role {
				background: var(--bg);
				color: var(--fg);
				border: 0.13rem solid var(--bg);
	
				grid-area: role;
				align-self: center;
				justify-self: start;
				border-radius: var(--br);
				padding: 0.3rem;
				
				line-height: 1.1rem;
				font-size: 0.9rem;
				font-variant: small-caps;
				font-weight: bold;
			}

.profile .profile-header .basic-info .namerole .role.admin {
					color: var(--role-admin);
					border-color: var(--role-admin);
				}

.profile .profile-header .basic-info .namerole .role.moderator {
					color: var(--role-mod);
					border-color: var(--role-mod);
				}

.profile .about-user {
	flex: 35 14rem;
	border-radius: var(--br);
	overflow: hidden;
}

.profile .about-user .col-header {
		margin-bottom: -0.25rem;
	}

.profile .about-user dt {
		font-weight: bold;
	}

.profile .about-user .fields {
		background: var(--profile-bg);
		display: flex;
		flex-direction: column;
		padding: 0 0.5rem;
		padding-top: 0.25rem;
	}

.profile .about-user .fields .field {
			padding: 0.25rem;
			display: flex;
			flex-direction: column;
			border-bottom: 0.1rem solid var(--gray2);
		}

.profile .about-user .fields .field > dt, .profile .about-user .fields .field > dd {
				word-break: break-word;
			}

.profile .about-user .fields .field:first-child {
				border-top: 0.1rem solid var(--gray2);
			}

.profile .about-user .bio {
		background: var(--profile-bg);
		padding: 1rem 0.75rem;
		padding-bottom: 1.25rem;
	}

.profile .about-user .accountstats {
		background: var(--bg-accent);
		padding: 0.75rem;
		
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

.profile .about-user .accountstats .stats-item {
			display: flex;
		}

.profile .about-user .accountstats .stats-item dt {
				width: 7rem;
			}

/*
	RSS icon isn't really part of the profile header exactly,
	but also it sort of is, and we want it styled the same for
	both microblog and gallery view anyway, so include it here.
*/

.rss-icon {
	display: block;
	margin: -0.25rem 0;
}

.rss-icon .fa {
		font-size: 2rem;
		object-fit: contain;
		vertical-align: middle;
		color: var(--orange2);
		/*
			Can't size a single-color background, so we use
			a linear-gradient that's effectively white.
		*/
		background: linear-gradient(to right, var(--white1) 100%, transparent 0) no-repeat center center;
		background-size: 1.2rem 1.4rem;
	}

/* light mode */

@media (prefers-color-scheme: light) {

.rss-icon .fa {
			background: linear-gradient(to right, var(--white) 100%, transparent 0) no-repeat center center;
			background-size: 1.2rem 1.4rem
	}
		}

/*
	Tablet-ish-kinda size.
*/

@media screen and (max-width: 750px) {
		.profile .profile-header .basic-info {
			grid-template-columns: auto 1fr;
			grid-template-rows: var(--avatar-size) var(--name-size) auto;
			grid-template-areas:
				"avatar avatar"
				"namerole namerole"
				"namerole namerole";
		}
			
			/*
				Make display name a bit smaller
				so there's more chance of being
				able to read everything.
			*/
				.profile .profile-header .basic-info .namerole .displayname {
					font-size: 1.2rem;
					line-height: 2rem;
					margin-top: 0.5rem;
				}
}

/*
	Phone-ish-kinda size.
*/

@media screen and (max-width: 500px) {
	.profile
	.profile-header
	.basic-info
	.namerole {
		/*
			Line up in smallest possible
			horizontal space to avoid overflow.
		*/
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

		/*
			Don't hug the right anymore
			(good life advice in general).
		*/
		.profile
	.profile-header
	.basic-info
	.namerole .role {
			align-self: flex-start;
		}

		/*
			Allow this to wrap in case
			of a really skinny screen.
		*/
		.profile
	.profile-header
	.basic-info
	.namerole .bot-username-wrapper {
			flex-wrap: wrap;
		}
}

.page {
	/* 
		Profile page can be a little wider than default
		page, since we're using a side-by-side column view.
	*/
	grid-template-columns: 1fr min(95%, 65rem) 1fr;
}

.profile .column-split {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.profile .statuses-wrapper {
	flex: 65 25rem; 
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0%;
}

.profile .statuses {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.profile .statuses .backnextlinks {
		display: flex;
		justify-content: space-between;
	}

.profile .statuses .backnextlinks .next {
			margin-left: auto;
		}