/* ─── Contact page ─────────────────────────────────────── */

/* Swiss two-column contact: type-led channel rows + form panel, followed by
   a full-bleed dark-themed map band (Google embed re-graded via CSS filter,
   HUD reticle overlay). Form posts to /enquiry — works without JS via
   mode=html round-trips; js/contact.js upgrades it to fetch + inline
   success. */

.contact											{	max-width: var(--layout-wide); }

/* ── Two-column band: channels | form ─────────────────── */

.contact-grid									{	display: flex; align-items: flex-start;
														gap: clamp(3em, 6vw, 6em);
														margin-bottom: clamp(4em, 8vw, 7em);

	> *											{	min-width: 0; }
}

/* ── Channel rows — hairline list, display values ─────── */

.contact-channels								{	flex: 1 1 45%;

	ul												{

		> li										{	border-top: 1px solid var(--color-rule);
			&:last-child						{	border-bottom: 1px solid var(--color-rule); }
		}

		a											{	display: flex; align-items: baseline; gap: 1.25em;
														padding: 1.15em 0.25em;
														text-decoration: none; color: inherit;
														transition: padding-left var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);

			/* mono channel label */
			> span:first-child				{	flex: 0 0 6.5em;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low);
			}

			/* display value */
			b										{	flex: 1 1 0; min-width: 0;
														font-family: var(--font-display);
														font-size: clamp(1.05rem, 1.9vw, 1.4rem); font-weight: 600;
														line-height: 1.15; letter-spacing: -0.01em;
														overflow-wrap: anywhere;
														transition: color var(--dur-fast) var(--ease-out);
			}

			/* arrow */
			> span:last-child					{	flex: 0 0 auto;
														font-family: var(--font-display);
														color: var(--color-paper-low);
														transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
			}

			&:hover, &:focus-visible		{	padding-left: 0.85em; outline: none;
														background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 65%);
				b									{	color: var(--color-brand); }
				> span:last-child				{	color: var(--color-brand); transform: translateX(0.35em); }
			}
		}
	}
}

/* ── Visit block ──────────────────────────────────────── */

.contact-visit									{	margin-top: 3em;

	.contact-visit-link						{	margin: 1.25em 0 0; font-size: var(--fs-5); }

	address										{	margin: 0 0 1.5em; font-style: normal;
														font-size: var(--fs-4); line-height: 1.6;
														color: var(--color-paper-mute);

		b											{	display: block; margin-bottom: 0.35em;
														font-family: var(--font-display);
														font-size: var(--fs-3); font-weight: 600;
														letter-spacing: -0.01em; color: var(--color-paper);
		}
	}
}

/* ── Form panel ───────────────────────────────────────── */

.contact-form-panel							{	flex: 1 1 55%;
														padding: clamp(1.75em, 3.5vw, 2.5em);
														background: var(--color-ink-0);
														border: 1px solid var(--color-rule);
														border-top: 3px solid var(--color-brand);

	h2												{	margin: 0 0 1.25em;
														font-family: var(--font-display);
														font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500;
														line-height: 1; letter-spacing: var(--track-display);

		b											{	font-weight: inherit; color: var(--color-brand); }
	}
}

.contact-form									{	display: grid; grid-template-columns: 1fr 1fr;
														gap: 1.1em 1.25em;
}

.contact-field									{	display: flex; flex-direction: column; gap: 0.45em;

	> span										{	font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low);

		i											{	font-style: normal; text-transform: none;
														color: var(--color-paper-quiet);
		}
	}

	input, select, textarea					{	padding: 0.75em 0.9em;
														background: var(--color-ink-1);
														border: 1px solid var(--color-rule-strong);
														border-radius: var(--radius-sm);
														color: var(--color-paper); font: inherit;
														transition: border-color var(--dur-fast) var(--ease-out);
		&:focus									{	outline: none; border-color: var(--color-paper); }
	}

	textarea										{	resize: vertical; min-height: 8em; }
}

.contact-field--wide							{	grid-column: 1 / -1; }

.contact-hp										{	position: absolute; left: -10000px; top: auto;
														width: 1px; height: 1px; overflow: hidden;
}

.contact-error									{	grid-column: 1 / -1; margin: 0;
														font-size: var(--fs-5); color: var(--color-brand);
}

.contact-actions								{	grid-column: 1 / -1; margin: 0.25em 0 0; }

/* Success state — replaces the form (server-side via ?sent=1, or swapped
   in live by contact.js) */

.contact-success								{	outline: none;
														animation: contact-success-in 360ms var(--ease-out) both;

	.contact-success-kicker					{	margin: 0 0 1em;
														font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-brand);
	}

	.contact-success-line					{	margin: 0 0 0.5em;
														font-family: var(--font-display);
														font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500;
														line-height: 1; letter-spacing: var(--track-display);

		b											{	font-weight: inherit; color: var(--color-brand); }
	}

	p												{	max-width: 46ch;
														font-size: var(--fs-5); line-height: 1.55;
														color: var(--color-paper-mute);
	}
}

@keyframes contact-success-in				{
	from											{	opacity: 0; translate: 0 14px; }
	to												{	opacity: 1; translate: 0 0; }
}

/* ── Map band — dark-graded embed with HUD framing ────── */

.contact-map									{	padding: clamp(4em, 9vw, 7em) var(--shell-pad);
														background: var(--color-ink-0);

	> header										{	display: flex; align-items: flex-end; justify-content: space-between;
														gap: 2em; flex-wrap: wrap;
														max-width: var(--layout-wide); margin: 0 auto 2.5em;

		h2											{	margin: 0;
														font-family: var(--font-display);
														font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 500;
														line-height: 1; letter-spacing: var(--track-display);

			b										{	font-weight: inherit; color: var(--color-brand); }
		}
	}

	.contact-map-open							{	font-family: var(--font-mono); font-size: 11px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-low); text-decoration: none;
														transition: color var(--dur-fast) var(--ease-out);
		&:hover, &:focus-visible			{	color: var(--color-paper); }
	}

	.contact-map-frame						{	position: relative;
														max-width: var(--layout-wide); margin: 0 auto;
														aspect-ratio: 21 / 9;
														border: 1px solid var(--color-rule-strong);
														overflow: hidden;

		iframe									{	position: absolute; inset: 0;
														width: 100%; height: 100%; border: 0;
														/* Re-grade the stock map into the site's dark palette. */
														filter: grayscale(1) invert(0.92) hue-rotate(180deg) brightness(0.88) contrast(1.12);
		}
	}

	/* HUD reticle pinned over the gym — decorative, clicks pass through */
	.contact-map-reticle						{	position: absolute; top: 50%; left: 50%;
														width: 56px; height: 56px;
														translate: -50% -50%;
														pointer-events: none;
														border: 1px solid var(--color-brand);
														border-radius: 50%;
														box-shadow: 0 0 0 0 var(--color-brand-glow);
														animation: contact-map-pulse 3s var(--ease-out) infinite;

		&::before, &::after					{	content: ""; position: absolute;
														background: var(--color-brand);
		}
		&::before								{	top: 50%; left: -14px; right: -14px; height: 1px; }
		&::after									{	left: 50%; top: -14px; bottom: -14px; width: 1px; }
	}

	.contact-map-mark							{	position: absolute;
														font-family: var(--font-mono); font-size: 14px; line-height: 1;
														color: var(--color-paper-mute);
														pointer-events: none; user-select: none;
	}
	.contact-map-mark--tl					{	top: 0.5em; left: 0.6em; }
	.contact-map-mark--br					{	bottom: 0.5em; right: 0.6em; }

	.contact-map-coords						{	position: absolute; top: 50%; right: 1em;
														translate: 0 -50%;
														writing-mode: vertical-rl;
														font-family: var(--font-mono); font-size: 10px;
														letter-spacing: var(--track-mono); text-transform: uppercase;
														color: var(--color-paper-mute);
														pointer-events: none; user-select: none;
	}
}

@keyframes contact-map-pulse					{
	0%												{	box-shadow: 0 0 0 0 var(--color-brand-glow); }
	60%											{	box-shadow: 0 0 0 22px rgba(245, 12, 51, 0); }
	100%											{	box-shadow: 0 0 0 0 rgba(245, 12, 51, 0); }
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 900px)					{

	.contact-grid									{	flex-direction: column; gap: 3em; }
	.contact-channels,
	.contact-form-panel							{	flex: 1 1 auto; width: 100%; }
	.contact-map .contact-map-frame			{	aspect-ratio: 4 / 3; }
}

@media (max-width: 650px)					{

	.contact-form									{	grid-template-columns: 1fr; }
	.contact-channels ul a						{	flex-wrap: wrap; gap: 0.5em 1em;
		> span:first-child						{	flex: 0 0 auto; }
		> span:last-child							{	margin-left: auto; }
		b												{	flex: 1 1 100%; order: 3; }
	}
}

@media (prefers-reduced-motion: reduce)	{

	.contact-success								{	animation: none; }
	.contact-map .contact-map-reticle		{	animation: none; }
}