/*
 * Store Chooser Gate
 * Front-end styles
 */

:root {
	--scg-bg-top: #40253e;
	--scg-bg-bottom: #241524;
	--scg-cream: #f5f0e8;
	--scg-muted: #c9c0c9;
	--scg-gold: #f0c52a;
	--scg-border: rgba(221, 209, 220, 0.48);
	--scg-border-hover: rgba(245, 240, 232, 0.78);
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

html {
	background: var(--scg-bg-bottom);
}

body.scg-body {
	min-height: 100vh;
	background:
		radial-gradient(circle at 50% 16%, rgba(91, 50, 83, 0.48) 0%, rgba(91, 50, 83, 0) 42%),
		linear-gradient(180deg, var(--scg-bg-top) 0%, var(--scg-bg-bottom) 100%);
	color: var(--scg-cream);
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}

.scg-body *,
.scg-body *::before,
.scg-body *::after {
	box-sizing: inherit;
}

.scg-page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	padding: 64px 32px 76px;
}

.scg-content {
	width: min(1180px, 100%);
	text-align: center;
}

.scg-logo-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 48px;
}

.scg-logo {
	display: block;
	width: min(760px, 76vw);
	height: auto;
	max-height: 205px;
	object-fit: contain;
}

.scg-subtitle {
	margin: 0 0 24px;
	color: var(--scg-gold);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.scg-title {
	margin: 0 0 54px;
	color: var(--scg-cream);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(42px, 4.2vw, 64px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.scg-grid {
	display: flex;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	text-align: left;
}

.scg-card {
	width: min(360px, 100%);
	min-height: 166px;
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-decoration: none;
	color: inherit;
	border: 3px solid var(--scg-border);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.012);
	transition:
		border-color 140ms ease,
		background-color 140ms ease,
		transform 140ms ease;
}

.scg-card:hover,
.scg-card:focus-visible {
	color: inherit;
	border-color: var(--scg-border-hover);
	background: rgba(255, 255, 255, 0.055);
	transform: translateY(-2px);
	outline: none;
}

.scg-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(240, 197, 42, 0.55);
}

.scg-store-name {
	display: block;
	margin-bottom: 28px;
	color: var(--scg-cream);
	font-size: 29px;
	font-weight: 700;
	line-height: 1.15;
}

.scg-store-address {
	display: block;
	color: var(--scg-muted);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.35;
}

@media (max-width: 900px) {
	.scg-page {
		padding: 48px 24px 60px;
	}

	.scg-logo-wrap {
		margin-bottom: 38px;
	}

	.scg-title {
		margin-bottom: 42px;
	}

	.scg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.scg-page {
		padding: 34px 18px 44px;
	}

	.scg-logo {
		width: min(600px, 94vw);
	}

	.scg-subtitle {
		font-size: 12px;
		letter-spacing: 0.18em;
	}

	.scg-title {
		font-size: 38px;
		margin-bottom: 34px;
	}

	.scg-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.scg-card {
		min-height: 140px;
		padding: 29px 25px;
	}

	.scg-store-name {
		font-size: 26px;
		margin-bottom: 21px;
	}

	.scg-store-address {
		font-size: 18px;
	}
}