/**
 * AscendAI expertise path pages: /ai-strategy-consulting/, /ai-implementation/, /ai-roi/, /scale-with-ai/.
 *
 * Layered on page-homepage.css, which the plugin loads first for the `ascend-expertise-path.php` template. The
 * pages use the homepage shell and body class (`body.ascend-home-template-active`, `main.ascend-home`), so the
 * hero, split, lead, buttons, testimonial and results panel render exactly as on the homepage. This file adds
 * only the components a path page needs that the homepage does not have. Block markup is generated by
 * pages/four-paths/paths.py; run `python3 pages/four-paths/paths.py check` after any edit here.
 *
 * HOUSE RULES (as page-homepage.css):
 *   1. Every selector is anchored at `body.ascend-path-template-active .ascend-home`.
 *   2. Layout containers are written for both Group shapes:
 *      `X > .wp-block-group__inner-container` and
 *      `X:not(:has(> .wp-block-group__inner-container))`.
 *   3. Margin / padding longhands; explicit grid tracks; no `!important`; no motion.
 *   4. Small blue text uses --ascend-home-blue-text (AA on white and --sky) or, on the hero's deeper sky,
 *      --ascend-path-blue-deep; the brand blue is for rules and dots.
 */

body.ascend-path-template-active .ascend-home {
	/* 5.17:1 on the hero's --ascend-home-sky-top (#c4dbed), where #1f6c9e is only 3.98:1. */
	--ascend-path-blue-deep: #195a85;
}

body.ascend-path-template-active .ascend-home .ascend-path-band--sky {
	background: var(--ascend-home-sky);
}

/* Inline links inside running copy (not the arrowed link paragraphs). */
body.ascend-path-template-active .ascend-home p.ascend-path-framing a,
body.ascend-path-template-active .ascend-home .ascend-path-faq-item p a {
	color: var(--ascend-home-blue-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.ascend-path-template-active .ascend-home p.ascend-path-framing a:hover,
body.ascend-path-template-active .ascend-home .ascend-path-faq-item p a:hover {
	color: var(--ascend-home-ink);
}

/* ------------------------------------------------------------------- hero */

/* The keyword line, in the homepage label type, above the headline. */
body.ascend-path-template-active .ascend-home .ascend-home-hero p.ascend-path-eyebrow {
	grid-column: 1 / -1;
	color: var(--ascend-path-blue-deep);
	margin-block-end: 24px;
}

/* One short sentence, so the whole headline takes the homepage's first-sentence weight. */
body.ascend-path-template-active .ascend-home .ascend-home-hero h1 {
	font-weight: 700;
}

/* The homepage's hover blue is below AA on the hero ground; keep the text button's states readable here. */
body.ascend-path-template-active .ascend-home .ascend-home-hero .ascend-home-button--text .wp-block-button__link:hover,
body.ascend-path-template-active .ascend-home .ascend-home-hero .ascend-home-button--text .wp-block-button__link:focus-visible {
	color: var(--ascend-path-blue-deep);
	border-bottom-color: var(--ascend-path-blue-deep);
}

body.ascend-path-template-active .ascend-home .ascend-home-hero .ascend-home-button--text .wp-block-button__link::after {
	color: var(--ascend-path-blue-deep);
}

/* Long labels wrap in balanced lines on phones instead of stranding the arrow. */
body.ascend-path-template-active .ascend-home .ascend-home-button--text {
	text-wrap: balance;
}

/* The hero's photograph ends in a white fade; the first white section need not add a full band of air on top. */
body.ascend-path-template-active .ascend-home .ascend-path-problem {
	padding-block-start: calc(var(--ascend-home-sec) * 0.5);
}

/* ---------------------------------------------------------------- problem */

body.ascend-path-template-active .ascend-home .ascend-home-lead p strong {
	font-weight: 700;
	color: var(--ascend-home-ink);
}

body.ascend-path-template-active .ascend-home .ascend-path-challenges {
	margin-block-start: 72px;
	padding-block-start: 28px;
	border-block-start: 1px solid var(--ascend-home-line);
}

body.ascend-path-template-active .ascend-home .ascend-path-challenges > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
	align-items: baseline;
}

body.ascend-path-template-active .ascend-home .ascend-path-challenges:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
	align-items: baseline;
}

body.ascend-path-template-active .ascend-home .ascend-path-challenges h3 {
	grid-column: 1 / 5;
	color: var(--ascend-home-blue-text);
}

body.ascend-path-template-active .ascend-home ul.ascend-path-dash-list {
	grid-column: 5 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px var(--ascend-home-gap);
}

body.ascend-path-template-active .ascend-home ul.ascend-path-dash-list li {
	position: relative;
	padding-inline-start: 20px;
	font-size: var(--ascend-home-t-body);
	line-height: 1.5;
}

body.ascend-path-template-active .ascend-home ul.ascend-path-dash-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.75em;
	inline-size: 10px;
	block-size: 2px;
	background: var(--ascend-home-blue);
}

body.ascend-path-template-active .ascend-home p.ascend-path-closing-line {
	max-width: 44em;
	margin-block-start: 64px;
	padding-inline-start: 24px;
	border-inline-start: 2px solid var(--ascend-home-blue);
	font-family: var(--ascend-home-display);
	font-size: var(--ascend-home-t-lead);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.012em;
}

/* ------------------------------------------------------------------ cards */

body.ascend-path-template-active .ascend-home .ascend-path-cards {
	margin-block-start: 72px;
}

body.ascend-path-template-active .ascend-home .ascend-path-cards > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ascend-home-gap);
}

body.ascend-path-template-active .ascend-home .ascend-path-cards:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ascend-home-gap);
}

body.ascend-path-template-active .ascend-home .ascend-path-cards--four > .wp-block-group__inner-container {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ascend-path-template-active .ascend-home .ascend-path-cards--four:not(:has(> .wp-block-group__inner-container)) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ascend-path-template-active .ascend-home .ascend-path-card {
	padding-block: 32px;
	padding-inline: 32px;
	border: 1px solid var(--ascend-home-line);
	border-radius: var(--ascend-home-radius);
	background: #fff;
}

body.ascend-path-template-active .ascend-home .ascend-path-band--sky .ascend-path-card {
	border-color: var(--ascend-home-line-sky);
}

body.ascend-path-template-active .ascend-home .ascend-path-card h3,
body.ascend-path-template-active .ascend-home .ascend-path-step h3 {
	margin-block-end: 12px;
}

body.ascend-path-template-active .ascend-home .ascend-path-card p,
body.ascend-path-template-active .ascend-home .ascend-path-step p {
	color: var(--ascend-home-ink-2);
}

/* Business impact: a blue rule above each outcome instead of a box. */
body.ascend-path-template-active .ascend-home .ascend-path-card--rule {
	padding-block: 28px 0;
	padding-inline: 0;
	border: 0;
	border-block-start: 2px solid var(--ascend-home-blue);
	border-radius: 0;
	background: none;
}

/* ------------------------------------------------------------------ steps */

body.ascend-path-template-active .ascend-home .ascend-path-steps {
	margin-block-start: 72px;
	counter-reset: ascend-path-step;
}

body.ascend-path-template-active .ascend-home .ascend-path-steps > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
}

body.ascend-path-template-active .ascend-home .ascend-path-steps:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
}

/* The top rule is the timeline; the dot marks each step on it. */
body.ascend-path-template-active .ascend-home .ascend-path-step {
	position: relative;
	padding-block-start: 32px;
	padding-inline-end: 12px;
	border-block-start: 2px solid var(--ascend-home-line);
	counter-increment: ascend-path-step;
}

body.ascend-path-template-active .ascend-home .ascend-path-step::before {
	content: "";
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: 0;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--ascend-home-blue);
	box-shadow: 0 0 0 4px #fff;
}

body.ascend-path-template-active .ascend-home .ascend-path-band--sky .ascend-path-step {
	border-block-start-color: var(--ascend-home-line-sky);
}

body.ascend-path-template-active .ascend-home .ascend-path-band--sky .ascend-path-step::before {
	box-shadow: 0 0 0 4px var(--ascend-home-sky);
}

body.ascend-path-template-active .ascend-home .ascend-path-step h3::before {
	content: counter(ascend-path-step, decimal-leading-zero);
	display: block;
	margin-block-end: 10px;
	font-size: var(--ascend-home-t-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ascend-home-blue-text);
}

/* ------------------------------------------------------------------ proof */

body.ascend-path-template-active .ascend-home p.ascend-path-framing {
	max-width: 40em;
	margin-block-start: 28px;
	font-family: var(--ascend-home-display);
	font-size: var(--ascend-home-t-lead);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.012em;
}

body.ascend-path-template-active .ascend-home .ascend-path-proof .ascend-home-results {
	margin-block-start: 48px;
}

body.ascend-path-template-active .ascend-home .ascend-path-proof .ascend-home-results-group {
	grid-column: 1 / -1;
}

body.ascend-path-template-active .ascend-home .ascend-path-proof .ascend-home-quote {
	margin-block-start: 48px;
}

body.ascend-path-template-active .ascend-home .ascend-path-proof p.ascend-home-links {
	margin-block-start: 32px;
}

/* ----------------------------------------------------------- what you get */

body.ascend-path-template-active .ascend-home ul.ascend-path-checklist {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	border-block-end: 1px solid var(--ascend-home-line-sky);
}

body.ascend-path-template-active .ascend-home ul.ascend-path-checklist li {
	position: relative;
	padding-block: 18px;
	padding-inline-start: 36px;
	border-block-start: 1px solid var(--ascend-home-line-sky);
	font-family: var(--ascend-home-display);
	font-size: var(--ascend-home-t-body);
	font-weight: 500;
	line-height: 1.45;
}

/* A drawn check: two borders of a rotated box. */
body.ascend-path-template-active .ascend-home ul.ascend-path-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 22px;
	inline-size: 7px;
	block-size: 13px;
	border-inline-end: 2px solid var(--ascend-home-blue-text);
	border-block-end: 2px solid var(--ascend-home-blue-text);
	transform: rotate(45deg);
}

/* ----------------------------------------------------- where to go next */

body.ascend-path-template-active .ascend-home .ascend-path-next {
	margin-block-start: 56px;
}

body.ascend-path-template-active .ascend-home .ascend-path-next > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ascend-home-gap);
}

body.ascend-path-template-active .ascend-home .ascend-path-next:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ascend-home-gap);
}

/* The whole card is the link's target: the link's ::before covers the card; the arrow stays its ::after. */
body.ascend-path-template-active .ascend-home .ascend-path-next-card {
	position: relative;
	padding-block: 28px;
	padding-inline: 32px;
	border: 1px solid var(--ascend-home-line-sky);
	border-radius: var(--ascend-home-radius);
	background: #fff;
}

/* Hover only where a pointer can hover, so a tap on a phone does not leave the card lit. */
@media (hover: hover) {
	body.ascend-path-template-active .ascend-home .ascend-path-next-card:hover {
		border-color: var(--ascend-home-blue);
	}

	body.ascend-path-template-active .ascend-home .ascend-path-next-card h3 a:hover {
		color: var(--ascend-home-blue-text);
	}
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card h3 a {
	color: var(--ascend-home-ink);
	text-decoration: none;
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ascend-home-radius);
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card h3 a::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 10px;
	color: var(--ascend-home-blue-text);
}

/* Keyboard focus: the shared link focus ring, drawn on the link; light on the dark featured card. */
body.ascend-path-template-active .ascend-home .ascend-path-next-card h3 a:focus-visible {
	color: var(--ascend-home-blue-text);
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured h3 a:focus-visible {
	outline-color: #9fcdef;
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card p {
	margin-block-start: 10px;
	color: var(--ascend-home-ink-2);
}

/* The path's productized offer: full width, on the dark ground, ahead of the others. */
body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured {
	grid-column: 1 / -1;
	padding-block: 40px;
	padding-inline: 40px;
	border-color: var(--ascend-home-ink);
	background: var(--ascend-home-ink);
	color: #fff;
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured p.ascend-path-next-kicker {
	margin-block: 0 12px;
	font-family: var(--ascend-home-display);
	font-size: var(--ascend-home-t-small);
	font-weight: 600;
	color: #9fcdef;
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured h3 {
	font-size: var(--ascend-home-t-xl);
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured h3 a,
body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured h3 a:hover,
body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured h3 a:focus-visible {
	color: #fff;
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured h3 a::after {
	color: #9fcdef;
}

body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured p {
	max-width: 44em;
	color: #d6e2ec;
}


/* -------------------------------------------------------------------- faq */

body.ascend-path-template-active .ascend-home .ascend-path-faq > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
	align-items: start;
}

body.ascend-path-template-active .ascend-home .ascend-path-faq:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
	align-items: start;
}

body.ascend-path-template-active .ascend-home .ascend-path-faq h2 {
	grid-column: 1 / 5;
}

body.ascend-path-template-active .ascend-home .ascend-path-faq-list {
	grid-column: 6 / -1;
	border-block-end: 1px solid var(--ascend-home-line);
}

body.ascend-path-template-active .ascend-home .ascend-path-faq-item {
	margin-block: 0;
	border-block-start: 1px solid var(--ascend-home-line);
}

/* Row padding sits on the summary so the whole row is the click target. */
body.ascend-path-template-active .ascend-home .ascend-path-faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding-block: 24px;
	cursor: pointer;
	list-style: none;
	font-family: var(--ascend-home-display);
	font-size: var(--ascend-home-t-body);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ascend-home-ink);
}

body.ascend-path-template-active .ascend-home .ascend-path-faq-item summary::-webkit-details-marker {
	display: none;
}

body.ascend-path-template-active .ascend-home .ascend-path-faq-item summary::after {
	content: "+";
	/* Empty alternative text keeps the glyph out of the accessible name; older engines keep the line above. */
	content: "+" / "";
	flex: 0 0 auto;
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--ascend-home-blue-text);
}

body.ascend-path-template-active .ascend-home .ascend-path-faq-item[open] summary::after {
	content: "\2212";
	content: "\2212" / "";
}

@media (hover: hover) {
	body.ascend-path-template-active .ascend-home .ascend-path-faq-item summary:hover {
		color: var(--ascend-home-blue-text);
	}
}

body.ascend-path-template-active .ascend-home .ascend-path-faq-item summary:focus-visible {
	outline: 3px solid var(--ascend-home-blue-text);
	outline-offset: 3px;
	border-radius: 6px;
}

body.ascend-path-template-active .ascend-home .ascend-path-faq-item p {
	max-width: 44em;
	padding-block-end: 24px;
	color: var(--ascend-home-ink-2);
}

/* ---------------------------------------------------------------- closing */

body.ascend-path-template-active .ascend-home .ascend-path-closing-panel {
	padding-block: 72px;
	padding-inline: 56px;
	border-radius: var(--ascend-home-radius-lg);
	background: var(--ascend-home-sky);
	text-align: center;
}

body.ascend-path-template-active .ascend-home .ascend-path-closing-panel h2 {
	max-width: 18em;
	margin-inline: auto;
}

body.ascend-path-template-active .ascend-home .ascend-path-closing-panel p {
	max-width: 34em;
	margin-block-start: 24px;
	margin-inline: auto;
	font-size: var(--ascend-home-t-lead);
	line-height: 1.45;
	color: var(--ascend-home-ink-2);
}

body.ascend-path-template-active .ascend-home .ascend-path-closing-panel p strong {
	font-family: var(--ascend-home-display);
	font-weight: 700;
	color: var(--ascend-home-ink);
}

body.ascend-path-template-active .ascend-home .ascend-path-closing-panel .wp-block-buttons.ascend-home-actions {
	justify-content: center;
	margin-block-start: 40px;
}

/* ------------------------------------------------------- 1100 and narrower */

@media (max-width: 1100px) {
	body.ascend-path-template-active .ascend-home .ascend-path-cards--four > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ascend-path-template-active .ascend-home .ascend-path-cards--four:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ascend-path-template-active .ascend-home .ascend-path-steps > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-path-template-active .ascend-home .ascend-path-steps:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The timeline turns vertical: a left rule with the dot at each step. */
	body.ascend-path-template-active .ascend-home .ascend-path-step {
		max-width: 44em;
		padding-block: 0 40px;
		padding-inline: 32px 0;
		border-block-start: 0;
		border-inline-start: 2px solid var(--ascend-home-line);
	}

	body.ascend-path-template-active .ascend-home .ascend-path-band--sky .ascend-path-step {
		border-inline-start-color: var(--ascend-home-line-sky);
	}

	body.ascend-path-template-active .ascend-home .ascend-path-step::before {
		inset-block-start: 4px;
		inset-inline-start: -6px;
	}
}

/* ------------------------------------------------------- 1000 and narrower */

@media (max-width: 1000px) {
	body.ascend-path-template-active .ascend-home .ascend-path-cards > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ascend-path-template-active .ascend-home .ascend-path-cards:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ascend-path-template-active .ascend-home .ascend-path-challenges h3,
	body.ascend-path-template-active .ascend-home ul.ascend-path-dash-list,
	body.ascend-path-template-active .ascend-home .ascend-path-faq h2,
	body.ascend-path-template-active .ascend-home .ascend-path-faq-list {
		grid-column: 1 / -1;
	}

	body.ascend-path-template-active .ascend-home .ascend-path-challenges h3 {
		margin-block-end: 20px;
	}

	body.ascend-path-template-active .ascend-home .ascend-path-faq h2 {
		margin-block-end: 32px;
	}
}

/* -------------------------------------------------------- 700 and narrower */

@media (max-width: 700px) {
	body.ascend-path-template-active .ascend-home .ascend-path-cards > .wp-block-group__inner-container,
	body.ascend-path-template-active .ascend-home .ascend-path-cards--four > .wp-block-group__inner-container,
	body.ascend-path-template-active .ascend-home .ascend-path-next > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-path-template-active .ascend-home .ascend-path-cards:not(:has(> .wp-block-group__inner-container)),
	body.ascend-path-template-active .ascend-home .ascend-path-cards--four:not(:has(> .wp-block-group__inner-container)),
	body.ascend-path-template-active .ascend-home .ascend-path-next:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-path-template-active .ascend-home ul.ascend-path-dash-list {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-path-template-active .ascend-home .ascend-path-cards,
	body.ascend-path-template-active .ascend-home .ascend-path-steps,
	body.ascend-path-template-active .ascend-home .ascend-path-challenges {
		margin-block-start: 48px;
	}

	body.ascend-path-template-active .ascend-home .ascend-path-card,
	body.ascend-path-template-active .ascend-home .ascend-path-next-card {
		padding-block: 24px;
		padding-inline: 24px;
	}

	body.ascend-path-template-active .ascend-home .ascend-path-card--rule {
		padding-block: 24px 0;
		padding-inline: 0;
	}

	body.ascend-path-template-active .ascend-home .ascend-path-next-card--featured {
		padding-block: 28px;
		padding-inline: 24px;
	}

	body.ascend-path-template-active .ascend-home .ascend-path-closing-panel {
		padding-block: 48px;
		padding-inline: 24px;
	}

	/* A wrapped text button keeps its underline on the words, not as a rule across the whole box. */
	body.ascend-path-template-active .ascend-home .ascend-home-button--text .wp-block-button__link {
		display: inline;
		padding-block: 3px;
		border-bottom: 0;
		text-decoration: underline;
		text-decoration-thickness: 1.5px;
		text-underline-offset: 5px;
	}

	body.ascend-path-template-active .ascend-home .ascend-path-closing-panel .wp-block-button:first-child,
	body.ascend-path-template-active .ascend-home .ascend-path-closing-panel .wp-block-button:first-child .wp-block-button__link {
		inline-size: 100%;
	}
}