/*
 * Home page — layout specific to the front page (loaded after theme.css on
 * this page only; see inc/setup.php). Shared atoms (bands, eyebrow squares,
 * pills, arrow links, cutouts, bleed) live in theme.css.
 */

/* Larger pills, as in the design's hero and Programs bands. */
.ao-home-pill-lg .wp-block-button__link {
	font-size: clamp(1.125rem, 1.9vw, 1.75rem);
	padding-inline: 2em;
}

/* A subhead that shares its band's eyebrow row, at the left of the wide
   column, across from a right-hand eyebrow label (The Equation, The Story).
   Pulled up by the label's height and centered on it; on phones it simply
   follows the label. */
@media (min-width: 782px) {
	.wp-block-heading.ao-home-eyebrow-mate {
		position: relative;
		z-index: 1;
		margin-block-start: calc(-0.5 * (var(--wp--preset--font-size--xl) + 1.1em));
		line-height: 1.1;
	}
}

/* ---- Hero ---------------------------------------------------------------- */

/* The organization link is white in this hero, not the band's link pink. */
.ao-home-hero-org a {
	color: var(--wp--preset--color--white);
}

/* ---- Philosophy ---------------------------------------------------------- */

.ao-home-more {
	line-height: 1.5;
}

/* ---- The Equation -------------------------------------------------------- */

/* One line at desktop, across the wide column; the   before each
   operator keeps "+" and "=" from starting a line on phones. */
.ao-home-equation .ao-home-formula {
	max-width: var(--wp--style--global--wide-size);
	margin-block-start: clamp(1.5rem, 5vw, 4.5rem);
	font-size: clamp(2rem, 3.85vw, 3.45rem);
}

.ao-home-equation .ao-home-equation-lede {
	max-width: 54rem;
}

.ao-home-equation-row {
	margin-block-start: clamp(2rem, 5vw, 4.5rem);
}

/* The reflection question, with the design's orange "?" badge. The gray is
   the lightest that keeps AA contrast on the light-gray band. */
.ao-home-ask {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: #595959;
	font-style: italic;
	line-height: 1.3;
}

.ao-home-ask::before {
	content: "?" / "";
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

.ao-home-equation-row .wp-block-button__link {
	white-space: nowrap;
}

/* Tablets: three columns would squeeze the question onto four lines, so it
   takes its own row above the pill and the link. */
@media (min-width: 782px) and (max-width: 1099px) {
	.ao-home-equation-row.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ao-home-equation-row > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	.ao-home-equation-row .ao-home-ask {
		justify-content: center;
	}
}

@media (max-width: 781px) {
	.ao-home-equation-row .ao-home-ask {
		justify-content: center;
	}

	.ao-home-equation-row .ao-arrow {
		text-align: center;
	}
}

/* ---- Journey ------------------------------------------------------------- */

/* The intro runs wide, set in a little from the eyebrow, as in the design. */
.ao-home-indent {
	box-sizing: border-box;
	padding-inline-start: clamp(0px, 2.5vw, 2.25rem);
}

/* Step captions wrap to two short lines, as in the design. */
.ao-journey-band .ao-node p {
	max-width: 13.5em;
	margin-inline: auto;
}

@media (min-width: 782px) {
	.ao-journey-band .ao-timeline::before {
		top: 10.5px;
		height: 1px;
		background: var(--wp--preset--color--light-gray);
	}
}

/* ---- The Story ----------------------------------------------------------- */

/* The founder stands on the band's bottom edge (.ao-cutout) at the right of
   his column, his credit tucked in at its bottom left. */
.ao-home-founder-col {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0.5rem;
}

.ao-home-founder-col .ao-founder {
	flex: none;
	max-width: 70%;
}

.ao-home-founder-col .ao-founder img {
	max-height: clamp(320px, 33vw, 480px);
	margin-inline: auto 0;
}

/* Kept on its three lines; it may tuck in beside his legs, as in the design. */
.ao-home-founder-col .ao-founder-credit {
	position: relative;
	z-index: 1;
	order: -1;
	flex: none;
	margin: 0 -1.25rem calc(2.5rem - var(--wp--preset--spacing--80)) 0;
	font-size: 0.75rem;
	line-height: 1.35;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.ao-home-founder-col .ao-founder img {
		max-height: min(46svh, 340px);
	}
}

/* ---- Final CTA ----------------------------------------------------------- */

.ao-home-cta .wp-block-column:first-child > p {
	max-width: 30rem;
}

/* Narrow pills, well apart, each with a thin white outline. */
.ao-home-cta-pills.wp-block-buttons {
	gap: 2.5rem;
}

.ao-home-cta-pills .wp-block-button {
	width: 16rem;
	max-width: 100%;
}

.ao-home-cta-pills .wp-block-button__link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: 1.5px solid var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	.ao-home-cta-pills.wp-block-buttons {
		gap: 1.25rem;
	}

	.ao-home-cta-book img {
		width: 170px;
	}
}