/* ==========================================================================
   VÝZVA NA REGISTRÁCIU

   Stojí pod feedom, takže musí byť zreteľne oddelená, ale nesmie kričať viac
   než správy nad ňou. Preto rám a tlmené pozadie namiesto plnej farby.
   ========================================================================== */

.sq-join__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sq-space-48);
	align-items: center;
	padding: var(--sq-space-32);
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	background: var(--sq-surface);
}

.sq-join__title {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-h2);
	line-height: 1.1;
	margin-bottom: var(--sq-space-8);
}

.sq-join__lead {
	max-width: 52ch;
	color: var(--sq-text-secondary);
}

.sq-join__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-8) var(--sq-space-24);
	margin: var(--sq-space-16) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--sq-fs-ui);
	color: var(--sq-text-secondary);
}

/* Odrážka je akcentná bodka — plný zoznam by v tomto páse pôsobil ťažko. */
.sq-join__list li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: var(--sq-space-8);
	border-radius: 50%;
	background: var(--sq-accent);
	vertical-align: middle;
}

.sq-join__action {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sq-space-8);
	text-align: center;
}

.sq-join__note {
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
	max-width: 22ch;
}

@media (max-width: 767px) {
	.sq-join__box {
		grid-template-columns: 1fr;
		gap: var(--sq-space-24);
		padding: var(--sq-space-24);
	}

	.sq-join__note {
		max-width: none;
	}
}