/**
 * The Problem — docs/sections/THE-PROBLEM.md.
 * Copy, typography sizes and the photo live in Elementor; these rules cover the grid,
 * the pressure-point hover states and the route illustration (GO Route Illustration widget).
 * Breakpoint: 1000 px (homepage standard).
 */

/* ---------- Section shell and framed rows ---------- */

.e-con.go-problem {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

/* Two-cell rows are Elementor grid containers; their columns (4/8 and 6/6, one column below 1000 px) are set in Elementor. */
.e-con.go-problem__intro,
.e-con.go-problem__route {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* ---------- Intro row ---------- */

.go-problem__photo {
	min-height: clamp(260px, 30vw, 420px);
}

.e-con.go-problem__heading {
	--padding-top: clamp(48px, 7vw, 104px);
	--padding-bottom: clamp(48px, 7vw, 104px);
	--padding-left: var(--go-pad-x);
	--padding-right: var(--go-pad-x);
	border-left: 1px solid var(--go-line);
}

/* ---------- Lead-in strip ---------- */

.go-problem__leadin {
	box-sizing: border-box;
	padding: 20px var(--go-pad-x);
}

.go-problem__leadin .elementor-heading-title {
	margin: 0;
}

/* ---------- Pressure points (Elementor Icon List with Media Library SVG icons) ---------- */

.go-pressure .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.go-pressure.elementor-widget .elementor-icon-list-items .elementor-icon-list-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin: 0;
	padding: clamp(24px, 3vw, 36px) var(--go-pad-x);
	background: var(--go-white);
	cursor: default;
}

.go-pressure .elementor-icon-list-item + .elementor-icon-list-item {
	border-left: 1px solid var(--go-line);
}

/*
 * Hover shows only the icon's colour echo (project decision; the design's cell tint and
 * accent bar are not used). Elementor's list-divider ::after is switched off.
 */
.go-pressure.elementor-widget .elementor-icon-list-items .elementor-icon-list-item::after {
	content: none;
}

.go-pressure.elementor-widget .elementor-icon-list-item .elementor-icon-list-icon {
	flex: none;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
}

/* Elementor gives icon-list SVGs a 0.25em right margin, which squeezes the 48 px glyph; reset it. */
.go-pressure.elementor-widget .elementor-icon-list-item .elementor-icon-list-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.go-pressure .elementor-icon-list-item:hover .go-icon__echo {
	fill-opacity: 1;
}

.go-pressure.elementor-widget .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text {
	align-self: flex-start;
	padding: 0;
	color: var(--go-ink);
	font-family: var(--go-font-sans);
	font-size: clamp(22px, 1.9vw, 28px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
}

/* ---------- Route row: gradient panel ---------- */

.e-con.go-problem__panel {
	--padding-top: clamp(48px, 7vw, 104px);
	--padding-bottom: clamp(48px, 7vw, 104px);
	--padding-left: var(--go-pad-x);
	--padding-right: var(--go-pad-x);
}

.go-problem__panel-title .elementor-heading-title {
	text-wrap: balance;
}

.go-problem__panel-text .elementor-heading-title {
	max-width: 30em;
	text-wrap: pretty;
}

/* ---------- Route row: illustration (GO Route Illustration widget) ---------- */

.e-con > .elementor-widget-go-route {
	border-left: 1px solid var(--go-line);
}

.go-route {
	position: relative;
	height: 100%;
	min-height: clamp(340px, 32vw, 440px);
	overflow: hidden;
	background: #fbfbfa;
	isolation: isolate;
}

.go-route__glow {
	position: absolute;
	right: 10%;
	bottom: -35%;
	left: 10%;
	height: 75%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(160, 226, 207, .4) 0%, rgba(160, 226, 207, 0) 70%);
	pointer-events: none;
}

.go-route__grain {
	position: absolute;
	inset: 0;
	background-image: var(--go-grain);
	opacity: .15;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.go-route__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.go-route__dots {
	transition: opacity .3s ease;
}

.go-route__label {
	position: absolute;
	top: clamp(20px, 2.6vw, 32px);
	left: var(--go-pad-x);
}

.go-route__card {
	position: absolute;
	top: 58%;
	left: 50%;
	box-sizing: border-box;
	width: min(46%, 230px);
	aspect-ratio: 1;
	padding: 12px;
	border: 1px solid var(--go-line);
	border-radius: 26px;
	background: #f1f1ee;
	box-shadow: 0 24px 50px -30px rgba(17, 17, 17, .3);
	translate: -50% -50%;
}

/* Inner tile with four 4 px corner squares, 8 px in. */
.go-route__card-inner {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	height: 100%;
	border: 1px solid var(--go-line);
	border-radius: 18px;
	background:
		linear-gradient(#d6d6d6 0 0) 8px 8px / 4px 4px no-repeat,
		linear-gradient(#d6d6d6 0 0) calc(100% - 8px) 8px / 4px 4px no-repeat,
		linear-gradient(#d6d6d6 0 0) 8px calc(100% - 8px) / 4px 4px no-repeat,
		linear-gradient(#d6d6d6 0 0) calc(100% - 8px) calc(100% - 8px) / 4px 4px no-repeat,
		var(--go-white);
}

.go-route__mark {
	display: block;
	width: 48%;
	max-width: 104px;
	height: auto;
}

.go-route__px {
	transform-box: fill-box;
	transform-origin: center;
}

/*
 * The 26 build rects only exist for the entrance animation; at rest the mark is the single
 * .go-route__mark-final path (separate rects leave hairline seams at fractional scales).
 */
.go-route__build {
	visibility: hidden;
}

.go-route.is-armed .go-route__build {
	visibility: visible;
}

.go-route.is-armed .go-route__mark-final {
	opacity: 0;
}

/* Swap to the seamless path once the last pixel lands: 1 s + 25 × 90 ms + 240 ms ≈ 3.5 s. */
.go-route.is-visible .go-route__build {
	animation: go-route-hide 0s linear 3.5s both;
}

.go-route.is-visible .go-route__mark-final {
	animation: go-route-fade 0s linear 3.5s both;
}

@keyframes go-route-hide {
	to { visibility: hidden; }
}

.go-route__pill {
	position: absolute;
	top: 0;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--go-ink);
	color: var(--go-white);
	font-family: var(--go-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	translate: -50% -165%;
}

.go-route__pill::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--go-lime);
}

/*
 * Entrance (plays once). go-motion.js adds .is-armed (hidden start state) and then
 * .is-visible when the row enters the viewport. Without JS, or under reduced motion,
 * neither class is added and the final frame shows.
 */
.go-route.is-armed .go-route__paths,
.go-route.is-armed .go-route__card,
.go-route.is-armed .go-route__pill {
	opacity: 0;
}

.go-route.is-armed .go-route__dots,
.go-route.is-armed .go-route__px {
	opacity: 0;
}

.go-route.is-armed.is-running .go-route__dots {
	opacity: 1;
}

.go-route.is-visible .go-route__paths {
	animation: go-route-fade .8s cubic-bezier(.215, .61, .355, 1) both;
}

.go-route.is-visible .go-route__card {
	animation:
		go-route-fade .6s cubic-bezier(.215, .61, .355, 1) .4s both,
		go-route-pop-card .6s cubic-bezier(.34, 1.56, .64, 1) .4s both;
}

.go-route.is-visible .go-route__pill {
	animation:
		go-route-fade .4s cubic-bezier(.215, .61, .355, 1) 1s both,
		go-route-pop-pill .4s cubic-bezier(.34, 1.56, .64, 1) 1s both;
}

/* The go mark builds pixel by pixel: each slides out from a neighbour (BRAND.md §12). */
.go-route.is-visible .go-route__px {
	animation: go-route-px .24s cubic-bezier(.65, 0, .35, 1) calc(1s + var(--d, 0ms)) both;
}

@keyframes go-route-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes go-route-pop-card {
	from { scale: .85; }
	to { scale: 1; }
}

@keyframes go-route-pop-pill {
	from { scale: .6; }
	to { scale: 1; }
}

@keyframes go-route-px {
	0% {
		opacity: 0;
		transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s0, 1));
	}
	1% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Below 1000 px ---------- */

@media (max-width: 999.98px) {
	.e-con.go-problem__heading {
		border-left: 0;
	}

	.e-con > .elementor-widget-go-route {
		border-left: 0;
		border-top: 1px solid var(--go-line);
	}

	.go-pressure .elementor-icon-list-items {
		grid-template-columns: minmax(0, 1fr);
	}

	.go-pressure.elementor-widget .elementor-icon-list-items .elementor-icon-list-item {
		flex-direction: row;
		align-items: center;
		padding: 18px var(--go-pad-x);
	}

	.go-pressure .elementor-icon-list-item + .elementor-icon-list-item {
		border-left: 0;
		border-top: 1px solid var(--go-line);
	}

	.go-pressure.elementor-widget .elementor-icon-list-item .elementor-icon-list-icon {
		width: 36px;
		height: 36px;
	}

	.go-pressure.elementor-widget .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text {
		align-self: center;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.go-pressure .go-icon__echo {
		transition: none;
	}

	/* SMIL ignores the media query, so the travelling squares are simply not shown. */
	.go-route__dots {
		display: none;
	}
}