/* ==========================================================================
   Section: Solution 02 — Be Where Customers Are Already Looking
   Depends on solution-01.css for all shared .wb-solution styles.
   This file only adds the flow visual and 02-specific pieces.
   ========================================================================== */

/* Punchy first line under each row heading */

.wb-solution__row-sub {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-heading, #111827);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Flow stage — three channels converge on the website
   -------------------------------------------------------------------------- */

.wb-solution__stage--flow {
	height: 535px;
}

/* Channel cards — compact sources, staggered downward left to right.
   Equal min-height keeps the flow-line exit points predictable. */

.wb-solution__channel {
	width: 170px;
	min-height: 172px;
}

.wb-solution__channel--search  { top: 0;    left: 0; }
.wb-solution__channel--content { top: 24px; left: 195px; }
.wb-solution__channel--ads     { top: 48px; right: 0; }

/* Destination — same website card as Solution 01, centred at the bottom */

.wb-solution--02 .wb-solution__card--destination {
	top: 340px;
	left: 110px;
	width: 340px;
	transition:
		opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.6s ease,
		border-color 0.6s ease;
}

/* Arrival emphasis — almost subconscious: a touch more light and lift.
   No scaling. Hover styles from Solution 01 still win on interaction. */

.wb-solution--02.is-live .wb-solution__card--destination {
	border-color: rgba(73, 106, 249, 0.14);
	box-shadow:
		0 1px 3px rgba(17, 24, 39, 0.05),
		0 18px 44px rgba(17, 24, 39, 0.09);
}

/* Flow lines — thin and light; movement, not decoration */

.wb-solution__flow {
	stroke: rgba(73, 106, 249, 0.28);
	stroke-width: 1.25;
	stroke-dasharray: 340;
	stroke-dashoffset: 340;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.wb-solution--02.is-inview .wb-solution__flow--a { stroke-dashoffset: 0; transition-delay: 0.9s; }
.wb-solution--02.is-inview .wb-solution__flow--b { stroke-dashoffset: 0; transition-delay: 1.1s; }
.wb-solution--02.is-inview .wb-solution__flow--c { stroke-dashoffset: 0; transition-delay: 1.3s; }

/* Directional drift — fine dashes moving toward the destination.
   Slow, quiet, no glow. Starts once assembly completes. */

@keyframes wb-solution-flow-drift {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -32; }
}

.wb-solution--02.is-live .wb-solution__flow {
	stroke-dasharray: 5 11;
	animation: wb-solution-flow-drift 6s linear infinite;
	transition: none;
}

/* Assembly sequence:
   search (0s) -> content (0.3s) -> ads (0.6s)
   -> lines (0.9 / 1.1 / 1.3s) -> website (1.6s) */

.wb-solution--02.is-inview .wb-solution__channel--search  { transition-delay: 0s; }
.wb-solution--02.is-inview .wb-solution__channel--content { transition-delay: 0.3s; }
.wb-solution--02.is-inview .wb-solution__channel--ads     { transition-delay: 0.6s; }
.wb-solution--02.is-inview .wb-solution__card--destination { transition-delay: 1.6s; }

/* Channel card internals — Search: recognizable search result */

.wb-solution__search-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(17, 24, 39, 0.1);
	border-radius: 100px;
	padding: 6px 12px;
}

.wb-solution__search-icon {
	position: relative;
	width: 9px;
	height: 9px;
	border: 1.5px solid rgba(17, 24, 39, 0.3);
	border-radius: 50%;
	flex-shrink: 0;
}

.wb-solution__search-icon::after {
	content: "";
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 5px;
	height: 1.5px;
	background: rgba(17, 24, 39, 0.3);
	transform: rotate(45deg);
}

.wb-solution__search-bar .wb-sk {
	flex: 1;
}

.wb-solution__result {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border-radius: 8px;
}

.wb-solution__result--you {
	background: rgba(73, 106, 249, 0.07);
	border: 1px solid rgba(73, 106, 249, 0.15);
}

.wb-solution__result-url {
	font-size: 10px;
	color: var(--color-text-muted, #6B7280);
}

.wb-solution__result-rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wb-solution__result-rating .wb-solution__stars span {
	width: 10px;
	height: 10px;
}

.wb-solution__result-score {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-heading, #111827);
	font-variant-numeric: tabular-nums;
}

/* Content: recognizable social post */

.wb-solution__post-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wb-solution__post-head .wb-sk {
	flex: 1;
}

.wb-solution__post-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(73, 106, 249, 0.15);
	flex-shrink: 0;
}

.wb-solution__post-follow {
	font-size: 10px;
	font-weight: 600;
	color: var(--color-primary, #496AF9);
	border: 1px solid rgba(73, 106, 249, 0.3);
	border-radius: 100px;
	padding: 2px 9px;
	flex-shrink: 0;
}

.wb-solution__post-media {
	height: 60px;
	border-radius: 8px;
	background: rgba(17, 24, 39, 0.06);
}

.wb-solution__post-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(17, 24, 39, 0.4);
}

.wb-solution__post-actions svg {
	width: 14px;
	height: 14px;
}

.wb-solution__ad-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wb-solution__ad-row .wb-sk {
	flex: 1;
}

.wb-solution__ad-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text-muted, #6B7280);
	border: 1px solid rgba(17, 24, 39, 0.15);
	border-radius: 4px;
	padding: 1px 5px;
	flex-shrink: 0;
}

.wb-solution__ad-cta {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-primary, #496AF9);
	border: 1px solid rgba(73, 106, 249, 0.3);
	border-radius: 100px;
	padding: 5px 12px;
}

/* --------------------------------------------------------------------------
   Responsive — same behaviour as Solution 01
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {

	.wb-solution__stage--flow {
		height: auto;
		max-width: 356px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	/* Phone view shows only the three channels — full width, stacked,
	   sized so all three sit comfortably in one viewport. The website
	   card stays desktop-only. */

	.wb-solution--02 .wb-solution__channel,
	.wb-solution--02 .wb-solution__channel--search,
	.wb-solution--02 .wb-solution__channel--content,
	.wb-solution--02 .wb-solution__channel--ads {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		min-height: 0;
	}

	.wb-solution--02 .wb-solution__card--destination {
		display: none;
	}

	/* Staggered reveal: Search -> Content -> Ads */

	.wb-solution--02.is-inview .wb-solution__channel--search  { transition-delay: 0s; }
	.wb-solution--02.is-inview .wb-solution__channel--content { transition-delay: 0.15s; }
	.wb-solution--02.is-inview .wb-solution__channel--ads     { transition-delay: 0.3s; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wb-solution__flow {
		transition: none !important;
		animation: none !important;
		stroke-dashoffset: 0;
		stroke-dasharray: none;
	}
}

/* Compact phone presentation without changing the composition or overlapping cards. */
/* @media (max-width: 480px) {
	.wb-solution--02 .wb-solution__stage--flow {
		max-width: 320px;
		gap: 14px;
	}

	.wb-solution--02 .wb-solution__channel .wb-solution__card-body {
		padding: 10px 12px 11px;
		gap: 7px;
	}

	.wb-solution--02 .wb-solution__search-bar {
		padding: 5px 10px;
	}

	.wb-solution--02 .wb-solution__result {
		padding: 7px 9px;
		gap: 4px;
	}

	.wb-solution--02 .wb-solution__post-media {
		height: 46px;
	}

	.wb-solution--02 .wb-solution__post-actions {
		gap: 10px;
	}

	.wb-solution--02 .wb-solution__post-actions svg {
		width: 12px;
		height: 12px;
	}

	.wb-solution--02 .wb-solution__ad-cta {
		padding: 4px 10px;
		font-size: 10px;
	}
} */