/* Lenovo Flows Platform — landing page styles
   Loaded via templates/custom/header.tmpl
   Scoped to .lp-home so it never leaks into other pages. */

/* ============================================================
   Layout chain for the landing page
   ============================================================
   Gitea's body is flex-column with min-height:100vh (core).
   Inside body: <div class="full height"> + <footer>.
   Inside .full.height: navbar + .page-content.lp-home.

   Gitea core gives .full.height only { flex-grow: 1 } — it
   correctly fills body's flex column, but it's a BLOCK container
   internally. So its children (navbar + .lp-home) just stack at
   content height. .lp-home ends at its own content size; below
   that is empty .full.height showing through, until the footer.
   That's the gap above the footer.

   Fix: turn .full.height into a flex column so .lp-home can
   actually flex-grow inside it. We do this unconditionally
   because:
     - other Gitea pages put block content (navbar + page-content)
       inside .full.height with no flex props of their own,
     - block layout and flex-column layout are visually identical
       for non-flex children stacking vertically,
     - so no other page is affected.
   Defensive padding-bottom:0 in case some Gitea version uncomments
   the --page-space-bottom rule we don't want eating our hero. */
.full.height {
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
}

.lp-home {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #ffffff;
	background:
		radial-gradient(circle at 20% 20%, rgba(61, 118, 255, 0.28), transparent 32%),
		radial-gradient(circle at 80% 30%, rgba(114, 92, 255, 0.22), transparent 30%),
		linear-gradient(135deg, #070b16 0%, #0b1020 48%, #101827 100%);
}

/* Gitea core has:
     .page-content > :first-child:not(.secondary-nav) { margin-top: var(--page-spacing); }
   That's specificity (0,3,0). Our override .page-content.lp-home > .lp-hero is
   also (0,3,0) — a tie. Source order *should* let us win since our stylesheet
   loads after Gitea's, but in practice it doesn't always. !important is the
   reliable fix; we keep this single use documented per Gitea's own contribution
   guideline ("Avoid unnecessary !important … add comments to explain why it's
   necessary if it can't be avoided"). */
.lp-home > :first-child {
	margin-top: 0 !important;
}

.lp-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(32px, 5vw, 64px);
	flex: 1 0 auto;
	width: 100%;
	padding: clamp(48px, 7vh, 96px) clamp(24px, 8vw, 120px);
	box-sizing: border-box;
	isolation: isolate;
	overflow: hidden;
}

/* ---------- Background layers ---------- */

.lp-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

.lp-bg-grid {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 82%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 82%);
}

.lp-bg-glow {
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 999px;
	filter: blur(70px);
	opacity: 0.65;
	pointer-events: none;
	z-index: -1;
}

.lp-bg-glow-one {
	left: -120px;
	top: 120px;
	background: #2f6bff;
}

/* bottom value gives the 70px blur halo room so it isn't clipped by overflow:hidden */
.lp-bg-glow-two {
	right: -140px;
	bottom: 140px;
	background: #7c4dff;
}

/* ---------- Hero left column ---------- */

.lp-content {
	position: relative;
	z-index: 1;
	flex: 1 1 560px;
	min-width: 0;
	max-width: 760px;
}

.lp-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
}

.lp-logo {
	width: 72px;
	height: 72px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	box-sizing: border-box;
}

.lp-badge {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	white-space: nowrap;
}

.lp-title {
	margin: 0;
	max-width: 820px;
	color: #ffffff;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.98;
	font-weight: 800;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.lp-subtitle {
	margin: 28px 0 0;
	color: #90c7ff;
	font-size: clamp(24px, 3vw, 42px);
	line-height: 1.12;
	font-weight: 650;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.lp-desc {
	max-width: 680px;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 18px;
	line-height: 1.75;
}

.lp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 40px;
}

/* Buttons: chain .ui.button.lp-button to beat Fomantic UI's specificity (0,3,0 > 0,2,0)
   instead of using !important — this is the project-recommended approach. */
.ui.button.lp-button {
	min-width: 142px;
	padding: 15px 24px;
	border-radius: 14px;
	font-weight: 700;
	box-shadow: 0 20px 48px rgba(47, 107, 255, 0.28);
}

.ui.button.lp-button-ghost {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	box-shadow: none;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.ui.button.lp-button-ghost:hover,
.ui.button.lp-button-ghost:focus {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

/* ---------- Hero right column (preview card) ---------- */

.lp-visual {
	position: relative;
	z-index: 1;
	flex: 0 1 560px;
	width: 100%;
	min-width: 0;
	max-width: 560px;
}

.lp-card {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 28px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow:
		0 40px 100px rgba(0, 0, 0, 0.42),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
	box-sizing: border-box;
}

.lp-card-main {
	padding: 22px;
	transform: perspective(900px) rotateY(-8deg) rotateX(4deg);
	transform-origin: center;
}

.lp-card-header {
	display: flex;
	gap: 8px;
	margin-bottom: 26px;
}

.lp-card-header span {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
}

.lp-flow-title {
	margin-bottom: 22px;
}

.lp-flow-title span {
	display: block;
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.lp-flow-title em {
	display: block;
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
}

.lp-flow {
	display: grid;
	grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
	align-items: center;
	margin-bottom: 24px;
}

/* Renamed from .lp-node + .active/.success to avoid colliding with Fomantic UI states */
.lp-flow-node {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 56px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.74);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	box-sizing: border-box;
}

.lp-flow-node-active {
	background: rgba(47, 107, 255, 0.35);
	color: #ffffff;
	border-color: rgba(144, 199, 255, 0.5);
}

.lp-flow-node-success {
	background: rgba(50, 214, 147, 0.22);
	color: #baf7df;
	border-color: rgba(50, 214, 147, 0.45);
}

.lp-flow-line {
	height: 1px;
	background: linear-gradient(90deg, rgba(144, 199, 255, 0.25), rgba(144, 199, 255, 0.75));
}

.lp-terminal {
	padding: 20px;
	border-radius: 18px;
	background: rgba(3, 7, 18, 0.72);
	color: #e7f0ff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	line-height: 1.9;
	overflow-x: auto;
}

.lp-terminal-muted {
	color: rgba(255, 255, 255, 0.52);
}

.lp-terminal-success {
	color: #6ef0b7;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
	.lp-hero {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 64px 28px 80px;
		gap: 48px;
	}

	.lp-content {
		flex: none;
		max-width: 100%;
	}

	.lp-visual {
		flex: none;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0 auto;
	}

	.lp-card-main {
		transform: none;
	}

	/* Drop the heavy 40+100 shadow on smaller screens — without overflow:hidden on
	   .lp-home it would otherwise visually bleed into the footer area. */
	.lp-card {
		box-shadow:
			0 18px 40px rgba(0, 0, 0, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.18);
	}
}

@media (max-width: 640px) {
	.lp-hero {
		padding: 48px 20px 64px;
	}

	.lp-brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		margin-bottom: 28px;
	}

	.lp-badge {
		max-width: 100%;
		padding-top: 8px;
		padding-bottom: 8px;
		line-height: 1.4;
		white-space: normal;
	}

	.lp-title {
		font-size: clamp(42px, 14vw, 64px);
		letter-spacing: -0.025em;
	}

	.lp-subtitle {
		margin-top: 24px;
		font-size: clamp(24px, 8vw, 34px);
	}

	.lp-desc {
		font-size: 16px;
		line-height: 1.65;
	}

	.lp-actions {
		width: 100%;
	}

	.ui.button.lp-button {
		width: 100%;
	}

	.lp-card-main {
		padding: 18px;
	}

	.lp-flow {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.lp-flow-line {
		width: 1px;
		height: 18px;
		margin: 0 auto;
		background: linear-gradient(180deg, rgba(144, 199, 255, 0.25), rgba(144, 199, 255, 0.75));
	}

	.lp-terminal {
		padding: 16px;
		font-size: 12px;
	}

	.lp-bg-glow {
		width: 300px;
		height: 300px;
		filter: blur(60px);
	}

	.lp-bg-glow-one {
		left: -160px;
		top: 80px;
	}

	.lp-bg-glow-two {
		right: -180px;
		bottom: 180px;
	}
}