package layouts

// CenteredCard layout for auth pages (login, register, welcome, authorize)
// Optimized for popup/webview viewports: 360×540 to 480×680
templ CenteredCard(title string) {
	@Base(title) {
		@centeredStyles()
		<wa-page>
			<main class="main-centered">
				<wa-card>
					{ children... }
				</wa-card>
			</main>
		</wa-page>
	}
}

// centeredStyles contains the CSS for the centered card layout
templ centeredStyles() {
	<style>
		.main-centered {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100%;
			padding: var(--wa-space-l);
			box-sizing: border-box;
		}
		.main-centered wa-card {
			width: 100%;
			max-width: 48ch;
		}
		/* Viewport constraints for popup/webview (360-480px width) */
		@media (max-width: 400px) {
			.main-centered {
				padding: var(--wa-space-m);
			}
			.main-centered wa-card {
				max-width: 100%;
			}
		}
	</style>
}