/**
 * Polish layer, module "cards" (docs.ia/build/polish-design.md §16.2, design
 * §8.2). Article and related cards: lift, one target, image zoom, card
 * rows. Needs the base file (tokens). Round 5 (owner review): no title
 * underline on either card type — the owner found it looked wrong. Round 6,
 * R6.7: the finder card's own rules moved out to the downloads module, so
 * they live with the downloads module.
 */

/* R1: li.wp-block-post also wraps a service row (a query loop too) —
   :has(.precoin-card-media) scopes every rule to the card shape.
   Design §16.4: the article card's li has no background or radius of its
   own (0px, transparent) — .precoin-card-media below is its only visible
   box. Giving the li the elevation shadow put a square halo around the
   card's plain-background title/excerpt text, mismatched against the
   rounded image box a few pixels above it. The related-service card is
   different: its own wrapper already is the visible, bordered, rounded
   box, so the shadow stays on it. Lift and press still move the whole
   article card (image and text rise together); only the shadow itself
   moves to .precoin-card-media, further down.

   Round 6, R6.1: the article card's own hover transition is slower than
   the related card's — 400ms in (--precoin-t-3), 480ms out (no token
   matches; literal). The base rule below is the "out" duration (it's what's
   left once a :hover/:focus-within override no longer applies); the
   hover/focus-within rules override it to the "in" speed while they're
   active. Split from related, which keeps the original 160ms in / 240ms
   out. */
li.wp-block-post:has(.precoin-card-media) {
	transition: translate 480ms var(--precoin-ease-out), scale 480ms var(--precoin-ease-out);
	position: relative;
}
.precoin-related-services li.wp-block-post > .wp-block-group {
	transition: translate var(--precoin-t-2) var(--precoin-ease-out), box-shadow var(--precoin-t-2) var(--precoin-ease-out), scale var(--precoin-t-2) var(--precoin-ease-out);
	position: relative;
}
@media (hover: hover) {
	li.wp-block-post:has(.precoin-card-media):hover {
		translate: 0 -3px;
		transition-duration: var(--precoin-t-3);
	}
	.precoin-related-services li.wp-block-post:hover > .wp-block-group {
		translate: 0 -3px;
		transition-duration: var(--precoin-t-1);
		box-shadow: var(--precoin-elev-1);
	}
}
li.wp-block-post:has(.precoin-card-media):focus-within {
	translate: 0 -3px;
	transition-duration: var(--precoin-t-3);
}
.precoin-related-services li.wp-block-post:focus-within > .wp-block-group {
	translate: 0 -3px;
	transition-duration: var(--precoin-t-1);
	box-shadow: var(--precoin-elev-1);
}
.precoin-related-services li.wp-block-post:hover > .wp-block-group.has-border-color,
.precoin-related-services li.wp-block-post:focus-within > .wp-block-group.has-border-color {
	box-shadow: var(--precoin-elev-1), 0 0 0 1px var(--wp--preset--color--line);
}
li.wp-block-post:has(.precoin-card-media):active {
	scale: .99;
	translate: none;
	transition-duration: var(--precoin-t-press);
}
.precoin-related-services li.wp-block-post:active > .wp-block-group {
	scale: .99;
	translate: none;
	transition-duration: var(--precoin-t-press);
}

/* Round 5: no animated line on a card title (the owner found it looked
   wrong), but theme.json's own a:hover still sets a native underline, so
   this stays to suppress it — no background-image, no transition. */
li.wp-block-post:has(.precoin-card-media) .wp-block-post-title a,
.precoin-related-services .wp-block-post-title a {
	text-decoration: none;
}

/* One target: the title link covers the card; other links stay reachable. */
li.wp-block-post:has(.precoin-card-media) .wp-block-post-title a,
.precoin-related-services .wp-block-post-title a {
	position: relative;
}
li.wp-block-post:has(.precoin-card-media) .wp-block-post-title a::after,
.precoin-related-services .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
li.wp-block-post:has(.precoin-card-media) .wp-block-post-terms {
	/* No position here (round 5): theme.json's own styles.css already makes
	   this absolute, to overlay the badge on the image's bottom-left corner.
	   position: relative here out-specificities that rule and drops it back
	   into flow, full width, below the image — the box that then looks
	   taller than the image itself is this badge occupying its own row. */
	z-index: 1;
}
li.wp-block-post:has(.precoin-card-media) .wp-block-read-more,
.precoin-related-services .wp-block-read-more {
	position: relative;
	z-index: 1;
}

/* R7.1: the related-service card's read-more never had a row-alignment
   rule at all (only the article card does, above), so it just sat at its
   own wrapper's default left edge — not centred, but not at the card's
   right end either, the default the owner wants for every card. The
   wrapper is already its own flex row (is-content-justification-left,
   WordPress's own block-supports CSS); this out-specificities that with
   the opposite edge, no !important needed. */
.precoin-related-services li.wp-block-post .wp-block-group:has(> .wp-block-read-more) {
	justify-content: flex-end;
}

/* Round 5: radius, clip and shadow move from .precoin-card-media (the group
   that also holds the category badge — giving IT the clip is what grew the
   card taller than the image, and its own shadow doesn't match a group with
   no visible fill of its own) to the image's own box. The inline shadow the
   block already puts on the <img> is cut by this clip; the figure carries
   an equal one instead, so rest stays visually identical to no module. */
/* R6.1: the figure's shadow and the image's zoom are the same 400ms in /
   480ms out as the lift above (base = out; hover/focus-within override
   to the faster "in" speed). Literal 480ms, same reason as above. */
.precoin-card-media figure.wp-block-post-featured-image {
	overflow: clip;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: box-shadow 480ms var(--precoin-ease-out);
}
.precoin-card-media img {
	transition: scale 480ms var(--precoin-ease-out);
}
@media (hover: hover) {
	li.wp-block-post:hover .precoin-card-media img {
		scale: 1.03;
		transition-duration: var(--precoin-t-3);
	}
	li.wp-block-post:hover .precoin-card-media figure.wp-block-post-featured-image {
		box-shadow: var(--precoin-elev-1);
		transition-duration: var(--precoin-t-3);
	}
}
li.wp-block-post:focus-within .precoin-card-media img {
	scale: 1.03;
	transition-duration: var(--precoin-t-3);
}
li.wp-block-post:focus-within .precoin-card-media figure.wp-block-post-featured-image {
	box-shadow: var(--precoin-elev-1);
	transition-duration: var(--precoin-t-3);
}

/* Row alignment: flex-column body so a row's read-more links share one baseline. */
li.wp-block-post:has(.precoin-card-media) {
	display: flex;
	flex-direction: column;
}
li.wp-block-post:has(.precoin-card-media) > .wp-block-group:last-child {
	display: flex;
	flex-direction: column;
	flex: 1;
}
li.wp-block-post:has(.precoin-card-media) > .wp-block-group:last-child > .wp-block-group:last-child {
	margin-top: auto;
}

/* R6.2: turning the text body into a flex column above makes its two
   is-layout-flex rows (the date row, the read-more row) shrink to their
   own content width as flex items — and WordPress's own constrained-layout
   rule (:root :where(.is-layout-constrained) > :not(...) {
   margin-left/right: auto !important }, theme.json's styles.css) then
   centers each one in the leftover space, since it has nothing to push
   against on a full-width block. It never had a visible effect before:
   with no module, these rows are plain block children at 100% width, so
   auto margins have no free space to distribute. !important: only an
   !important here beats that core rule. Date row stays where it always
   was (left); the read-more row moves the opposite way, to the card's
   right edge (the owner's explicit ask, not a restore of the baseline). */
li.wp-block-post:has(.precoin-card-media) > .wp-block-group:last-child > .wp-block-group:first-child {
	margin-left: 0 !important;
	margin-right: auto !important;
}
li.wp-block-post:has(.precoin-card-media) > .wp-block-group:last-child > .wp-block-group:last-child {
	margin-left: auto !important;
	margin-right: 0 !important;
}