/**
 * `tr-arc-cta` — the read affordance the archive cards end with.
 *
 * EXTRACTED FROM archive-discovery.css IN C-69, and the reason is a page rather
 * than tidiness. These rules sat in the archive stylesheet while the markup is
 * emitted by `tiorai_arc_cta()` from two CARD partials, and the single
 * alternative page renders both of those cards without ever loading an archive
 * sheet. The moment C-69 gave the default list card a button, that page would
 * have printed an unstyled span where every other surface prints a control.
 *
 * So the styles live beside the markup now, with their own loader
 * (`tiorai_arc_cta_assets()` in inc/archive-ui.php), and each card's
 * loader pulls it in — the four-file contract CLAUDE.md states for a shared
 * component, minus the JS, which this one has none of.
 *
 * A REAL BUTTON, full width at the foot of the card.
 *
 * It is a `<span>`, not an anchor: each card's title carries a stretched
 * `::after` that already covers the card and already points at this
 * destination, so a second anchor would be a second tab stop for one link. What
 * it must do is LOOK like the control it stands for, because a text link at the
 * bottom of a card reads as an afterthought while a filled button reads as the
 * card's purpose.
 *
 * `margin-block-start: auto` is what aligns every button in a row on the same
 * baseline regardless of how long each title and description ran.
 *
 * THIS TREATMENT IS `/compare/`'S, ADOPTED RATHER THAN INVENTED. It was
 * established for `tr-vs-card` with the contrast reasoning recorded in
 * compare-archive.css, and the three archives are one design system, so the two
 * new shelves take it as it stands rather than shipping a third CTA style.
 * `.tr-vs-card__cta` still carries its own copy in that file; collapsing the two
 * onto this one selector is booked as follow-up in tasks.md.
 */

.tr-arc-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	inline-size: 100%;
	min-block-size: 44px;
	margin-block-start: auto;
	padding: 0 var(--space-4);
	border-radius: var(--radius-default);
	background: var(--color-primary);
	color: var(--color-text-on-brand);
	font-size: var(--font-size-sm);
	font-weight: 700;
	transition: filter 0.18s cubic-bezier(0.22, 1, 0.36, 1);

	/*
	 * THIS IS WHAT KEEPS THE BUTTON CLICKABLE, and its absence is what made
	 * `/compare/`'s equivalent dead on arrival.
	 *
	 * The card's single anchor is the title, stretched over the whole card by an
	 * `::after` with `inset: 0`. That pseudo-element is POSITIONED, so it paints
	 * above ordinary static content and every click on the card reaches it —
	 * until something else establishes a stacking context on top of it. The
	 * hover rule below sets `filter`, and a non-`none` filter creates a stacking
	 * context, which would lift this span above the overlay at exactly the moment
	 * a visitor is hovering it and about to press.
	 *
	 * `pointer-events: none` hands every click straight through to the anchor
	 * underneath. The button is a picture of a control; the anchor is the
	 * control.
	 */
	pointer-events: none;
}

/*
 * The card is the control, so the button reacts to the CARD's hover and focus,
 * not to its own — the pointer is rarely over the button itself when the card
 * is being considered.
 *
 * A DERIVED darkening, not `--color-primary-dark`. That token is
 * theme-invariant (`#4A6600`, defined once in `:root`), so swapping to it in
 * dark mode would drop a bright lime button to dark olive while the label stays
 * `--color-text-on-brand`, which is `#0B0F17` there — near-black text on a dark
 * ground. `brightness()` moves whatever the fill actually is, in the same
 * direction, in both themes, and improves the label's contrast rather than
 * destroying it.
 */
.tr-alt-card:hover .tr-arc-cta,
.tr-alt-card:focus-within .tr-arc-cta,
.tr-list-card:hover .tr-arc-cta,
.tr-list-card:focus-within .tr-arc-cta {
	filter: brightness(0.93);
}

.tr-arc-cta svg {
	flex: 0 0 auto;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-alt-card:hover .tr-arc-cta svg,
.tr-alt-card:focus-within .tr-arc-cta svg,
.tr-list-card:hover .tr-arc-cta svg,
.tr-list-card:focus-within .tr-arc-cta svg {
	transform: translateX(3px);
}

/* Both transitions are decorative — a tint and a 3px nudge — and neither
   communicates state that colour and position do not already carry, so they are
   removed rather than shortened. */
@media (prefers-reduced-motion: reduce) {
	.tr-arc-cta,
	.tr-arc-cta svg {
		transition: none;
	}

	.tr-alt-card:hover .tr-arc-cta svg,
	.tr-alt-card:focus-within .tr-arc-cta svg,
	.tr-list-card:hover .tr-arc-cta svg,
	.tr-list-card:focus-within .tr-arc-cta svg {
		transform: none;
	}
}