/* «Детальніше» — Figma «Details Link» component 3014:2350 (white=off) /
   3014:2351 (white=on), Hover 4312:24184.

   The component's own box, type and arrow, shared by every place that draws
   it: the repertoire card, «Про режисера» and «Про актора» on the performance
   page, and the three links of «Перед виставою». Each of those keeps what is
   its own: the colour on a dark ground, and the hover — the repertoire card
   hovers the whole card, not the link, so this file carries no `:hover` at all.
   «Про режисера»/«Про актора» draw a second arrow export (viewBox 0 0 28 12)
   and re-size the box themselves. Registered by inc/parts/details-link.php and
   printed before every component sheet that names it as a dependency, so a
   single-class override there always wins. */

.c-details-link {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-decoration: none;
	text-transform: uppercase;

	/* animations.md, row «Детальніше» (600ms, ease-out): the hover moves the
	   arrow 4px right (gap 8 → 12) and turns the text #0C9586. That colour is
	   3.7:1 on white and fails AA for text, so the callers substitute
	   --color-primary-700 (5.5:1) — the same substitution event-card.css and
	   the header already make (designer-questions.md); on a dark ground the
	   .fig's own --color-primary-500 is what passes. The literal curve, not
	   the `ease-out` keyword, so `getTiming().easing` reads back the string
	   the motion tests compare against. */
	transition:
		gap 600ms cubic-bezier(0, 0, 0.58, 1),
		color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-details-link svg {
	display: block;

	/* «Arrow» 3014:2352 — the export's own 27.1111×12. */
	width: 27.1111px;
	height: 12px;

	/* The component is `align=baseline` in the .fig, and the arrow's baseline
	   is its own bottom edge: at 1440 the node sits 4px below the text's top
	   (of a 22px line), at 1920 7px (of 24) — both of which `baseline` gives
	   and `center` misses by ~1px at the larger step (task-1-report.md). */
	align-self: baseline;
}

/* «Inactive» 4316:24311 / 4316:24314 / 4316:24317 — the variant with no
   destination: text #697482 (--color-neutral-500, 4.6:1 on white) and a
   #D0D5DC arrow (--color-neutral-300). Rendered as a `<span>` by
   `podil_details_link( '' , … )`, so it is not focusable; disabled controls
   are outside 1.4.3/1.4.11, which is why the arrow keeps the .fig's own
   low-contrast grey. */
.c-details-link--inactive {
	color: var(--color-neutral-500);
}

/* The arrow export paints itself with `fill="var(--color-primary-500)"`, not
   `currentColor`, so the Inactive grey is set on the path rather than
   inherited. */
.c-details-link--inactive svg path {
	fill: var(--color-neutral-300);
}