/**
 * Blog archive hero — layered SVG, hover fan-out.
 * Enqueued by inc/blog-hero.php on pages 15180 (EN) / 15830 (PL).
 *
 * This lives in a real stylesheet, not in the SVG's own style element, on
 * purpose. Inline SVG is foreign content to the HTML parser, so a style element
 * inside it is NOT rawtext: any angle bracket in the CSS (even inside a comment)
 * is parsed as markup, which splits the stylesheet's text stream and silently
 * kills every rule after it. Cost one debugging round on 2026-07-31.
 */

.rs-blog-hero {
	max-width: 558px;
	margin-left: auto; /* reproduces the align="right" the Image widget carried */
}

.rs-blog-hero svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible; /* the fanned cards reach past the viewBox edge */
}

/**
 * Positioning lives on an outer g element with a translate transform; these
 * rules target the inner group, so layout and animation never fight over the
 * same property. Transform-only, so it stays on the compositor.
 */
.rsbh-layer {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 320ms cubic-bezier( .22, .61, .36, 1 );
}

/* hover:hover keeps touch devices from latching the hovered state on tap */
@media ( hover: hover ) and ( pointer: fine ) {

	/**
	 * 3:1 throughout — the active card leads, the other two follow at a third of
	 * every value: 30/10 across, 12/4 up, 10deg/3.33deg of tilt. All three tilt
	 * the same way so the stack reads as one fan opening, not cards scattering.
	 *
	 * No scale(). The cards sit BEHIND the folder, whose bottom edge is at y=386
	 * in the 558x446 viewBox, and enlarging a card pushed its rotated corner past
	 * that edge so it appeared below the folder. Rotation alone stays clear; the
	 * upward translate then buys ~16px of margin on top of that.
	 */
	.rs-blog-hero:hover .rsbh-card-active {
		transform: translate( -30px, -12px ) rotate( 10deg );
	}

	.rs-blog-hero:hover .rsbh-card-front {
		transform: translate( -10px, -4px ) rotate( 3.33deg );
		transition-delay: 45ms;
	}

	.rs-blog-hero:hover .rsbh-card-back {
		transform: translate( -10px, -4px ) rotate( 3.33deg );
		transition-delay: 80ms;
	}

	/* folder edges the other way so the cards read as coming out from behind it */
	.rs-blog-hero:hover .rsbh-cover,
	.rs-blog-hero:hover .rsbh-shadow {
		transform: translateX( 3px );
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.rsbh-layer {
		transition: none;
	}

	.rs-blog-hero:hover .rsbh-layer {
		transform: none;
	}
}