/* ==========================================================================
   Scenario Selection Page & Shared Card Styles
   Requires: reset.css, theme.css
   ========================================================================== */

body.scenario-page {
	width: 90%;
	margin-inline: auto;
	padding-block: var(--spacing-lg);

	@media (max-width: 48rem) {
		padding-block: var(--spacing-md);
	}

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

	& > p {
		color: var(--color-text);
		font-size: 1rem;
		margin-bottom: var(--spacing-lg);
		background: var(--color-primary-light);
		border-left: 0.25rem solid var(--color-primary);
		border-radius: var(--radius-sm);
		padding: var(--spacing-sm) var(--spacing-md);
	}

	& > .scenario-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-md);
		margin-top: var(--spacing-md);

		@media (max-width: 48rem) {
			grid-template-columns: 1fr;
		}
	}
}

/* --- Shared Scenario Card Styles --- */
.scenario-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;
	gap: var(--spacing-sm);
	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);
	}

	& img {
		width: 3rem;
		height: 3rem;
		object-fit: contain;
	}

	& .scenario-name {
		font-size: 2rem;
		color: var(--scenario-color);
	}

	& .scenario-codes {
		display: flex;
		gap: var(--spacing-xs);
		flex-wrap: wrap;

		& > span {
			background: var(--scenario-bg);
			color: var(--scenario-color);
			font-size: 0.8rem;
			font-weight: 700;
			padding: 0.2rem 0.6rem;
			border-radius: var(--radius-sm);
			border: 1px solid var(--scenario-color);
		}
	}

	& > p {
		font-size: 1rem;
		color: var(--color-text);
		margin-bottom: var(--spacing-xs);
		background: var(--scenario-bg);
		border-left: 0.25rem solid var(--scenario-color);
		border-radius: var(--radius-sm);
		padding: var(--spacing-sm) var(--spacing-md);
	}

	& > div.scenario-stat {
		background: var(--color-primary-light);
		border-radius: var(--radius-sm);
		padding: var(--spacing-xs) var(--spacing-sm);

		& h4 {
			font-size: 0.75rem;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: var(--color-text-muted);
			font-weight: 500;
		}

		& h5 {
			color: var(--color-primary-dark);
			font-size: 1.3rem;
		}
	}

	& > a {
		& .btn-blue {
			width: 100%;
			text-align: center;
		}
	}
}

#s-1 {
	--scenario-color: green;
	--scenario-bg: rgb(238, 255, 238);
}

#s-2 {
	--scenario-color: rgb(177, 128, 22);
	--scenario-bg: rgb(255, 245, 223);
}

#s-3 {
	--scenario-color: rgb(192, 26, 26);
	--scenario-bg: rgb(255, 227, 227);
}