/**
 * auth-split.css — geteiltes D15-Layout und Umschalter „Anmelden | Registrieren".
 *
 * Geladen vom Plugin (ndb_auth_enqueue_tabs_assets(), Handle `ndb-auth-split`),
 * zusammen mit assets/js/ndb-auth-tabs.js — auf Anmelden, Registrieren und seit
 * Paket L auf Passwort vergessen (inc/ndb-auth.php). Hier steht nur das
 * LAYOUT. Dachzeile, Titel, Einleitung, Reiter und Felder stehen in auth.css,
 * weil die Profilseite sie ohne Split teilt.
 */

/*
 * Die Panels schalten über das `hidden`-Attribut (Plugin-Markup, Skript).
 * `hidden` verliert gegen jede display-Regel (ARCHITECTURE.md §5b); die
 * Komponente sichert es deshalb selbst ab, statt darauf zu hoffen, dass nie
 * jemand einem Kind ein display gibt.
 */
.ndb-auth-tabs [hidden] {
	display: none;
}

.nebi-auth-page--split {
	background: var(--surface-base);
}

.nebi-auth-split {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 120px;
	background: linear-gradient(to right, var(--surface-base) 0, var(--surface-base) calc(50% + 60px), var(--fill-mint) calc(50% + 60px), var(--fill-mint) 100%);
}

.nebi-auth-intro {
	grid-column: 1;
	grid-row: 1;
	padding: 208px 60px 120px max(40px, calc((100vw - var(--wide-width)) / 2));
}

.nebi-auth-page--login .nebi-auth-intro {
	padding-block-end: 113px;
}

/* Passwort vergessen: kein Umschalter über der Einleitung, also kein Platz
   dafür — oben dieselben 120px wie die Formularspalte. */
.nebi-auth-page--lostpassword .nebi-auth-intro {
	padding-block-start: 120px;
}

.nebi-auth-intro__benefits {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
	line-height: 24px;
}

.nebi-auth-intro__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.nebi-auth-intro__benefits img {
	flex: 0 0 24px;
	inline-size: 24px;
	block-size: 24px;
}

.nebi-auth-split__form {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	min-inline-size: 0;
	padding: 120px max(40px, calc((100vw - var(--wide-width)) / 2)) 120px 60px;
}

.nebi-auth-tabs {
	inline-size: 100%;
}

/* Lage der D15-Leiste über dem Split; Leiste und Reiter selbst: auth.css. */
.ndb-auth-tabs__list,
.nebi-auth-switcher {
	position: absolute;
	z-index: 1;
	inset-block-start: 40px;
	inset-inline-start: max(40px, calc((100vw - var(--wide-width)) / 2));
	flex-wrap: nowrap;
	inline-size: calc(50% - 60px - max(40px, calc((100vw - var(--wide-width)) / 2)));
}

.ndb-auth-tabs__panel {
	inline-size: 100%;
}

@media (width < 1024px) {

	.nebi-auth-split {
		display: flex;
		flex-direction: column;
		background: var(--surface-base);
	}

	.nebi-auth-intro {
		padding: 120px 16px 80px;
	}

	.nebi-auth-page--login .nebi-auth-intro {
		padding-block-end: 80px;
	}

	.nebi-auth-page--register .nebi-auth-intro {
		padding-block-start: 136px;
	}

	.nebi-auth-page--lostpassword .nebi-auth-intro {
		padding-block-start: 80px;
	}

	.nebi-auth-intro__benefits {
		gap: 16px;
		font-size: 16px;
		line-height: 22px;
	}

	.nebi-auth-split__form {
		display: block;
		inline-size: 100%;
		padding: 80px 16px 100px;
		background: var(--fill-mint);
	}

	.ndb-auth-tabs__list,
	.nebi-auth-switcher {
		inset-block-start: 24px;
		inset-inline: 16px;
		inline-size: auto;
	}

	.nebi-auth-page--register .nebi-auth-switcher {
		inset-block-start: 40px;
	}
}