/*
 * Programs page — layout specific to /programs/ (loaded after theme.css on
 * this page only; see inc/setup.php).
 */

/* Subheads sit tight to the paragraph below (the bold-sans h3 itself comes
   from theme.json); balance keeps a lone word ("Rise") off its own line. */
.ao-prg-sub {
	margin-bottom: 0.25rem;
	text-wrap: balance;
}

.ao-prg-sub + p {
	margin-top: 0;
}

/* Body lists: the PDF sets these as bold-italic bullets with a tight rhythm. */
.ao-prg-list {
	padding-left: 1.4em;
}

.ao-prg-list li + li {
	margin-top: 0.15em;
}

/* Body copy runs as tight as the PDF: about half a line between paragraphs
   and lists, rather than the 1.5rem block gap. */
:is(.ao-prg-why, .ao-prg-myth, .ao-prg-outcomes, .ao-prg-fit, .ao-prg-start, .ao-prg-cta) .wp-block-column > :is(p, ul) + :is(p, ul) {
	margin-block-start: 0.6em;
}

/* Pills on this page: wrapped labels get room to breathe, and the pills on
   black bands carry the thin white outline the designs draw around them. */
.ao-prg-hero .wp-block-button__link,
.ao-prg-programs .wp-block-button__link,
.ao-prg-fit .wp-block-button__link,
.ao-prg-start .wp-block-button__link,
.ao-prg-cta .wp-block-button__link {
	line-height: 1.2;
}

.ao-prg-hero .wp-block-button__link,
.ao-prg-cta .wp-block-button__link {
	box-shadow: 0 0 0 1.5px var(--wp--preset--color--white);
}

/* ---- Hero: the neon art fills the band top to bottom and bleeds off the
   left edge, as in the PDF; below 1100px (where the side-by-side crop would
   cut the sign) it runs edge to edge above the copy. ---- */
.ao-prg-hero .wp-block-columns {
	margin-bottom: 0;
}

.ao-prg-hero .wp-block-image {
	margin-block: 0;
}

.ao-prg-hero .wp-block-image img {
	display: block;
	width: 100%;
}

@media (min-width: 1100px) {
	/* The art column cancels the band's padding so the sign reaches both edges;
	   the copy column keeps it and stays vertically centered. */
	.ao-prg-hero .wp-block-column:first-child {
		display: flex;
		flex-direction: column;
		margin-block: calc(-1 * var(--wp--preset--spacing--80));
	}

	.ao-prg-hero .wp-block-image.ao-bleed-start {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* Cover, anchored left so the L-arrow starts at the viewport edge; the right
	   edge fades into the black band instead of ending in a hard line. */
	.ao-prg-hero .ao-bleed-start img {
		height: 100%;
		object-fit: cover;
		object-position: left center;
		-webkit-mask-image: linear-gradient(to right, #000 78%, transparent);
		mask-image: linear-gradient(to right, #000 78%, transparent);
	}
}

/* Narrower desktops: the copy column is tall at 24px, which would crop the
   sign's arrowhead, so the hero copy steps down to the 20px body size. */
@media (min-width: 782px) and (max-width: 1279px) {
	.ao-prg-hero p.has-lg-font-size {
		font-size: var(--wp--preset--font-size--md) !important;
	}
}

/* Tablets: stack like phones rather than shrink the art to a postage stamp. */
@media (min-width: 782px) and (max-width: 1099px) {
	.ao-prg-hero .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ao-prg-hero .wp-block-columns > .wp-block-column {
		flex: 1 1 100% !important;
	}

	.ao-prg-hero .wp-block-column:last-child {
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
	}

	.ao-prg-hero .wp-block-image.ao-bleed-start {
		margin-inline-start: 0;
	}
}

/* ---- Why it works: the team cutout sits on the band's bottom edge. ---- */
.wp-block-group.ao-prg-why,
.wp-block-group.ao-prg-myth,
.wp-block-group.ao-prg-fit {
	padding-bottom: 0;
}

.ao-prg-why .wp-block-columns,
.ao-prg-myth .wp-block-columns,
.ao-prg-fit .wp-block-columns {
	margin-bottom: 0;
}

.ao-prg-bleed,
.ao-prg-man {
	margin: 0;
}

.ao-prg-bleed img,
.ao-prg-man img {
	display: block;
	width: 100%;
}

/* The team runs off the right edge of the viewport, as in the PDF. */
@media (min-width: 782px) {
	.wp-block-image.ao-prg-bleed {
		margin-inline-end: calc(-1 * max(var(--wp--style--root--padding-right), (100vw - var(--wp--style--global--wide-size)) / 2));
	}
}

/* Text columns that end the band need their own bottom breathing room now
   that the band's bottom padding is reserved for the cutouts. */
.ao-prg-why .wp-block-column:first-child,
.ao-prg-myth .wp-block-column:first-child,
.ao-prg-fit .wp-block-column:first-child {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* ---- Pink arrow-link text beside the teal arrows (no underline, like the PDF).
   Color comes from the theme: the AA link pink on light bands, brand magenta
   on black bands. ---- */
.ao-prg-link-magenta a {
	text-decoration: none;
}

.ao-prg-link-magenta a:hover,
.ao-prg-link-magenta a:focus-visible {
	text-decoration: underline;
}

/* ALWAYS ON acronym "tower": letter badges joined by a pink stem. */
.ao-prg-acronym {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
}

.ao-prg-acronym li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.3rem;
}

.ao-prg-acronym li + li::before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: -0.45rem;
	width: 0;
	height: 0;
	border-inline: 0.3rem solid transparent;
	border-top: 0.45rem solid var(--wp--preset--color--magenta);
	transform: translateX(-50%);
	z-index: 1;
}

.ao-prg-acronym__l {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--gold), var(--wp--preset--color--orange) 75%);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.ao-prg-acronym__l--teal {
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--aqua), var(--wp--preset--color--teal) 75%);
}

/* Each label stays on one line so the stem triangles keep meeting the badges. */
@media (min-width: 782px) {
	.ao-prg-acronym li {
		white-space: nowrap;
	}
}

/* Narrow desktops: copy across the top, then the man and the tower side by
   side (as on phones, but in two rows) so neither has to squeeze. */
@media (min-width: 782px) and (max-width: 1099px) {
	.ao-prg-myth .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ao-prg-myth .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
		padding-bottom: 0;
	}

	.ao-prg-myth .wp-block-columns > .wp-block-column:nth-child(2) {
		flex: 0 0 min(36%, 300px) !important;
	}

	.ao-prg-myth .wp-block-columns > .wp-block-column:nth-child(3) {
		flex: 1 1 0 !important;
		align-self: center;
		display: flex;
		justify-content: center;
		padding-bottom: var(--wp--preset--spacing--50);
	}
}

/* ---- Program cards ---- */
.ao-prg-cards {
	gap: clamp(1.25rem, 6vw, 6rem);
	margin-block: var(--wp--preset--spacing--40);
}

@media (max-width: 1023px) {
	.ao-prg-cards {
		gap: 1.25rem;
	}
}

/* Too narrow for three: two cards, with the third centered beneath. */
@media (min-width: 782px) and (max-width: 959px) {
	.ao-prg-cards {
		flex-wrap: wrap !important;
		justify-content: center;
	}

	.ao-prg-cards > .ao-prg-card {
		flex: 0 0 calc(50% - 0.625rem) !important;
	}
}

.ao-prg-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 1.25rem 1.25rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

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

.ao-prg-card > * + * {
	margin-top: 0.6rem;
}

.ao-prg-card__title {
	font-size: var(--wp--preset--font-size--lg);
	color: inherit;
}

.ao-prg-card p:not(.ao-prg-card__best) {
	font-weight: 300;
}

.ao-prg-card__best {
	margin-top: 1rem;
}

/* Bullets hang: wrapped lines align with the text, not the bullet. */
.ao-prg-card__list {
	list-style: none;
	padding-left: 0.6rem;
	font-weight: 300;
}

.ao-prg-card__list li {
	position: relative;
	padding-left: 1em;
}

.ao-prg-card__list li::before {
	content: "\2022";
	position: absolute;
	left: 0;
}

/* The icon sits in flow at the card's bottom-right, below the text, so it can
   never overlap a bullet however the copy wraps. */
.ao-prg-card__icon {
	align-self: flex-end;
	margin: auto 0 0 !important;
	padding-top: 0.5rem;
}

.ao-prg-card__icon img {
	display: block;
	height: 3.75rem;
	width: auto;
}

/* ---- Outcomes triangle: the PDF's pink-to-gold triangle rides above the
   teal V and overlaps it translucently; the labels sit beside the V's tips
   in a lighter, smaller slab. ---- */
.ao-prg-outcomes .ao-tri svg {
	max-width: 400px;
	/* Let a wider fallback slab run past the tips rather than clip. */
	overflow: visible;
}

.ao-prg-outcomes .ao-tri__lbl {
	font-weight: 400;
	font-size: 18px;
}

.ao-prg-outcomes .ao-prg-tri__mid {
	font-size: 20px;
}

/* SVG text scales with the diagram; on tablets the column narrows it, so
   the labels are set larger to keep ~14px on screen. */
@media (min-width: 782px) and (max-width: 1023px) {
	.ao-prg-outcomes .ao-tri__lbl {
		font-size: 21px;
	}

	.ao-prg-outcomes .ao-prg-tri__mid {
		font-size: 23px;
	}
}

/* ---- Best fit: prospect wheel with the pointing woman beside it. ---- */
.ao-prg-fit__art {
	display: flex;
	align-items: flex-end;
	gap: 0;
}

.ao-prg-fit__art > .wp-block-image {
	margin: 0;
}

.ao-prg-fit__circle {
	flex: 1 1 70%;
	align-self: center;
	padding-bottom: var(--wp--preset--spacing--50);
}

.ao-prg-fit__woman {
	flex: 0 1 30%;
	margin-left: -2% !important;
}

.ao-prg-fit__circle img,
.ao-prg-fit__woman img {
	display: block;
	width: 100%;
}

/* Audience list: the wheel's labels as real text chips. Visible up to 1024px,
   where the wheel's own labels are too small to read; kept for screen
   readers on wider screens. */
.ao-prg-fit .wp-block-column > .ao-prg-fit__list {
	list-style: none;
	margin-block: var(--wp--preset--spacing--40);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25;
	text-align: center;
}

.ao-prg-fit__list li {
	display: grid;
	place-items: center;
	padding: 0.55rem 0.75rem;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--black);
}

.ao-prg-fit__list li:nth-child(4n + 2),
.ao-prg-fit__list li:nth-child(4n + 3) {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black);
}

@media (min-width: 1025px) {
	.ao-prg-fit .wp-block-column > .ao-prg-fit__list {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ---- Closing CTA ---- */
.ao-prg-cta h2 {
	text-wrap: balance;
}

.ao-prg-cta .ao-arrow {
	margin-block: 0.75rem 0;
	font-style: normal;
	font-size: var(--wp--preset--font-size--base);
}

.ao-prg-cta .ao-arrow a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ao-prg-cta .ao-arrow a:hover,
.ao-prg-cta .ao-arrow a:focus-visible {
	color: var(--wp--preset--color--gold);
}

.ao-prg-cta .wp-block-column:last-child .ao-arrow {
	width: 20rem;
	max-width: 100%;
	margin-inline: auto;
}

/* A grid, so the pill's column is exactly as wide as the pill and nothing
   can spill over the copy. */
@media (min-width: 782px) {
	.ao-prg-cta .wp-block-columns {
		display: grid;
		align-items: center;
	}
}

/* Narrow desktops: the button moves under the copy; the book takes the right. */
@media (min-width: 782px) and (max-width: 1199px) {
	.ao-prg-cta .wp-block-columns {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

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

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

	.ao-prg-cta .wp-block-column:nth-child(2) .wp-block-buttons {
		justify-content: flex-start;
	}

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

/* Wide: copy, pill and book side by side, as in the PDF; only here is there
   room for the pill and the arrow links to stay on one line. */
@media (min-width: 1200px) {
	.ao-prg-cta .wp-block-columns {
		grid-template-columns: minmax(0, 1fr) auto minmax(20rem, 0.6fr);
	}

	.ao-prg-cta .wp-block-button__link,
	.ao-prg-cta .ao-arrow {
		white-space: nowrap;
	}
}

/* ---- Phones and tablets: the hero art runs edge to edge above the copy. ---- */
@media (max-width: 1099px) {
	.ao-prg-hero .wp-block-column:first-child {
		margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right));
	}
}

/* ---- Mobile ---- */
@media (max-width: 781px) {
	.ao-prg-myth .wp-block-column:nth-child(2) {
		order: 3;
		max-width: min(52%, 220px);
		margin-inline: auto;
	}

	.ao-prg-why .wp-block-column:first-child,
	.ao-prg-myth .wp-block-column:first-child,
	.ao-prg-fit .wp-block-column:first-child {
		padding-bottom: 0;
	}

	.ao-prg-myth .wp-block-column:nth-child(3) {
		display: flex;
		justify-content: center;
	}

	.ao-prg-outcomes .ao-tri svg {
		max-width: 300px;
	}

	.ao-prg-outcomes .ao-tri__lbl {
		font-size: 23px;
	}

	.ao-prg-outcomes .ao-prg-tri__mid {
		font-size: 25px;
	}

	/* The wheel's labels are unreadable this small (the chips carry them);
	   the pointing woman stays, standing on the band's bottom edge. */
	.ao-prg-fit__circle {
		display: none;
	}

	.ao-prg-fit__art {
		justify-content: center;
	}

	.ao-prg-fit__woman {
		flex: 0 0 160px;
		margin-inline: auto !important;
	}

	.ao-prg-cta .wp-block-image img {
		width: 170px;
		height: auto;
	}
}