/* =========================================================
   Learn — design system for the /learn/ section

   Loaded after /assets/css/style.css on every Learn page.
   style.css owns the design tokens (:root), the base typography
   and the shared site shell used by Apps + Learn (header,
   footer, page shell, focus, buttons, badges, section headers);
   this file only adds Learn's own primitives on top.

   Contents
     1. Breadcrumbs
     2. Learn headings
     3. Topic cards (category / track cards)
     4. Topic pills + topic index (track topic lists)
     5. Article layout + sidebar
     6. Article typography
     7. Code (+ 7b. Math notation and visuals)
     8. Callouts
     9. Article pagination
    10. Responsive
    11. Reduced motion
========================================================= */

/* =========================
   1. Breadcrumbs
========================= */

.breadcrumbs {
  margin-bottom: var(--space-xl);
  font-size: 14px;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) 0;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin: 0 var(--space-xs);
  color: var(--color-text-faint);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
  color: var(--color-link);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text-body);
  font-weight: 600;
}

/* =========================
   2. Learn headings
========================= */

.heading-icon {
  margin-right: 0.15em;
}


/* =========================
   3. Topic cards
   One primitive for every "go to this area" card:
   Learn categories, iOS/Cloud/AI tracks, and future
   learning paths. The whole card is clickable through the
   title link (stretched with ::after) so there is still
   exactly one link per card for assistive tech.
========================= */

.card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-md);
}

.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition:
    transform var(--transition-normal),
    border-color var(--transition-normal),
    background-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.topic-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-md);
}

/* A track with no page yet: same card anatomy, but no link, so no
   hover response that would suggest it can be opened. */
.topic-card.is-upcoming:hover {
  transform: none;
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}

.topic-card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600; /* same weight whether or not the title is a link */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.topic-card-title a {
  color: inherit;
}

.topic-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.topic-card-title a:focus-visible {
  outline: none;
}

.topic-card-title a:focus-visible::after {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

.topic-card:hover .topic-card-title a {
  color: var(--color-link);
}

.topic-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Footer row for real metadata (published guides, status).
   Never populated with invented counts. */
.topic-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: 14px;
}

.topic-card-cta {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-link);
  transition: transform var(--transition-normal);
}

.topic-card:hover .topic-card-cta {
  transform: translateX(3px);
}

/* Interactive children sit above the stretched card link. */
.topic-card .topic-list a {
  position: relative;
  z-index: 1;
}

/* =========================
   4. Topic pills + topic index
   Future topics are never links — they render as
   muted, non-interactive items with a "Coming soon" label.
========================= */

.topic-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-body);
}

a.topic-pill,
.topic-pill.is-available {
  color: var(--color-link);
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
}

a.topic-pill {
  font-weight: 600;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

a.topic-pill:hover {
  color: var(--color-link-hover);
  border-color: var(--color-link);
}

.topic-pill.is-future {
  color: var(--color-text-muted);
  background: transparent;
}

.topic-pill.is-future::after {
  content: "Soon";
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
}

.topic-index {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--space-xs);
}

.topic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 52px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 15px;
  line-height: 1.4;
}

.topic-item.is-future {
  color: var(--color-text-muted);
}

.topic-item.is-available {
  grid-column: 1 / -1;
  padding: 0;
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}

.topic-item.is-available:hover {
  border-color: var(--color-link);
  background: rgba(251, 191, 36, 0.12);
}

.topic-item.is-available > a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: inherit;
  color: var(--color-text);
}

.topic-item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.topic-item-title {
  font-weight: 600;
}

.is-available .topic-item-title {
  color: var(--color-link);
  font-size: 17px;
}

.topic-item-desc {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-body);
}

.topic-item-arrow {
  color: var(--color-link);
  font-weight: 700;
  transition: transform var(--transition-normal);
}

.topic-item.is-available:hover .topic-item-arrow {
  transform: translateX(3px);
}

/* Ordered learning path (course lessons): a single column where
   planned lessons keep their description but stay non-links. */
.topic-index.is-path {
  grid-template-columns: minmax(0, 1fr);
}

/* Planned lessons share the linked lessons' inner padding so every
   lesson's text starts on the same edge. */
.topic-index.is-path .topic-item.is-future {
  padding: var(--space-md) var(--space-lg);
}

.topic-item-step {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.topic-item.is-future .topic-item-desc {
  color: var(--color-text-muted);
}

/* =========================
   5. Article layout + sidebar
========================= */

.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.article-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  max-height: calc(100vh - var(--header-height) - var(--space-2xl));
  overflow-y: auto;
  font-size: 14px;
}

/* The sidebar uses native <details>/<summary> so both groups
   are collapsible on mobile with zero JavaScript. They render
   open by default, so on desktop they read as a permanent
   sidebar with two labeled groups. */
.article-sidebar details + details {
  margin-top: var(--space-xl);
}

.article-sidebar summary {
  cursor: pointer;
  margin-bottom: var(--space-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-sidebar summary::-webkit-details-marker {
  color: var(--color-text-faint);
}

.article-sidebar ul {
  list-style: none;
  border-left: 1px solid var(--color-border);
}

.article-sidebar li {
  margin: 0;
}

.article-sidebar a,
.article-sidebar .is-current,
.article-sidebar .is-future {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px var(--space-md);
  border-left: 2px solid transparent;
  line-height: 1.45;
}

.article-sidebar a {
  color: var(--color-text-muted);
  font-weight: 500;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.article-sidebar a:hover {
  color: var(--color-text);
}

.article-sidebar a.is-active {
  color: var(--color-link);
  border-left-color: var(--color-link);
}

.article-sidebar .is-current {
  color: var(--color-link);
  font-weight: 700;
  border-left-color: var(--color-link);
}

.article-sidebar .is-future {
  color: var(--color-text-faint);
}

/* Route back up the course hierarchy, below a lesson list. */
.article-sidebar .sidebar-back {
  margin-top: var(--space-sm);
  color: var(--color-link);
}

/* =========================
   6. Article typography
   The reading column is capped at --article-width so line
   length stays comfortable; block elements (code, callouts,
   and any future in-article modules) share one spacing rhythm.
========================= */

.article-content {
  max-width: var(--article-width);
  min-width: 0;
}

/* Also a .page-intro (shared hero type scale); these override its box. */
.article-header {
  max-width: none;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.article-content h2 {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.article-header + h2 {
  margin-top: 0;
}

.article-content h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: 19px;
  line-height: 1.35;
}

.article-content h2,
.article-content h3 {
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

.article-content p {
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.article-content > ol,
.article-content > ul {
  color: var(--color-text-body);
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 var(--space-lg);
  padding-left: var(--space-lg);
}

.article-content li + li {
  margin-top: var(--space-xs);
}

.article-content strong {
  color: var(--color-text);
}

/* =========================
   7. Code
========================= */

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-link-hover);
  overflow-wrap: anywhere;
}

pre {
  max-width: 100%;
  margin: 0 0 var(--space-lg);
  padding: 20px 22px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-code);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

pre code {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--color-text-code);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre;
  overflow-wrap: normal;
}

/* Code blocks enhanced by common.js (enhanceCodeBlocks). The wrapper
   anchors the Copy button, so it stays put while the <pre> scrolls
   horizontally; the extra top padding keeps line 1 clear of it. */
.code-block {
  position: relative;
  max-width: 100%;
  margin: 0 0 var(--space-lg);
}

.code-block pre {
  margin: 0;
  padding-top: 58px;
}

.code-copy-button {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  top: 10px;
  right: 10px;
  min-width: 72px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(8, 18, 35, 0.88);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.code-copy-button svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.code-copy-button:hover {
  border-color: var(--color-accent-border);
  color: var(--color-text);
}

.code-copy-button.is-copied {
  color: var(--color-success);
}

.code-copy-button.is-failed {
  color: var(--color-danger);
}

/* Content for assistive technology only (e.g. the copy status). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Diagrams: plain-text sketches (view trees, spacing, rough UI
   previews). Deliberately not styled as code — lighter dashed
   surface, body text colour — and captioned with <figcaption>.
   Markup: <figure class="diagram"><pre role="img" aria-label="…">…</pre>
   <figcaption>…</figcaption></figure> */
.diagram {
  margin: 0 0 var(--space-lg);
}

.diagram pre {
  margin: 0;
  border-style: dashed;
  background: var(--color-surface);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.25; /* tight enough for box-drawing lines to connect */
  color: var(--color-text-body);
  white-space: pre;
}

.diagram figcaption {
  margin-top: var(--space-xs);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* =========================
   7b. Math
   Notation is native MathML (<math>): no library, no JS, readable
   without scripts and exposed to assistive tech as mathematics.
   Math is never marked up as <pre><code>, so it never receives
   the code Copy button. Visuals share one figure wrapper.
========================= */

math {
  font-size: 1.08em;
  color: var(--color-text);
}

/* Block equation: centred, larger, on a light surface — deliberately
   unlike a code block (no mono font, no dark code background). */
.math-display {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  overflow-x: auto;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.math-display math {
  font-size: 1.5em;
}

/* Wrapper for math visuals (quantities, number lines, and later
   fraction models, geometry and graphs). */
.math-figure {
  margin: 0 0 var(--space-lg);
}

.math-figure figcaption {
  margin-top: var(--space-xs);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Concrete quantities: rows of real-world objects (🍎 🍎 🍎). */
.quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface);
  font-size: 30px;
  line-height: 1.3;
}

.quantity-group {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
}

.quantity-operator,
.quantity-result {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.quantity-result {
  color: var(--color-link);
}

/* Number line. Markup: <ol class="number-line-track"> of <li><span>n</span></li>;
   optional data-hop="+1" (label above) and data-tag="Start" (label below),
   plus .is-start / .is-step / .is-end for highlighting. Meaning is always
   also given in text (labels + figcaption), never by colour alone. */
.number-line {
  overflow-x: auto;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.number-line-track {
  position: relative;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(28px, 1fr);
  min-width: max-content;
}

/* The line itself, running through the centre of the number row. */
.number-line-track::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 39px; /* centre of the number row: 22px + 2px gap + 32px / 2 − 1px */
  height: 2px;
  background: var(--color-border-strong);
}

/* Opt out of the article's list spacing (.article-content li + li). */
.number-line-track li + li {
  margin-top: 0;
}

.number-line-track li {
  position: relative;
  display: grid;
  grid-template-rows: 22px 32px 20px;
  justify-items: center;
  align-items: center;
  gap: 2px;
  margin: 0;
}

/* Hop and tag labels are positioned out of flow so a wide label
   ("START") never widens its column. */
.number-line-track li::before,
.number-line-track li::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.number-line-track li::before {
  top: 4px;
  content: attr(data-hop);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-link);
}

.number-line-track li::after {
  bottom: 2px;
  content: attr(data-tag);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.number-line-track span {
  position: relative;
  grid-row: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-body);
}

.number-line-track .is-step span {
  border-color: var(--color-accent-border);
  /* accent tint over an opaque base, so the line stays hidden behind it */
  background: linear-gradient(var(--color-accent-soft), var(--color-accent-soft)), var(--color-bg);
  color: var(--color-link);
}

.number-line-track .is-start span {
  border: 2px solid var(--color-link);
  color: var(--color-text);
}

.number-line-track .is-end span {
  border-color: var(--color-link);
  background: var(--color-link);
  color: var(--color-bg);
}

.number-line-track .is-start::after,
.number-line-track .is-end::after {
  color: var(--color-link);
}

/* Practice questions: numbered, roomy, answers never shown inline. */
.practice-list {
  margin: 0;
  padding-left: 22px;
}

.practice-list > li + li {
  margin-top: var(--space-md);
}

.practice-list math {
  font-size: 1.2em;
}

/* =========================
   8. Callouts
   Variants: note · tip · key · warning (alias: mistake) ·
   interview · takeaway · challenge. Each variant only sets
   its color; the visible title always names the type.
========================= */

.callout {
  --callout-color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--callout-color);
  background: var(--color-surface);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-body);
}

.callout p {
  font-size: 16px;
  line-height: 1.7;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout ul,
.callout ol {
  margin: 0;
  padding-left: 20px;
}

.callout li + li {
  margin-top: var(--space-xs);
}

.callout-title {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--callout-color);
}

.callout-note      { --callout-color: var(--color-info); }
.callout-tip,
.callout-key       { --callout-color: var(--color-link); }
.callout-warning,
.callout-mistake   { --callout-color: var(--color-danger); }
.callout-interview { --callout-color: var(--color-special); }
.callout-takeaway  { --callout-color: var(--color-success); }
.callout-challenge { --callout-color: var(--color-special); }

.callout-key {
  background: var(--color-accent-soft);
}

/* =========================
   9. Article pagination
========================= */

.article-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.pagination-link,
.pagination-placeholder {
  display: block;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
}

.pagination-link {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}

.pagination-link:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

.pagination-placeholder {
  border: 1px dashed var(--color-border);
  color: var(--color-text-faint);
}

.pagination-link.is-next,
.pagination-placeholder.is-next {
  text-align: right;
}

.pagination-label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* =========================
   10. Responsive
========================= */

@media (max-width: 960px) {

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .article-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    order: -1;
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .article-sidebar details {
    padding: var(--space-sm) 0;
  }

  .article-sidebar details + details {
    margin-top: 0;
    border-top: 1px solid var(--color-border);
  }

  .article-sidebar summary {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 0;
  }

  .article-sidebar details[open] summary {
    margin-bottom: var(--space-xs);
  }
}

@media (max-width: 768px) {

  .article-content h2 {
    font-size: 23px;
    margin-top: var(--space-xl);
  }

  .article-content p,
  .article-content > ol,
  .article-content > ul {
    font-size: 16px;
  }

  pre {
    padding: var(--space-md);
    margin-left: calc(-1 * var(--space-2xs));
    margin-right: calc(-1 * var(--space-2xs));
  }

  pre code {
    font-size: 13px;
  }

  .diagram pre {
    font-size: 12px;
  }

  .article-pagination {
    grid-template-columns: 1fr;
  }

  .pagination-link.is-next,
  .pagination-placeholder.is-next {
    text-align: left;
  }
}

@media (max-width: 600px) {

  .topic-card {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }

  .topic-item.is-available > a,
  .topic-index.is-path .topic-item.is-future {
    padding: var(--space-md);
  }

  /* 0–10 fits a 360px screen without scrolling. */
  .number-line {
    padding-inline: var(--space-xs);
  }

  .number-line-track {
    grid-auto-columns: minmax(26px, 1fr);
  }

  .number-line-track::before {
    left: 13px;
    right: 13px;
  }

  .number-line-track span {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

/* =========================
   11. Reduced motion
========================= */

@media (prefers-reduced-motion: reduce) {

  .topic-card:hover,
  .topic-card:hover .topic-card-cta,
  .topic-item.is-available:hover .topic-item-arrow {
    transform: none;
  }
}