/**
 * =============================================================================
 * CORE/QUERY — "ROUNDED" BLOCK STYLE (rounded.css)
 * =============================================================================
 *
 * CSS for the Rounded block style registered on core/query in
 * includes/register-block-styles.php. Attached to that registration via
 * style_handle, so WordPress loads it on the front end AND in the editor
 * canvas, only when the style is in use.
 *
 * SCOPE: PCG query variations only. Selecting Rounded on a plain core/query
 * block does nothing — each rule is scoped to a variation wrapper class
 * (.pcg-query--featured-content-grid / .collaborations-query-block), which
 * extend-core-query.php adds on render and block-attributes.js adds in the
 * editor.
 *
 * The two variations round different elements on purpose:
 *   Grid — the figure, which is bordered, so it clips the image with it.
 *   Rows — the image itself, mirrored on even rows to follow the alternating
 *          left/right layout.
 *
 * @see includes/register-block-styles.php
 */

/* ── FEATURED CONTENT — GRID ────────────────────────────────────────────── */

/* Rounds the figure rather than the <img>: the figure carries the 7px border,
   and overflow clips the square image corner back to the same curve. */
.is-style-rounded.pcg-query--featured-content-grid.wp-block-query li .wp-block-post-featured-image {
  border-radius: 0 3em 0 0;
  overflow: hidden;
}

/* ── FEATURED CONTENT — ROWS ────────────────────────────────────────────── */

.collaborations-query-block.is-style-rounded.wp-block-query li img {
  border-radius: 4em 0 0 0;
}
/* Even rows reverse their flex direction, so the rounded corner mirrors too. */
.collaborations-query-block.is-style-rounded.wp-block-query li:nth-child(even) img {
  border-radius: 0 4em 0 0;
}