/*
 * Labs Beta page (template: page-labs-beta, patterns: labs-beta-*).
 *
 * Content, colours and type sizes live in the patterns (block attributes + theme.json presets).
 * This file only holds what blocks can't express: decorative layers, the design's 992px layout
 * switch, accordion icons and desktop/mobile visibility. Loaded on the front end for the template
 * and in the editor via add_editor_style().
 */

/* ---------- Page shell ---------- */
.lb-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

/* Stronger glass so the white nav stays legible over the light hero. */
.lb-header .navbar {
	background: rgba(20, 20, 26, 0.85);
}

.lb-page {
	overflow-x: clip;
}

/* ---------- Shared type ---------- */
.lb-eyebrow {
	margin: 0 0 10px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.lb-title {
	margin: 0;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: normal;
}

.lb-lead {
	margin: 0;
	font-weight: 300;
	line-height: 1.4;
}

.lb-title + .lb-lead {
	margin-top: 20px;
}

/* ---------- Section spacing ---------- */
.lb-section {
	padding: 110px 24px;
}

/* ---------- Fold 1: hero ---------- */
.lb-hero {
	position: relative;
	overflow: hidden;
	height: 830px;
	padding: 170px 0 0;
}

.lb-hero::before,
.lb-hero::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	pointer-events: none;
}

/* Soft brand glow behind the headline. */
.lb-hero::before {
	top: 0;
	height: 820px;
	background:
		radial-gradient(ellipse 45% 55% at 30% 15%, color-mix(in srgb, var(--wp--preset--color--purple-accent) 16%, transparent), transparent 70%),
		radial-gradient(ellipse 45% 55% at 72% 25%, color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent), transparent 70%);
}

/* Fades the bottom of the hero into the white page. */
.lb-hero::after {
	bottom: 0;
	height: 296px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--white) 0%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent) 50%,
		color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent) 75%,
		var(--wp--preset--color--white) 100%
	);
}

.lb-hero__inner,
.lb-hero__media {
	position: relative;
	z-index: 2;
}

.lb-hero__inner {
	padding-inline: 24px;
}

.lb-badge {
	width: fit-content;
	margin-block: 0 20px;
	padding: 10px 20px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lb-hero .lb-title + .lb-lead {
	margin-top: 10px;
}

.lb-hero__inner .lb-lead {
	max-width: min(587px, 100%);
}

.lb-cta {
	margin-top: 30px;
}

/* Pill CTA: outlined pill + glowing arrow disc. */
.lb-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 8px 8px 8px 20px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 140px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
}

.lb-btn .wp-block-button__link::after {
	content: "";
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("../images/ui/arrow-right-light.svg") center / 15px 8px no-repeat;
	box-shadow:
		0 0 17px var(--wp--preset--color--accent),
		0 0 8px var(--wp--preset--color--accent);
}

/* Product preview bleeds off the bottom of the hero. */
.lb-hero__media {
	width: min(966px, calc(100% - 48px));
	height: 517px;
	margin: 30px auto 0;
	overflow: hidden;
}

.lb-hero__media .wp-block-image,
.lb-improve__glow .wp-block-image {
	margin: 0;
}

.lb-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ---------- Fold 2: steps ---------- */
.lb-head {
	margin-bottom: 60px;
}

.lb-head .lb-lead {
	max-width: 560px;
}

.lb-steps__grid,
.lb-faq__grid {
	margin: 0;
	gap: 20px;
}

.lb-step-card {
	min-width: 0;
	padding: 34px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 24px;
}

.lb-step-number {
	margin: 0 0 40px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -2px;
	color: transparent;
	background: var(--wp--preset--gradient--violet-rose);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lb-card-title {
	margin: 0 0 14px;
	font-weight: 500;
}

/* ---------- Fold 3: improve ---------- */
.lb-improve {
	position: relative;
	overflow: hidden;
	height: 850px;
	margin-top: 80px;
	padding: 140px 24px;
}

.lb-improve__glow {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: 100%;
	max-width: 1400px;
	transform: translateX(-50%);
	pointer-events: none;
}

.lb-improve__glow img {
	display: block;
	width: 100%;
	height: auto;
}

.lb-improve__inner {
	position: relative;
	z-index: 1;
}

/* ---------- Fold 4: FAQ (native Details blocks) ---------- */
.lb-faq__grid {
	align-items: flex-start;
	gap: 60px;
}

.lb-faq .lb-title {
	margin-bottom: 20px;
}

.lb-faq .lb-title + .lb-lead {
	margin-top: 0;
}

.lb-faq-item {
	margin: 0;
	padding: 30px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.lb-faq-item:first-child {
	padding-top: 0;
}

.lb-faq-item summary {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	list-style: none;
	cursor: pointer;
	color: var(--wp--preset--color--base);
	font-size: 1.25rem;
	font-weight: 400;
}

.lb-faq-item summary::-webkit-details-marker {
	display: none;
}

.lb-faq-item summary::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	margin-top: 2px;
	background: currentColor;
	-webkit-mask: url("../images/ui/faq-plus.svg") center / contain no-repeat;
	mask: url("../images/ui/faq-plus.svg") center / contain no-repeat;
}

.lb-faq-item[open] summary::before {
	-webkit-mask-image: url("../images/ui/faq-minus.svg");
	mask-image: url("../images/ui/faq-minus.svg");
}

.lb-faq-item p {
	margin: 20px 0 0 31px;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.4;
}

/* ---------- Tablet & mobile (design breakpoint: 992px) ---------- */
@media (max-width: 992px) {
	.lb-page .lb-desktop-only {
		display: none !important;
	}

	.lb-section {
		padding: 60px 20px;
	}

	.lb-hero {
		height: 666px;
	}

	.lb-hero__inner {
		padding-inline: 20px;
	}

	.lb-badge,
	.lb-eyebrow {
		font-size: 0.75rem !important;
	}

	.lb-badge {
		letter-spacing: 0.08em;
	}

	.lb-btn .wp-block-button__link {
		font-size: 1rem;
	}

	.lb-btn .wp-block-button__link::after {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
		background-image: url("../images/ui/play-light.svg");
		background-size: 20px 20px;
	}

	.lb-hero__media {
		width: calc(100% - 50px);
		height: 167px;
	}

	.lb-step-number {
		margin-bottom: 24px;
	}

	.lb-improve {
		height: 455px;
		padding: 80px 20px;
	}

	.lb-faq__grid {
		gap: 40px;
	}

	.lb-faq-item summary {
		font-size: 1rem;
	}

	.lb-faq-item p {
		font-size: 0.875rem;
	}

	/* Columns stack at 992px here (core stacks at 782px). */
	.lb-stack-lg {
		flex-wrap: wrap !important;
	}

	.lb-stack-lg > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (min-width: 993px) {
	.lb-page .lb-mobile-only {
		display: none !important;
	}

	.lb-hero__inner .lb-title {
		white-space: nowrap;
	}
}