/*
 * Group link — the overlay anchor `includes/blocks/group-link.php` injects.
 *
 * The anchor is the Group's first child and is stretched over the whole box, so a click
 * anywhere on the card navigates. It is a sibling rather than a wrapper because a Group
 * that wants to be one click target usually also holds real links — a category chip, a
 * "Read now" — and interactive content inside an `<a>` is invalid HTML that browsers
 * reparse and screen readers announce as one link the length of the card.
 *
 * ## Why the label is moved rather than hidden
 *
 * `text-indent: -9999px` with `overflow: hidden` on the anchor, and **not**
 * `display: none`, `visibility: hidden`, `font-size: 0` or an empty element. All of
 * those either take the anchor out of the accessibility tree or leave it with no
 * accessible name, and a link with no name is announced as "link" in a screen reader's
 * link list — thirty of them on an archive page. The name is the post title, printed
 * and moved off screen.
 *
 * `text-indent` is used rather than the usual clip-rect visually-hidden recipe because
 * the element also has to *be* the click target: a 1x1 clipped box cannot cover the
 * card. It stretches, and only its text moves.
 *
 * ## Position, painting, and the one rule that is not obvious
 *
 * `position: relative` on every Group is what the overlay resolves its `inset` against.
 * It is stated for all of them rather than only for linked ones so that a Group's
 * children can be positioned against it in general — the theme has no other place that
 * says so, and `:has(> .link-area)` would make the containing block appear and disappear
 * with an attribute, which is exactly the kind of action-at-a-distance that costs an
 * afternoon.
 *
 * The overlay carries a `z-index`, and that is deliberate rather than defensive: a
 * positioned box paints after every in-flow box whatever the DOM order says (the theme's
 * silent failure 34), so without one the anchor would sit *under* the card's own
 * absolutely-positioned layers and over its static ones — clickable in some places and
 * not others, with nothing in the markup to explain the difference. One stacking
 * decision, written down.
 *
 * Anything inside the card that must stay separately clickable therefore needs a
 * `position` and a higher `z-index` of its own. Nothing in the Latest articles card
 * does: its "Read now" leads to the same post, so the overlay covering it changes
 * nothing.
 *
 * `.link-area + *` resets the top margin core's flow layout would give the anchor's
 * next sibling — the overlay is out of flow, so that margin would be a gap above
 * content that has nothing above it.
 */

.wp-block-group {
	position: relative;
}

.wp-block-group > .link-area {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
	text-indent: -9999px;
}

.wp-block-group > .link-area + * {
	margin-block-start: 0;
}

/*
 * A Cover inside a linked card — the photograph on every article card.
 *
 * Core gives a Cover's colour layer and its inner container `position` and `z-index: 1`,
 * and the Cover itself none, so it is not a stacking context: those layers stack against
 * the overlay directly, tie with its `z-index: 1`, and win on DOM order. The card showed a
 * pointer over the photograph and a click there landed on a decorative `<span>`.
 *
 * So the Cover's own layers let the pointer through to the overlay, and only the links
 * inside it — the category chip — take it back. Raising the overlay instead would bury that
 * chip under it; giving the Cover a `z-index` would do the same.
 */
.wp-block-group:has(> .link-area) .wp-block-cover__background,
.wp-block-group:has(> .link-area) .wp-block-cover__image-background,
.wp-block-group:has(> .link-area) .wp-block-cover__inner-container {
	pointer-events: none;
}

.wp-block-group:has(> .link-area) .wp-block-cover__inner-container a {
	pointer-events: auto;
}

/*
 * The keyboard's version of "this card is a link".
 *
 * The overlay is the anchor, and it is the size of the card — so its focus ring *is* a
 * ring around the card, which is exactly the right affordance and costs no extra element.
 * It is stated rather than left to the UA, for two reasons: the UA ring is a hairline that
 * disappears against a photograph, and `outline-offset` has to be **negative** here. A
 * positive offset would draw the ring outside the card, where a `border-radius` on the
 * card does not follow it and a grid gap of 20px is not enough room — it would overlap the
 * next card. Inside, it follows the corner and sits on the card's own padding.
 *
 * The same 2px `neutral-900` every other focus ring in the theme uses, so a keyboard user
 * sees one ring style on buttons, links and cards alike.
 */
.wp-block-group > .link-area:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-900);
	outline-offset: -2px;
	border-radius: inherit;
}

/*
 * Hover, focus and press — the three states a card-sized link has, and the reason they are
 * *here* rather than in whichever style paints the card: they belong to the link, not to
 * the design. Any Group given a link gets the pointer, the press and the ring; a style
 * that also wants a shadow (see `group-article-card.css`) adds one on top.
 *
 * **The press.** A large target with no acknowledgement reads as a dead one, so the card
 * dips 0.5% — about 2px on the design's 433px card, enough to register and not enough to
 * look like an animation. `:active` rather than `:hover` because it is the one interaction
 * state a touch screen also has, and `:focus-within` is beside it so that pressing Enter
 * on a focused card feels the same as clicking it.
 *
 * **The pointer** is stated on the card and not only on the overlay. The overlay covers
 * the box, but a child raised above it (see the `z-index` note above) would otherwise show
 * a text cursor over a region that is still clickable.
 */
.wp-block-group:has(> .link-area) {
	cursor: pointer;
}

.wp-block-group:has(> .link-area):active {
	transform: scale(0.995);
}

/*
 * **One `transition` declaration for the linked card, listing both of its motions.**
 *
 * `transition` is a single property: a second declaration on the same element *replaces*
 * the first rather than adding to it. `group-article-card.css` wants to ease a `box-shadow`
 * on the same box this file eases a `transform` on, and whichever stylesheet the loader
 * happened to enqueue second would have silently taken the other's away — which is exactly
 * what happened, and what it looked like was the shadow snapping in while the press was
 * smooth.
 *
 * So the linked card's whole list lives here, in the *default* style, which is loaded
 * wherever a Group renders. `box-shadow` costs nothing for a linked Group that has none,
 * and `group-article-card.css` states its own transition only for a card that is **not**
 * linked, so the two can never both apply.
 */
@media not (prefers-reduced-motion: reduce) {
	.wp-block-group:has(> .link-area) {
		transition:
			transform 0.25s var(--wp--custom--transition-spring-bouncy),
			box-shadow 0.3s var(--wp--custom--transition-spring-smooth);
	}
}