/*
 * Home page (content/pages/home.html), built from Claude Design "Lapisoft Home v6"
 * (reference copy in content/design/home-v6/; the hero is still the v4 one).
 * Only what no other page uses: the hero, the job story band, the Home section
 * layouts and the roles network. Cards, gains, questions, gold and closing
 * bands are in ls-components.css. Loaded on the front page and in the editor.
 * Mobile first; most desktop layouts start at 922px (Astra's breakpoint).
 */

/* ---- 1 Hero ------------------------------------------------------------- */
.wp-block-group.ls-home-hero {
	display: grid;
	gap: 24px;
	padding-top: calc(var(--ls-header-height-mobile) + 36px);
	padding-bottom: 22px;
	/* Shapes behind the devices, scaled with the width. The SVG files carry
	 * their own slow animation and stop it for prefers-reduced-motion. */
	background:
		url(../img/shapes/hero-bg-mobile.svg) center bottom / 100% auto no-repeat,
		linear-gradient(var(--ls-color-navy-dark), var(--ls-color-navy) 70%);
	color: var(--ls-color-on-navy);
}
.ls-home-hero__text { display: flex; flex-direction: column; gap: 22px; }
.ls-band.ls-home-hero h1 { color: var(--ls-color-bg); }
.ls-home-hero .ls-actions-row { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 6px; }
.ls-home-hero .ls-actions-row .wp-block-buttons,
.ls-home-hero .ls-actions-row .wp-block-button,
.ls-home-hero .ls-actions-row .wp-block-button__link { width: 100%; }
.ls-home-hero .ls-devices {
	--ls-laptop-w: 92.5%;
	--ls-laptop-x: 4.2%;
	--ls-tablet-w: 44.8%;
	--ls-tablet-x: -1.8%;
	--ls-tablet-y: 33%;
	--ls-phone-w: 25%;
	--ls-phone-x: 73.7%;
	--ls-phone-y: 31.6%;
}

/* ---- 2 Job story: eyebrow, heading, intro and the [job_story] shortcode -- */
.wp-block-group.ls-home-story {
	--ls-c1: 0 280px;
	--ls-c1r: 260px;
	--ls-glow-at: 92% 70%;
	gap: 28px;
	padding-block: clamp(48px, 42.37px + 1.502vw, 64px) clamp(72px, 60.73px + 3.005vw, 104px);
}
.ls-home-story__head,
.ls-home-story__title { display: flex; flex-direction: column; gap: 14px; }
.ls-band.ls-home-story h2 mark { color: var(--ls-color-primary-strong); }
.ls-band .ls-home-story__intro {
	margin-top: 6px;
	padding-left: 16px;
	border-left: 4px solid var(--ls-color-accent);
	font-size: clamp(18px, 17.30px + 0.188vw, 20px);
	font-weight: var(--ls-font-weight-body-bold);
	line-height: 1.5;
	color: var(--ls-color-navy);
}
.ls-home-story__intro strong {
	font-family: var(--ls-font-heading);
	font-weight: var(--ls-font-weight-heading);
	color: var(--ls-color-primary-strong);
}

/* ---- 3 What is inside: nine cards on the strong surface ------------------- */
.wp-block-group.ls-home-features {
	--ls-c1: calc(100% - 60px) 40px;
	--ls-c1r: 260px;
	--ls-c2: 30px calc(100% - 10px);
	--ls-c2r: 230px;
	gap: 32px;
	padding-block: clamp(72px, 60.73px + 3.005vw, 104px) clamp(80px, 68.73px + 3.005vw, 112px);
}
/* Thin curved lines behind the cards */
.ls-home-features::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--ls-color-ring-blue) 32%, transparent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 2100' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='1.00' d='M-40 1520 C 400 1420, 700 900, 1480 420'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.56' d='M-40 1640 C 460 1540, 780 1020, 1480 560'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.81' d='M-40 870 C 320 800, 620 900, 940 830 S 1300 790, 1480 850'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.75' d='M 1000 -30 C 1100 160, 1260 240, 1480 250'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.62' d='M-40 1900 C 200 1880, 380 1700, 460 1480'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.50' d='M 560 2130 C 760 1900, 1100 1860, 1480 1700'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 2100' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='1.00' d='M-40 1520 C 400 1420, 700 900, 1480 420'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.56' d='M-40 1640 C 460 1540, 780 1020, 1480 560'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.81' d='M-40 870 C 320 800, 620 900, 940 830 S 1300 790, 1480 850'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.75' d='M 1000 -30 C 1100 160, 1260 240, 1480 250'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.62' d='M-40 1900 C 200 1880, 380 1700, 460 1480'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='0.50' d='M 560 2130 C 760 1900, 1100 1860, 1480 1700'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}
.ls-home-features__more { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* ---- 4 What changes for the shop: two columns on the light surface --------- */
.wp-block-group.ls-home-gains {
	--ls-c1-solid: 45%;
	--ls-c1: 100% 140px;
	--ls-c1r: 220px;
	--ls-glow-at: 88% 30%;
	--ls-from: var(--ls-color-bg);
	--ls-to: var(--ls-color-tint-bottom);
	--ls-to-at: 100%;
	--ls-dots: auto auto 40px 16px;
	gap: clamp(40px, 34.37px + 1.502vw, 56px);
}

/* ---- 5 AI band: questions in bubbles, logos in pills ----------------------- */
.wp-block-group.ls-home-ai {
	--ls-c1: calc(100% - 60px) 40px;
	--ls-c1r: 260px;
	--ls-c2: 30px calc(100% - 10px);
	--ls-c2r: 230px;
	--ls-dots: auto 16px 24px auto;
}
.ls-home-ai :is(.ls-home-ai__intro, .ls-home-ai__note) { max-width: 560px; }
.ls-home-ai .wp-block-buttons { justify-content: center; }

/* ---- 6 Flat price: gold band (ls-band-gold) with the Lapisoft network ------- */
.ls-home-price .wp-block-buttons { justify-content: center; }
.ls-home-price .wp-block-button { width: 100%; max-width: 340px; }
.ls-home-price .wp-block-button__link { width: 100%; text-wrap: balance; }

/* The network: an SVG with the lines and pulses, the hub, and the roles as a list.
 * Sizes are shares of the drawing's width (cqw); the narrow drawing is the
 * phone layout of the design. */
.ls-net {
	container-type: inline-size;
	width: 100%;
	max-width: 560px;
	margin: 8px auto;
	color: var(--ls-color-navy);
}
.ls-net__map {
	--ls-role: 12.14cqw;
	--ls-hub: 27.14cqw;
	--ls-halo: 34.1cqw;
	--ls-hub-x: 53.57%;
	--ls-hub-y: 47.96%;
	position: relative;
	aspect-ratio: 560 / 490;
	font-family: var(--ls-font-heading);
	font-size: max(13px, 2.68cqw);
	font-weight: var(--ls-font-weight-heading);
	line-height: 1.2;
}
.ls-net__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ls-net__lines--narrow { display: none; }
.ls-net__halo,
.ls-net__hub {
	position: absolute;
	left: var(--ls-hub-x);
	top: var(--ls-hub-y);
	aspect-ratio: 1;
	border-radius: 50%;
	translate: -50% -50%;
}
.ls-net__halo {
	width: var(--ls-halo);
	background: radial-gradient(circle, color-mix(in srgb, var(--ls-color-bg) 55%, transparent), color-mix(in srgb, var(--ls-color-bg) 18%, transparent) 55%, transparent 72%);
	animation: ls-net-halo 7s ease-in-out infinite;
}
.ls-net__hub {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ls-hub);
	background: var(--ls-color-navy);
	box-shadow: 0 0 0 calc(var(--ls-hub) * 0.066) color-mix(in srgb, var(--ls-color-bg) 50%, transparent), 0 24px 48px -16px color-mix(in srgb, var(--ls-color-navy) 55%, transparent);
}
.ls-net__hub svg { width: 47%; height: auto; }
.ls-band .ls-net__roles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ls-band .ls-net__roles li {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: var(--ls-role);
	translate: -50% calc(var(--ls-role) / -2);
	white-space: nowrap;
}
.ls-net__role {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ls-role);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ls-color-bg);
	box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--ls-color-navy) 50%, transparent);
	animation: ls-net-role 28s ease-in-out var(--d) infinite;
}
.ls-net__role svg { width: 44%; height: auto; }
.ls-net__roles li:nth-child(1) { --x: 16.07%; --y: 16.33%; --d: 0s; }
.ls-net__roles li:nth-child(2) { --x: 53.57%; --y: 9.39%; --d: 4s; }
.ls-net__roles li:nth-child(3) { --x: 87.86%; --y: 16.73%; --d: 8s; }
.ls-net__roles li:nth-child(4) { --x: 90.18%; --y: 54.69%; --d: 12s; }
.ls-net__roles li:nth-child(5) { --x: 78.57%; --y: 85.31%; --d: 16s; }
.ls-net__roles li:nth-child(6) { --x: 34.82%; --y: 87.35%; --d: 20s; }
.ls-net__roles li:nth-child(7) { --x: 11.07%; --y: 61.22%; --d: 24s; }
@container (max-width: 479px) {
	.ls-net__map {
		--ls-role: 15.08cqw;
		--ls-hub: 31.28cqw;
		--ls-halo: 39.39cqw;
		--ls-hub-x: 50%;
		--ls-hub-y: 49%;
		aspect-ratio: 358 / 400;
		font-size: max(12px, 3.63cqw);
	}
	.ls-net__lines--wide { display: none; }
	.ls-net__lines--narrow { display: block; }
	.ls-band .ls-net__roles li { gap: 6px; }
	.ls-net__roles li:nth-child(1) { --x: 14.53%; --y: 15.5%; }
	.ls-net__roles li:nth-child(2) { --x: 50%; --y: 8.5%; }
	.ls-net__roles li:nth-child(3) { --x: 84.36%; --y: 15.5%; }
	.ls-net__roles li:nth-child(4) { --x: 83.8%; --y: 53%; }
	.ls-net__roles li:nth-child(5) { --x: 75.98%; --y: 84.5%; }
	.ls-net__roles li:nth-child(6) { --x: 31.28%; --y: 86.5%; }
	.ls-net__roles li:nth-child(7) { --x: 10.61%; --y: 57.5%; }
}
@keyframes ls-net-halo {
	0%, 100% { scale: 1; opacity: 0.55; }
	50% { scale: 1.08; opacity: 0.85; }
}
/* Each role lights up in turn: 7 roles, 4 s apart, in a 28 s loop */
@keyframes ls-net-role {
	0%, 6%, 100% { scale: 1; }
	3% { scale: 1.08; box-shadow: 0 0 0 7px color-mix(in srgb, var(--ls-color-bg) 60%, transparent), 0 16px 32px -14px color-mix(in srgb, var(--ls-color-navy) 50%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.ls-net__halo,
	.ls-net__role { animation: none; }
	.ls-net__pulse { display: none; }
}

/* ==== Desktop ============================================================== */
@media (min-width: 922px) {
	/* 1 Hero */
	.wp-block-group.ls-home-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 40px;
		padding-top: calc(var(--ls-header-height) + 84px);
		padding-bottom: 114px;
	}
	/* The shapes fill the hero height, centered. The two halves behind them
	 * only show at sub-pixel edges; past 2560px the shapes grow instead. */
	.wp-block-group.ls-home-hero {
		background:
			url(../img/shapes/hero-bg-desktop.svg) center top / auto 100% no-repeat,
			linear-gradient(90deg, var(--ls-color-navy-dark) 50%, var(--ls-color-blue-bright) 50%);
	}
	.ls-home-hero__text { gap: 28px; }
	.ls-band.ls-home-hero h1 { text-wrap: balance; }
	.ls-home-hero .ls-text-lg { max-width: 540px; }
	.ls-home-hero .ls-actions-row { flex-direction: row; align-items: center; gap: 32px; margin-top: 8px; }
	.ls-home-hero .ls-actions-row .wp-block-buttons,
	.ls-home-hero .ls-actions-row .wp-block-button,
	.ls-home-hero .ls-actions-row .wp-block-button__link { width: auto; }
	/* The devices run a little past the content edge, as in the design */
	.ls-home-hero .ls-devices {
		margin: 2px calc(var(--ls-gutter) / -4) 0 0;
		--ls-laptop-w: 100%;
		--ls-laptop-x: 0%;
		--ls-tablet-w: 59.4%;
		--ls-tablet-x: -10.6%;
		--ls-tablet-y: 43.75%;
		--ls-phone-w: 25.6%;
		--ls-phone-x: 64%;
		--ls-phone-y: 39%;
	}

	/* 2 Job story: heading left, intro right */
	.wp-block-group.ls-home-story {
		--ls-c1: 30px 490px;
		--ls-c1r: 450px;
		--ls-dots: 40px 64px auto auto;
		gap: 40px;
	}
	.ls-home-story__head {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		column-gap: 32px;
	}
	.ls-home-story__title { gap: 16px; }
	.ls-band .ls-home-story__intro { max-width: 480px; margin: 0 0 6px; padding-left: 20px; }

	/* 3 What is inside */
	.wp-block-group.ls-home-features {
		--ls-c1: calc(100% - 110px) 50px;
		--ls-c1r: 410px;
		--ls-c2: 90px calc(100% - 150px);
		--ls-c2r: 350px;
		--ls-dots: 44px 64px auto auto;
		gap: 48px;
	}
	.ls-home-features__more { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
	.ls-home-features__more p { max-width: 760px; }

	/* 4 What changes for the shop: two columns with a line between */
	.wp-block-group.ls-home-gains {
		--ls-c1: calc(100% - 20px) 260px;
		--ls-c1r: 380px;
		--ls-dots: auto auto 40px 48px;
	}

	/* 5 AI band: text left, the questions right */
	.wp-block-group.ls-home-ai {
		--ls-c1: calc(100% - 110px) 50px;
		--ls-c1r: 410px;
		--ls-c2: 60px calc(100% - 20px);
		--ls-c2r: 320px;
		--ls-dots: auto 64px 44px auto;
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		grid-template-rows: 1fr repeat(6, auto) 1fr;
		column-gap: 11%;
		row-gap: 22px;
	}
	.ls-home-ai > * { grid-column: 1; }
	.ls-home-ai > :nth-child(1) { grid-row: 2; }
	.ls-home-ai > :nth-child(2) { grid-row: 3; }
	.ls-home-ai > :nth-child(3) { grid-row: 4; }
	.ls-home-ai > :nth-child(5) { grid-row: 5; }
	.ls-home-ai > :nth-child(6) { grid-row: 6; }
	.ls-home-ai > :nth-child(7) { grid-row: 7; }
	.ls-band.ls-home-ai > .ls-asks { grid-column: 2; grid-row: 1 / -1; align-self: center; align-items: flex-end; gap: 14px; margin: 0; }
	.ls-home-ai .wp-block-buttons { justify-content: flex-start; }
}

/* Flat price: text left, the network right, once both fit side by side */
@media (min-width: 1200px) {
	.wp-block-group.ls-home-price {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
		grid-template-rows: 1fr repeat(5, auto) 1fr;
		column-gap: 72px;
		row-gap: 22px;
	}
	.ls-home-price > * { grid-column: 1; }
	.ls-home-price > :nth-child(1) { grid-row: 2; }
	.ls-home-price > :nth-child(2) { grid-row: 3; }
	.ls-home-price > :nth-child(4) { grid-row: 4; }
	.ls-home-price > :nth-child(5) { grid-row: 5; }
	.ls-home-price > :nth-child(6) { grid-row: 6; margin-top: 6px; }
	.ls-home-price > .ls-net { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
	.ls-home-price .wp-block-buttons { justify-content: flex-start; }
	.ls-home-price .wp-block-button { width: auto; max-width: none; }
	.ls-home-price .wp-block-button__link { width: auto; }
}

/* Windows wider than the hero drawing (2560 x 880, about 2558.6px wide in the
 * 879.5px hero): it grows to cover the full width */
@media (min-width: 2559px) {
	.wp-block-group.ls-home-hero { background-size: cover; background-position: center bottom; }
}