/* One card-state contract, shared by every marketing card and index row.
   Native anchors/controls keep their behavior. Template previews receive a
   visual hover only; they become actionable only when a real link is present.
   CTA colors and arrow motion belong to cta.css, not to this layer. */
[data-theme] body :is(
  .marketing-card-link, .card, .tier, .workflow-template-card,
  .blog-featured, .blog-card, .blog-archive-row, .product-related-card,
  .studio-download-card, .studio-download-os-card, .role-row
):is(a[href], :has(a[href], button:not(:disabled)), .workflow-template-card) {
  --card-state-bg: var(--card-rest-bg, var(--marketing-card-bg));
  background: var(--card-state-bg);
  color: inherit;
  text-decoration: none;
  border-color: var(--line);
  box-shadow: none;
  transform: none;
  transition: background-color var(--fast) var(--ease);

  &:is(.role-row, .blog-archive-row) {
    --card-rest-bg: transparent;
  }

  &:is(:hover, :focus-within) {
    --card-state-bg: var(--marketing-card-hover-bg);
    background: var(--card-state-bg);
    border-color: var(--line);
    box-shadow: none;
    transform: none;
  }

  & :is(.glyph, .glyph svg, .workflow-template-tag) {
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }

  &:is(:hover, :focus-within) :is(.glyph, .glyph svg, .workflow-template-tag) {
    color: var(--ink);
  }

  /* Template capability/count pills remain legible against the active card
     fill; their raised state uses the same canvas value as other controls. */
  &:is(:hover, :focus-within).workflow-template-card .workflow-template-tag {
    background: var(--s1);
  }

  /* Inner copy panels previously painted their own unrelated hover fills.
     They now share their host's state while artwork keeps its own backdrop. */
  & :is(
    .product-related-copy, .workflow-template-card-body,
    .blog-featured-copy, .blog-card-body, .studio-download-card-copy
  ) {
    background: var(--card-state-bg);
    transition: background-color var(--fast) var(--ease);
  }

  /* One focus ring belongs to the whole link, including existing overlay
     links. Cards with separate controls keep those controls' native rings. */
  &:is(
    :focus-visible,
    :has(.blog-card-link:focus-visible),
    :has(.product-related-link:focus-visible),
    :has(.workflow-template-card-link:focus-visible)
  ) {
    outline: 2px solid var(--ink);
    outline-offset: var(--sp1);
  }

  & :is(.blog-card-link, .product-related-link, .workflow-template-card-link):focus-visible {
    outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
    &, & :is(
      .product-related-copy, .workflow-template-card-body,
      .blog-featured-copy, .blog-card-body, .studio-download-card-copy,
      .glyph, .glyph svg, .workflow-template-tag
    ) {
      transition: none;
    }
  }
}

/* An unavailable template remains a readable preview, even during hover. */
body .workflow-template-card:not(a[href]):not(:has(a[href], button:not(:disabled))) {
  cursor: default;
}