@import url('./reset.css');
@import url('../fonts/inter/style.css');
@import url('./emoji.css');
@import url('./anime.css');
@import url('./var.css');
@import url('./components.css');

.wrapper {
	background-color: var(--color-bg);
	font-family: var(--font-family), system-ui;
}

.layout {
	display: flex;
	flex-direction: column;

	min-height: 100vh;

	.main {
		flex: 1 1 0;
		width: 100%;
	}
}

.header {
	padding: 2rem 0;
	background-color: var(--color-gray-200);
}

.logo {
	--size: 5rem;

	display: inline-grid;
	gap: .5rem 1rem;

	grid-template-areas:
		'avatar name'
		'avatar description';

	.logo__avatar {
		grid-area: avatar;
		overflow: hidden;
		width: var(--size);
		height: var(--size);
		border-radius: 50%;
		outline: 2px solid var(--color-outline);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.logo__name,
	.logo__description {
		color: var(--color-gray-600);
	}

	.logo__name {
		grid-area: name;

		font-size: var(--font-size-md);
		font-weight: var(--font-weight-bold);
	}

	.logo__description {
		grid-area: description;

		opacity: .8;
		font-size: var(--font-size-xs);
	}
}

.main {
	display: grid;
	gap: 4rem;
	align-items: start;
	grid-template-areas:
		"head head"
		"json result";
	;
	grid-template-columns: repeat(2, minmax(300px, 1fr));

	padding-top: 7rem;
	padding-bottom: 7rem;

	@media (max-width: 992px) {
		grid-template-areas:
			"head"
			"json"
			"result"
		;
		grid-template-columns: 1fr;
	}

	.main__head {
		grid-area: head;

		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3rem;
	}

	.main__json {
		grid-area: json;
	}

	.main__result {
		grid-area: result;
	}
}

.cover {
	--size: 16rem;

	overflow: hidden;

	width: var(--size);
	height: var(--size);

	border-radius: 3rem;
	box-shadow: var(--shadow);
	border: 1px solid var(--color-border);
	outline: 1rem solid var(--color-outline);

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.json-card {
	overflow: hidden;
	border-radius: 2rem;
	box-shadow: var(--shadow);
	border: 1px solid var(--color-border);

	.json-card__head {
		display: flex;
		gap: 2rem;
		align-items: center;
		justify-content: space-between;

		padding: 3rem;
		background-color: var(--color-gray-400);

		@media (max-width: 576px) {
			flex-direction: column;
			align-items: start;
			justify-content: stretch;
		}
	}

	.json-card__body {
		position: relative;

		padding: 3rem;
		background-color: var(--color-beige);

		display: flex;
		flex-direction: column;
		gap: 1rem;

		pre,
		textarea {
			width: 100%;
			min-height: 320px;
			max-height: 580px;

			padding: 2rem;
			display: block;
			border-radius: .5rem;
			background-color: var(--color-bg);
			border: 1px solid var(--color-border);

			overscroll-behavior: contain;

			font-family: inherit;
			line-height: 1.5;
			font-size: var(--font-size-xs);
		}

		textarea {
			resize: vertical;

			&:focus {
				outline: 2px solid var(--color-accent);
			}
		}

		pre {
			overflow: auto;
		}
	}

	.json-card__actions {
		display: flex;
		gap: 1rem;
	}

	.json-card__placeholder {
		position: absolute;

		top: 0;
		left: 0;

		width: 100%;
		height: 100%;
	}
}

.placeholder {
	padding: 3rem;
	background-color: var(--color-beige);

	.placeholder__content {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		gap: 2rem;

		width: 100%;
		height: 100%;
		border-radius: .5rem;
		border: 1px solid var(--color-border);
		background-color: var(--color-gray-100);
	}

	.placeholder__paws {
		font-size: var(--font-size-xxl);
	}
}

.footer {
	display: flex;
	justify-content: center;
	padding: 5rem 2rem;

	.footer__content {
		--max-width: 650px;

		padding: 2rem 5rem;
		border-radius: 2rem;
		box-shadow: var(--shadow);
		border: 1px solid var(--color-border);

		display: flex;
		flex-direction: column;
		gap: 0.5rem;

		span {
			text-align: center;
			color: var(--color-gray-600);
			font-size: var(--font-size-sm);

			&:last-child {
				opacity: .7;
				font-size: var(--font-size-xs);
			}
		}
	}
}