/*
 * The Approach — page-only layout (enqueued after theme.css on /the-approach/).
 *
 * The ALWAYS ON letter badges are the client's artwork, cropped to the badge
 * column only; the principle labels beside them are real text. Each strip is
 * cropped so it divides into equal rows (one per badge), so the labels align
 * by giving every list row the same height (--row) and sizing the strip to
 * --n rows.
 */

/* ------------------------------------------------------------
   Badge tower: strip image + one label per badge
   ------------------------------------------------------------ */
.ao-tower {
	--row: 3.5rem;
	--n: 8;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.ao-tower--lg {
	--row: 4.4rem;
}

.ao-tower--3 {
	--n: 3;
}

.ao-tower--2 {
	--n: 2;
}

.ao-tower > * {
	margin-block: 0;
}

.ao-tower__badges {
	flex: none;
}

.ao-tower__badges img {
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--row) * var(--n));
}

.ao-tower__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ao-tower__list li {
	display: flex;
	align-items: center;
	height: var(--row);
	margin: 0;
	font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
	font-style: italic;
	font-weight: 700;
	line-height: 1.15;
}

.ao-tower--lg .ao-tower__list li {
	font-size: var(--wp--preset--font-size--lg);
}

/* ------------------------------------------------------------
   Your Journey: badge strip + eight steps over the triangle
   ------------------------------------------------------------ */
.ao-journey {
	--row: 3.85rem;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
}

.ao-journey > * {
	margin: 0;
}

.ao-journey__badges {
	grid-column: 1;
	grid-row: 1;
}

.ao-journey__badges img {
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--row) * 8);
}

.ao-journey__tri {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	align-self: stretch;
}

.ao-journey__tri img {
	position: absolute;
	inset: 12% 0 10%;
	width: 100%;
	height: 78%;
	object-fit: contain;
}

.ao-journey__list {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.ao-journey__list li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: var(--row);
	margin: 0;
	line-height: 1.25;
}

.ao-journey__list br {
	display: none;
}

.ao-journey__list strong {
	font-size: var(--wp--preset--font-size--base);
}

.ao-journey__list em {
	font-size: var(--wp--preset--font-size--sm);
}

/* ------------------------------------------------------------
   Ask Yourself box — "?" medallions are CSS, the questions real text
   ------------------------------------------------------------ */
.ao-ask {
	margin-block-start: var(--wp--preset--spacing--40);
	padding: 0.9rem 1.5rem 1.1rem 1rem;
	border: 1px solid var(--wp--preset--color--operator-gray);
	border-radius: 14px;
	background: var(--wp--preset--color--light-gray);
}

.ao-ask--white {
	background: var(--wp--preset--color--white);
}

.ao-ask > * {
	margin-block: 0;
}

.ao-ask__title {
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--magenta);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
}

.ao-ask__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ao-ask__list li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-block: 0.55rem 0;
	font-size: var(--wp--preset--font-size--base);
	font-style: italic;
	line-height: 1.3;
}

.ao-ask__list li::before {
	content: "?";
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--gold), var(--wp--preset--color--orange) 70%);
	box-shadow: 0 0 0 1px var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--slab);
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

.ao-ask + .ao-arrow {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------
   Possibilities: bracketed badge strip + group labels
   (16 half-rows: each badge spans two, labels/arrows sit between)
   ------------------------------------------------------------ */
.ao-poss {
	--half: 1.75rem;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(16, var(--half));
	column-gap: 1.25rem;
	align-items: center;
}

.ao-poss > * {
	margin: 0;
}

.ao-poss__badges {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: start;
}

.ao-poss__badges img {
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--half) * 16);
}

.ao-poss__lbl {
	grid-column: 2;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--slab);
	font-size: clamp(1rem, 1.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1;
}

.ao-poss__lbl--1 { grid-row: 3 / 5; }
.ao-poss__lbl--2 { grid-row: 9 / 11; }
.ao-poss__lbl--3 { grid-row: 14 / 16; }

.ao-poss__tri {
	grid-column: 2;
	justify-self: start;
	margin-inline-start: 2.6rem;
}

.ao-poss__tri--1 { grid-row: 6 / 8; }
.ao-poss__tri--2 { grid-row: 12 / 14; }

.ao-poss__tri img {
	display: block;
	width: 3rem;
	height: auto;
}

/* ------------------------------------------------------------
   Standing cutouts (How it Works man, Possibilities couple): the shared
   .ao-cutout stands them on the band's bottom edge; these set their size.
   ------------------------------------------------------------ */
@media (min-width: 782px) {
	.ao-approach-person img {
		max-height: 470px;
	}

	/* The couple is nearly band-tall in the design. */
	.ao-poss-cols .ao-approach-person img {
		max-height: 510px;
	}
}

/* …and her column rises a little toward the eyebrow above it. */
@media (min-width: 1100px) {
	.ao-poss-cols > .wp-block-column.ao-cutout-col {
		margin-block-start: -1rem;
	}
}

/* ------------------------------------------------------------
   Closing CTA
   ------------------------------------------------------------ */
.ao-approach-cta p {
	margin-block: 0.4rem;
}

.ao-approach-cta .wp-block-image img {
	max-width: 220px;
}

.ao-approach-cta .ao-arrow {
	margin-block-start: 1rem;
	font-style: normal;
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */
@media (max-width: 781px) {
	/* Copy before the diagram once the columns stack. */
	.ao-flip {
		flex-direction: column-reverse;
	}

	.ao-tower--lg {
		--row: 3.6rem;
	}

	.wp-block-image.ao-approach-person {
		--ao-cut-h: min(46svh, 320px);
	}

	/* Possibilities reads copy-first too: copy, badge strip, then the couple. */
	.ao-poss-cols > .wp-block-column:first-child {
		order: 1;
	}

	/* A right- or center-aligned arrow link orphans its last word on phones,
	   so it reads left-aligned here, with the usual hanging indent back. */
	:root main .ao-arrow {
		text-align: left;
		padding-inline-start: var(--ao-arrow-hang);
		text-indent: calc(-1 * var(--ao-arrow-hang));
	}

	:root main .ao-arrow::before {
		inline-size: var(--ao-arrow-hang);
		margin-inline-end: 0;
	}

	.ao-approach-cta .wp-block-buttons {
		justify-content: flex-start;
	}
}

/* Up to ~1240px the journey steps wrap to two-plus lines, so they can't share
   a fixed row with the badge strip; drop the (repeated) strip and let each
   step take its natural height. */
@media (max-width: 1240px) {
	.ao-journey {
		grid-template-columns: 1fr;
	}

	.ao-journey__badges {
		display: none;
	}

	.ao-journey__tri,
	.ao-journey__list {
		grid-column: 1;
	}

	.ao-journey__list li {
		height: auto;
		padding-block: 0.45rem;
	}
}

@media (max-width: 1100px) {
	/* Narrow Possibilities column: tighten the bracketed strip. */
	.ao-poss {
		--half: 1.5rem;
		column-gap: 0.75rem;
	}

	.ao-poss__tri {
		margin-inline-start: 1.8rem;
	}
}

/* Narrow screens: the steps sit over the triangle, so it recedes to a hint. */
@media (max-width: 781px) {
	.ao-journey__tri img {
		opacity: 0.35;
	}
}

/* In-page jump targets clear the sticky header. */
#how-it-works,
#purpose {
	scroll-margin-top: 6rem;
}

/* Hero + CTA secondary arrow links are white in the design. */
.ao-approach-hero .ao-arrow--teal a,
.ao-approach-cta .ao-arrow a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ao-approach-hero .ao-arrow a:hover,
.ao-approach-hero .ao-arrow a:focus-visible,
.ao-approach-cta .ao-arrow a:hover,
.ao-approach-cta .ao-arrow a:focus-visible {
	text-decoration: underline;
}

/* Tablet (stacking starts at 781px): the Possibilities column is narrowest. */
@media (min-width: 782px) and (max-width: 900px) {
	.ao-poss {
		--half: 1.3rem;
		column-gap: 0.5rem;
	}

	.ao-poss__lbl {
		font-size: 0.9rem;
	}

	.ao-poss__tri {
		margin-inline-start: 1.4rem;
	}
}

/* ------------------------------------------------------------
   Type: band subheads (lg) outrank the 20px body (md); paragraphs sit
   closer than the default block gap, as in the design.
   ------------------------------------------------------------ */
.wp-block-column > h3 + :is(p, ul) {
	margin-block-start: 0.5rem;
}

.wp-block-column > :is(p, ul):not(.ao-arrow) + :is(p, ul):not(.ao-arrow) {
	margin-block-start: 0.85rem;
}

/* Bold-italic closing lines: the second line hangs in by about 1em. */
.ao-approach-close {
	padding-inline-start: 1em;
	text-indent: -1em;
}

/* ------------------------------------------------------------
   Hero: the APPROACH neon fills the left half, bleeding off the top and
   left edges and fading into the black at its cut edges.
   ------------------------------------------------------------ */
.ao-approach-hero__kicker {
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
}

/* `bolder` on the light (300) body only reaches 400; the slab kicker is bold. */
.ao-approach-hero__kicker strong {
	font-weight: 700;
}

.ao-approach-hero__neon img {
	display: block;
	width: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, #000 62%, transparent 98%), linear-gradient(to bottom, #000 70%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, #000 62%, transparent 98%), linear-gradient(to bottom, #000 70%, transparent 100%);
	mask-composite: intersect;
}

@media (max-width: 781px) {
	.ao-approach-hero__neon img {
		max-height: 34svh;
	}
}

@media (min-width: 782px) {
	.ao-approach-hero > .wp-block-columns {
		min-height: calc(clamp(560px, 47vw, 700px) - 2 * var(--wp--preset--spacing--80));
	}

	/* Pinned to the band's top; the copy stays centered beside it. */
	.wp-block-column.ao-approach-hero__art {
		align-self: flex-start;
	}

	.wp-block-image.ao-approach-hero__neon {
		margin-block-start: calc(-1 * var(--wp--preset--spacing--80));
		/* Its height follows its width (5:4); cap the width so wide screens
		   don't grow the hero past the first screen. */
		max-width: 780px;
	}

	/* 5:4 keeps the whole word in frame (a taller crop would clip it). */
	.ao-approach-hero__neon img {
		aspect-ratio: 5 / 4;
		height: auto;
		object-position: 50% 40%;
	}

	.ao-approach-hero .wp-block-buttons {
		margin-block-start: 2.25rem;
	}
}

/* The pill and arrow links sit indented under the copy in the design
   (~160px at 1440); the indent eases to nothing by 1100px, where the
   narrower column needs the room. */
@media (min-width: 1100px) {
	.ao-approach-hero .wp-block-buttons,
	.ao-approach-hero .ao-arrow {
		margin-inline-start: min(10rem, (100vw - 1100px) * 0.47);
	}
}

/* ------------------------------------------------------------
   Closing CTA at tablet: the middle column is too narrow for the pill,
   so it moves under the copy and the book takes the right side (the pill
   wraps below about 1120px; 1179 leaves room for wider fallback fonts).
   ------------------------------------------------------------ */
@media (min-width: 782px) and (max-width: 1179px) {
	.wp-block-columns.ao-approach-cta {
		display: grid;
		grid-template-columns: 3fr 2fr;
		align-items: center;
	}

	.ao-approach-cta > .wp-block-column:nth-child(1) {
		grid-area: 1 / 1;
	}

	.ao-approach-cta > .wp-block-column:nth-child(2) {
		grid-area: 2 / 1;
		align-self: start;
	}

	.ao-approach-cta > .wp-block-column:nth-child(3) {
		grid-area: 1 / 2 / 3;
	}

	.ao-approach-cta .wp-block-buttons {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------
   Diagram columns rise level with the band's eyebrow, as in the design
   (the copy column stays below it). They rise only on the side away from
   the eyebrow; Perseverance's long eyebrow reaches over its tower column, so
   that one stays put.
   ------------------------------------------------------------ */
@media (min-width: 1100px) {
	.is-style-eyebrow-square-tl + .wp-block-columns > .wp-block-column:not(:first-child, :has(> h3, .ao-tower--2)),
	.is-style-eyebrow-square-tr + .wp-block-columns > .wp-block-column:not(:last-child, :has(> h3)) {
		margin-block-start: calc(-1 * (2.25rem + var(--wp--style--block-gap, 1.5rem)));
	}
}