/*
 * Start Here page — one-off layout for the page's bands (loaded only on
 * /start-here/, after theme.css). Everything is scoped to .ao-sh-* hooks.
 */

/* ------------------------------------------------------------
   Links on the black bands — the global link color is a dark
   magenta tuned for white bands; on black it needs to be lighter.
   ------------------------------------------------------------ */
.ao-sh-hero .ao-arrow a,
.ao-sh-final .ao-arrow a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

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

.ao-sh-hero .ao-sh-link--magenta a {
	color: var(--wp--preset--color--magenta);
}

.ao-sh-links .ao-arrow {
	font-style: normal;
	margin-block: 0.6rem;
}

.ao-sh-final .ao-sh-link--strong a {
	font-weight: 700;
}

/* ------------------------------------------------------------
   Hero — neon art bleeds to the left screen edge on desktop.
   ------------------------------------------------------------ */
.ao-sh-hero .ao-sh-kicker {
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--slab);
}

/* "Find Your Path" spans ~312px on the 1440 artboard, a size between the xl
   and 2xl presets. The preset class stays for the editor's preview. */
.ao-sh-hero h1.has-xl-font-size {
	margin-top: 0.15em;
	font-size: clamp(2rem, 2.85vw, 2.55rem) !important;
}

.ao-sh-hero .ao-sh-tagline {
	margin-top: 0.35rem;
}

.ao-sh-hero__cta {
	font-size: var(--wp--preset--font-size--lg);
	margin-block: var(--wp--preset--spacing--50);
}

.ao-sh-links {
	padding-inline-start: clamp(0px, 6vw, 5.5rem);
}

.ao-sh-final .ao-sh-links {
	padding-inline-start: 0;
}

@media (max-width: 781px) {
	/* One left edge for the whole hero on phones, as on the other pages. */
	.ao-sh-hero .wp-block-buttons.ao-sh-hero__cta {
		justify-content: flex-start;
	}

	.ao-sh-hero .ao-sh-links {
		padding-inline-start: 0;
	}

	/* Keep the copy within reach of the first screen. */
	.ao-sh-hero__art img {
		display: block;
		width: 100%;
		max-height: 34svh;
		object-fit: cover;
	}
}

@media (min-width: 782px) {
	.ao-sh-hero {
		padding-block-start: var(--wp--preset--spacing--40);
		padding-block-end: 0;
	}

	/* Bleed the art to the left screen edge: widen the column by the gutter
	   outside the wide (1200px) container and pull it back by the same amount.
	   cqw (the band's content box, i.e. inside its root padding) rather than
	   vw, so a classic scrollbar doesn't push the art off-screen. */
	.ao-sh-hero {
		container-type: inline-size;
		--ao-sh-bleed: calc((100cqw - min(100cqw, var(--wp--style--global--wide-size))) / 2 + var(--wp--style--root--padding-left));
	}

	.ao-sh-hero .wp-block-column.ao-sh-hero__art {
		flex-basis: calc(55% + var(--ao-sh-bleed)) !important;
		margin-inline-start: calc(-1 * var(--ao-sh-bleed));
	}

	.ao-sh-hero__art .wp-block-image {
		margin: 0;
	}

	.ao-sh-hero__art img {
		display: block;
		width: 100%;
		/* fade the art's right edge into the black band */
		-webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
		mask-image: linear-gradient(to right, #000 80%, transparent);
	}
}

/* ------------------------------------------------------------
   Cutouts that stand on the band's bottom edge.
   ------------------------------------------------------------ */
@media (min-width: 782px) {
	.wp-block-column.ao-sh-bleed-bottom {
		margin-bottom: calc(-1 * var(--wp--preset--spacing--80));
	}

	.ao-sh-bleed-bottom .wp-block-image {
		margin-bottom: 0;
	}

	.ao-sh-bleed-bottom img {
		display: block;
	}
}

/* ------------------------------------------------------------
   Get to Know — trailing arrows, video placeholder, founder.
   ------------------------------------------------------------ */
.ao-sh-arrow-after::after {
	content: "\25B6\25B6\25B6";
	margin-left: 0.6em;
	font-style: normal;
	font-size: 0.9em;
	letter-spacing: -0.12em;
	color: var(--wp--preset--color--orange);
	white-space: nowrap;
}

/* The design sets this small head in the bold sans, not the h4 slab. */
.ao-sh-watch {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
}

/* Never strand "you ▶▶▶" on a line of its own. */
.ao-sh-arrow-after {
	text-wrap: pretty;
}

/* Portrait video card — a placeholder until the founder's video is supplied. */
.ao-sh-video {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	max-width: 300px;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--light-gray);
	background: var(--wp--preset--color--white);
}

.ao-sh-video__play {
	margin: 0;
}

.ao-sh-video__play a {
	display: grid;
	place-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

/* Whole card is the click target. */
.ao-sh-video__play a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ao-sh-video__play a::before {
	content: "\25B6";
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	padding-left: 6px;
	box-sizing: border-box;
	border: 4px solid var(--wp--preset--color--orange);
	border-radius: 50%;
	color: var(--wp--preset--color--orange);
	font-size: 2rem;
	box-shadow: 0 0 16px rgba(255, 153, 0, 0.55), inset 0 0 10px rgba(255, 153, 0, 0.35);
	transition: transform 0.2s ease;
}

.ao-sh-video:hover .ao-sh-video__play a::before {
	transform: scale(1.06);
}

.ao-sh-video__play a:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 4px;
}

.ao-sh-founder {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0.5rem;
}

.ao-sh-founder__credit {
	/* the credit keeps whole words; past its floor the portrait gives way */
	flex: 0 1 auto;
	min-width: 9.5em;
	overflow-wrap: normal;
	margin: 0 0 var(--wp--preset--spacing--50);
	line-height: 1.3;
}

.ao-sh-founder__img {
	margin: 0;
	flex: 0 0 auto;
}

.ao-sh-founder__img img {
	display: block;
	width: clamp(170px, 18vw, 264px);
	max-width: none;
	height: auto;
}

@media (min-width: 1200px) {
	/* each credit line on one line, as in the design */
	.ao-sh-founder__credit {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.ao-sh-founder__img {
		flex: 0 1 auto;
		min-width: 0;
	}

	.ao-sh-founder__img img {
		max-width: 100%;
	}
}

@media (min-width: 782px) and (max-width: 1199px) {
	/* Too narrow for the credit beside him: stack it above the portrait. */
	.ao-sh-founder {
		flex-direction: column;
		align-items: flex-end;
	}

	.ao-sh-founder__credit {
		flex: 0 0 auto;
		margin-bottom: 0.5rem;
		white-space: nowrap;
	}
}

@media (max-width: 781px) {
	.ao-sh-founder {
		justify-content: center;
	}

	.ao-sh-founder__credit {
		flex: 0 1 auto;
	}

	.ao-sh-founder__img img {
		width: auto;
		max-height: min(40svh, 300px);
	}

	/* Last item in the stacked band: stand him on the band's bottom edge. */
	.ao-sh-founder-band .ao-sh-bleed-bottom {
		margin-bottom: calc(-1 * var(--wp--preset--spacing--80));
	}

	/* Shorter landscape card when stacked (it's a placeholder until the video lands). */
	.ao-sh-video {
		aspect-ratio: 16 / 10;
		max-width: 320px;
	}
}

/* ------------------------------------------------------------
   Searching for More — orange "?" badges on the questions.
   ------------------------------------------------------------ */
.ao-sh-questions {
	list-style: none;
	padding-left: 0;
}

.ao-sh-questions li {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-block: 1rem;
	font-size: 0.85em;
}

.ao-sh-questions li::before {
	content: "?";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-style: normal;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

@media (min-width: 782px) {
	.ao-sh-your-life img {
		/* 298px wide = 520px tall at the cutout's ratio; keep "sizes" in step */
		width: min(298px, 100%);
	}
}

/* Center the pill on the page, not the text column: taken out of flow, it
   keeps its place under the questions but spans the (centered) columns row. */
@media (min-width: 782px) {
	.ao-sh-search-row {
		position: relative;
	}

	.wp-block-buttons.ao-sh-center-cta {
		position: absolute;
		inset-inline: 0;
		pointer-events: none;
	}

	.ao-sh-center-cta .wp-block-button {
		pointer-events: auto;
	}

	/* hold the pill's room (its gap + height) under the list */
	.ao-sh-search-row > .wp-block-column:last-child {
		padding-bottom: calc(var(--wp--style--block-gap, 1.5rem) + 2.75rem);
	}
}

/* ------------------------------------------------------------
   Formula — CTA centered with the arrow link to its right.
   ------------------------------------------------------------ */
.ao-sh-formula {
	max-width: var(--wp--style--global--wide-size) !important;
	margin-block-start: var(--wp--preset--spacing--60);
}

/* The equation spans ~1066px on the 1440 artboard, wider than the 2xl preset
   (the class stays for the editor's preview). */
.ao-sh-formula.has-2-xl-font-size {
	font-size: clamp(2.25rem, 4.3vw, 3.875rem) !important;
}

.ao-sh-cta-row {
	margin-block-start: var(--wp--preset--spacing--60);
}

@media (min-width: 782px) {
	.ao-sh-cta-row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.ao-sh-cta-row > .wp-block-buttons {
		grid-column: 2;
	}

	.ao-sh-cta-row > .ao-arrow {
		grid-column: 3;
		margin: 0;
	}
}

@media (max-width: 781px) {
	.ao-sh-cta-row > .ao-arrow {
		text-align: center;
	}
}

/* ------------------------------------------------------------
   Journey + Approach rows.
   ------------------------------------------------------------ */
.ao-sh-intro {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ao-sh-intro p {
	max-width: 62rem;
}

.ao-sh-journey img {
	width: 100%;
	max-width: 400px;
}

@media (min-width: 782px) {
	.ao-sh-journey-row {
		margin-block-start: 0;
	}
}

/* The pill sits at page center with the young man to its right. Out of flow
   it spans the (centered) row and keeps its static, vertically centered top. */
@media (min-width: 1024px) {
	.ao-sh-journey-row {
		position: relative;
	}

	.wp-block-buttons.ao-sh-journey-cta {
		position: absolute;
		inset-inline: 0;
		justify-content: center;
		pointer-events: none;
	}

	.ao-sh-journey-cta .wp-block-button {
		pointer-events: auto;
	}

	.wp-block-column.ao-sh-journey {
		margin-inline-start: auto;
	}
}

@media (max-width: 781px) {
	.wp-block-buttons.ao-sh-journey-cta {
		justify-content: center;
	}

	/* Last item in the stacked band: stand him on the band's bottom edge. */
	.wp-block-column.ao-sh-journey {
		margin-bottom: calc(-1 * var(--wp--preset--spacing--80));
	}

	.ao-sh-journey .wp-block-image {
		margin-bottom: 0;
	}

	.ao-sh-journey img {
		display: block;
		margin-inline: auto;
	}
}

@media (min-width: 1200px) {
	/* Raise the hands into the eyebrow row, stopping at the band's top edge.
	   Only when the text column is wide enough to keep clear of the label. */
	.wp-block-column.ao-sh-hands {
		align-self: flex-start;
		/* band padding + eyebrow row + the gap below it */
		margin-block-start: calc(-1 * (var(--wp--preset--spacing--80) + var(--wp--preset--font-size--xl) + var(--wp--style--block-gap, 1.5rem)));
	}
}

/* ------------------------------------------------------------
   Final CTA — book render and links.
   ------------------------------------------------------------ */
.ao-sh-final .wp-block-button__link {
	white-space: nowrap;
}

.ao-sh-book img {
	/* explicit width (keep the image's "sizes" metadata in step) */
	width: min(210px, 100%);
	height: auto;
}

/* ~22px on the 1440 artboard; scaled down so they keep to their column on
   tablets and phones (the preset class stays for the editor's preview). */
.ao-sh-final .ao-arrow.has-lg-font-size {
	font-size: clamp(1rem, 1.55vw, 1.395rem) !important;
}

@media (min-width: 1200px) {
	/* As in the design, the links start left of the book, into the gutter
	   beside the pill, so "Bring ALWAYS ON to your organization." keeps to
	   one line. */
	.ao-sh-final .ao-sh-links {
		margin-inline-start: -1.5rem;
	}
}

@media (max-width: 781px) {
	.ao-sh-final .wp-block-heading,
	.ao-sh-final .wp-block-column > p {
		text-align: center;
	}

	.ao-sh-final .ao-sh-links {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* ------------------------------------------------------------
   Stacked timeline (phones): dots down the left, joined by a line.
   ------------------------------------------------------------ */
@media (max-width: 781px) {
	.wp-block-columns.ao-timeline {
		--ao-step-gap: 1.25rem;
		gap: var(--ao-step-gap);
	}

	.ao-timeline .ao-node {
		position: relative;
		display: grid;
		grid-template-columns: 22px 1fr;
		column-gap: 1rem;
		text-align: left;
	}

	.ao-timeline .ao-node::before {
		grid-row: 1 / span 2;
		margin: 0.15em 0 0;
	}

	/* connector from this dot down to the next one */
	.ao-timeline .wp-block-column:not(:last-child) .ao-node::after {
		content: "";
		position: absolute;
		left: 9.5px;
		top: calc(0.15em + 22px);
		bottom: calc(-1 * var(--ao-step-gap) - 0.15em);
		width: 3px;
		background: var(--wp--preset--color--operator-gray);
	}
}