/*
 * Homepage section 8: why Voyager, the comparison ledger (VOY-935, spec KB-514).
 *
 * Loaded on the front page by the assets/sections loader (VOY-908). Tokens
 * only, no raw hex. The ledger is core/table; every rule reaches it through
 * .vy-why so nothing here touches another table on the site.
 *
 * WITHOUT JAVASCRIPT every row is visible, and hover and focus-within still
 * strike the usual line, draw the accent bar and open the proof. The script
 * (home-why.js) adds .is-js, and only then are rows held back for the
 * entrance. It also adds .is-dimming / .is-hot for the other-rows dim, which
 * is the one part of the behaviour that needs it.
 *
 * CONTENT EDGE and SPACING follow Ben's VOY-908 review, which supersedes the
 * spec's 112px / 80px padding: every homepage section shares the proof bar's
 * content edge, max(40px, (width - wide) / 2), and adds no top padding, so the
 * section above sets the gap. The spec's 88px bottom padding stays.
 *
 * MOTION. The site's motion pause (data-ascii-paused on <html>, VOY-412) is
 * treated exactly like prefers-reduced-motion: no entrance, no strike draw,
 * and the proof opens instantly.
 */

.wp-block-group.vy-why {
	--why-pad: max(40px, calc((100% - var(--wp--custom--layout--wide, 1440px)) / 2));
	--why-ease: cubic-bezier(0.2, 0, 0, 1);
	--why-topic: 180px;
	margin-block-start: 0;
	background: var(--bg-canvas);
	color: var(--fg-1);
	padding: 0 var(--why-pad) 88px;
}

.vy-why.alignfull > .vy-why__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
	max-width: var(--wp--custom--layout--wide);
	margin-inline: auto;
}

/* Flow layout puts a block gap on every child; this section sets its own. */
.vy-why :is(p, h2, figure, .wp-block-group) {
	margin: 0;
}

/* The planet mark, one colour. Used by the eyebrow and the Voyager header. */
.vy-why .vy-why__eyebrow::before,
.vy-why .vy-why__ledger thead th:last-child::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	aspect-ratio: 118.14 / 93.76;
	margin-right: 0.6em;
	vertical-align: -0.3em;
	background: var(--accent-bright);
	-webkit-mask: url("home-why/planet.svg") center / contain no-repeat;
	mask: url("home-why/planet.svg") center / contain no-repeat;
}

/* ---- Header ------------------------------------------------------------ */

.vy-why .vy-why__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 64px;
}
.vy-why .vy-why__titles {
	max-width: 800px;
	flex: 1 1 auto;
}
.vy-why .vy-why__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
	margin-bottom: 16px;
}
.vy-why .vy-why__h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--fg-1);
}
.vy-why .vy-why__intro {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.62;
	color: var(--fg-2);
	max-width: 400px;
	flex: 0 3 400px;
	min-width: 260px;
}

/* ---- Ledger ------------------------------------------------------------ */

/* padding 0: the figure arrives with a 16px inset from the table styles, which
   put the rows inside their own border and the phone stack off the edge. */
.vy-why .vy-why__ledger {
	padding: 0;
	border: 1px solid var(--border-1);
	border-radius: 14px;
	overflow: hidden;
}
/* Rows are grids, not table layout: Chrome ignores a calc() width on a table
   cell, so 180px / 1fr / 1.25fr cannot be said any other way. The script
   restores explicit table roles for browsers that drop them on a display
   change. */
.vy-why .vy-why__ledger table {
	display: block;
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0;
}
.vy-why .vy-why__ledger :is(thead, tbody) {
	display: block;
	border: 0;
}
.vy-why .vy-why__ledger tr {
	display: grid;
	grid-template-columns: var(--why-topic) minmax(0, 1fr) minmax(0, 1.25fr);
}
.vy-why .vy-why__ledger :is(th, td) {
	border: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* The caption names the figure for assistive technology and crawlers. */
.vy-why .vy-why__ledger figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.vy-why .vy-why__ledger thead th {
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
	padding: 16px 28px 14px;
	vertical-align: middle;
}
.vy-why .vy-why__ledger thead th:nth-child(2) {
	border-left: 1px solid var(--border-hair);
}
.vy-why .vy-why__ledger thead th:last-child {
	color: var(--accent-bright);
	background: var(--bg-panel);
	border-top: 2px solid var(--accent-bright);
	padding-top: 14px;
}

.vy-why .vy-why__ledger tbody tr {
	border-top: 1px solid var(--border-hair);
	transition: background-color 240ms var(--why-ease);
}

/* Topic */
.vy-why .vy-why__ledger tbody th {
	padding: 22px 24px;
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
}

/* The usual agency: ban icon, then the text the strike draws across. */
.vy-why .vy-why__ledger tbody td:nth-child(2) {
	position: relative;
	padding: 22px 28px 22px 58px;
	border-left: 1px solid var(--border-hair);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--fg-3);
}
.vy-why .vy-why__ledger tbody td:nth-child(2)::before {
	content: "";
	position: absolute;
	left: 28px;
	top: 24px;
	width: 18px;
	height: 18px;
	background: var(--fg-5);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='9' cy='9' r='7.25'/%3E%3Cpath d='M3.9 14.1 14.1 3.9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='9' cy='9' r='7.25'/%3E%3Cpath d='M3.9 14.1 14.1 3.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The strike is a 1px background drawn left to right. On a wrapped line the
   inline background runs as one strip, so it draws line one, then line two. */
.vy-why .vy-why__usual {
	background: linear-gradient(var(--fg-4), var(--fg-4)) no-repeat 0 58% / 0% 1px;
	transition: background-size 380ms var(--why-ease), color 380ms var(--why-ease);
}

/* Voyager: check chip, the claim, and the proof line under it. */
.vy-why .vy-why__ledger tbody td:last-child {
	position: relative;
	padding: 18px 28px 18px 60px;
	background: var(--bg-panel);
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.35;
	color: var(--fg-1);
	transition: background-color 240ms var(--why-ease), box-shadow 240ms var(--why-ease), color 240ms var(--why-ease);
}
.vy-why .vy-why__ledger tbody td:last-child::before,
.vy-why .vy-why__ledger tbody td:last-child::after {
	content: "";
	position: absolute;
	left: 28px;
	top: 21px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
}
.vy-why .vy-why__ledger tbody td:last-child::before {
	border: 1px solid var(--signal-ok);
	border-radius: 50%;
	background: color-mix(in oklab, var(--signal-ok) 14%, transparent);
}
.vy-why .vy-why__ledger tbody td:last-child::after {
	background: var(--signal-ok);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.2 10.2 2.6 2.6 5-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.2 10.2 2.6 2.6 5-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Always in the DOM, collapsed visually until the row is hovered or focused.
   Two lines of room, so a proof that wraps is never cut off. */
.vy-why .vy-why__proof {
	display: block;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 22px;
	letter-spacing: 0.01em;
	color: var(--fg-4);
	transition: max-height 280ms var(--why-ease), opacity 280ms var(--why-ease);
}
.vy-why .vy-why__proof::before {
	content: "↳ " / "";
}

/* ---- Hover and focus (no JavaScript needed) ----------------------------- */

.vy-why .vy-why__ledger tbody tr:is(:hover, :focus-within) {
	background: var(--bg-raised);
}
.vy-why .vy-why__ledger tbody tr:is(:hover, :focus-within) td:last-child {
	background: var(--bg-inset);
	box-shadow: inset 2px 0 0 var(--accent-bright);
}
.vy-why .vy-why__ledger tbody tr:is(:hover, :focus-within) .vy-why__usual {
	background-size: 100% 1px;
	color: var(--fg-5);
}
.vy-why .vy-why__ledger tbody tr:is(:hover, :focus-within) .vy-why__proof {
	max-height: 44px;
	opacity: 1;
}
.vy-why .vy-why__ledger tbody tr:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: -2px;
}

/* The other rows' claims dim slightly while one is active (JS only). */
.vy-why .vy-why__ledger.is-dimming tbody tr:not(.is-hot) td:last-child {
	color: var(--fg-3);
}

/* ---- Entrance (JS only): rows rise 10px and fade in, staggered ---------- */

.vy-why.is-js .vy-why__ledger tbody tr {
	opacity: 0;
}
.vy-why.is-js.is-in .vy-why__ledger tbody tr {
	opacity: 1;
	animation: vy-why-rise 520ms var(--why-ease) both;
	animation-delay: calc(120ms + var(--why-i, 0) * 90ms);
}
@keyframes vy-why-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- Footer ------------------------------------------------------------ */

.vy-why .vy-why__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
}
.vy-why .vy-why__note {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-4);
}
.vy-why .vy-why__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}
.vy-why .vy-why__link {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}
.vy-why .vy-why__link a {
	color: var(--accent-bright);
	text-decoration: none;
}
.vy-why .vy-why__link a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Tablet, 768 to 1023: the topic moves above the usual text ----------- */

@media (max-width: 1023px) {
	.vy-why .vy-why__h2 {
		font-size: 44px;
	}
	.vy-why .vy-why__ledger tr {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"topic voy"
			"usual voy";
	}
	.vy-why .vy-why__ledger thead tr {
		grid-template-rows: auto;
		grid-template-areas: "usual voy";
	}
	.vy-why .vy-why__ledger thead td:first-child {
		display: none;
	}
	.vy-why .vy-why__ledger thead th:nth-child(2),
	.vy-why .vy-why__ledger tbody td:nth-child(2) {
		grid-area: usual;
		border-left: 0;
	}
	.vy-why .vy-why__ledger thead th:last-child,
	.vy-why .vy-why__ledger tbody td:last-child {
		grid-area: voy;
	}
	.vy-why .vy-why__ledger tbody th {
		grid-area: topic;
		padding: 20px 24px 0 28px;
	}
	.vy-why .vy-why__ledger tbody td:nth-child(2) {
		padding-top: 6px;
	}
	.vy-why .vy-why__ledger tbody td:nth-child(2)::before {
		top: 8px;
	}
}

/* ---- Phone, under 768: each line stacks into a block and a card ---------- */

@media (max-width: 767px) {
	.wp-block-group.vy-why {
		padding-bottom: 56px;
	}
	.vy-why.alignfull > .vy-why__inner {
		gap: 32px;
	}
	.vy-why .vy-why__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.vy-why .vy-why__h2 {
		font-size: 32px;
		line-height: 1.08;
	}
	.vy-why .vy-why__intro {
		font-size: 15px;
		flex: none;
		min-width: 0;
		max-width: none;
	}

	.vy-why .vy-why__ledger {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}
	.vy-why .vy-why__ledger :is(table, tr, th, td) {
		display: block;
		width: auto;
	}

	/* Column labels: "The usual agency" left, "Voyager" right. */
	.vy-why .vy-why__ledger thead tr {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding-bottom: 12px;
	}
	.vy-why .vy-why__ledger thead th,
	.vy-why .vy-why__ledger thead th:last-child {
		padding: 0;
		font-size: 9px;
		background: none;
		border: 0;
	}

	.vy-why .vy-why__ledger tbody tr {
		padding: 20px 0;
	}
	.vy-why .vy-why__ledger tbody th {
		padding: 0 0 8px;
		font-size: 9px;
		line-height: 1.4;
	}
	.vy-why .vy-why__ledger tbody td:nth-child(2) {
		padding: 0 0 12px 26px;
		font-size: 14px;
		color: var(--fg-4);
	}
	.vy-why .vy-why__ledger tbody td:nth-child(2)::before {
		left: 0;
		top: 2px;
		width: 16px;
		height: 16px;
	}
	/* Struck through at rest on a phone: there is no hover to draw it. */
	.vy-why .vy-why__usual {
		background-size: 100% 1px;
	}

	.vy-why .vy-why__ledger tbody td:last-child {
		padding: 12px 14px 12px 44px;
		border-radius: 10px;
		box-shadow: inset 2px 0 0 var(--accent-bright);
		font-size: 17px;
	}
	.vy-why .vy-why__ledger tbody td:last-child::before,
	.vy-why .vy-why__ledger tbody td:last-child::after {
		left: 14px;
		top: 13px;
	}
	.vy-why .vy-why__proof {
		max-height: none;
		opacity: 1;
		margin-top: 6px;
		font-size: 10px;
		line-height: 1.5;
	}

	/* No hover state on a phone: rows stay as they are. */
	.vy-why .vy-why__ledger tbody tr:is(:hover, :focus-within) {
		background: none;
	}
	.vy-why .vy-why__ledger tbody tr:is(:hover, :focus-within) td:last-child {
		background: var(--bg-panel);
	}
	.vy-why .vy-why__ledger tbody tr:is(:hover, :focus-within) .vy-why__usual {
		color: var(--fg-4);
	}
	.vy-why .vy-why__ledger.is-dimming tbody tr:not(.is-hot) td:last-child {
		color: var(--fg-1);
	}

	/* Both links become full-width 44px rows between hairlines. */
	.vy-why .vy-why__foot,
	.vy-why .vy-why__links {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.vy-why .vy-why__note {
		margin-bottom: 16px;
	}
	.vy-why .vy-why__link {
		border-top: 1px solid var(--border-hair);
	}
	.vy-why .vy-why__link:last-child {
		border-bottom: 1px solid var(--border-hair);
	}
	.vy-why .vy-why__link a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ---- Reduced motion, and the site's motion pause ------------------------ */

@media (prefers-reduced-motion: reduce) {
	.vy-why.is-js .vy-why__ledger tbody tr,
	.vy-why.is-js.is-in .vy-why__ledger tbody tr {
		opacity: 1;
		animation: none;
	}
	.vy-why :is(.vy-why__usual, .vy-why__proof),
	.vy-why .vy-why__ledger tbody :is(tr, td) {
		transition: none;
	}
}
html[data-ascii-paused="true"] .vy-why.is-js .vy-why__ledger tbody tr {
	opacity: 1;
	animation: none;
}
html[data-ascii-paused="true"] .vy-why :is(.vy-why__usual, .vy-why__proof),
html[data-ascii-paused="true"] .vy-why .vy-why__ledger tbody :is(tr, td) {
	transition: none;
}