/*
 * Login / no-access gate of the certification apps ([sghr_apply],
 * [sghr_dashboard], [sghr_review]). Mirrors the sign-in card of the
 * other member tools (e.g. the Stellenmarkt): dashed card, lock icon,
 * centred copy. Reads sghr-theme tokens, with fallbacks for other
 * themes.
 */

/* Full-bleed frame with the same inner box as the page masthead
 * (80rem, section gutter), so the card lines up with the title. */
.sghr-gate-wrap {
	/* !important: the content area's constrained layout forces
	 * `margin: auto !important; max-width: <content size>` on children. */
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(3rem, 2.5rem + 3vw, 5rem);
}

.sghr-gate-wrap > * {
	box-sizing: border-box;
	max-width: 80rem;
	margin-inline: max(var(--sghr-section-pad-x, clamp(1.25rem, 1.5rem + 4vw, 7.5rem)), (100vw - 80rem) / 2);
}

/* Plugin card (no-access state, or sites without sghr-theme). On
 * sghr-theme the login state uses the shared .sghr-signin prompt. */
.sghr-gate:not(.sghr-signin) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 2rem 1.5rem;
	border: 1px dashed var(--wp--preset--color--border-strong, #c9ced5);
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #fff);
	text-align: center;
	color: var(--wp--preset--color--ink-muted, #5a6572);
}

.sghr-gate p {
	margin: 0;
}

.sghr-gate__icon {
	display: inline-flex;
	color: var(--wp--preset--color--ink-muted, #5a6572);
}

.sghr-gate__copy {
	max-width: 36rem;
	font-size: var(--wp--preset--font-size--base, 1rem);
	line-height: 1.6;
}

.sghr-gate__action {
	margin-top: 0.5rem;
}

.sghr-gate__link {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--primary, #2a608f);
	color: var(--wp--preset--color--primary-contrast, #fff);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.sghr-gate__link:hover,
.sghr-gate__link:focus-visible {
	background: var(--wp--preset--color--primary-hover, #234d72);
	color: var(--wp--preset--color--primary-contrast, #fff);
}

.sghr-gate__hint {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.sghr-gate__hint a {
	color: var(--wp--preset--color--primary, #2a608f);
	font-weight: 600;
}