/* The post card on term archives (templates/archive.html).
 *
 * It wears the SERIES CARD's look (Wayne, 29 Sep: "should be the same look as the series
 * cards") — the plugin's .pwr-b-card--series in powershift-content-model/assets/css/blocks.css.
 * White, no border, a 6px coloured rule on top, the 22px bottom-right chamfer, a medium shadow,
 * a 900-weight uppercase ink title, the whole card one link, and the arrow text link at the foot.
 * If the series card changes, change this with it.
 *
 * It is written here rather than by reusing the plugin's classes because a query loop's markup
 * is the editor's, not a render.php: there is no <li class="pwr-b-card-shadow"> to put on it.
 * The template still carries `is-style-pwr-card`; everything that style sets (hairline, small
 * shadow, 32px padding) is overridden below, doubled class so print order cannot matter.
 *
 * The chamfer is a clip-path, which clips the card's own box-shadow, so the shadow rides the
 * post-template <li> as a drop-shadow filter — the same device as .pwr-b-card-shadow.
 *
 * Two things the grid needs on top: an even height across a row, and the link pinned to the
 * foot. Four across makes both obvious — excerpts vary by a dozen words and the row goes ragged.
 * The post-template grid stretches its children, so the card fills the row; the card then runs
 * as a column with the body growing and the excerpt's more-link pushed down.
 *
 * Title size stays `l` from the template (preset classes are !important): the series card's 28px
 * suits a two-word series name, not a ten-word article title four across. */
.wp-block-post-template.is-layout-grid > li:has(> .pwr-postcard) {
	display: flex;
}

/* m-dark, not m: the page ground is Deep Grey (1 Oct), and `m` is Deep Grey at 10% —
   invisible against it. The hover lift comes from the card's own translateY. */
.wp-block-post-template.is-layout-grid > li:has(> .pwr-postcard) {
	filter: drop-shadow(var(--wp--preset--shadow--m-dark));
}

.pwr-postcard.pwr-postcard {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	background: var(--wp--preset--color--base);
	border: 0;
	border-top: 6px solid var(--wp--preset--color--orange);
	box-shadow: none;
	padding-bottom: 0 !important; /* the body carries the foot now, as on .pwr-b-card__body */
	gap: 0;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}
.pwr-postcard.pwr-postcard:hover {
	transform: translateY(-2px);
}
.pwr-postcard.pwr-postcard:focus-within {
	box-shadow: var(--wp--preset--shadow--focus);
}

/* The body: .pwr-b-card__body exactly — m on top and both sides, l at the foot, s between
   (Wayne, 20 Oct: "the padding is way bigger than on all the other cards — they all need the
   same rules"). The template sets the gutter (48px) inline on this group, so the sides need
   !important to come back to m (24px). */
.pwr-postcard > .wp-block-group {
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) !important;
	gap: var(--wp--preset--spacing--s);
	/* The card is a constrained layout with blockGap s, which core lays down as a margin on
	   every child after the first: 16px between the image and the body on top of the m. */
	margin-top: 0 !important;
}
.pwr-postcard > .wp-block-group > * {
	margin-block: 0;
}

/* Title: ink, 900, uppercase — .pwr-b-title. It does NOT recolour on hover: every card on the
   site dips 2px and does nothing else (Wayne, 14 Oct). Its link stretches over the whole card,
   so the card is one target; the image link and the more-link point to the same post, so
   nothing is lost under it. */
.pwr-postcard .wp-block-post-title {
	/* xl, the other cards' title size (the template's `l` preset class is !important) */
	font-size: var(--wp--preset--font-size--xl) !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	line-height: 1.15;
}
.pwr-postcard .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.pwr-postcard .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The excerpt came off the card on 17 Oct 2026 (design review, 15 Oct: title and "Read more"
   only). The rule stays for any archive that still prints one. */
.pwr-postcard .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-weight: 300;
	color: var(--wp--preset--color--contrast);
}

/* "Read more" is .pwr-b-textlink: 800, uppercase, orange, deepening on the CARD's hover —
   the card is one target (Wayne, 14 Oct). The arrow comes from links.css (which lists
   .wp-block-read-more alongside the excerpt's more-link since 20 Oct). It is core's
   read-more block now (templates/archive.html); the excerpt's more-link selector is kept so
   an archive still carrying an excerpt reads the same. */
.pwr-postcard:hover .wp-block-post-excerpt__more-link,
.pwr-postcard:hover .wp-block-read-more { color: var(--wp--preset--color--orange-dark); }
.pwr-postcard .wp-block-post-excerpt__more-link,
.pwr-postcard .wp-block-read-more {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--s);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--normal);
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}
/* Pinned to the card's foot, like the excerpt's more-text was, so a row of cards with
   titles of different lengths still sets its links on one line. LEFT, under the title, as on
   every other card (Wayne, 20 Oct: "not following the same rules as the others"): the body is a
   constrained-layout group, and core gives each of its children `margin-inline: auto
   !important` — invisible on the full-width title, but it centred the short link. Hence the
   !important back, and align-self so the flex column does not stretch or centre it either. */
.pwr-postcard .wp-block-read-more {
	margin-top: auto;
	margin-bottom: 0;
	margin-left: 0 !important;
	margin-right: auto !important;
	align-self: flex-start;
	padding-top: var(--wp--preset--spacing--s);
}

@media (prefers-reduced-motion: reduce) {
	.pwr-postcard.pwr-postcard:hover { transform: none; }
}

/* the inner group that holds title + excerpt */
.pwr-postcard > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.pwr-postcard .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.pwr-postcard .wp-block-post-excerpt__more-text {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: var(--wp--preset--spacing--s);
}

/* A flex item will not shrink below its content's intrinsic size, and the featured image's
   content IS the photo — so a 2560px-wide file drags the figure wider than its own card and the
   card spills out of its grid track. min-width:0 lets it shrink to the track. */
.pwr-postcard > *,
.pwr-postcard > .wp-block-group > * {
	min-width: 0;
	max-width: 100%;
}

/* the featured image is the card's lid — no gap above it, full width, and it must not shrink
   when the card stretches */
.pwr-postcard .wp-block-post-featured-image {
	margin: 0;
	flex: 0 0 auto;
	width: 100%;
}

/* The block's own aspectRatio attribute does not survive every image here — the four tiles came
   back 242/237/237/278px tall — so the ratio is pinned in CSS instead. One row of lids, one
   height. */
.pwr-postcard .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}