/* Hover for the blog cards and the scenario tiles (/blog/, /kejsy/).
   Pointer devices only; touch keeps the static cards. Tokens come from the bundle. */
.resource-article{position:relative}
.resource-article::after{content:"↗";position:absolute;top:16px;right:16px;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);font-size:18px;line-height:1;box-shadow:0 0 0 1px var(--ds-color-border),var(--ds-shadow-hairline);opacity:0;transform:translate(-4px,4px);pointer-events:none}
.resource-article-featured::after{right:auto;left:calc(52.38% - 56px)}
.resource-article:focus-visible::after{opacity:1;transform:none}
@media(max-width:700px){.resource-article-featured::after{left:auto;right:16px}}

/* A scenario tile behaves as one link, like the blog cards: stretch the title link over it. */
.scenario-tile{position:relative}
.scenario-copy h3 a::after{content:"";position:absolute;inset:0}

@media(hover:hover){
  .resource-article:hover,.scenario-tile:hover{box-shadow:var(--ds-shadow-card-hover);border-color:var(--ds-color-border-strong)}
  .resource-article:hover::after{opacity:1;transform:none}
}

/* Motion only when the visitor has not asked to reduce it. */
@media(prefers-reduced-motion:no-preference){
  .resource-article,.scenario-tile{transition:box-shadow var(--quick) var(--ease),border-color var(--quick) var(--ease)}
  .resource-article::after{transition:opacity var(--quick) var(--ease),transform var(--quick) var(--ease)}
  .resource-article>img,.scenario-photo img{transition:transform .45s var(--ease)}
  .scenario-copy h3 a>span[aria-hidden]{transition:transform var(--quick) var(--ease)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .resource-article:not(.resource-article-featured):hover>img{transform:scale(1.025)}
  .scenario-tile:hover .scenario-photo img{transform:scale(1.03)}
  .scenario-tile:hover .scenario-copy h3 a>span[aria-hidden]{transform:translate(2px,-2px)}
}