/* ==========================================================================
   PRIHLÁSENIE

   Jeden stĺpec, žiadny obrázok, žiadna karta. Prihlásenie nie je obsah —
   je to prekážka medzi čitateľom a magazínom, takže má byť čo najkratšia.

   Registrácia zámerne neexistuje ako samostatná obrazovka: účet vznikne
   pri prvom prihlásení. O jednu obrazovku a jeden formulár menej.
   ========================================================================== */

.sq-auth-page {
	max-width: 400px;
	margin-inline: auto;
	padding-block: var(--sq-space-64) var(--sq-space-section);
	text-align: center;
}

.sq-auth-page__mark {
	display: block;
	width: 44px;
	height: 44px;
	margin-inline: auto;
	color: var(--sq-accent);
}

.sq-auth-page__title {
	margin-top: var(--sq-space-24);
	font-size: var(--sq-fs-title);
	line-height: 1.05;
	letter-spacing: var(--sq-track-title);
}

.sq-auth-page__lead {
	margin-top: var(--sq-space-12);
	color: var(--sq-text-secondary);
	line-height: 1.55;
}

/* ---- Poskytovatelia ----------------------------------------------------- */

.sq-auth-page__providers {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
	margin-top: var(--sq-space-32);
}

.sq-provider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sq-space-12);
	height: 48px;
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	font-size: var(--sq-fs-base);
	font-weight: var(--sq-weight-medium);
	color: var(--sq-text);
	transition:
		border-color var(--sq-duration) var(--sq-ease),
		background-color var(--sq-duration) var(--sq-ease);
}

.sq-provider:hover {
	border-color: var(--sq-text-secondary);
	background: var(--sq-elevated);
}

.sq-provider svg {
	width: 18px;
	height: 18px;
}

/* ---- Oddeľovač ---------------------------------------------------------- */

.sq-auth-page__or {
	display: flex;
	align-items: center;
	gap: var(--sq-space-16);
	margin-block: var(--sq-space-24);
	font-size: var(--sq-fs-micro);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-text-tertiary);
}

.sq-auth-page__or::before,
.sq-auth-page__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sq-border);
}

/* ---- E-mail ------------------------------------------------------------- */

.sq-auth-page__form {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
}

.sq-input {
	width: 100%;
	height: 48px;
	padding-inline: var(--sq-space-16);
	background: var(--sq-surface);
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	font: inherit;
	font-size: var(--sq-fs-base);
	color: var(--sq-text);
	text-align: center;
}

.sq-input::placeholder {
	color: var(--sq-text-tertiary);
}

.sq-input:focus {
	outline: none;
	border-color: var(--sq-accent);
}

.sq-auth-page__hint {
	margin-top: var(--sq-space-8);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-tertiary);
	line-height: 1.5;
}

/* ---- Čo účet prinesie ---------------------------------------------------

   Tri vety, prečo sa vôbec prihlasovať. Bez nich je prihlásenie len
   formulár, ktorý si nikto nevypýtal.
   ------------------------------------------------------------------------ */

.sq-auth-page__benefits {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-12);
	margin-top: var(--sq-space-48);
	padding-top: var(--sq-space-24);
	border-top: 1px solid var(--sq-border);
	text-align: left;
}

.sq-auth-page__benefit {
	position: relative;
	padding-left: var(--sq-space-24);
	font-size: var(--sq-fs-ui);
	color: var(--sq-text-secondary);
	line-height: 1.5;
}

.sq-auth-page__benefit::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	background: var(--sq-accent);
	transform: rotate(45deg);
}

.sq-auth-page__legal {
	margin-top: var(--sq-space-32);
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
	line-height: 1.6;
}

.sq-auth-page__legal a {
	color: var(--sq-text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 767px) {
	.sq-auth-page {
		padding-block: var(--sq-space-32) var(--sq-space-section);
	}
}

/* ---- Stavy formulára ---------------------------------------------------- */

.sq-auth-page__error {
	margin-top: var(--sq-space-16);
	padding: var(--sq-space-12);
	border: 1px solid var(--sq-live);
	border-radius: var(--sq-radius);
	font-size: var(--sq-fs-small);
	color: var(--sq-text);
}

/* Po odoslaní je hláška potvrdením, nie drobným textom pod formulárom. */
.sq-auth-page__hint--sent {
	margin-top: var(--sq-space-24);
	padding: var(--sq-space-16);
	border: 1px solid var(--sq-accent);
	border-radius: var(--sq-radius);
	font-size: var(--sq-fs-ui);
	color: var(--sq-text);
}