/* Shared category-card styling — the 6-category grid that appears on BOTH the
 * /products/ landing page and the Home "Browse our range" section (same markup,
 * from tools/import/seed/lib-category-cards.php).
 *
 * Match the live site: the thumbnails are square-cropped and rendered as full
 * circles. Some source files (e.g. *-300.jpg) aren't square, so we enforce a
 * 1:1 cover-crop before rounding to avoid ovals.
 *
 * Enqueued only on those two pages (see functions.php), and the only
 * `.size-medium` images / `is-vertical` flex groups there are these cards, so
 * the selectors can't leak elsewhere.
 */

.wp-block-image.size-medium img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 50%;
	/* Thin grey ring (matches live) so images with white backgrounds still
	 * read as circles. #e5e7eb is the same light grey used for spec tables. */
	border: 1px solid #e5e7eb;
}

/* Centre each card's contents — the circle AND its caption button — so they
 * share the same centre line.
 *
 * The card wrapper is a vertical flex group that WP renders with
 * `align-items: flex-start` (see the injected `.wp-container-...` rule), which
 * left-parks every child: the image figure and the buttons block both shrink
 * to their content and sit on the left. Centring the buttons alone left the
 * images mis-aligned under their now-centred captions. Overriding the
 * wrapper's cross-axis alignment to `center` centres both in one rule.
 *
 * Scoped to the vertical flex card (the page's only `is-vertical` flex group —
 * the header/footer bars are horizontal), so it can't touch other layouts. */
.wp-block-group.is-vertical.is-layout-flex {
	align-items: center;
}

/* Uniform CTA buttons across every card.
 *
 * By default each button shrinks to its label, so "Brooch & Cufflink Fittings"
 * stretches to the card edge while "Earring Findings" is short — Selwyn wants
 * them all the same size. Give every button one fixed width (inset from the
 * card edge so the widest label no longer touches the border) and one shared
 * height, with the label vertically centred so single- and two-line captions
 * line up. Scoped to the vertical flex card, same as the rule above. */
.wp-block-group.is-vertical.is-layout-flex .wp-block-buttons {
	width: 100%;
}
.wp-block-group.is-vertical.is-layout-flex .wp-block-button {
	width: 90%;
	max-width: 280px;
}
.wp-block-group.is-vertical.is-layout-flex .wp-block-button__link {
	display: flex;
	width: 100%;
	min-height: 3.25rem;
	align-items: center;
	justify-content: center;
	text-align: center;
}