/* ======================================================
   START / SUPPORT CARD EXCEPTIONS ONLY
   ====================================================== */
:root {
	--links-card-max: 420px;
	--links-image-height: 220px;
	--links-logo-size: 124px;
	--links-gap: 16px;
}

body.links-page {
	min-height: 100vh;
	padding: 32px 20px 48px;

	display: flex;
	align-items: flex-start;
	justify-content: center;

	background: var(--brand-plum);
}

.links-wrap {
	width: 100%;
	max-width: var(--links-card-max);
	margin: 0 auto;
}

.links-card {
	overflow: visible;
}

.links-hero {
	position: relative;

	height: var(--links-image-height);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	border-bottom: 1px solid color-mix(in srgb, var(--accent-line) 65%, transparent);
	overflow: visible;

	background:
		linear-gradient(rgba(24, 8, 35, 0.28), rgba(24, 8, 35, 0.28)),
		url("../img/event_02.webp") center / cover no-repeat;
}

.support-page .links-hero {
	background:
		linear-gradient(rgba(24, 8, 35, 0.28), rgba(24, 8, 35, 0.28)),
		url("../img/start_01.webp") center / cover no-repeat;
}

.links-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background: linear-gradient(
		to bottom,
		rgba(24, 8, 35, 0.08),
		rgba(24, 8, 35, 0.32)
	);

	pointer-events: none;
}

.links-logo {
	position: absolute;
	left: 50%;
	bottom: calc(var(--links-logo-size) * -0.5);
	z-index: 2;

	width: var(--links-logo-size);
	height: var(--links-logo-size);
	overflow: hidden;

	display: grid;
	place-items: center;

	border: 4px solid var(--accent-line);
	border-radius: 50%;
	background: var(--brand-charcoal);

	transform: translateX(-50%);
}

.links-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.links-body {
	--section-head-gap: 8px;
	padding: calc(var(--links-logo-size) * 0.5 + 28px) 24px 24px;
}

.links-actions {
	display: grid;
	gap: var(--links-gap);
}

.links-actions > * {
	width: 100%;
}

.links-signup {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--main-border);
}

.links-break {
	margin: 22px 0;
}

.links-footer-note {
	margin-top: 18px;
	text-align: center;
}

.support-page .submission-check a {
	color: var(--brand-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (min-width: 721px) {
	body.links-page {
		padding: 42px 24px 56px;
	}
}


/* ======================================================
   SUPPORT / SUBMISSION EXCEPTIONS ONLY
   ====================================================== */
.support-page .submission-fields {
	display: none;
	margin-top: 24px;
}

.support-page .submission-concern-extra {
	display: none;
	margin-top: 16px;
}

.support-page .submission-inline-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px;
	gap: 16px;
}

.support-page .submission-choice-grid,
.support-page .submission-button-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.support-page .submission-textarea {
	width: 100%;
	min-height: 260px;
	resize: vertical;
}

.support-page .submission-textarea-small {
	min-height: 150px;
}

.support-page .submission-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;

	margin-top: 12px;

	font-size: 0.72rem;
	line-height: 1.45;
	text-align: left;
}

.support-page .submission-check-input {
	flex-shrink: 0;
	margin-top: 2px;
}

.support-page .submission-note {
	margin-top: 10px;

	font-size: 0.72rem;
	line-height: 1.45;
	text-align: left;

	opacity: 0.72;
}

.support-page .signature-pad-wrap {
	margin-top: 16px;

	display: grid;
	justify-items: center;
}

.support-page .signature-preview {
	display: none;
	width: 100%;
	margin-top: 14px;
}

.support-page .signature-pad {
	display: block;

	width: 100%;
	max-width: 290px;
	height: 120px;

	border: 1px solid var(--main-border);
	border-radius: var(--radius-m);
	background: var(--brand-white);
}

.support-page .submission-button-grid {
	margin-top: 18px;
}

.support-page .submission-button-grid > *,
.support-page #back-btn {
	width: 100%;
	max-width: none;
}

.support-page #back-btn {
	display: block;
	margin-top: 16px;
}

.support-page .submission-error {
	display: none;

	width: 100%;
	margin: 18px 0 0;
	padding: 14px 16px;

	border: 1px solid rgba(176, 0, 32, 0.75);
	border-radius: var(--radius-m);

	background: rgba(176, 0, 32, 0.16);
	box-shadow:
		0 0 0 1px rgba(176, 0, 32, 0.18),
		0 10px 26px rgba(0, 0, 0, 0.18);

	color: #ffb8c4;

	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.support-page .submission-error[style*="block"] {
	display: block;
}

@media (max-width: 520px) {
	.support-page .submission-choice-grid,
	.support-page .submission-button-grid {
		grid-template-columns: 1fr;
	}
}