/*
 * Home "How we help" (patterns/home-help.php). Values from the old
 * homepage-who-we-help-section.tsx. From lg the section is 100vh plus 50vh
 * per extra slide plus a 60vh tail, and its stage sticks while theme.js
 * (sp-tabs--pinned) steps through the slides; below lg the slides stack, each
 * with a copy of the name list made by assets/js/patterns/home-help.js.
 */
.sp-home-help {
	/* Old usePinnedScrollTabs({ tailVh: 60 }). */
	--sp-pinned-tail: 60;
	position: relative;
	background: var(--wp--preset--color--graphite);
}

/*
 * Service name marker: the old ico_rect.svg shape (11×16 viewBox, contained),
 * 6px before the name. The name's box starts where the old text span did.
 */
.sp-home-help .sp-home-help__tab::before,
.sp-home-help .sp-home-help__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: -16px;
	width: 10px;
	background: currentColor;
}

/* ---------- Phones and tablets: stacked cards ---------- */
.sp-home-help .sp-home-help__nav,
.sp-home-help .sp-home-help__card-nav {
	display: block;
	padding: 40px 16px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black-light);
}
.sp-home-help .sp-home-help__card-nav.is-dark {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}
html.sp-js .sp-home-help .sp-home-help__nav { display: none; }
.sp-home-help .sp-home-help__label.sp-home-help__label {
	margin-bottom: 32px;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--black) 50%, transparent);
}
.sp-home-help .sp-home-help__tabs.sp-home-help__tabs {
	margin-top: auto;
	margin-bottom: 32px;
}
.sp-home-help .sp-home-help__tab,
.sp-home-help .sp-home-help__item {
	position: relative;
	width: fit-content;
	margin: 0 0 12px 16px;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1;
	white-space: pre-line;
	opacity: 0.35;
}
.sp-home-help .sp-home-help__tab::before,
.sp-home-help .sp-home-help__item::before {
	height: 16px;
	clip-path: polygon(4.48px 0.73px, 9.55px 0.73px, 5.06px 15.27px, 0 15.27px);
}
.sp-home-help .sp-home-help__item.is-current {
	font-size: 38px;
	line-height: 0.9;
	font-weight: 600;
	opacity: 1;
}
.sp-home-help .sp-home-help__item.is-current::before { top: 0.25em; }
.sp-home-help .sp-home-help__description {
	max-width: 420px;
	margin-top: auto;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.35;
	color: var(--wp--preset--color--black);
}
.sp-home-help .is-dark .sp-home-help__description { color: var(--wp--preset--color--white); }

.sp-home-help .sp-home-help__slide.wp-block-cover {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 500px;
	min-height: 0;
	padding: 32px;
	overflow: hidden;
	background: var(--wp--preset--color--black-light);
	text-align: center;
}
html.sp-js .sp-home-help .sp-home-help__slides > .sp-tab-panel.sp-home-help__slide:not(.is-active) { display: flex; }
.sp-home-help .sp-home-help__slide > .wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sp-home-help .sp-home-help__slide > .wp-block-cover__background.has-background-dim { opacity: 1; }
.sp-home-help .sp-home-help__slide > .wp-block-cover__inner-container {
	position: relative;
	z-index: 10;
	width: auto;
	color: var(--wp--preset--color--white);
}
.sp-home-help .sp-home-help__headline.sp-home-help__headline {
	max-width: 800px;
	margin: 0 auto 48px;
	font-size: clamp(3rem, 6vw, 4.2rem);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.025em;
}
.sp-home-help .sp-home-help__headline br { display: none; }
.sp-home-help .sp-home-help__text {
	max-width: 500px;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.625;
	text-align: center;
}

/* ---------- lg and up: pinned stage ---------- */
@media (min-width: 1024px) {
	.sp-home-help { height: 310vh; }
	/* 100vh + 50vh per extra slide + 60vh tail, for other slide counts. */
	.sp-home-help:has(.sp-home-help__slides > .sp-tab-panel:only-child) { height: auto; }
	.sp-home-help:has(.sp-home-help__slides > .sp-tab-panel:nth-last-child(2):first-child) { height: 210vh; }
	.sp-home-help:has(.sp-home-help__slides > .sp-tab-panel:nth-last-child(3):first-child) { height: 260vh; }
	.sp-home-help:has(.sp-home-help__slides > .sp-tab-panel:nth-last-child(5):first-child) { height: 360vh; }
	.sp-home-help:has(.sp-home-help__slides > .sp-tab-panel:nth-last-child(6):first-child) { height: 410vh; }

	.sp-home-help .sp-home-help__stage {
		position: sticky;
		top: 0;
		display: grid;
		grid-template-columns: 400px minmax(0, 1fr);
		height: 100svh;
		min-height: 720px;
		overflow: hidden;
	}
	.sp-home-help .sp-home-help__card-nav { display: none; }
	html.sp-js .sp-home-help .sp-home-help__nav,
	.sp-home-help .sp-home-help__nav {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 100px 30px;
		transition: background-color 0.5s, color 0.5s;
	}
	.sp-home-help:has(.sp-home-help__slide--dark.is-active) .sp-home-help__nav {
		background: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--white);
	}
	.sp-home-help:has(.sp-home-help__slide--dark.is-active) .sp-home-help__description {
		color: var(--wp--preset--color--white);
	}
	.sp-home-help .sp-home-help__tab {
		font-size: var(--wp--preset--font-size--body-large);
		line-height: 0.95;
		font-weight: 600;
		text-align: left;
		/* The old button was at least as tall as the 19px marker, text centred. */
		margin-block: calc((19px - 0.95em) / 2) calc(12px + (19px - 0.95em) / 2);
		transition: font-size 0.4s ease-out, opacity 0.4s ease-out;
		will-change: font-size, opacity;
	}
	.sp-home-help .sp-home-help__tab::before {
		top: 50%;
		height: 19px;
		transform: translateY(-50%);
		clip-path: polygon(4.48px 2.23px, 9.55px 2.23px, 5.06px 16.77px, 0 16.77px);
	}
	.sp-home-help .sp-home-help__tab:hover { opacity: 0.6; }
	.sp-home-help .sp-home-help__tab.is-active {
		margin-block: 0 12px;
		font-size: 26px;
		line-height: 0.9;
		opacity: 1;
	}
	.sp-home-help .sp-home-help__description { transition: color 0.5s; }

	.sp-home-help .sp-home-help__slides {
		position: relative;
		height: 100%;
		overflow: hidden;
		background: var(--wp--preset--color--black-light);
	}
	.sp-home-help .sp-home-help__slides::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		z-index: 20;
		width: 1px;
		background: color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
	}
	.sp-home-help .sp-home-help__slide.wp-block-cover {
		position: absolute;
		inset: 0;
		height: auto;
		padding: 32px 40px;
		background: transparent;
		transition: opacity 0.4s ease-in-out;
	}
	html.sp-js .sp-home-help .sp-home-help__slides > .sp-home-help__slide:not(.is-active) {
		opacity: 0;
		pointer-events: none;
	}
	.sp-home-help .sp-home-help__headline { white-space: pre-line; }
	.sp-home-help .sp-home-help__headline br { display: inline; }
	.sp-home-help .sp-home-help__text { font-size: var(--wp--preset--font-size--large); }
}
@media (min-width: 1280px) {
	.sp-home-help .sp-home-help__stage { grid-template-columns: 600px minmax(0, 1fr); }
	html.sp-js .sp-home-help .sp-home-help__nav,
	.sp-home-help .sp-home-help__nav { padding-inline: 60px; }
	.sp-home-help .sp-home-help__slide.wp-block-cover { padding-inline: 64px; }
}
@media (min-width: 1536px) {
	.sp-home-help .sp-home-help__stage { grid-template-columns: 800px minmax(0, 1fr); }
	.sp-home-help .sp-home-help__tab.is-active { font-size: 48px; }
}

/* Editor: no sticky stage, every slide visible one under another. */
.editor-styles-wrapper .sp-home-help { height: auto; }
.editor-styles-wrapper .sp-home-help .sp-home-help__stage { position: static; height: auto; }
.editor-styles-wrapper .sp-home-help .sp-home-help__slide.wp-block-cover { position: relative; height: 500px; }