/**
 * Stretched link — one real <a> that covers a whole card.
 *
 * Written by the Card link toggle (assets/editor/stretched-link-controls.js).
 * The ::after overlay fills the nearest positioned ancestor, so the card
 * opts in by being `position: relative`; without one it fills the page.
 *
 * No z-index on purpose: a positioned element later in the card (a button
 * given position: relative in its Additional CSS) paints above the
 * overlay and stays clickable, with no numbers to keep in step.
 */

.link--stretch a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* A Cover is positioned, but core also makes its inner container relative,
   which would catch the overlay and leave only a strip clickable. The
   container is a flex item of the Cover, so z-index alone keeps it above the
   image and overlay, with no containing block: the link fills the whole Cover. */
.wp-block-cover > .wp-block-cover__inner-container:has(.link--stretch) {
	position: static;
	z-index: 1;
}

/* Screen readers only: the link itself becomes the overlay, so its text stays the
   accessible name but nothing shows and the block takes no space. Not
   screen-reader-text: its clip would clip the ::after overlay too.
   Hidden in the editor too, so it lays out like the site; it shows while
   selected (click the card, or pick it in List View) so it can be edited.
   The front end never has .is-selected. */
.link--stretch.link--sr-only:not(.is-selected) {
	margin-block: 0;
}

.link--stretch.link--sr-only:not(.is-selected) a {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	color: transparent;
	text-decoration: none;
}

/* The focus ring follows the clickable area, not just the title text. */
.link--stretch a:focus-visible {
	outline: none;
}

.link--stretch a:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: inherit;
}