/**
 * kfg-curvy.css — soft, rounded "curvy" treatment for KittenFrenzyGo
 * -----------------------------------------------------------------------------
 * The bold-playful direction pairs punchy colors (set in theme.json) with soft,
 * rounded shapes. theme.json v3 has no global border-radius token, so the
 * rounding that can't be expressed there lives here:
 *
 *   1. Rounded media images and cards in the homepage / archive grids
 *   2. A reusable ".kfg-card" surface for hero and future components
 *   3. Blob / soft-shape decorative accents
 *   4. Grid spacing helpers used by the front-page media grid
 *
 * All colors reference the theme.json CSS custom properties
 * (--wp--preset--color--*) so this file never hard-codes a hex value and stays
 * in sync if the palette is retuned. No external resources are loaded.
 */

/* -----------------------------------------------------------------------------
 * 1. Rounded media imagery
 * -----------------------------------------------------------------------------
 * Round featured images wherever they appear inside a Query Loop (homepage grid,
 * archives). The parent theme already rounds avatars and the search field; this
 * extends the same soft language to photo/video thumbnails. clip the image so a
 * rounded corner is actually visible on the <img> itself.
 */
.wp-block-query .wp-block-post-featured-image,
.wp-block-query .wp-block-post-featured-image img {
	border-radius: 18px;
	overflow: hidden;
}

/* Give featured images a subtle lift so cards read as tappable tiles. */
.wp-block-query .wp-block-post-featured-image {
	box-shadow: 0 6px 20px rgba(27, 27, 27, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Gentle hover pop on linked thumbnails (respects reduced-motion below). */
.wp-block-query .wp-block-post-featured-image:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(27, 27, 27, 0.14);
}

/* -----------------------------------------------------------------------------
 * 2. Reusable rounded card surface
 * -----------------------------------------------------------------------------
 * Apply the "kfg-card" class (via a block's Advanced > Additional CSS class) to
 * any group to turn it into a soft, warm-cream rounded panel. Used by the hero
 * and available for future media-card / cat-profile components.
 */
.kfg-card {
	border-radius: 28px;
	background-color: var(--wp--preset--color--accent-5);
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * 3. Blob / soft decorative accents
 * -----------------------------------------------------------------------------
 * ".kfg-blob" turns a group/image into an organic blob shape using an asymmetric
 * border-radius. Handy for playful hero art or category badges. Kept subtle so
 * it never fights the content.
 */
.kfg-blob {
	border-radius: 42% 58% 63% 37% / 45% 42% 58% 55%;
	overflow: hidden;
}

/* A soft coral halo accent that can sit behind hero art. */
.kfg-blob--coral {
	background-color: var(--wp--preset--color--accent-1);
}

/* -----------------------------------------------------------------------------
 * 4. Homepage media grid helpers
 * -----------------------------------------------------------------------------
 * The front-page grid uses core's grid layout (columnCount) for structure; this
 * only softens the per-item wrapper spacing so tiles breathe. The class
 * "kfg-media-grid" is attached to the Query block on the front page.
 */
.kfg-media-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--40, 30px);
}

/* Round the whole media tile group and clip its contents. */
.kfg-media-grid .wp-block-post-template > li,
.kfg-media-grid .wp-block-post-template > .wp-block-post {
	border-radius: 22px;
}

/* -----------------------------------------------------------------------------
 * 5. Hero + wave: one seamless cream shape
 * -----------------------------------------------------------------------------
 * The hero ("kfg-hero", warm-cream/accent-5) and the wave divider
 * ("kfg-wave-divider", filled with the same accent-5) are stacked as two
 * separate top-level blocks on the front page, but must read as ONE continuous
 * cream shape whose bottom edge is the wave curve.
 *
 * Two things are required for a seamless join:
 *   a) The hero's bottom corners must be SQUARE — a rounded bottom would leave
 *      white triangles peeking above the wave at the left/right edges.
 *   b) There must be zero vertical space between the two blocks. GeneratePress /
 *      the block layout inserts a default gap between sibling blocks (applied as
 *      margin-block-start on the following block), so we zero it explicitly. Both
 *      the physical (margin-top) and logical (margin-block-start) properties are
 *      set so we win regardless of which the theme uses, and !important beats the
 *      block-gap rule. This holds at every breakpoint (the wave scales fluidly via
 *      preserveAspectRatio="none"), so the join stays flush responsively.
 */
.kfg-hero {
	/* Square bottom: the wave, not a rounded corner, forms the transition. */
	border-radius: 0;
	/* No trailing space below the hero. */
	margin-bottom: 0;
}

/* Wave sits immediately beneath the hero with no gap on either side. */
.kfg-wave-divider {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	margin-bottom: 0;
}

/* Keep the inline-SVG wave divider flush and full-bleed (display:block also
 * removes the inline-image baseline gap that would otherwise sit under the SVG). */
.kfg-wave-divider svg {
	display: block;
	width: 100%;
	height: auto;
	/* Guard against a sub-pixel hairline where the SVG meets the hero. */
	margin-top: -1px;
}

/* -----------------------------------------------------------------------------
 * 6. Accessibility: honor reduced-motion preferences
 * -----------------------------------------------------------------------------
 */
@media (prefers-reduced-motion: reduce) {
	.wp-block-query .wp-block-post-featured-image,
	.wp-block-query .wp-block-post-featured-image:hover {
		transition: none;
		transform: none;
	}
}