/* ==========================================================================
   Index Page — Homepage
   Requires: reset.css, theme.css
   ========================================================================== */

body {
	background-image: url("../img/home-banner.webp");
	background-size: auto 100vh;
	background-repeat: no-repeat;
	width: 90%;
	margin-inline: auto;
	padding-block: var(--spacing-xl);
	text-align: center;

	& > h1 {
		color: var(--color-primary);
		text-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
		margin-bottom: var(--spacing-xs);
	}

	& > p {
		font-size: 1.5rem;
		margin-bottom: var(--spacing-lg);
		margin-inline: auto;
		color: var(--color-bg);
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	}

	& > h2 {
		margin-bottom: var(--spacing-md);
		color: var(--color-bg);
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	}

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

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

		& > .stat-card {
			background: var(--color-surface);
			border-radius: var(--radius-md);
			padding: var(--spacing-md);
			border: 1px solid var(--color-border);
			border-top: 5px solid var(--color-primary);
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
			text-align: center;

			& .stat-value {
				font-size: 1.5rem;
				color: var(--color-primary);
				margin-bottom: var(--spacing-xs);
			}

			& .stat-label {
				font-size: 0.85rem;
			}

			&:hover {
				border-top: 5px solid var(--color-accent);
				transition: 0.2s;
			}
		}
	}
}

.btn-primary {
	margin-top: var(--spacing-lg);
	box-shadow: 0 8px 32px rgba(255, 255, 255, 0.3);
}