Fix hover state on card branding (#14602)

* prevent hover state at card level applying when hovering on inner card link

* ensures link stays on top of the card content to allow click through to the configured brand URL

Author: cemms1

dotcom-rendering/src/components/Card/components/CardBranding.tsx

@@ -83,6 +83,7 @@ export const CardBranding = ({
 				data-testid="card-branding-logo"
 				data-component={dataAttributes?.ophanComponentName}
 				data-link-name={dataAttributes?.ophanComponentLink}
+				className="branding-logo"
 			>
 				<picture>
 					{darkModeAvailable && branding.logoForDarkBackground && (

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -58,7 +58,8 @@ const hoverStyles = css`
 	:has(
 			ul.sublinks:hover,
 			.loop-video-container:hover,
-			.slideshow-carousel:hover
+			.slideshow-carousel:hover,
+			.branding-logo:hover
 		) {
 		.card-headline .show-underline {
 			text-decoration: none;

dotcom-rendering/src/components/SponsoredContentLabel.tsx

@@ -5,6 +5,7 @@ import {
 	visuallyHidden,
 } from '@guardian/source/foundations';
 import { decideBrandingLogo } from '../lib/decideLogo';
+import { getZIndex } from '../lib/getZIndex';
 import { palette } from '../palette';
 import type { Branding } from '../types/branding';
 import type { DCRContainerPalette } from '../types/front';
@@ -52,6 +53,11 @@ const verticalStyles = {
 	`,
 };
 
+const linkStyles = css`
+	/* See: https://css-tricks.com/nested-links/ */
+	z-index: ${getZIndex('card-nested-link')};
+`;
+
 /**
  * Component used to display "paid for" label alonside the sponsor logo
  * for a particular set of branding
@@ -90,13 +96,15 @@ export const SponsoredContentLabel = ({
 					: 'This content has been paid for by an advertiser and produced by the Guardian Labs team.'}
 			</span>
 			<a
+				css={linkStyles}
 				href={logo.link}
 				data-sponsor={branding.sponsorName.toLowerCase()}
 				rel="nofollow"
 				aria-label={`Visit the ${branding.sponsorName} website`}
 				data-testid="branding-logo"
 				data-component={ophanComponentName}
 				data-link-name={ophanComponentLink}
+				className="branding-logo"
 			>
 				<picture>
 					{darkModeAvailable && branding.logoForDarkBackground && (