/*
 * Section cards and bordered tiles, the look of the About page.
 * Shared by the About, Monster Tome, Player Select and help pages so they can't drift apart.
 */
:root {
	--card-width: 700px;
	--card-radius: calc(var(--spacing-double) * 2);
	--card-shadow: var(--color-primary) 0.1em 0.1em var(--spacing-double);
}

/* A centred column of cards with a gutter on phones */
.card-column {
	min-height: var(--content-height);
	width: clamp(100px, 100%, var(--card-width));
	box-sizing: border-box;
	padding-inline: var(--spacing-double);
	/* Room between the last card and the footer */
	padding-bottom: calc(var(--spacing-double) * 2);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-double);
}

/* Scoped to the page content so dialogs that reuse .card (monster cards) keep their own look */
.content > .card {
	box-shadow: var(--card-shadow);
	background-color: var(--color-background-offset);
	display: flex;
	flex-direction: column;
	padding: var(--spacing-double);
	gap: var(--spacing-double);
	border-radius: var(--card-radius);

	h2 {
		text-align: center;
	}

	p {
		margin: 0;
	}
}

.tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-double);

	> .tile {
		display: flex;
		flex-direction: column;
		flex: 30%;
		gap: var(--spacing-double);
		border-radius: var(--spacing-double);
		background-color: var(--color-foreground);
		padding: var(--spacing-double);
		border: 4px solid var(--color-primary);

		@media screen and (width <= 480px) {
			flex: 100%;
		}

		.tile__title {
			font-weight: bold;
			font-family: var(--font-title);
			font-size: 1.5rem;
			text-align: center;
			color: var(--color-primary);

			&:visited {
				color: var(--color-primary);
			}
		}
	}
}

/* Page title above the cards */
.card-page-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing);
	padding-inline: var(--spacing-double);
	text-align: center;
}

.content > .card a:not([role=button]) {
	color: var(--color-primary);
}