/*
 * positioning.css — S3, the renewal statement.
 *
 * A 12-column asymmetric split on desktop (statement 1-7, support 8-12) that
 * collapses to a single column, statement first, below 1024px.
 *
 * Two things carry the section, and both are structural rather than decorative:
 * the supporting column DROPS below the headline's opening lines instead of
 * starting level with it (two columns squared off at the same baseline is the
 * template look the client called ordinary), and it hangs from a hairline that
 * begins with a short green tick — the same mark the B4 growth line puts out at
 * each branch, so the section is signed with the site's own motif rather than a
 * new flourish.
 */

.positioning__inner {
	display: grid;
	gap: var(--s-8);
}

.positioning__eyebrow {
	margin: 0;
}

.positioning__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* The hairline the supporting column hangs from, tipped with the growth
   line's green tick. Decorative: it carries no meaning a reader would miss. */
.positioning__support {
	position: relative;
	padding-top: var(--s-6);
	border-top: 1px solid var(--line);
}

.positioning__support::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 28px;
	height: 2px;
	background: var(--koivu);
}

.positioning__support > p {
	margin-bottom: var(--s-6);
}

.positioning__support > p:last-child {
	margin-bottom: 0;
}

.positioning__cta {
	margin: 0;
}

.positioning__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;
	font-weight: 600;
	text-decoration: none;
	color: var(--koivu);
}

.positioning__link:hover {
	color: var(--koivu-dark);
	text-decoration: underline;
	text-underline-offset: 6px;
}

.positioning__arrow {
	transition: transform var(--dur-fast) var(--ease);
}

.positioning__link:hover .positioning__arrow {
	transform: translateX(4px);
}

@media (min-width: 1024px) {
	.positioning__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--s-16);
		row-gap: var(--s-8);
		align-items: start;
	}

	.positioning__eyebrow {
		grid-column: 1 / -1;
	}

	.positioning__statement {
		grid-column: 1 / span 7;
	}

	/*
	 * Both columns start in the same grid row; the offset is what breaks the
	 * squared-off look. Roughly one line of the headline, so the two overlap
	 * instead of the right column falling into a hole of its own.
	 *
	 * The supporting column spans the headline's row AND the link's, so the
	 * link can sit directly under the headline. Without that span the link
	 * would be pushed below the whole right-hand column and leave the left
	 * side empty from the headline down.
	 */
	.positioning__support {
		grid-column: 8 / -1;
		grid-row: 2 / span 2;
		margin-top: var(--s-16);
	}

	.positioning__statement {
		grid-row: 2;
	}

	.positioning__cta {
		grid-column: 1 / span 7;
		grid-row: 3;
		align-self: start;
	}

	.positioning__title {
		font-size: clamp(2.75rem, 4.2vw, 4.25rem);
	}
}