/* ============================================================
   The Philosophy page — one-off layout (loads after theme.css on
   /philosophy/ only).
   ============================================================ */

/* ------------------------------------------------------------
   Hero: the neon sign runs off the left edge (.ao-bleed-start) in a
   tall band, and fades into the black instead of reading as a box.
   ------------------------------------------------------------ */
.ao-phil-hero__neon img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 60%, transparent 100%);
	mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 60%, transparent 100%);
}

@media (min-width: 782px) {
	.ao-phil-hero > .wp-block-columns {
		min-height: calc(640px - 2 * var(--wp--preset--spacing--80));
	}
}

/* "The Philosophy:" — slab bold italic, tight above the h1. */
.ao-phil-hero .ao-phil-kicker {
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
}

.ao-phil-hero .ao-phil-kicker strong {
	font-weight: 700;
}

.ao-phil-hero .ao-phil-kicker + .wp-block-heading {
	margin-top: 0.25rem;
}

.ao-phil-hero .wp-block-buttons + .ao-arrow {
	margin-top: var(--wp--preset--spacing--50);
}

/* Beside the teal arrows on black, the design sets the link in white. */
.is-style-band-black .ao-arrow--teal a {
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------
   Copy columns: the h3 sits tight on its first line, and the
   statements stack as the PDF's short lines.
   ------------------------------------------------------------ */
.ao-phil-copy > * + * {
	margin-top: 0.75rem;
}

.ao-phil-copy > h3 + * {
	margin-top: 0.5rem;
}

.ao-phil-copy > .ao-arrow {
	margin-top: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------
   Cutouts that fill their column's height (Positivity, Ask Yourself):
   from 782px the photo no longer sets the band's height — the copy
   does. She rises beside the eyebrow (which sits on the other side)
   and still stands on the band's bottom edge. Both photos already end at
   the hip, as the band crops them in the design, so they show whole
   (contain), bottom-centered. On phones the shared
   .ao-cutout rules apply (after the copy, height-capped).
   ------------------------------------------------------------ */
@media (min-width: 782px) {
	.wp-block-columns > .wp-block-column.ao-cutout-col.ao-phil-fill {
		position: relative;
		align-self: stretch;
		min-height: 320px;
	}

	.ao-phil-fill > .wp-block-image.ao-cutout {
		position: absolute;
		inset-inline: 0;
		top: calc(-1 * (var(--wp--preset--font-size--xl) + var(--wp--style--block-gap, 1.5rem)));
		bottom: calc(-1 * var(--wp--preset--spacing--80));
		margin: 0;
	}

	.ao-phil-fill > .ao-cutout img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: contain;
		object-position: 50% 100%;
	}
}

/* ------------------------------------------------------------
   Formulas: a one-line equation over a much larger, centered result.
   The non-breaking spaces before the operators keep any wrap from
   starting a line with "+", "×" or "=".
   ------------------------------------------------------------ */
.ao-phil-formula {
	text-align: center;
}

.ao-phil-formula > .ao-formula {
	margin: 0;
	font-size: clamp(1.375rem, 2.6vw, 2.25rem);
}

.ao-phil-formula > .ao-phil-result {
	margin: 0.15em 0 0;
	font-family: var(--wp--preset--font-family--slab);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.05;
	text-wrap: balance;
}

/* The Multiplier's longer equation runs smaller, as in the design. */
.ao-phil-formula--long > .ao-formula {
	font-size: clamp(1.125rem, 1.95vw, 1.75rem);
}

.ao-phil-formula--long > .ao-phil-result {
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
}

/* "Explore The Equation" centers under both columns. */
.ao-phil-multiplier__cta {
	margin-top: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------
   Bringing it Together: the triangle, capped on phones.
   ------------------------------------------------------------ */
.ao-tri svg {
	max-width: 480px;
}

/* From 782px the diagram rises beside the eyebrow, as in the design. */
@media (min-width: 782px) {
	.wp-block-columns > .wp-block-column.ao-phil-tri-col {
		margin-top: calc(-1 * (var(--wp--preset--font-size--xl) + var(--wp--style--block-gap, 1.5rem)));
	}
}

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

@media (max-width: 781px) {
	.ao-tri svg {
		max-width: 300px;
		overflow: visible;
	}

	/* The 620-unit viewBox shrinks to 300px here; larger labels keep them
	   at a readable ~14px. */
	.ao-tri__lbl {
		font-size: 29px;
	}
}

/* ------------------------------------------------------------
   Ask Yourself: the starter link sits under the copy on phones,
   not orphaned at the right.
   ------------------------------------------------------------ */
@media (max-width: 781px) {
	.ao-phil-ask .ao-arrow.has-text-align-right {
		text-align: left;
		padding-inline-start: var(--ao-arrow-hang);
		text-indent: calc(-1 * var(--ao-arrow-hang));
	}

	.ao-phil-ask .ao-arrow.has-text-align-right::before {
		inline-size: var(--ao-arrow-hang);
		margin-inline-end: 0;
	}
}

/* ------------------------------------------------------------
   Closing CTA: the gold line in slab italic, the book link bold,
   upright and white, and both links' arrows lined up under the book.
   ------------------------------------------------------------ */
.ao-phil-cta h2 em {
	font-family: var(--wp--preset--font-family--slab);
}

.ao-phil-book img {
	width: min(260px, 60vw);
	height: auto;
}

.ao-phil-cta__links {
	width: fit-content;
	margin-inline: auto;
}

.ao-phil-cta__links > * + * {
	margin-top: 0.75rem;
}

.ao-phil-cta .ao-arrow {
	font-size: var(--wp--preset--font-size--md);
}

.ao-phil-cta .ao-phil-cta__book a {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

@media (max-width: 781px) {
	.ao-phil-book img {
		width: 200px;
	}
}

/* The PDF breaks a few statements after their em dash. Where the copy
   column is too narrow for the first half to fit on one line, that break
   would strand the dash or a short fragment, so it's dropped. */
@media (max-width: 1099px) {
	.ao-phil-dash br {
		display: none;
	}
}