/*
 * Books page — one-off layout for the bands on /books/ (loaded after theme.css,
 * only on this page). Shared atoms (bands, eyebrow squares, pills, arrow links)
 * come from theme.css / block-styles.php.
 */

/* ------------------------------------------------------------
   Cutouts that sit on the band's bottom edge (Why, 8-Step man)
   ------------------------------------------------------------ */
.ao-books-flush {
	margin-block-end: 0;
}

.ao-books-flush img {
	display: block;
	margin-inline: auto;
}

@media (min-width: 782px) {
	.wp-block-group.ao-books-why,
	.wp-block-group.ao-books-steps {
		padding-block-end: 0;
	}

	/* Keep the copy off the band's bottom edge now the band has no bottom
	   padding (the cutout column supplies the band's height). */
	.ao-books-why .wp-block-column.is-vertically-aligned-center,
	.ao-books-steps .wp-block-column.is-vertically-aligned-center {
		padding-block-end: var(--wp--preset--spacing--60);
	}
}

/* ------------------------------------------------------------
   Hero — book cover beside the copy
   ------------------------------------------------------------ */
.ao-books-hero__cover img {
	width: min(100%, 340px);
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
}

.ao-books-hero .wp-block-column p {
	margin-block: 0.6em;
	text-wrap: pretty;
}

@media (max-width: 781px) {
	/* Capped so "Get the Book Today" makes the first phone screen. */
	.ao-books-hero__cover img {
		width: min(44vw, 172px);
	}
}

.ao-books-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------
   Why This Book Matters
   ------------------------------------------------------------ */
.ao-books-why .ao-books-flush img {
	width: min(100%, 520px);
}

/* ------------------------------------------------------------
   The 8-Step System — A-L-W-A-Y-S-O-N stepper (real text)
   ------------------------------------------------------------ */
/* Page tokens, derived from the palette (no free-floating hex values). */
.ao-books-steps,
.ao-books-series {
	--ao-books-gold-hi: color-mix(in srgb, var(--wp--preset--color--gold) 55%, var(--wp--preset--color--white));
	--ao-books-aqua-hi: color-mix(in srgb, var(--wp--preset--color--aqua) 55%, var(--wp--preset--color--white));
	/* About rgb(103,103,103): white text on it is 5.7:1 (AA). */
	--ao-books-badge: color-mix(in srgb, var(--wp--preset--color--operator-gray) 55%, var(--wp--preset--color--black));
	/* About rgb(85,85,85): 5.3:1 on the light-gray band (AA at body size). */
	--ao-books-muted: color-mix(in srgb, var(--wp--preset--color--operator-gray) 45%, var(--wp--preset--color--black));
}

.ao-steps {
	--ao-step-size: 2.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25;
}

.ao-steps li {
	position: relative;
	padding-inline-start: calc(var(--ao-step-size) + 0.9rem);
	min-height: var(--ao-step-size);
}

.ao-steps li + li {
	margin-block-start: 0.6rem;
}

.ao-steps li strong {
	font-size: 1.15em;
}

.ao-step__letter {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: var(--ao-step-size);
	height: var(--ao-step-size);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--ao-books-gold-hi), var(--wp--preset--color--gold) 45%, var(--wp--preset--color--orange));
	box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ao-step__letter--teal {
	background: radial-gradient(circle at 35% 30%, var(--ao-books-aqua-hi), var(--wp--preset--color--aqua) 45%, var(--wp--preset--color--teal));
}

/* Small magenta pointer between consecutive letters. */
.ao-steps li:not(:last-child) .ao-step__letter::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-inline: 0.3rem solid transparent;
	border-block-start: 0.4rem solid var(--wp--preset--color--magenta);
}

.ao-books-steps__man img {
	width: min(100%, 340px);
}

@media (max-width: 781px) {
	/* Stacked: lead with the copy, then the steps, the man last on the edge. */
	.ao-books-steps__copy {
		order: -1;
	}
	/* The cutouts stand on the band edge on phones too. */
	.wp-block-group.ao-books-why,
	.wp-block-group.ao-books-steps {
		padding-block-end: 0;
	}
}

/* Tablet (782–1099px): three columns squeeze the stepper to ~200px. Lead with
   the copy across the row, then the stepper and the man side by side. */
@media (min-width: 782px) and (max-width: 1099px) {
	.ao-books-steps__cols {
		flex-wrap: wrap !important;
	}
	.ao-books-steps__cols > .ao-books-steps__copy {
		order: -1;
		flex-basis: 100% !important;
	}
	.ao-books-steps__cols > .ao-books-steps__list {
		flex-basis: 56% !important;
	}
	.ao-books-steps__cols > .ao-books-steps__man {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}
	.ao-books-steps .ao-books-steps__list.is-vertically-aligned-center {
		padding-block-end: var(--wp--preset--spacing--60);
	}
}

/* ------------------------------------------------------------
   Inside The ALWAYS ON Experience — reader beside the copy
   ------------------------------------------------------------ */
.ao-books-inside__photo {
	margin-block-end: 0;
}

.ao-books-inside__photo img {
	display: block;
	width: 100%;
}

@media (min-width: 782px) {
	/* The photo is cropped flat at its top and right, so it fills the band's
	   right side edge to edge: anchored on the band's top, right and bottom,
	   cover-fitted from the top right. Her open book runs in under the copy,
	   which sits above it, as in the design. */
	.wp-block-group.ao-books-inside {
		position: relative;
		overflow: hidden;
	}
	.ao-books-inside__copy {
		position: relative;
		z-index: 1;
	}
	.wp-block-image.ao-books-inside__photo {
		position: absolute;
		z-index: 0;
		inset-block: 0;
		right: 0;
		width: 66vw;
		margin: 0;
		/* Wherever the cover-fit crops the left of the photo, fade it into the
		   white band rather than show a hard vertical edge. */
		-webkit-mask-image: linear-gradient(to right, transparent, #000 16%);
		mask-image: linear-gradient(to right, transparent, #000 16%);
	}
	.ao-books-inside__photo img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: right top;
	}
}

@media (min-width: 782px) and (max-width: 1099px) {
	/* The band is tall and narrow here: a narrower photo, framed on her face,
	   keeps it clear of the copy, and the eyebrow wraps short of it. */
	.wp-block-image.ao-books-inside__photo {
		width: 46vw;
	}
	.ao-books-inside__photo img {
		object-position: 72% top;
	}
	.ao-books-inside .ao-eyebrow {
		max-width: 50vw;
	}
}

@media (max-width: 781px) {
	.wp-block-group.ao-books-inside {
		padding-block-end: 0;
	}
	.ao-books-inside__photo {
		margin-inline: calc(-1 * var(--wp--style--root--padding-right)) calc(-1 * var(--wp--style--root--padding-right));
	}
}

/* ------------------------------------------------------------
   The ALWAYS ON Life Series — three covers as an equation
   ------------------------------------------------------------ */
.ao-books-forces {
	padding-inline-start: 1.25rem;
}

.ao-books-forces li + li {
	margin-block-start: 0.2rem;
}

.ao-series {
	--ao-series-gap: clamp(1rem, 2.5vw, 2.5rem);
	gap: var(--ao-series-gap);
}

.ao-series__book {
	position: relative;
}

.ao-series__book p {
	margin-block: 0;
}

.ao-series__cover {
	position: relative;
	margin-block-end: 0.75rem;
}

@media (min-width: 782px) {
	/* The featured book is the hero of the row: its column takes 1.35 shares
	   of the row and its cover is 1.35x the others. Every cover sits in a box
	   as tall as the featured one, bottom aligned, so the Purpose / Positivity
	   / Possibilities labels share one baseline however many lines the titles
	   below them wrap to. */
	.ao-series {
		container-type: inline-size;
	}
	.ao-series > .ao-series__book--featured {
		flex-grow: 1.35 !important;
	}
	.ao-series__cover {
		--ao-series-featured: min(230px, (100cqw - 2 * var(--ao-series-gap)) * 1.35 / 3.35);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* The featured cover's height (its source is 480x753). */
		height: calc(var(--ao-series-featured) * 753 / 480);
	}
}

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

.ao-series__cover img {
	display: block;
	margin-inline: auto;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.3));
}

.ao-series__book--plus img,
.ao-series__book--equals img {
	width: min(100%, 170px);
}

.ao-series__book--featured img {
	width: min(100%, 230px);
}

/* Status pill straddles the lower half of the cover. */
.ao-series__badge,
.ao-series__badge-buttons {
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translateX(-50%);
	margin: 0 !important;
	white-space: nowrap;
}

.ao-series__badge {
	padding: 0.45em 1.6em;
	border-radius: var(--wp--custom--pill--radius);
	background: var(--ao-books-badge);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.ao-series__badge-buttons .wp-block-button__link {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.ao-series__force {
	position: relative;
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}

.ao-series__title {
	font-weight: 700;
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.3;
	margin-block-end: 0.5rem !important;
}

/* Upcoming titles are set back in gray (5.3:1 on the light-gray band, AA). */
.ao-series__title.is-upcoming {
	color: var(--ao-books-muted);
}

.ao-series__desc {
	line-height: 1.35;
}

/* The equation operators between the covers. */
.ao-series__book--plus .ao-series__force::after,
.ao-series__book--equals .ao-series__force::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--operator-gray);
	font-size: 1.1em;
}

.ao-series__book--plus .ao-series__force::after {
	content: "+";
}

.ao-series__book--equals .ao-series__force::after {
	content: "=";
}

@media (min-width: 782px) {
	.ao-series__book--plus .ao-series__force::after,
	.ao-series__book--equals .ao-series__force::after {
		right: calc(-0.5 * clamp(1rem, 2.5vw, 2.5rem) - 0.3em);
	}
}

@media (max-width: 781px) {
	/* Stacked, an operator between a label and the next cover misreads
	   ("Purpose + The Plug In Effect"), so the equation is desktop-only. */
	.ao-series__book--plus .ao-series__force::after,
	.ao-series__book--equals .ao-series__force::after {
		content: none;
	}
	.ao-series__book--plus,
	.ao-series__book--equals {
		padding-block-end: 0;
	}
	.ao-series__desc {
		margin-block-end: 0.5rem !important;
	}
}

/* ------------------------------------------------------------
   Closing CTA
   ------------------------------------------------------------ */
.ao-books-cta h2 {
	margin-block-end: var(--wp--preset--spacing--40);
}

.ao-books-cta .wp-block-column p {
	margin-block: 0.5em;
}

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

.ao-books-cta__book img {
	width: min(100%, 260px);
}

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

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

@media (max-width: 781px) {
	.ao-books-cta .ao-arrow {
		text-align: center;
	}
	.ao-books-cta__book img {
		width: min(100%, 170px);
	}
	/* The arrow link may wrap on the narrowest phones. */
	.ao-books-cta .ao-arrow {
		white-space: normal;
	}
}

/* Tablet (782–1099px): the middle column is too narrow for the pill. The copy
   and the pill share the first row; the book and its link get the second,
   centered (DOM order kept, so the focus order still reads left to right). */
@media (min-width: 782px) and (max-width: 1099px) {
	.ao-books-cta > .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.ao-books-cta > .wp-block-columns > .wp-block-column:nth-child(1) {
		flex-basis: 58% !important;
	}
	.ao-books-cta > .wp-block-columns > .wp-block-column:nth-child(2) {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}
	.ao-books-cta > .wp-block-columns > .wp-block-column:nth-child(3) {
		flex-basis: 100% !important;
	}
	.ao-books-cta__book img {
		width: min(100%, 220px);
	}
	.ao-books-cta .ao-arrow {
		text-align: center;
	}
}

/* The columns row that carries a flush cutout must not add its own gap below. */
.ao-books-why > .wp-block-columns,
.ao-books-steps > .wp-block-columns,
.ao-books-inside > .wp-block-columns {
	margin-block-end: 0;
}

@media (max-width: 781px) {
	/* Keep the stacked cutout from swallowing the phone screen. */
	.ao-books-steps__man img {
		width: min(100%, 260px);
	}
}

/* Phones: each book is a media-object row (cover left, text right) rather than
   three ~250px covers stacked, which ran to ~1,100px of scrolling. */
@media (max-width: 781px) {
	.ao-series__book {
		display: grid;
		grid-template-columns: 108px 1fr;
		grid-template-rows: auto auto 1fr;
		column-gap: 1rem;
		align-items: start;
	}
	.ao-series__book--featured {
		grid-template-columns: 132px 1fr;
	}
	.ao-series__book > * {
		grid-column: 2;
		text-align: start !important;
	}
	.ao-series__book > .ao-series__cover {
		grid-column: 1;
		grid-row: 1 / -1;
		margin: 0;
	}
	.ao-series__book .ao-series__cover img {
		width: 100%;
	}
	.ao-series__badge,
	.ao-series__badge-buttons .wp-block-button__link {
		font-size: 0.8125rem;
	}
	.ao-series__badge {
		padding: 0.45em 0.9em;
	}
	.ao-series__badge-buttons .wp-block-button__link {
		padding: 0.5em 1em;
	}
}


/* Mid widths (782–1099px): side by side, the three covers get ~130px each and
   the pills collide. Stack the copy above the covers there instead, so the
   cover row gets the full band width. */
@media (min-width: 782px) and (max-width: 1099px) {
	.ao-books-series__cols {
		flex-wrap: wrap !important;
	}
	.ao-books-series__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
}