fix(Card): Prevent other links than the Card Link from stretching (#1898)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>

Author: VincentSmedinga

packages/css/src/components/card/card.scss

@@ -7,35 +7,15 @@
   display: grid;
   gap: var(--ams-card-gap);
   outline-offset: var(--ams-card-outline-offset);
-  position: relative;
+  position: relative; // Allows stretching the card link below.
   touch-action: manipulation;
 
-  /* Set native outline on card if card has focus visible within */
+  // Set native outline to Card if it has a visible focus inside.
   &:has(:focus-visible) {
     outline-color: -webkit-focus-ring-color;
     outline-style: auto;
     outline-width: 0.0625rem;
   }
-
-  /*
-    Remove link focus outline only if :has is supported,
-    which means the outline on the whole card is set
-  */
-  &:has(:focus-visible) a:focus {
-    outline: none;
-  }
-
-  /*
-    This trick, together with position: relative on the outer wrapper, makes the whole card clickable.
-    Taken from https://inclusive-components.design/cards/
-  */
-  a::after {
-    content: "";
-    display: block;
-    inset-block: 0;
-    inset-inline: 0;
-    position: absolute;
-  }
 }
 
 .ams-card__heading-group {
@@ -50,8 +30,25 @@
   text-decoration-thickness: var(--ams-card-link-text-decoration-thickness);
   text-underline-offset: var(--ams-card-link-text-underline-offset);
 
+  // Make the whole Card clickable by making the link cover its entire area.
+  // Source: https://inclusive-components.design/cards/
+  &::after {
+    content: "";
+    display: block;
+    inset-block: 0;
+    inset-inline: 0;
+    position: absolute;
+  }
+
   &:hover {
     color: var(--ams-card-link-hover-color);
     text-decoration-line: var(--ams-card-link-hover-text-decoration-line);
   }
+
+  // Remove the outline from the link; it’s already on the Card.
+  // Reuses the `.ams-card:has(:focus-visible)` selector above, so that
+  // browsers that support it apply both styles, while those that don’t apply neither.
+  .ams-card:has(:focus-visible) &:focus {
+    outline: none;
+  }
 }