/* Cards come from /css/card.css (the About page look), set over the hero select artwork */
.select-page {
	background-image: url("/img/heroSelect.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left 50%;
	background-attachment: fixed;

	@media (width < 700px) {
		background-position: 0 80%;
	}
}

/* The card fills the height below the menu; the list stretches and the buttons stay on screen */
.select-page .card-column {
	height: var(--content-height);
}

.heroes {
	flex: 1 1 auto;
	min-height: 0;
	/* The button layout below follows the card's width */
	container: heroes / inline-size;
}

/* On wider screens the card sits on the right so the artwork stays visible.
 * Tablets get a wider card so the labelled buttons fit. */
@media (width >= 600px) {
	.select-page .card-column {
		align-self: flex-end;
		width: clamp(320px, 50%, var(--card-width));
	}
}

@media (width >= 1000px) {
	.select-page .card-column {
		width: clamp(320px, 40%, var(--card-width));
	}
}

/* Card heading: sized and centred like the About page card titles, with the help link pinned right */
.heroes__title {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	font-size: 1.5em;
	color: inherit;
	text-wrap: balance;

	.heroes__heading {
		grid-column: 2;
		font-family: inherit;
	}

	.heroes__help {
		grid-column: 3;
		justify-self: end;
	}
}

/* The character list is a bordered panel, like the About page tiles.
 * It takes the card's spare height and scrolls on its own once it's long. */
.card__list {
	flex: 1 1 8rem;
	min-height: 8rem;
	margin: 0;
	padding: var(--spacing-double);
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
	overflow-y: auto;
	border-radius: var(--spacing-double);
	background-color: var(--color-foreground);
	border: 4px solid var(--color-primary);

	.card__item {
		display: flex;
		justify-content: flex-start;
		gap: var(--spacing);

		a {
			color: var(--color-primary);
		}
	}
}

/* Labelled buttons: one row when the card is wide enough, otherwise two even rows
 * (Create and Load on top, then Save, Remove and Party) */
.card__actions {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;

	> .button--root {
		grid-column: span 2;
	}

	> #btnAdd,
	> #btnLoad {
		grid-column: span 3;
	}
}

/* One row when the card is wide enough, and on phones, where the buttons are icon-only */
@container heroes (width >= 560px) {
	.card__actions {
		grid-template-columns: repeat(5, 1fr);

		> .button--root,
		> #btnAdd,
		> #btnLoad {
			grid-column: auto;
		}
	}
}

@media (width < 500px) {
	.card__actions {
		grid-template-columns: repeat(5, 1fr);

		> .button--root,
		> #btnAdd,
		> #btnLoad {
			grid-column: auto;
		}
	}
}

.button--root {
	min-width: 0;
	padding-inline: 0.75rem;
	gap: 0.5rem;
	font-size: inherit;
	white-space: nowrap;

	&.button--danger {
		color: var(--color-danger);
	}

	@media (width < 500px) {
		.button__text {
			display: none;
		}
	}
}

.dialog--monster .card--item{
    display: grid;
    grid-template-areas: "header header" "image data";
    gap: 1rem;
    .card__header{
        grid-area: header;
    }
    .card__photo-container{
        grid-area: image;
        .card__photo{
            height: 100%;
            object-fit: cover;
        }
    }
    .card__description{
        grid-area: data;
    }
}

.dialog--message{
	width: 300px;

	.dialog__content{
		padding: 1rem;
	}

	.dialog__content-text{
		display: flex;
		flex-direction: row;
		gap: var(--spacing);
		text-align: center;
		align-items: center;
		justify-content: center;
	}
}