/*
 * Article card — the state layer over a Group that is already a card.
 *
 * Everything about how the card *looks* at rest is written in the block itself: the white
 * ground, the 24px corner, the padding, the flex column, the photograph's aspect ratio and
 * every type token are block attributes, editable by whoever opens the page. This style
 * adds only the two things a block attribute cannot express — **what happens when the card
 * is hovered or focused**, and where the "Read now" pill sits.
 *
 * That split is deliberate. A style that also painted the card would make the attributes
 * in the pattern decorative, and the first person to change the background colour in the
 * inspector would find it did nothing. Here the inspector still owns the card and this
 * file owns its behaviour.
 *
 * ## The lift
 *
 * The design's own shadow: `0 14px 24px rgba(0, 0, 0, 0.06)`, drawn only on the hovered
 * card in the frame. It is carried in a custom property that is `transparent` at rest so
 * that one declaration serves both states and the shadow can be *transitioned* — a
 * `box-shadow` appearing from nothing has a colour to interpolate, where a `box-shadow`
 * appearing from `none` does not and would snap.
 *
 * The colour is a `color-mix()` against the palette rather than a literal `rgba()`, which
 * is the theme's rule for a derived colour: it is a shift of `black`, not a new token, so
 * there is one source of truth.
 *
 * ## Why `:focus-within` as well as `:hover`
 *
 * The card is one click target — `includes/blocks/group-link.php` injects an anchor over
 * it — and a keyboard user reaches that anchor by tabbing. Without `:focus-within` the
 * card would give a pointer a lift and a fill and a keyboard nothing at all, on the very
 * control that is hardest to see the boundaries of.
 *
 * `:focus-within` rather than `:has(:focus-visible)`: the whole card is the control, so
 * "something inside me has focus" *is* the state, and there is no case here of a click
 * focusing an inner element that should not light the card up — every focusable thing in
 * it leads to the same post.
 *
 * `:hover` is gated on `@media (hover: hover)` and `:focus-within` is not. A touch screen
 * applies `:hover` to whatever was last tapped and leaves it there, so an ungated hover
 * would leave one card in a grid looking permanently picked; focus is real on every
 * device.
 *
 * ## Reaching into the pill
 *
 * `--lano-pill-fill` and `--lano-pill-rim` are declared by `outline-pill.css` on the
 * read-more itself, and an element's own declaration beats an inherited one — so the two
 * rules below have to land on the read-more element, not on the card. They do, at three
 * classes against that file's one class and one element, which is why the pill fills from
 * the card's state without either file knowing anything about the other's colours.
 */

.wp-block-group.is-style-article-card {
	/*
	 * The design's shadow colour, and the switch that reveals it. Two properties rather
	 * than one so the states below name the colour once — a `color-mix()` repeated in
	 * three rules is three places to get 6% wrong.
	 */
	--lano-article-card-shadow: color-mix(
		in srgb,
		var(--wp--preset--color--black) 6%,
		transparent
	);
	--lano-article-card-lift: transparent;

	box-shadow: 0 0.875rem 1.5rem var(--lano-article-card-lift);
}

/*
 * The pill sits in the card's trailing corner. `margin-inline-start: auto` rather than an
 * `align-self`, because the read-more is laid out by the flow of the card's column and
 * `outline-pill.css` gives it a block-level `flex` box with a `fit-content` width for
 * exactly this — an inline-level box would ignore the auto margin.
 */
.wp-block-group.is-style-article-card .wp-block-read-more {
	margin-inline-start: auto;
}

@media (hover: hover) {
	.wp-block-group.is-style-article-card:hover {
		--lano-article-card-lift: var(--lano-article-card-shadow);
	}

	.wp-block-group.is-style-article-card:hover .wp-block-read-more {
		--lano-pill-fill: var(--wp--preset--color--neutral-100);
		--lano-pill-rim: transparent;
	}
}

/*
 * Focus and press, ungated. A keyboard user gets the lift on any device, and a press keeps
 * it — a card that dropped its shadow at the moment it was pressed would read as the hover
 * being lost rather than as the press being registered. `group-link.css` owns the dip
 * itself; this is only the shadow following it.
 */
.wp-block-group.is-style-article-card:focus-within,
.wp-block-group.is-style-article-card:active {
	--lano-article-card-lift: var(--lano-article-card-shadow);
}

.wp-block-group.is-style-article-card:focus-within .wp-block-read-more,
.wp-block-group.is-style-article-card:active .wp-block-read-more {
	--lano-pill-fill: var(--wp--preset--color--neutral-100);
	--lano-pill-rim: transparent;
}

/*
 * The easing for a card that is **not** a link, and the `:not()` is load-bearing.
 *
 * `transition` is one property, so a second declaration replaces the first rather than
 * adding to it — and `group-link.css` has to declare `transform` on the same box. Two rules
 * of equal specificity would then come down to which stylesheet the loader enqueued last,
 * and the loser's motion would vanish with nothing to explain it. So the linked card's list
 * (both properties) lives there, this one covers the case that file cannot see, and the
 * selectors are mutually exclusive rather than merely ordered.
 *
 * `outline-pill.css` owns the pill's own easing for the same reason.
 */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-article-card:not(:has(> .link-area)) {
		transition: box-shadow 0.3s var(--wp--custom--transition-spring-smooth);
	}
}