/**
 * Core Post Template Block - Product Card Grid
 *
 * Ensures card wrappers inside post-template grids stretch
 * their children to fill the available width when using
 * vertical flex layout.
 *
 * @package F32
 */


/*
 * Card footer (title + price): keep them on one row, price pinned right.
 *
 * The row block already sets flexWrap:nowrap, so there is deliberately no
 * flex-wrap rule here — an earlier `flex-wrap: wrap` override fought that
 * block setting and produced the ragged grid, because whether a card wrapped
 * depended on how long its title happened to be.
 *
 * min-width:0 is the part that cannot be expressed as a block setting: a flex
 * item defaults to min-width:auto, which refuses to shrink below its content
 * and would push the price out of the card. With it, long titles wrap inside
 * their own column and the price stays put.
 */
.wp-block-post-template > li > .wp-block-group > .wp-block-group.is-nowrap > .wp-block-post-title {
	min-width: 0;
}

/*
 * Featured image: derive HEIGHT from width, never the other way round.
 *
 * The card sets aspectRatio 3/2 on wp:post-featured-image, which core emits as
 * `aspect-ratio: 3/2` on the wrapper. In a grid post-template the row stretches
 * every card to the tallest one, the wrapper stretches with it, and then
 * aspect-ratio solves for the MISSING axis - so a stretched height produces a
 * width, and the image blows out of the card.
 *
 * Measured on /docs/ before this rule, at 1263px: one card's title wrapped to
 * two lines, which made its row 518px instead of 366px, which stretched that
 * row's images to 516x344 and 690x460 inside 384px cards. Only the first row
 * was wrong, which is what makes it look like a content problem rather than a
 * layout one - it is a feedback loop, and any card with a two-line title starts
 * it.
 *
 * width:100% pins the definite axis, so aspect-ratio can only solve for height.
 * This cannot be expressed as a block setting: core offers the aspect ratio
 * control but no way to say which axis is authoritative.
 *
 * width:100% ALONE WAS NOT ENOUGH, and the residue is why min-width and
 * min-height are here. A flex item's `min-width`/`min-height` default to `auto`
 * on the MAIN axis, and the automatic minimum size that resolves to is the
 * item's content-based minimum - for a figure wrapping an image, the image's
 * intrinsic size scaled to the pinned axis. That minimum beats aspect-ratio,
 * so a portrait thumbnail simply ignored the declared 3/2.
 *
 * Measured live on staging /docs/ at 1263px in cards 379px wide, where 3/2 asks
 * for 253px of height:
 *
 *     intrinsic 904x810   -> rendered 379x340
 *     intrinsic 888x1064  -> rendered 379x454
 *     intrinsic 1263x571  -> rendered 379x253   (landscape, so unaffected)
 *
 * Only the images taller than 3/2 were wrong, which is exactly what makes this
 * look like bad source art rather than a layout bug. Adding min-height:0 in the
 * page brought all of them to 379x253 and took the page from 3484px to 2820px.
 *
 * min-width is the row-direction half of the same rule and is a no-op for the
 * vertical cards. It was the Help Center's horizontal doc card that needed it;
 * that card is gone, and the pair is kept whole so a row card cannot regress.
 */
.wp-block-post-template > li .wp-block-post-featured-image {
	width: 100%;
	min-width: 0;
	min-height: 0;
}

/*
 * The card is the positioning context for the Purchased badge.
 *
 * The badge is authored in the footer row (see patterns/product-card.php) because that
 * is where its binding has post context, but it is DRAWN on the thumbnail. Absolute
 * positioning needs a positioned ancestor, and the card group is the right one: it is
 * the box the badge is inset from, and it already carries `overflow: hidden`, which
 * clips the badge to the card's rounded corner for free. The image wrapper would be
 * wrong - it is a sibling of the footer the badge lives in.
 *
 * The badge's own placement is in assets/blocks/core-paragraph.css, with the rest of
 * the badge style.
 */
.wp-block-post-template > li > .wp-block-group {
	position: relative;
}

/*
 * THE HOVER OVERRIDE THAT LIVED HERE IS GONE, AND SO IS THE `!important` IT NEEDED.
 *
 * It re-stated assets/css/surface.css's own token at a weight that could beat the product
 * card's INLINE `box-shadow` - an inline style written by the block's shadow support,
 * which nothing but `!important` can reach. That inline style was a property of the old
 * card: a core/group whose shadow was a block support, serialised into
 * patterns/product-card.php's `style` attribute.
 *
 * The card is sparklestock/product-card now. It is one dynamic block, its resting shadow
 * is a rule in that block's own stylesheet rather than an inline declaration, and
 * `is-style-card` is what the theme's surface paints. There is no inline style left to
 * out-weigh, so there is no flag left to need - which also takes this file off the
 * `surfaces` gate's allowlist in verify.ps1.
 */

/*
 * TWO LINES OF TITLE, ALWAYS - the last of the ragged grid.
 *
 * The grid already stretches every card in a row to the tallest (align-items: stretch,
 * top of this file), and the featured image is already a fixed 3/2 of the card width,
 * so the only variable left is the title: a one-line card is a line shorter than a
 * two-line card, the row stretches to the taller, and the short cards get a band of
 * white space under the footer instead of a footer that lines up with its neighbours.
 *
 * Pinning the title box to exactly two lines fixes both ends of that at once, and does
 * it without touching the aspect-ratio rules below, which own the image and must not be
 * involved:
 *
 *   - the FOOTER ROW, not the title, reserves the two-line height, so every footer
 *     in the row is the same height and every card is the same height. Reserving it
 *     on the title was tried first and undone twice over: a one-line title's box sat
 *     top-aligned inside its own two-line reservation while the row centred that box
 *     against the price pill, floating short titles ~4px high; and under 600px, where
 *     assets/css/archive-download.css stacks this row into a column, the reservation
 *     bought nothing and injected a dead band under every one-line title. The row
 *     min-height keeps `verticalAlignment: center` honest for one and two lines
 *     alike, and the media query keeps it out of the stacked phone footer, which
 *     needs no equalising - a column is never ragged against a neighbour.
 *   - line-clamp stops a three-line title growing the row. Truncation is the right
 *     trade here: these titles are keyword strings ("20 Coffee Tones Lightroom Presets
 *     and LUTs") whose first two lines identify the product, and the full text is one
 *     click away and still in the DOM for search and screen readers.
 *
 * line-height is stated rather than inherited because the min-height is derived from
 * it; leaving it to the cascade would make the two-line box a guess - the calc spells
 * the derivation out: two title lines at 14px/1.35 plus the row's 16px paddings. The
 * clamp properties are the -webkit- prefixed ones on purpose - that is the only form
 * any shipping browser implements, and the `display: -webkit-box` it needs is a no-op
 * fold back to a block box where it is not supported, which loses the truncation and
 * keeps the reserved height.
 */
/*
 * THE TWO-LINE TITLE MOVED INTO THE CARD, because it was never a fact about a post
 * template - it was a fact about the card that used to be built inside one. The rules here
 * reached four levels down a specific composition
 * (`li > .wp-block-group > .wp-block-group.is-nowrap > .wp-block-post-title`) to clamp a
 * title and reserve its height, and every one of those levels was markup
 * patterns/product-card.php happened to emit.
 *
 * sparklestock/product-card states both in its own stylesheet, off a `titleLines`
 * attribute, so a card can be asked for three lines without a theme edit and a template
 * that holds something other than cards is no longer described by these selectors.
 */

/*
 * KEYBOARD SEES WHAT THE MOUSE SEES.
 *
 * The whole card is clickable — patterns/product-card.php marks the card group as
 * a stretched link (Plain Stretch Links), so a click anywhere on it goes to the
 * product. That is a pointer affordance only: the plugin gives the card
 * cursor:pointer and hands the click to the title's anchor, but nothing draws the
 * card when that anchor takes focus, so a tab through the grid moves an invisible
 * caret behind a card that looks inert.
 *
 * :focus-within puts the ring on the card instead of on the link inside it, which
 * is the honest boundary: the card is the target, so the card is what lights up.
 * The 2px accent ring with a 2px offset is the theme's focus register everywhere
 * else (assets/blocks/sparklestock-docs-index.css and friends); the offset sits
 * OUTSIDE the card's overflow:hidden corner, so the ring is not clipped.
 */