/**
 * A card of core blocks on an editor-managed page that opens as a whole: the
 * home page's service tiles of an image, a heading, a paragraph and a link.
 *
 * Add "hauto-link-card" to the outer Group (Advanced → Additional CSS class).
 * The card's link stretches over it with a pseudo-element, so the whole card
 * is clickable while there is still exactly one link for a screen reader and
 * the keyboard — no script, and no link wrapped around block content. With
 * more than one link in the card, the last one covers the others.
 */

@layer components {
	.hauto-link-card {
		--hauto-link-card-hover-border: color-mix(
			in srgb,
			var(--wp--preset--color--contrast) 40%,
			transparent
		);

		position: relative;
		transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);

		&:hover,
		&:focus-within {
			box-shadow: var(--wp--preset--shadow--raised);
			/* stylelint-disable-next-line declaration-no-important -- the border
			   colour is the editor's, which core emits as an !important preset
			   class, and nothing but !important outranks that. */
			border-color: var(--hauto-link-card-hover-border) !important;
		}

		& :any-link::after {
			position: absolute;
			inset: 0;
			border-radius: inherit;
			content: '';
		}
	}

	/* The photo grows inside its own frame, as a car card's does. */
	.hauto-link-card .wp-block-image {
		overflow: hidden;
		border-start-start-radius: var(--hauto-radius-md);
		border-start-end-radius: var(--hauto-radius-md);

		& [class*='wp-image-'] {
			transition: scale 500ms cubic-bezier(0.16, 1, 0.3, 1);
		}
	}

	.hauto-link-card:hover [class*='wp-image-'] {
		scale: 1.04;
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-link-card,
		.hauto-link-card [class*='wp-image-'] {
			transition: none;
		}

		.hauto-link-card:hover [class*='wp-image-'] {
			scale: none;
		}
	}
}