/*
 * Virtina child: home page "The B2B Problem" section.
 * Loaded only on template-home-vch.php. Colors come from the tokens in vch-global.css.
 *
 * Desktop (960px and up): the copy, center track, and step index stay pinned to the viewport
 * while six problem cards scroll past on the right. js/vch-problems.js sets
 * --vch-problems-progress (0 to 1) and marks the steps that are reached.
 * Below 960px the section stacks in normal flow and the pinned parts are hidden.
 */

.vch-problems {
	position: relative;
	background: var(--vch-color-surface);
	color: var(--vch-color-text);
}

.vch-problems__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
	margin: 0 auto;
	box-sizing: border-box;
}

/* Pinned layer: sticks to the top of the viewport for the whole scroll range. */
.vch-problems__stage {
	grid-column: 1 / -1;
	grid-row: 1;
	position: sticky;
	top: 0;
	align-self: start;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
	height: min(100vh, 900px);
	min-height: 640px;
}

/* Blurs the problems content as the story video opens behind it. js/vch-problems.js sets --vch-problems-blur. */
.vch-problems__inner {
	filter: blur(var(--vch-problems-blur, 0px));
}

/* Copy */
.vch-problems__copy {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	max-width: 505px;
	padding-top: 130px;
}

.vch-problems__eyebrow {
	margin: 0 0 22px;
	font-family: 'Archivo', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1;
	color: var(--vch-color-accent-rose);
}

.vch-problems__title {
	margin: 0 0 29px;
	font-family: 'Archivo', sans-serif;
	font-weight: 500;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.2;
	color: var(--vch-color-text);
}

.vch-problems__intro {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--vch-color-text-muted);
}

/*
 * Story reveal: the story stage shows only inside an arrow-shaped mask. js/vch-problems.js sets
 * --vch-story-reveal-k on the story section: 1 leaves just the arrow tip, 0 opens the whole stage.
 */
/*
 * At k = 1 the mask is the 64px pink track arrow: its bottom sits at the track's height (capped at 900px)
 * and its tip hangs 28px below, the same as the pink fill. As k goes to 0 the sides spread out and the
 * bottom moves down to the full stage.
 */
.vch-story__stage {
	--vch-story-mask-h: min(100vh, 900px);
	clip-path: polygon(
		calc(var(--vch-story-reveal-k, 0) * (50% - 32px)) 0,
		calc(100% - var(--vch-story-reveal-k, 0) * (50% - 32px)) 0,
		calc(100% - var(--vch-story-reveal-k, 0) * (50% - 32px)) calc(var(--vch-story-mask-h) + (1 - var(--vch-story-reveal-k, 0)) * (100vh - var(--vch-story-mask-h))),
		50% calc(var(--vch-story-mask-h) + (1 - var(--vch-story-reveal-k, 0)) * (100vh - var(--vch-story-mask-h)) + var(--vch-story-reveal-k, 0) * 28px),
		calc(var(--vch-story-reveal-k, 0) * (50% - 32px)) calc(var(--vch-story-mask-h) + (1 - var(--vch-story-reveal-k, 0)) * (100vh - var(--vch-story-mask-h)))
	);
}

/* Center track: a gray bar with a rose fill that grows with scroll and ends in an arrow tip. */
.vch-problems__track {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	align-self: stretch;
	background: linear-gradient(to bottom, var(--vch-color-surface) 0%, var(--vch-color-track) 40%);
}

.vch-problems__fill {
	opacity: 0;
	transition: opacity 0.3s ease;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* Extends 28px past the progress line so the arrow tip sits below the track and no gray shows beside it. */
	height: calc(var(--vch-problems-progress, 0) * 100% + 28px);
	background: var(--vch-color-tint-rose);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 50% 100%, 0 calc(100% - 28px));
}

/* The rose fill and its arrow tip appear only once the section is pinned (js/vch-problems.js adds the class). */
.vch-problems--pinned .vch-problems__fill {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.vch-problems__fill {
		transition: none;
	}
}

/* Step index: 51px circles at the bottom left. Reached steps turn rose. */
.vch-problems__index {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	display: flex;
	gap: 14px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

.vch-problems__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 51px;
	border-radius: 50%;
	background: var(--vch-color-track);
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1;
	color: var(--vch-color-text);
}

.vch-problems__step--on {
	background: var(--vch-color-tint-rose);
}

/* Cards: scroll on the right. The top and bottom padding gives each card room to reach the pin. */
.vch-problems__cards {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 30px;
	margin: 0;
	/* The bottom padding gives the last card enough scroll distance to reach the active line. */
	padding: 130px 0 calc(min(100vh, 900px) * 0.5);
	list-style: none;
}

.vch-problems__card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 493px;
	min-height: 210px;
	padding: 46px 36px;
	border-radius: 25px;
	background: var(--vch-color-tint-rose);
}

/* Rounded notch on the card's left edge that connects the card to the track. */
.vch-problems__card::before {
	content: '';
	position: absolute;
	top: 79px;
	left: -26px;
	width: 51px;
	height: 51px;
	border-radius: 50%;
	background: var(--vch-color-surface);
}

.vch-problems__card-title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	color: var(--vch-color-text);
}

.vch-problems__card-text {
	margin: 16px 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--vch-color-text);
}

/* 960px to 1279px: the columns are narrow, so add space on both sides of the track. The notch on each
   card sits in that space. */
@media (min-width: 960px) and (max-width: 1279px) {
	.vch-problems__copy {
		padding-right: 48px;
	}

	.vch-problems__cards {
		padding-left: 48px;
	}
}

/* Below 960px: stack in normal flow, no pin, no track, no step index. */
@media (max-width: 959px) {
	.vch-problems__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.vch-problems__stage {
		display: block;
		grid-column: 1;
		grid-row: auto;
		position: static;
		height: auto;
		min-height: 0;
	}

	.vch-problems__copy {
		padding: 80px 0 40px;
	}

	.vch-problems__track,
	.vch-problems__index {
		display: none;
	}

	.vch-story__stage {
		clip-path: none;
	}

	.vch-problems__cards {
		grid-column: 1;
		grid-row: auto;
		align-items: stretch;
		gap: 16px;
		padding: 0 0 80px;
	}

	.vch-problems__card {
		max-width: none;
		min-height: 0;
		padding: 28px 24px;
	}

	.vch-problems__card::before {
		display: none;
	}

	/* Accordion: js/vch-problems-accordion.js turns each title into a button. Without it the cards stay open. */
	.vch-problems__card-title {
		font-size: 18px;
		line-height: 1.4;
	}

	.vch-problems__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	.vch-problems__toggle:focus-visible {
		outline: 2px solid var(--vch-color-text);
		outline-offset: 4px;
	}

	.vch-problems__toggle-icon {
		flex: 0 0 auto;
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.3s ease;
	}

	.vch-problems__card--open .vch-problems__toggle-icon {
		transform: rotate(-135deg);
	}

	.vch-problems__card-body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease;
	}

	.vch-problems__card--open .vch-problems__card-body {
		grid-template-rows: 1fr;
	}

	.vch-problems__card-inner {
		overflow: hidden;
	}

	.vch-problems__card-body .vch-problems__card-text {
		margin-top: 12px;
	}

	@media (prefers-reduced-motion: reduce) {
		.vch-problems__card-body,
		.vch-problems__toggle-icon {
			transition: none;
		}
	}
}