/*
 * tnk/feature-grid-linked-cards — stretched-link card overlay.
 *
 * The whole card is clickable while the actual <a> stays on the heading
 * (descriptive anchor text for SEO and screen readers). A pseudo-element
 * on the heading link covers the card via position:absolute. By design
 * this variant has no inner interactive elements; if a consumer site
 * adds one, that element needs position:relative;z-index:1 to stay
 * clickable above the overlay.
 *
 * Hover and focus styles live on the card so the affordance applies to
 * the whole click target. Card uses :focus-within so keyboard focus on
 * the link surfaces a ring around the card; the link's own focus ring
 * is suppressed so we don't render two outlines.
 *
 * Scoped to .tnk-card-linked applied via the pattern's className so this
 * rule does not influence unrelated core/group usage on consumer sites.
 */
.wp-block-group.tnk-card-linked {
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-group.tnk-card-linked .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.tnk-card-linked .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-group.tnk-card-linked:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wp-block-group.tnk-card-linked:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.wp-block-group.tnk-card-linked .wp-block-heading a:focus {
	outline: none;
}