/*
 * "Scrapbook" block style — applied to a `core/gallery` block via
 * `is-style-scrapbook`. Differentiates from Specials Board by using
 * a collage layout: one larger hero photo, smaller siblings,
 * wider rotation spread, slight overlaps, and handwritten captions.
 *
 * Gallery DOM (WP 5.9+):
 *   <figure class="wp-block-gallery is-style-scrapbook has-nested-images">
 *     <figure class="wp-block-image">
 *       <img />
 *       <figcaption>...</figcaption>
 *     </figure>
 *     …
 *   </figure>
 *
 * Sibling order drives the layout — children are deliberately placed
 * via translate offsets at desktop and stacked vertically below 768px
 * so overlaps don't clip on narrow screens.
 */

.wp-block-gallery.is-style-scrapbook {
	overflow: visible;
	padding: 2rem 0 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
}

/* Each photo gets the polaroid card chrome — white border, drop
 * shadow, hover lift. Position relative so per-child translate offsets
 * place them in a deliberate composition. */
.wp-block-gallery.is-style-scrapbook > figure.wp-block-image {
	position: relative;
	background: #fdfaf2;
	padding: 0.75rem 0.75rem 2.5rem;
	margin: 0;
	box-shadow:
		0 12px 24px rgba(0, 0, 0, 0.28),
		0 3px 6px rgba(0, 0, 0, 0.16);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		z-index 0s linear 0.3s;
	overflow: visible;
}

.wp-block-gallery.is-style-scrapbook > figure.wp-block-image > img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hand-drawn caption styled like a marker on photo paper. */
.wp-block-gallery.is-style-scrapbook > figure.wp-block-image > figcaption {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.5rem;
	font-family: "Caveat", "Patrick Hand", "Georgia", serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: #4a3520;
	text-align: center;
	letter-spacing: 0.01em;
	margin: 0;
	padding: 0;
}

/*
 * Desktop composition (≥768px): 5 photos placed in a deliberate scatter.
 * Hero is child 1 — bigger, slight tilt, sits centred-back.
 * Siblings 2–5 lean in around it with progressively wider rotations.
 *
 * The flex layout gives a starting position; per-child translate
 * offsets create the overlaps, and z-index orders them so the hero
 * sits behind the siblings (corkboard / pinboard feel).
 */
@media (min-width: 768px) {
	.wp-block-gallery.is-style-scrapbook {
		min-height: 32rem;
		position: relative;
		flex-wrap: nowrap;
		gap: 1rem;
	}

	.wp-block-gallery.is-style-scrapbook > figure.wp-block-image {
		flex: 0 0 auto;
		width: 18%;
	}

	/* Hero — 1st child, larger, slight left tilt, sits behind. */
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(1) {
		width: 32%;
		transform: rotate(-3deg) translateY(0.5rem);
		z-index: 1;
	}
	/* Sibling — 2nd, leans right, overlaps left edge of hero. */
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(2) {
		width: 22%;
		transform: rotate(5deg) translate(2.5rem, -1.5rem);
		z-index: 3;
	}
	/* Sibling — 3rd, smaller, scattered low-right. */
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(3) {
		width: 20%;
		transform: rotate(-6deg) translate(-2rem, 2.5rem);
		z-index: 2;
	}
	/* Sibling — 4th, top-right, light tilt. */
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(4) {
		width: 22%;
		transform: rotate(3deg) translate(-3.5rem, -2rem);
		z-index: 4;
	}
	/* Sibling — 5th, larger sidekick, hangs low-left. */
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(5) {
		width: 26%;
		transform: rotate(-4deg) translate(1rem, 1.5rem);
		z-index: 2;
	}
	/* Sibling — 6th+ falls back to the alternating tilt pattern so
	 * authors who add more than 5 photos still get a coherent look. */
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(n + 6) {
		width: 20%;
		transform: rotate(2deg) translateY(0.5rem);
		z-index: 1;
	}

	/* Hover lift — straighten and pull forward. */
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:hover {
		transform: rotate(0deg) translateY(-0.75rem) scale(1.04);
		z-index: 10;
		box-shadow:
			0 18px 36px rgba(0, 0, 0, 0.34),
			0 5px 10px rgba(0, 0, 0, 0.2);
		transition:
			transform 0.3s ease,
			box-shadow 0.3s ease,
			z-index 0s linear 0s;
	}
}

/* Mobile (<768px): drop the overlap composition and stack as a
 * comfortable column with mild tilts so the scrapbook character
 * survives without clipping the layout. */
@media (max-width: 767px) {
	.wp-block-gallery.is-style-scrapbook > figure.wp-block-image {
		width: min(85%, 360px);
		margin: 0 0 1.25rem;
	}
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(odd) {
		transform: rotate(-2deg);
		align-self: flex-start;
		margin-left: 4%;
	}
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:nth-child(even) {
		transform: rotate(2deg);
		align-self: flex-end;
		margin-right: 4%;
	}
}

/* Reduced motion: drop the rotations + transitions so the layout
 * sits flat for users who've opted out of motion. The polaroid
 * chrome + captions stay since they're visual elements, not motion. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-scrapbook > figure.wp-block-image {
		transform: none !important;
		transition: none;
	}
	.wp-block-gallery.is-style-scrapbook
		> figure.wp-block-image:hover {
		transform: none !important;
	}
}