/* ==========================================================================
   Character Selection Page
   Requires: reset.css, theme.css
   ========================================================================== */

body {
	width: 92%;
	margin-inline: auto;
	padding-block: var(--spacing-lg);

	& > h1 {
		margin-bottom: var(--spacing-xs);
	}

	& > .character-grid {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(max(300px, (100% - 2 * var(--spacing-md)) / 3), 1fr)
		);
		gap: var(--spacing-md);
		margin-top: var(--spacing-md);

		& > .character-card {
			background: var(--color-surface);
			border-radius: var(--radius-md);
			border: 0.0625rem solid var(--color-border);
			box-shadow: var(--shadow-card);
			padding: var(--spacing-md);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: var(--spacing-xs);
			transition:
				box-shadow 0.25s ease,
				transform 0.25s ease,
				border-color 0.25s ease;

			&:hover {
				box-shadow: var(--shadow-card-hover);
				transform: translateY(-0.25rem);
				border-color: var(--color-primary);
			}

			& > .badge-populaire {
				background: var(--color-accent-light);
				color: #958016;
				font-size: 0.75rem;
				font-weight: 700;
				padding: 0.25rem 0.75rem;
				border-radius: var(--radius-lg);
				width: fit-content;
				margin-bottom: var(--spacing-xs);
				border: 1px solid var(--color-accent);
			}

			& > .person {
				display: flex;
				gap: var(--spacing-md);
				margin-bottom: var(--spacing-xs);

				& > .icon {
					display: flex;
					flex-direction: column;
					& img {
						margin: var(--spacing-sm);
						margin-bottom: 0;
						width: 7rem;
						height: 7rem;
						object-fit: cover;
					}
					& > a {
						font-size: 0.5rem;
						font-style: italic;
						color: var(--color-accent);
						align-self: center;
					}
				}

				& > .infos {
					& .character-name {
						font-size: 1.5rem;
					}

					& ul {
						& li {
							font-size: 1rem;
							color: var(--color-text-muted);
							margin-bottom: 0.2rem;
						}
						& li.theme {
							font-weight: bold;
						}
					}
				}
			}

			& > a {
				margin: 0, auto;
				width: 100%;
				text-align: center;

				& .btn-yellow {
					width: 100%;
				}
			}
		}
	}
}