/*
 * "Polaroid" block style — applied to a `core/image` block via
 * `is-style-polaroid-tilt-left` / `is-style-polaroid-tilt-right`.
 *
 * Adds a white photo-paper frame with realistically uneven torn
 * edges (clip-path with irregular zig-zag perimeter), a layered
 * drop shadow, and a slight rotation. Two variants for left- and
 * right-tilt so authors can scatter multiple polaroids casually.
 */

.wp-block-image.is-style-polaroid-tilt-left,
.wp-block-image.is-style-polaroid-tilt-right {
	background: #fdfaf2; /* clean off-white, just a touch warm */
	padding: 1.25rem 1.25rem 3.5rem;
	box-shadow:
		0 14px 32px rgba(40, 30, 20, 0.32),
		0 4px 8px rgba(40, 30, 20, 0.2),
		inset 0 0 0 1px rgba(120, 100, 80, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: inline-block;
	max-width: 100%;
	/* Subtly imperfect edges: clip-path with sparse points (one per
	 * ~20% of each side) varying by 0.3–0.5%. Reads as
	 * machine-imperfect paper, not torn. Removing the high-frequency
	 * zigzag from the previous version. */
	clip-path: polygon(
		0.4% 0.3%,
		20% 0.6%,
		40% 0.2%,
		60% 0.5%,
		80% 0.3%,
		99.5% 0.4%,
		99.7% 25%,
		99.4% 50%,
		99.6% 75%,
		99.5% 99.6%,
		80% 99.5%,
		60% 99.7%,
		40% 99.4%,
		20% 99.6%,
		0.4% 99.5%,
		0.3% 75%,
		0.5% 50%,
		0.2% 25%
	);
}

.wp-block-image.is-style-polaroid-tilt-left {
	transform: rotate(-3deg);
}

.wp-block-image.is-style-polaroid-tilt-right {
	transform: rotate(3deg);
}

.wp-block-image.is-style-polaroid-tilt-left:hover,
.wp-block-image.is-style-polaroid-tilt-right:hover {
	transform: rotate(0deg) translateY(-4px);
	box-shadow:
		0 20px 40px rgba(40, 30, 20, 0.36),
		0 6px 12px rgba(40, 30, 20, 0.24),
		inset 0 0 0 1px rgba(120, 100, 80, 0.06);
}

/* Image inside the frame: rectangular, untreated, sharp.
 * The image stays clean — only the FRAME has the rough-edge
 * polaroid character. */
.wp-block-image.is-style-polaroid-tilt-left img,
.wp-block-image.is-style-polaroid-tilt-right img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Caption sits in the polaroid's lower label band as a
 * handwritten-style note. */
.wp-block-image.is-style-polaroid-tilt-left figcaption,
.wp-block-image.is-style-polaroid-tilt-right figcaption {
	color: #4a3520;
	text-align: center;
	margin-top: 0.85rem;
	font-style: italic;
	font-family: 'Caveat', 'Patrick Hand', 'Comic Sans MS', cursive;
	font-size: 1.15em;
	letter-spacing: 0.01em;
	transform: rotate(-0.5deg);
}

/* Reduced motion: drop the rotations so users who've opted out see
 * the frame straight. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-image.is-style-polaroid-tilt-left,
	.wp-block-image.is-style-polaroid-tilt-right {
		transform: none !important;
		transition: none;
	}
	.wp-block-image.is-style-polaroid-tilt-left:hover,
	.wp-block-image.is-style-polaroid-tilt-right:hover {
		transform: none !important;
	}
}